@medyll/cssfabric 0.0.14 → 0.1.0

package/src/cssfabric/modules/box/box-responsive.scss

@@ -7,11 +7,11 @@ $config: cssfabric-config.$cssfabric-config;
 
 $_media_quey_sizes: map-get($config, media_quey_sizes);
 
-// builder responsive
+// responsive builder here
 $min_value: 0;
 
 @each $mq_size_key, $mq_size_value in $_media_quey_sizes {
-  @include utils.responsive_encloser($mq_size_value, $min_value) {
+  @include utils.fabricResponsiveEncloser($mq_size_value, $min_value) {
     @include build.buildBox($mq_size_key);
   }
   $min_value: $mq_size_value;

package/src/cssfabric/modules/color/_color-build.scss

@@ -103,6 +103,6 @@ $gray-schemes: utils.getGraySteps($color-gray-steps, $color-gray-start, $color-g
   @each $color-type-key in $color-types-config {
     @include fabricColors("palette", $color-palette, $color-type-key, $mq_size_key, true);
     @include fabricColors("scheme", $color-schemes, $color-type-key, $mq_size_key);
-    @include fabricColors("gray", $gray-schemes, $color-type-key, $mq_size_key);
+    @include fabricColors("grey", $gray-schemes, $color-type-key, $mq_size_key);
   }
 }

package/src/cssfabric/modules/color/color-responsive.scss

@@ -16,7 +16,7 @@ $min_value: 0;
 
 @each $mq_size_key,
 $mq_size_value in $_media_quey_sizes {
-    @include utils.responsive_encloser($mq_size_value,$min_value) {
+    @include utils.fabricResponsiveEncloser($mq_size_value,$min_value) {
         @include build.buildColor($mq_size_key);
     }
     $min_value: $mq_size_value;

package/src/cssfabric/modules/flex/_flex-build.scss

@@ -21,7 +21,7 @@ $grow-shrink-steps: map-get($flex-config, grow-shrink-steps);
 
 $grid-code-sep: #{$grid-code}#{$sep};
 
-@mixin makeGrid($mqKey) { 
+@mixin makeGrid($mqKey) {
   $prefix: if($mqKey, #{$grid-code}-#{$mqKey}, #{$grid-code});
   $h_prop: #{$prefix}#{$sep}#{$grid-h};
   $v_prop: #{$prefix}#{$sep}#{$grid-v};
@@ -30,6 +30,7 @@ $grid-code-sep: #{$grid-code}#{$sep};
     display: flex;
   }
 
+  .#{$grid-code},
   .#{$h_prop} {
     display: flex;
     flex-direction: row;
@@ -38,39 +39,37 @@ $grid-code-sep: #{$grid-code}#{$sep};
       flex: 1 1 0;
     }
 
-    &.align-middle, &.#{$grid-code-sep}align-middle {
+    &.#{$grid-code-sep}align-middle {
       align-items: center;
     }
 
-    &.align-top, &.#{$grid-code-sep}align-top {
+    &.#{$grid-code-sep}align-top {
       align-items: flex-start;
     }
 
-    &.align-left, &.#{$grid-code-sep}align-left {
-      // justify-content: flex-start;
+    &.#{$grid-code-sep}align-left {
       align-items: flex-start;
     }
 
-    &.align-right, &.#{$grid-code-sep}align-right {
+    &.#{$grid-code-sep}align-right {
       justify-content: flex-end;
-      // align-items: end;
     }
 
-    &.align-bottom, &.#{$grid-code-sep}align-bottom {
+    &.#{$grid-code-sep}align-bottom {
       align-items: flex-end;
     }
 
-    &.align-center, &.#{$grid-code-sep}align-center {
+    &.#{$grid-code-sep}align-center {
       justify-content: center;
     }
 
-    &.align-middle-center, &.#{$grid-code-sep}align-middle-center {
+    &.#{$grid-code-sep}align-middle-center {
       justify-content: center;
       align-content: center;
       align-items: center;
     }
 
-    &.align-stretch , &.#{$grid-code-sep}align-stretch {
+    &.#{$grid-code-sep}align-stretch {
       color: blue;
       align-items: stretch;
     }
@@ -85,85 +84,67 @@ $grid-code-sep: #{$grid-code}#{$sep};
       max-height: 100%;
     }
 
-    &.align-middle, &.#{$grid-code-sep}align-middle {
+    &.#{$grid-code-sep}align-middle {
       justify-content: center;
     }
 
-    &.align-top, &.#{$grid-code-sep}align-top {
+    &.#{$grid-code-sep}align-top {
       justify-content: flex-start;
     }
 
-    &.align-left, &.#{$grid-code-sep}align-left {
+    &.#{$grid-code-sep}align-left {
       align-items: flex-start;
     }
 
-    &.align-right, &.#{$grid-code-sep}align-right {
+    &.#{$grid-code-sep}align-right {
       align-items: flex-end;
     }
 
-    &.align-bottom, &.#{$grid-code-sep}align-bottom {
+    &.#{$grid-code-sep}align-bottom {
       justify-content: flex-end;
     }
 
-    &.align-center, &.#{$grid-code-sep}align-center {
+    &.#{$grid-code-sep}align-center {
       align-items: center;
     }
 
-    &.align-middle-center, &.#{$grid-code-sep}align-middle-center {
+    &.#{$grid-code-sep}align-middle-center {
       align-items: center;
       justify-content: center;
     }
 
-    &.align-stretch, &.#{$grid-code-sep}align-stretch {
+    &.#{$grid-code-sep}align-stretch {
       color: red;
       align-items: stretch;
     }
   }
 
-  .#{$h_prop},
-  .#{$v_prop} {
-    box-sizing: border-box;
-
-    & > * {
-      box-sizing: border-box;
-    }
 
-    & > *:not(.#{$grid-code-sep}#{$gridFullWidth}) {
-      flex: 0 0 auto;
-    }
+  .#{$grid-code-sep}inline {
+    display: inline-flex;
+  }
 
-    &.#{$grid-code-sep}inline {
-      display: inline-flex;
+  // wrap rules
+  .#{$grid-code} {
+    @each $fabricRule, $value in map-get($cssProps, flexWrap) {
+      @include utils.fabricAttributes('&'+$sep, $fabricRule, 'flex-wrap', $value);
     }
+  }
 
-    @for $i from 1 through $grow-shrink-steps {
-      & .#{$grid-code-sep}grow#{$sep}#{$i} {
-        flex-grow: $i;
-      }
-
-      & .#{$grid-code-sep}shrink#{$sep}#{$i} {
-        flex-shrink: $i;
-      }
+  // align-self rules for children */
+  .self {
+    @each $fabricRule, $value in map-get($cssItemsProps, self) {
+      @include utils.fabricAttributes('&-', $fabricRule, 'align-self', $value);
     }
   }
-
-  /** raw css properties distribution */
-  .#{$h_prop},
-  .#{$v_prop} {
-    // wrap rules
-    &.#{$grid-code} {
-      @each $fabricRule, $value in map-get($cssProps, flexWrap) {
-        @include utils.fabricAttributes('&'+$sep, $fabricRule, 'flex-wrap', $value);
-      }
+  @for $i from 0 through $grow-shrink-steps {
+    .#{$grid-code-sep}grow#{$sep}#{$i} {
+      flex-grow: #{$i};
     }
 
-    // align-self rules for children */
-    & .self {
-      @each $fabricRule, $value in map-get($cssItemsProps, self) {
-        @include utils.fabricAttributes('&-', $fabricRule, 'align-self', $value);
-      }
+    .#{$grid-code-sep}shrink#{$sep}#{$i} {
+      flex-shrink: $i;
     }
   }
 
-
 }

package/src/cssfabric/modules/flex/_flex-vars.scss

@@ -1,7 +1,7 @@
 @use '../../utils';
 
 
-$_grow-shrink-steps: 4;
+$_grow-shrink-steps: 2;
 
 
 $_grid-align: (top middle bottom left right center middle-center stretch);
@@ -72,16 +72,13 @@ $flex-docs: (// add align-middle non generated className // grow + shrink
                         classNames: (
                                 align: $_grid-align,
                                 grid:utils.getObjectKeys(map-get($_cssProps, flexWrap)), // add inline !
-                          //items: utils.getObjectKeys(map-get($_cssProps, grid-items)),
-                          //content:utils.getObjectKeys(map-get($_cssProps, grid-content)),
-                          //justify:utils.getObjectKeys(map-get($_cssProps, grid-justify))
                         ),
-                        about: "a classic grid system, and hey, it gets height !"
+                        about: "a classic flex grid system, and hey, it gets height !"
                 ),
                 self:(
                         tag: self,
                         keys: utils.getObjectKeys(map-get($_cssItemsProps, self)),
-                        about: "grid children specific classnames"
+                        about: "flex children specific classnames"
                 )
         )
 );

package/src/cssfabric/modules/grid/_grid-build.scss

@@ -19,6 +19,9 @@ $gridFullWidth: map-get($grid-config, gridFullWidth);
 
 $grow-shrink-steps: map-get($grid-config, grow-shrink-steps);
 
+$grid-max-cols: map-get($grid-config, grid-max-cols);
+$grid-max-rows: map-get($grid-config, grid-max-rows);
+
 $grid-code-sep: #{$grid-code}#{$sep};
 
 @mixin makeGrid($mqKey) {
@@ -26,66 +29,56 @@ $grid-code-sep: #{$grid-code}#{$sep};
   $h_prop: #{$prefix}#{$sep}#{$grid-h};
   $v_prop: #{$prefix}#{$sep}#{$grid-v};
 
-  %flex {
-    display: grid; 
-  }
-
-  .#{$h_prop} {
+  .#{$grid-code} {
     display: grid;
-    flex-direction: row;
-
-    & > .#{$grid-code-sep}#{$gridFullWidth} {
-      flex: 1 1 0;
+    &-auto-flow-cols {
+      grid-auto-flow: column;
     }
-
-
-  }
-
-  .#{$v_prop} {
-    display: grid;
-    flex-direction: column;
-
-    & > .#{$grid-code-sep}#{$gridFullWidth} {
-      flex: 1 1 0;
-      max-height: 100%;
+    &-auto-cols-auto {
+      grid-auto-columns: auto;
     }
-
-    &.align-middle, &.#{$grid-code-sep}align-middle {
-      justify-content: center;
+    &-auto-cols-min	 {
+      grid-auto-columns: min-content;
     }
-
-  }
-
-  .#{$h_prop},
-  .#{$v_prop} {
-
-    & > *:not(.#{$grid-code-sep}#{$gridFullWidth}) {
-      flex: 0 0 auto;
+    &-auto-cols-max {
+      grid-auto-columns: max-content;
+    }
+    &-auto-cols {
+      grid-auto-columns: minmax(0, 1fr);
     }
 
-    &.#{$grid-code-sep}inline {
-      display: inline-grid;
+    &-auto-flow-rows {
+      grid-auto-flow: row;
+    }
+    &-auto-rows-auto {
+      grid-auto-rows: auto;
+    }
+    &-auto-rows-min	 {
+      grid-auto-rows: min-content;
+    }
+    &-auto-rows-max {
+      grid-auto-rows: max-content;
+    }
+    &-auto-rows {
+      grid-auto-rows: minmax(0, 1fr);
     }
 
+
   }
 
-  /** raw css properties distribution */
-  .#{$h_prop},
-  .#{$v_prop} {
-    // wrap rules
-    &.#{$grid-code} {
-      @each $fabricRule, $value in map-get($cssProps, flexWrap) {
-        @include utils.fabricAttributes('&'+$sep, $fabricRule, 'flex-wrap', $value);
-      }
+  .#{$grid-code-sep}inline {
+    display: inline-grid;
+  }
+  /* template-columns */
+  @for $col-row from 1 through $grid-max-cols {
+    .#{$grid-code}-cols-#{$col-row} {
+      grid-template-columns: repeat(#{$col-row}, minmax(0, 1fr));
     }
-
-    // align-self rules for children */
-    & .self {
-      @each $fabricRule, $value in map-get($cssItemsProps, self) {
-        @include utils.fabricAttributes('&-', $fabricRule, 'align-self', $value);
-      }
+  }
+  /* template-rows */
+  @for $col-row from 1 through $grid-max-rows {
+    .#{$grid-code}-rows-#{$col-row} {
+      grid-template-rows: repeat(#{$col-row}, minmax(0, 1fr));
     }
   }
-
-
 }

package/src/cssfabric/modules/grid/_grid-vars.scss

@@ -3,6 +3,8 @@
 
 $_grow-shrink-steps: 4;
 
+$grid-max-cols: 12;
+$grid-max-rows: 8;
 
 $_grid-align: (top middle bottom left right center middle-center stretch);
 
@@ -61,7 +63,9 @@ $grid-config: (
         gridFullWidth: main,
         grow-shrink-steps:$_grow-shrink-steps,
         cssProps: $_cssProps,
-        cssItemsProps: $_cssItemsProps
+        cssItemsProps: $_cssItemsProps,
+        grid-max-rows: $grid-max-rows,
+        grid-max-cols: $grid-max-cols
 );
 
 $grid-docs: (// add align-middle non generated className // grow + shrink
@@ -72,11 +76,8 @@ $grid-docs: (// add align-middle non generated className // grow + shrink
                         classNames: (
                                 align: $_grid-align,
                                 grid:utils.getObjectKeys(map-get($_cssProps, flexWrap)), // add inline !
-                          //items: utils.getObjectKeys(map-get($_cssProps, grid-items)),
-                          //content:utils.getObjectKeys(map-get($_cssProps, grid-content)),
-                          //justify:utils.getObjectKeys(map-get($_cssProps, grid-justify))
                         ),
-                        about: "a classic grid system, and hey, it gets height !"
+                        about: "a classic grid system"
                 ),
                 self:(
                         tag: self,

package/src/cssfabric/modules/grid/grid-responsive.scss

@@ -17,7 +17,7 @@ $min_value: 0;
 
 @each $mq_size_key,
 $mq_size_value in $_media_quey_sizes {
-  @include utils.responsive_encloser($mq_size_value,$min_value) {
+  @include utils.fabricResponsiveEncloser($mq_size_value,$min_value) {
     @include build.makeGrid($mq_size_key);
   }
   $min_value: $mq_size_value;

package/src/cssfabric/modules/menu/menu-responsive.scss

@@ -12,7 +12,7 @@ $min_value: 0;
 
 @each $mq_size_key,
 $mq_size_value in $_media_quey_sizes {
-    @include utils.responsive_encloser($mq_size_value, $min_value) {
+    @include utils.fabricResponsiveEncloser($mq_size_value, $min_value) {
         @include build.buildMenu($mq_size_key);
     }
     $min_value: $mq_size_value;

package/src/cssfabric/modules/overflow/overflow-responsive.scss

@@ -17,7 +17,7 @@ $min_value: 0;
 @each $mq_size_key,
 $mq_size_value in $_media_quey_sizes {
  
-    @include utils.responsive_encloser($mq_size_value,$min_value) {
+    @include utils.fabricResponsiveEncloser($mq_size_value,$min_value) {
         @include build.buildOverflow($mq_size_key);
     }
     $min_value: $mq_size_value;

package/src/cssfabric/modules/scale/_scale-build.scss

@@ -32,7 +32,7 @@ $unit-tag-config: map-get($scale-config, unit-tag-config)!default;
                   #{$scale_prop_short}-#{$media_query_code}-#{$size_code},
                   #{$scale_prop_short}-#{$size_code}
   );
-  .#{$tag}, .scale-#{$tag} {
+  .#{$tag} { // , .scale-#{$tag}
     #{$scale_prop}: $size_value;
 
     @if ($_has_dimensions_max) {

package/src/cssfabric/modules/scale/scale-responsive.scss

@@ -16,7 +16,7 @@ $min_value: 0;
 @each $mq_size_key,
 $mq_size_value in $_media_quey_sizes {
     
-    @include utils.responsive_encloser($mq_size_value,$min_value) {
+    @include utils.fabricResponsiveEncloser($mq_size_value,$min_value) {
         @include build.buildScale($mq_size_key);
     }
     $min_value: $mq_size_value;

package/src/cssfabric/modules/table/table-responsive.scss

@@ -16,7 +16,7 @@ $min_value: 0;
 @each $mq_size_key,
 $mq_size_value in $_media_quey_sizes {
     
-    @include utils.responsive_encloser($mq_size_value,$min_value) {
+    @include utils.fabricResponsiveEncloser($mq_size_value,$min_value) {
         @include build.buildTable($mq_size_key);
     }
     $min_value: $mq_size_value; 

package/src/cssfabric/modules/text/text-responsive.scss

@@ -17,7 +17,7 @@ $min_value: 0;
 @each $mq_size_key,
 $mq_size_value in $_media_quey_sizes {
  
-    @include utils.responsive_encloser($mq_size_value,$min_value) {
+    @include utils.fabricResponsiveEncloser($mq_size_value,$min_value) {
         @include build.buildText($mq_size_key);
     }
     $min_value: $mq_size_value;

package/src/cssfabric/modules/theme/_theme-build.scss

@@ -35,7 +35,9 @@ $declinations-config: map-get($theme-config, declinations-config);
 
           @include utils.fabricAttributes("&-", $theme-level, #{$switch-tag-type}, $newColor);
         }
+      }
     }
+  }
 }
 
 @mixin themeCssVars() {

package/src/cssfabric/modules/vars.scss

@@ -26,7 +26,7 @@ $themes: map-get($config, themes) !default;
 $theme-light: map-get($themes, light) !default;
 $theme-dark: map-get($themes, dark) !default;
 
-// GRAYS
+// GREYS
 $gray-config: map-get($color-config, gray-config) !default;
 $color-gray-start: map-get($gray-config, start) !default;
 $color-gray-end: map-get($gray-config, end) !default;
@@ -50,9 +50,8 @@ $box-shadow-shorthand-config: map-get($box-config, shadow-shorthand-config) !def
   --theme-color-background: #{map-get($theme-light, background)};
   --theme-color-paper: #{map-get($theme-light, paper)};
 
-  --theme-color-border: var(--theme-color-primary-alpha-mid);
-  --theme-color-overlay: '';
-
+  --theme-color-border: rgba(208, 191, 151, 0.3);
+  --theme-color-overlay: rgba(208, 191, 151, 0.2);
 
   /* color-scheme */
   @each $type-key, $type-prop in $color-schemes {
@@ -111,8 +110,8 @@ $box-shadow-shorthand-config: map-get($box-config, shadow-shorthand-config) !def
   --theme-color-background: #{map-get($theme-dark, background)};
   --theme-color-paper: #{map-get($theme-dark, paper)};
 
-  --theme-color-border: var(--theme-color-primary-alpha-mid);
-  --theme-color-overlay: '';
+  --theme-color-border: rgba(255, 255, 255, 0.2);
+  --theme-color-overlay: rgba(255,255,255,0.1);
 }
 
 

package/src/cssfabric/modules/zindex/_zindex-vars.scss

@@ -1,19 +1,14 @@
 $zindex-metadata: (
-    title: zindex,
-    tag: zI,
-    description: "cssfabric zindex module to set z-index on all html elements",
+        title: zindex,
+        tag: zI,
+        description: "cssfabric zindex module to set z-index on all html elements",
 );
 $zindex-config: (
-    z_groups: (
-        a,
-        b,
-        c,
-        d,
-        e,
-        f,
-        g,
-    ),
+        z_groups: (
+                a,
+                z
+        ),
 );
 $zindex-docs: (
-    z_groups: _,
+        z_groups: _,
 );

package/src/cssfabric/modules/zindex/zindex.scss

@@ -5,15 +5,11 @@ $zindex-config: zindex-vars.$zindex-config;
 @use '../../_utils';
 
 // read variables
-$z_groups: map-get($zindex-config, z_groups); 
- 
+$z_groups: map-get($zindex-config, z_groups);
 
-@each $z_group in $z_groups {
-  $i: index($z_groups, $z-group);
-  @for $z_value from 0 through 9 {
-    .zI-#{$z_group}-#{$z_value} {
-      /* set zIndex value */
-      z-index: ($i * 100) + (($z_value + 1) * 10);
-    }
+
+@for $z_value from 0 through 10 {
+  .zI-#{$z_value} {
+    z-index: (($z_value) * 100);
   }
-}
+}