Initial SASS build

1 files changed, 512 insertions, 0 deletions

diff --git a/docs/src/docs.scss b/docs/src/docs.scss
new file mode 100644
index 0000000..6c53773
--- /dev/null
+++ b/docs/src/docs.scss
@@ -0,0 +1,512 @@
+/*! Spectre.css Docs | MIT License | github.com/picturepan2/spectre */
+/* Spectre version */
+.version::after {
+  content: "0.4.0";
+}
+// Core variables and mixins
+@import '../../src/variables';
+@import '../../src/mixins';
+
+/* Spectre New Docs */
+.s-container {
+  & > .columns {
+    flex-flow: nowrap;
+    min-height: 100vh;
+  }
+}
+
+.s-sidebar {
+  background: $bg-color;
+  flex: 0 0 auto;
+  padding: 1.5rem 0 1.5rem 1.5rem;
+  width: 12rem;
+
+  .s-nav {
+    bottom: 1.5rem;
+    overflow-y: auto; 
+    position: fixed;
+    top: 5rem;
+    width: 10.5rem;
+  }
+
+  .accordion {
+    .accordion-item {
+      margin-bottom: .75rem;
+    }
+
+    input {
+      & ~ .accordion-header {
+        color: darken($gray-color-dark, 10%);
+        font-size: $font-size-sm;
+        font-weight: 600;
+        text-transform: uppercase;
+      }
+      &:checked {
+        & ~ .accordion-header {
+          color: darken($gray-color-dark, 10%);
+        }
+      }
+    }
+
+    .menu {
+      .menu-item {
+        padding-left: 1rem;
+        
+        & > a {
+          background: transparent;
+          color: $gray-color-dark;
+          display: inline-block;
+        }
+      }
+    }
+  }
+}
+
+.s-content {
+  flex: 1 1 auto;
+  max-width: 920px;
+  padding: 0 3rem;
+  width: calc(100vw - 12rem);
+
+  & > .container {
+    padding-bottom: 1.5rem;
+  }
+
+  .anchor {
+    color: $primary-color-light;
+    height: 0;
+    margin-left: -2em;
+    overflow: hidden;
+    padding: 0 1em;
+    position: absolute;
+    text-align: center;
+    width: 0;
+    z-index: $zindex-1;
+    &:focus,
+    &:hover {
+      box-shadow: none;
+      height: auto;
+      text-decoration: none;
+      width: 2em;
+    }
+  }
+  
+  .s-title,
+  .s-subtitle {
+    line-height: 1.6rem;
+    margin-bottom: 0;
+    padding-top: 1.5rem;
+    padding-bottom: 1.5rem;
+    position: static;
+
+    @supports (position: sticky) {
+      position: sticky;
+      top: 0;
+      z-index: $zindex-2;
+
+      &::before {
+        background: $light-color;      
+        bottom: 0;
+        content: "";
+        display: block;
+        left: -10px;
+        position: absolute;
+        right: -10px;
+        top: -5px;
+        z-index: -$zindex-0;
+      }
+    }
+
+    &:hover {
+      .anchor {
+        height: auto;
+        width: 1em;
+      }
+    }
+
+    & + .docs-note {
+      margin-top: .4rem;
+    }
+  }
+
+  .docs-note {
+    margin: 1.5rem 0;
+  }
+
+  .column {
+    padding: $layout-spacing;
+  }
+
+  .docs-block {
+    border-radius: $border-radius;
+    padding: $unit-2;
+
+    &.bg-gray {
+      background: $bg-color-dark;
+    }
+  }
+
+  .docs-shape {
+    height: 4.8rem;
+    line-height: 1.2rem;
+    padding: 1.8rem 0;
+    width: 4.8rem;
+  }
+
+  .docs-dot {
+    border-radius: 50%;
+    display: inline-block;
+    height: .5rem;
+    padding: 0;
+    width: .5rem;
+  }
+
+  .docs-table {
+    th,
+    td {
+      padding: .75rem .25rem;
+    }
+  }
+
+  .docs-color {
+    border-radius: $border-radius;
+    margin: .25rem 0;
+    padding: .5rem;
+
+    .color-subtitle {
+      font-size: $font-size-sm;
+      opacity: .75;
+    }
+  }
+
+  .panel {
+    height: 75vh;
+
+    .tile {
+      margin: .75rem 0;
+    }
+  }
+
+  .parallax {
+    margin: 2rem auto;
+  }
+
+  .code {
+    color: lighten($body-font-color, 10%);
+
+    .com {
+      color: $gray-color;
+    }
+    .tag {
+      color: $primary-color;
+    }
+    .atn {
+      color: lighten($body-font-color, 10%);
+    }
+    .atv {
+      color: #e06870;
+    }
+  }
+
+  .empty .icon {
+    font-size: 2rem;
+  }
+
+  .form-autocomplete .menu {
+    position: static;
+  }
+
+  .example-tile-icon {
+    align-content: space-around;
+    align-items: center;
+    background: $primary-color;
+    border-radius: $border-radius;
+    color: $light-color;
+    display: flex;
+    font-size: 1.2rem;
+    height: 2rem;
+    width: 2rem;
+
+    .icon {
+      margin: auto;
+    }
+  }
+
+  .comparison-slider {
+    height: auto;
+    padding-bottom: 56.2222%;
+
+    .filter-grayscale {
+      filter: grayscale(75%);
+    }
+  }
+}
+
+.s-brand {
+  color: $primary-color;
+  padding: 0 1.5rem;
+  position: fixed;
+  top: 1.3rem;
+
+  .s-logo {
+    align-items: center;
+    border-radius: $border-radius;
+    display: inline-flex;
+    height: 2rem;
+    padding: .2rem;
+    width: auto;
+    
+    &:focus,
+    &:hover {
+      text-decoration: none;
+    }
+
+    img {
+      display: inline;
+      height: auto;
+      width: 1.6rem;
+    }
+
+    h2 {
+      display: inline;
+      font-size: .8rem;  
+      margin-bottom: 0;
+      margin-left: .5rem;
+      margin-right: .5rem;
+    }
+  }
+
+  .float-btn {
+    position: fixed;
+    right: 4.5rem;
+    top: 1.5rem;
+  }
+}
+
+.s-footer {
+  color: $gray-color;
+  padding: .5rem .5rem 1.5rem .5rem;
+
+  a {
+    color: $gray-color-dark;
+  }
+}
+
+/* Spectre Homepage style */
+.section-hero {
+  padding: 1rem .5rem;
+  position: relative;
+
+  .s-brand {
+    position: absolute;
+
+    h2 {
+      color: $primary-color;
+    }
+  }
+
+  .column {
+    padding: $layout-spacing;
+  }
+}
+
+.section-updates {
+  padding: 4.5rem .5rem 3.5rem .5rem;
+
+  .card {
+    border: 0;
+    color: lighten($body-font-color, 15%);
+    margin-bottom: 1rem;
+  }
+}
+
+.section-features {
+  padding: 4.5rem .5rem;
+
+  .column {
+    padding: $layout-spacing;
+  }
+}
+
+.section-footer {
+  color: $gray-color;
+  padding: 1.8rem .75rem 1rem .75rem;
+  position: relative;
+  z-index: 200;
+
+  a {
+    color: $gray-color-dark;
+  }
+}
+
+.grid-hero {
+  margin-top: 6rem;
+  margin-bottom: 2rem;
+
+  h1 {
+    color: $body-font-color;
+    font-size: 1.6rem;
+    margin-bottom: 1.5rem;
+  }
+
+  h2 {
+    color: lighten($body-font-color, 5%);
+    font-size: .9rem;
+    font-weight: 400;
+    line-height: 1.5rem;
+    margin-bottom: 1.5rem;
+
+    u {
+      border-bottom: $border-width-lg solid currentColor;
+      padding-bottom: $unit-o;
+      text-decoration: none;
+    }
+  }
+
+  .card {
+    background: none;
+    border: 0;
+    color: lighten($body-font-color, 15%);
+    padding: .5rem;
+
+    .card-title {
+      color: $primary-color;
+      font-size: .9rem;
+      margin-bottom: 0;
+    }
+  }
+}
+
+.menu-btn,
+.docs-nav-clear {
+  display: none;
+}
+
+@media (max-width: 880px) {
+  .s-sidebar {
+    background: $bg-color;
+    bottom: 0;
+    overflow-y: auto;
+    padding: 3rem 1.5rem;
+    position: fixed;
+    left: 0;
+    top: 0;
+    transform: translateX(-100%);
+    transition: transform .2s ease;
+    z-index: 400;
+
+    &:target {
+      transform: translateX(0);
+      transition: transform .2s ease;
+
+      & + .docs-nav-clear {
+        display: block;
+      }
+    }
+
+    .s-nav {
+      top: 1.5rem;
+    }
+  }
+
+  .s-brand {
+    backdrop-filter: blur(10px); // Safari only feature
+    background: fade($bg-color, 80%);
+    height: 3.5rem;
+    left: 0;
+    padding: .75rem .5rem;
+    text-align: center;
+    top: 0;
+    right: 0;
+    z-index: $zindex-3;
+
+    .s-logo {
+      h2 {
+        display: none;
+      }
+    }
+
+    .menu-btn {
+      display: block;
+      left: .65rem;
+      position: fixed;
+      top: .95rem;
+
+      .btn {
+        font-size: 1rem;
+      }
+    }
+
+    .float-btn {
+      right: 1rem;
+      top: .95rem;
+    }
+  }
+
+  .docs-nav-clear {
+    background: rgba(0, 0, 0, .15);
+    display: none;
+    height: 100%;
+    left: 0;
+    right: 0;
+    top: 0;
+    position: fixed;
+    width: 100%;
+    z-index: $zindex-3;
+  }
+
+  .s-content {
+    min-width: auto;
+    padding: 3.5rem 2.5rem 0 2.5rem;
+    width: 100%;
+
+    .s-title,
+    .s-subtitle {
+      padding-top: 5rem;
+      position: static;
+
+      &::before {
+        display: none;
+      }
+    }
+  }
+
+  .section-hero {
+    .s-brand {
+      height: 5rem;
+      padding: 1.5rem .5rem;
+
+      .s-logo {
+        height: auto;
+      }
+
+      img {
+        height: 3.2rem;
+        width: 3.2rem;
+      }
+    }
+  }
+}
+
+@media (max-width: 600px) {
+  .grid-hero {
+    h2 {
+      font-size: .9rem;
+    }
+    .card {
+      padding: 0;
+    }
+  }
+
+  .s-content {
+    padding: 3.5rem .5rem 0 .5rem;
+
+    .docs-block {
+      padding: $unit-2 $unit-h;
+    }
+
+    .anchor {
+      display: none;
+    }
+  }
+}
\ No newline at end of file