Completely rewritten Docs experience

14 files changed, 53 insertions, 39 deletions

diff --git a/src/accordions.less b/src/accordions.less
index 384f9eb..810d264 100644
--- a/src/accordions.less
+++ b/src/accordions.less
@@ -6,12 +6,11 @@
         & ~ .accordion-header {
           .icon {
             transform: rotate(90deg);
-            transition: all .2s ease;
+            
           }
         }
         & ~ .accordion-body {
           max-height: 1000px;
-          transition: max-height 2s ease;
         }
       }
     }
diff --git a/src/cards.less b/src/cards.less
index 4a76df9..1a84c21 100644
--- a/src/cards.less
+++ b/src/cards.less
@@ -36,10 +36,6 @@
     }
   }
 
-  .card-title {
-    font-size: 20px;
-  }
-
   .card-subtitle {
     color: lighten(@body-font-color, 40%);
   }
diff --git a/src/comparison-sliders.less b/src/comparison-sliders.less
index 937c315..083ce26 100644
--- a/src/comparison-sliders.less
+++ b/src/comparison-sliders.less
@@ -21,12 +21,12 @@
       object-position: left top;
       position: absolute;
       width: 100%;
-      z-index: -1;
     }
   }
 
   .comparison-before {
     width: 100%;
+    z-index: 1;
 
     .comparison-label {
       right: @unit-4;
@@ -36,7 +36,7 @@
   .comparison-after {
     max-width: 100%;
     min-width: 0;
-    z-index: @zindex-0;
+    z-index: 2;
 
     &::before {
       background: transparent;
@@ -62,7 +62,6 @@
       top: 50%;
       transform: translate(50%, -50%);
       width: 3px;
-      z-index: -@zindex-0;
     }
 
     .comparison-label {
diff --git a/src/forms.less b/src/forms.less
index 742fb8b..d8adf6d 100644
--- a/src/forms.less
+++ b/src/forms.less
@@ -46,7 +46,6 @@ legend {
   outline: none;
   padding: @control-padding-v @control-padding-h;
   position: relative;
-
   width: 100%;
   &:focus {
     border-color: @primary-color;
diff --git a/src/menus.less b/src/menus.less
index 077cf6f..ba8cff7 100644
--- a/src/menus.less
+++ b/src/menus.less
@@ -11,6 +11,7 @@
   z-index: @zindex-1;
 
   &.menu-nav {
+    background: transparent;
     box-shadow: none;
   }
 
diff --git a/src/mixins.less b/src/mixins.less
index 374c815..f3360d1 100644
--- a/src/mixins.less
+++ b/src/mixins.less
@@ -36,7 +36,7 @@
   border-radius: @border-radius;
   display: inline-block;
   line-height: 1;
-  padding: 3px 4px;
+  padding: .2em .3em;
   vertical-align: baseline;
 }
 
diff --git a/src/panels.less b/src/panels.less
index 09495de..873d21f 100644
--- a/src/panels.less
+++ b/src/panels.less
@@ -21,10 +21,6 @@
     padding: 0 @layout-spacing-lg;
   }
 
-  .panel-title {
-    font-size: @font-size-lg;
-  }
-
   .panel-subtitle {
     color: lighten(@body-font-color, 40%);
   }
diff --git a/src/tables.less b/src/tables.less
index 3ff0f47..e9f747d 100644
--- a/src/tables.less
+++ b/src/tables.less
@@ -39,4 +39,7 @@
     border-bottom: @border-width solid @border-color;
     padding: @unit-3 @unit-2;
   }
+  th {
+    border-bottom-width: @border-width-lg;
+  }
 }
diff --git a/src/tooltips.less b/src/tooltips.less
index 9afeb4d..02dc201 100644
--- a/src/tooltips.less
+++ b/src/tooltips.less
@@ -20,7 +20,7 @@
     transform: translate(-50%, @unit-2);
     transition: all .2s ease;
     white-space: nowrap;
-    z-index: @zindex-2;
+    z-index: @zindex-3;
   }
   &:focus,
   &:hover {
diff --git a/src/typography.less b/src/typography.less
index ae8a424..b0e33f7 100644
--- a/src/typography.less
+++ b/src/typography.less
@@ -9,25 +9,39 @@ h6 {
   color: inherit;
   font-weight: 500;
   line-height: 1.2;
-  margin-bottom: @unit-4;
+  margin-bottom: @unit-2;
   margin-top: 0;
 }
-h1 {
-  font-size: 50px;
+.h1,
+.h2,
+.h3,
+.h4,
+.h5,
+.h6 {
+  font-weight: 500;
 }
-h2 {
+h1,
+.h1 {
   font-size: 40px;
 }
-h3 {
-  font-size: 30px;
+h2,
+.h2 {
+  font-size: 32px;
+}
+h3,
+.h3 {
+  font-size: 28px;
 }
-h4 {
+h4,
+.h4 {
   font-size: 24px;
 }
-h5 {
+h5,
+.h5 {
   font-size: 20px;
 }
-h6 {
+h6,
+.h6 {
   font-size: 16px;
 }
 
diff --git a/src/utilities/colors.less b/src/utilities/colors.less
index 6a2691a..c3555c1 100644
--- a/src/utilities/colors.less
+++ b/src/utilities/colors.less
@@ -2,9 +2,6 @@
 .text-primary {
   .text-color-variant(@primary-color);
 }
-.text-secondary {
-  .text-color-variant(@secondary-color);
-}
 .text-gray {
   .text-color-variant(@gray-color);
 }
diff --git a/src/utilities/loading.less b/src/utilities/loading.less
index e2417a9..767ec9e 100644
--- a/src/utilities/loading.less
+++ b/src/utilities/loading.less
@@ -1,24 +1,34 @@
 // Loading
 .loading {
   color: transparent !important;
-  min-height: @control-icon-size;
+  min-height: @unit-4;
   pointer-events: none;
   position: relative;
   &::after {
     animation: loading 500ms infinite linear;
     border: @border-width-lg solid @primary-color;
-    border-radius: @unit-2;
+    border-radius: 50%;
     border-right-color: transparent;
     border-top-color: transparent;
     content: "";
     display: block;
-    height: @control-icon-size;
+    height: @unit-4;
     left: 50%;
-    margin-left: -@control-icon-size / 2;
-    margin-top: -@control-icon-size / 2;
+    margin-left: -@unit-2;
+    margin-top: -@unit-2;
     position: absolute;
     top: 50%;
-    width: @control-icon-size;
+    width: @unit-4;
     z-index: @zindex-0;
   }
-}
+
+  &.loading-lg {
+    min-height: @unit-10;
+    &::after {
+      height: @unit-8;
+      width: @unit-8;
+      margin-left: -@unit-4;
+      margin-top: -@unit-4;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/utilities/position.less b/src/utilities/position.less
index 71957d5..ba00712 100644
--- a/src/utilities/position.less
+++ b/src/utilities/position.less
@@ -9,10 +9,10 @@
   float: right !important;
 }
 
-.rel {
+.relative {
   position: relative;
 }
-.abs {
+.absolute {
   position: absolute;
 }
 .fixed {
diff --git a/src/variables.less b/src/variables.less
index cf50809..843dbc5 100644
--- a/src/variables.less
+++ b/src/variables.less
@@ -72,8 +72,8 @@
 @gray-color-dark: darken(@gray-color, 20%);
 @gray-color-light: lighten(@gray-color, 20%);
 
-@border-color: lighten(@gray-color-light, 3%);
-@border-color-dark: darken(@border-color, 15%);
+@border-color: lighten(@dark-color, 60%);
+@border-color-dark: darken(@border-color, 10%);
 @bg-color: lighten(@dark-color, 66%);
 @bg-color-dark: darken(@bg-color, 3%);
 @bg-color-light: @light-color;