Initial SASS build

1 files changed, 50 insertions, 50 deletions

diff --git a/docs/src/docs.less b/docs/src/docs.scss
index 432096c..6c53773 100644
--- a/docs/src/docs.less
+++ b/docs/src/docs.scss
@@ -1,11 +1,11 @@
 /*! Spectre.css Docs | MIT License | github.com/picturepan2/spectre */
 /* Spectre version */
 .version::after {
-  content: "0.3.2";
+  content: "0.4.0";
 }
 // Core variables and mixins
-@import '../../src/variables.less';
-@import '../../src/mixins.less';
+@import '../../src/variables';
+@import '../../src/mixins';
 
 /* Spectre New Docs */
 .s-container {
@@ -16,7 +16,7 @@
 }
 
 .s-sidebar {
-  background: @bg-color;
+  background: $bg-color;
   flex: 0 0 auto;
   padding: 1.5rem 0 1.5rem 1.5rem;
   width: 12rem;
@@ -36,14 +36,14 @@
 
     input {
       & ~ .accordion-header {
-        color: darken(@gray-color-dark, 10%);
-        font-size: @font-size-sm;
+        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%);
+          color: darken($gray-color-dark, 10%);
         }
       }
     }
@@ -54,7 +54,7 @@
         
         & > a {
           background: transparent;
-          color: @gray-color-dark;
+          color: $gray-color-dark;
           display: inline-block;
         }
       }
@@ -66,14 +66,14 @@
   flex: 1 1 auto;
   max-width: 920px;
   padding: 0 3rem;
-  width: ~"calc(100vw - 12rem)";
+  width: calc(100vw - 12rem);
 
   & > .container {
     padding-bottom: 1.5rem;
   }
 
   .anchor {
-    color: @primary-color-light;
+    color: $primary-color-light;
     height: 0;
     margin-left: -2em;
     overflow: hidden;
@@ -81,7 +81,7 @@
     position: absolute;
     text-align: center;
     width: 0;
-    z-index: @zindex-1;
+    z-index: $zindex-1;
     &:focus,
     &:hover {
       box-shadow: none;
@@ -102,10 +102,10 @@
     @supports (position: sticky) {
       position: sticky;
       top: 0;
-      z-index: @zindex-2;
+      z-index: $zindex-2;
 
       &::before {
-        background: @light-color;      
+        background: $light-color;      
         bottom: 0;
         content: "";
         display: block;
@@ -113,7 +113,7 @@
         position: absolute;
         right: -10px;
         top: -5px;
-        z-index: -@zindex-0;
+        z-index: -$zindex-0;
       }
     }
 
@@ -134,15 +134,15 @@
   }
 
   .column {
-    padding: @layout-spacing;
+    padding: $layout-spacing;
   }
 
   .docs-block {
-    border-radius: @border-radius;
-    padding: @unit-2;
+    border-radius: $border-radius;
+    padding: $unit-2;
 
     &.bg-gray {
-      background: @bg-color-dark;
+      background: $bg-color-dark;
     }
   }
 
@@ -169,12 +169,12 @@
   }
 
   .docs-color {
-    border-radius: @border-radius;
+    border-radius: $border-radius;
     margin: .25rem 0;
     padding: .5rem;
 
     .color-subtitle {
-      font-size: @font-size-sm;
+      font-size: $font-size-sm;
       opacity: .75;
     }
   }
@@ -192,16 +192,16 @@
   }
 
   .code {
-    color: lighten(@body-font-color, 10%);
+    color: lighten($body-font-color, 10%);
 
     .com {
-      color: @gray-color;
+      color: $gray-color;
     }
     .tag {
-      color: @primary-color;
+      color: $primary-color;
     }
     .atn {
-      color: lighten(@body-font-color, 10%);
+      color: lighten($body-font-color, 10%);
     }
     .atv {
       color: #e06870;
@@ -219,9 +219,9 @@
   .example-tile-icon {
     align-content: space-around;
     align-items: center;
-    background: @primary-color;
-    border-radius: @border-radius;
-    color: @light-color;
+    background: $primary-color;
+    border-radius: $border-radius;
+    color: $light-color;
     display: flex;
     font-size: 1.2rem;
     height: 2rem;
@@ -243,14 +243,14 @@
 }
 
 .s-brand {
-  color: @primary-color;
+  color: $primary-color;
   padding: 0 1.5rem;
   position: fixed;
   top: 1.3rem;
 
   .s-logo {
     align-items: center;
-    border-radius: @border-radius;
+    border-radius: $border-radius;
     display: inline-flex;
     height: 2rem;
     padding: .2rem;
@@ -284,11 +284,11 @@
 }
 
 .s-footer {
-  color: @gray-color;
+  color: $gray-color;
   padding: .5rem .5rem 1.5rem .5rem;
 
   a {
-    color: @gray-color-dark;
+    color: $gray-color-dark;
   }
 }
 
@@ -301,12 +301,12 @@
     position: absolute;
 
     h2 {
-      color: @primary-color;
+      color: $primary-color;
     }
   }
 
   .column {
-    padding: @layout-spacing;
+    padding: $layout-spacing;
   }
 }
 
@@ -315,7 +315,7 @@
 
   .card {
     border: 0;
-    color: lighten(@body-font-color, 15%);
+    color: lighten($body-font-color, 15%);
     margin-bottom: 1rem;
   }
 }
@@ -324,18 +324,18 @@
   padding: 4.5rem .5rem;
 
   .column {
-    padding: @layout-spacing;
+    padding: $layout-spacing;
   }
 }
 
 .section-footer {
-  color: @gray-color;
+  color: $gray-color;
   padding: 1.8rem .75rem 1rem .75rem;
   position: relative;
   z-index: 200;
 
   a {
-    color: @gray-color-dark;
+    color: $gray-color-dark;
   }
 }
 
@@ -344,21 +344,21 @@
   margin-bottom: 2rem;
 
   h1 {
-    color: @body-font-color;
+    color: $body-font-color;
     font-size: 1.6rem;
     margin-bottom: 1.5rem;
   }
 
   h2 {
-    color: lighten(@body-font-color, 5%);
+    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;
+      border-bottom: $border-width-lg solid currentColor;
+      padding-bottom: $unit-o;
       text-decoration: none;
     }
   }
@@ -366,11 +366,11 @@
   .card {
     background: none;
     border: 0;
-    color: lighten(@body-font-color, 15%);
+    color: lighten($body-font-color, 15%);
     padding: .5rem;
 
     .card-title {
-      color: @primary-color;
+      color: $primary-color;
       font-size: .9rem;
       margin-bottom: 0;
     }
@@ -382,9 +382,9 @@
   display: none;
 }
 
-@media screen and (max-width: 880px) {
+@media (max-width: 880px) {
   .s-sidebar {
-    background: @bg-color;
+    background: $bg-color;
     bottom: 0;
     overflow-y: auto;
     padding: 3rem 1.5rem;
@@ -411,14 +411,14 @@
 
   .s-brand {
     backdrop-filter: blur(10px); // Safari only feature
-    background: fade(@bg-color, 80%);
+    background: fade($bg-color, 80%);
     height: 3.5rem;
     left: 0;
     padding: .75rem .5rem;
     text-align: center;
     top: 0;
     right: 0;
-    z-index: @zindex-3;
+    z-index: $zindex-3;
 
     .s-logo {
       h2 {
@@ -452,7 +452,7 @@
     top: 0;
     position: fixed;
     width: 100%;
-    z-index: @zindex-3;
+    z-index: $zindex-3;
   }
 
   .s-content {
@@ -488,7 +488,7 @@
   }
 }
 
-@media screen and (max-width: 600px) {
+@media (max-width: 600px) {
   .grid-hero {
     h2 {
       font-size: .9rem;
@@ -502,7 +502,7 @@
     padding: 3.5rem .5rem 0 .5rem;
 
     .docs-block {
-      padding: @unit-2 @unit-h;
+      padding: $unit-2 $unit-h;
     }
 
     .anchor {