新增 effects sizing

Author: IdenPin

dist/acss-helper.css

@@ -145,6 +145,22 @@ <h2 id="border" class="border-b-1 border-b-solid border-gray-200 py-5 font-bold"
               </div>
             </div>
           </div>
+          <!-- border-radius -->
+          <h2 id="border-radius" class="border-b-1 border-b-solid border-gray-200 py-5 font-bold">border-radius</h2>
+          <div class="row my-5 justify-between">
+            <div class="col-2 text-c" v-for="item in borderRadius">
+              <div class="w-16 h-16 border mx-auto" :class="`rounded-${item}`">{{item}}</div>
+              <p class="my-5">.rounded-{{item}}</p>
+            </div>
+          </div>
+          <!-- box-shadow -->
+          <h2 id="border-radius" class="border-b-1 border-b-solid border-gray-200 py-5 font-bold">box-shadow</h2>
+          <div class="row my-5">
+            <div class="col-3 text-c" v-for="item in boxShadow">
+              <div class="w-16 h-16 mx-auto" :class="`shadow-${item}`"></div>
+              <p class="my-5">.shadow-{{item}}</p>
+            </div>
+          </div>
         </div>
         <div class="sidebar col-3">
           <div>
@@ -172,8 +188,8 @@ <h3 class="font-bold pl-2 text-2xl mt-5">Category</h3>
         'font-size',
         'font-weight',
         'border',
-        'radius',
-        'shadows',
+        'border-radius',
+        'box-shadow',
         'alignment',
         'gutter',
         'display',
@@ -301,7 +317,9 @@ <h3 class="font-bold pl-2 text-2xl mt-5">Category</h3>
         borderStyle: ['solid', 'dashed', 'dotted', 'double', 'none'],
         borderDirection: ['t', 'r', 'b', 'l'],
         borderColor: ['pink-500', 'purple-500', 'indigo-500', 'blue-500', 'yellow-500', 'orange-500']
-      }
+      },
+      borderRadius: ["none", "sm", "default", "lg", "full"],
+      boxShadow: ['default', 'md', 'lg', 'xl', '2xl', 'inner', 'outline', 'none']
     }
   })
 </script>

docs/css/acss-helper.css

@@ -0,0 +1,9 @@
+// --------------------------------------------------
+// box-shadow
+// --------------------------------------------------
+
+@each $key, $val in $shadow {
+  .shadow-#{$key} {
+    box-shadow: unquote($val);
+  }
+}

docs/index.html

@@ -0,0 +1,57 @@
+// width
+@each $key, $val in $width {
+  .w-#{$key} {
+    width: $val
+  }
+}
+
+// height
+@each $key, $val in $height {
+  .h-#{$key} {
+    height: $val
+  }
+}
+
+// m-width
+.min-w-0{
+  min-width: 0;
+}
+.min-w-full{
+  min-width: 100%;
+}
+
+// min-width
+.min-w-0{
+  min-width: 0;
+}
+.min-w-full{
+  min-width: 100%;
+}
+
+// max-width
+@each $key, $val in $max-height {
+  .max-w-#{$key} {
+    max-width: $val
+  }
+}
+
+
+
+// min-height
+.min-h-0{
+  min-height: 0;
+}
+.min-h-full{
+  min-height: 100%;
+}
+.min-h-screen{
+  min-height: 100vh;
+}
+
+// max-height
+.max-h-full{
+  max-height: 100%;
+}
+.max-h-screen {
+  max-height: 100vh;
+}

src/_effects.scss

@@ -1,10 +1,13 @@
 // --------------------------------------------------
 // margin & padding
 // --------------------------------------------------
+.mx-auto{
+  margin-left:  auto;
+  margin-right:  auto;
+}
 
 // .m-10 -> margin: 10px;
 // .m--10-> margin: -10px;
-$true: true;
 @each $typeKey, $typeVal in $spacing-types {
   @each $sizeKey, $sizeVal in $spacing-sizes {
     @if $typeKey == m{

src/_sizing.scss

@@ -32,20 +32,6 @@
 }
 
 
-// width
-@each $key, $val in $width {
-  .w-#{$key} {
-    width: $val
-  }
-}
-
-// height
-@each $key, $val in $height {
-  .h-#{$key} {
-    height: $val
-  }
-}
-
 // text-align
 @each $key, $val in $align-direction {
   .text-#{$key} {

src/_spacing.scss

@@ -239,7 +239,43 @@ $line-height: (
   loose: '2',
 );
 
+
+$align-direction: (
+  l: left,
+  r: right,
+  c: center,
+  j: justify
+);
+
+// --------------------------------------------------
+// Variables sizing
+// --------------------------------------------------
 $width: (
+  0:0,
+  1: 0.25rem,
+  2: 0.5rem,
+  3: 0.75rem,
+  4: 1rem,
+  5:1.25,
+  6: 1.5rem,
+  8: 2rem,
+  10:2.5rem,
+  12: 3rem,
+  16: 4rem,
+  20: 5rem,
+  24: 6rem,
+  32: 8rem,
+  40: 10rem,
+  48: 12rem,
+  56: 14rem,
+  64: 16rem,
+  h: auto,
+  px: 1px,
+  full: 100%,
+  screen: 100vw
+);
+
+$height: (
   0:0,
   1: 0.25rem,
   2: 0.5rem,
@@ -264,14 +300,21 @@ $width: (
   screen: 100vh
 );
 
-$align-direction: (
-  l: left,
-  r: right,
-  c: center,
-  j: justify
+$max-height : (
+  xs	:20rem,
+  sm	:24rem,
+  md	:28rem,
+  lg	:32rem,
+  xl	:36rem,
+  2xl: 42rem,
+  3xl: 48rem,
+  4xl: 56rem,
+  5xl: 64rem,
+  6xl: 72rem,
+  ful: 100%
 );
 
-$height: $width !default;
+
 
 // --------------------------------------------------
 // Variables background
@@ -295,7 +338,6 @@ $border-radius: (
   sm: '0.125rem',
   default: '0.25rem',
   lg: '0.5rem',
-  half: '50%',
   full: '100%'
 );
 

src/_typography.scss

@@ -6,8 +6,10 @@
 @import './border';
 @import './border-radius';
 @import './spacing';
+@import './sizing';
 @import './shadow';
 @import './typography';
 @import './background';
+@import './effects';
 @import './grid';
 @import './overflow'