Merge pull request mayadata-io#142 from mayadata-io/width

Added width tokens
arkajyotiMukherjee · Apr 28, 2020 · cf9375a · cf9375a
2 parents 3a7fab3 + 69c2174
commit cf9375a
Showing 1 changed file with 28 additions and 10 deletions.
diff --git a/docs/style.scss b/docs/style.scss
@@ -134,18 +134,28 @@
   }
 }
 
-// Modal
-
-.react-live{
-  .modal {
-    position: unset !important;
-  }
-}
-
+// Width
 .de-code{
   margin-bottom: 30px;
-  .progress{
-    margin-bottom: 20px;
+  @each $size, $value in $widths {
+    .w-#{$size} {
+      width: 1rem * $value !important;
+      background-color: $gray-100;
+      height: 25px;
+      margin-bottom: 5px;
+    }
+  }
+  .w-auto{
+    background-color: $gray-100;
+    height: 25px;
+  }
+  .width-label{
+    font-size: 13px;
+  }
+
+ // Progress bars
+.progress{
+   margin-bottom: 20px;
     .progress-bar{
       width: 50%;
     }
@@ -159,6 +169,14 @@
     margin-top: 30px;
   }
 }
+
+// Modal
+.react-live{
+  .modal {
+    position: unset !important;
+  }
+}
+
 mark{
   background-color: $yellow-100;
 }