@medyll/cssfabric 0.2.0 → 0.2.3

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

@@ -0,0 +1,88 @@
+@use '../../utils';
+
+
+$_grow-shrink-steps: 4;
+
+$grid-max-cols: 12;
+$grid-max-rows: 8;
+
+$_grid-align: (top middle bottom left right center middle-center stretch);
+
+$_classNames: (
+        wrap: wrap,
+        wrap-reverse: wrap-reverse
+);
+
+$_cssProps: (
+        flexWrap: (
+                wrap: wrap,
+                wrap-reverse: wrap-reverse
+        ),
+        grid-justify: (
+                start: flex-start,
+                end: flex-end,
+                between: space-between,
+                stretch: stretch,
+                center: flex-center
+        ),
+        grid-items: (
+                baseline: baseline,
+                stretch: stretch,
+                start: flex-start,
+                center: center,
+                end: flex-end
+        ),
+        grid-content: (
+                start: flex-start,
+                center: center,
+                end: flex-end,
+                between: space-between,
+                equal: space-evenly
+        )
+);
+
+$_cssItemsProps: (
+        self: (
+                start: flex-start,
+                end: flex-end,
+                stretch: stretch
+        )
+);
+
+$grid-metadata: (
+        title: "grid",
+        tag: "grid",
+        description: "cssfabric flex grid system module"
+);
+
+$grid-config: (
+        moduleName: grid,
+        moduleNameShort: grid,
+        horCode: h,
+        vertCode: v,
+        gridFullWidth: main,
+        grow-shrink-steps:$_grow-shrink-steps,
+        cssProps: $_cssProps,
+        cssItemsProps: $_cssItemsProps,
+        grid-max-rows: $grid-max-rows,
+        grid-max-cols: $grid-max-cols
+);
+
+$grid-docs: (// add align-middle non generated className // grow + shrink
+        attributes:(
+                grid:(
+                        tag: grid,
+                        keys: (v, h),
+                        classNames: (
+                                align: $_grid-align,
+                                grid:utils.getObjectKeys(map-get($_cssProps, flexWrap)), // add inline !
+                        ),
+                        about: "a classic grid system"
+                ),
+                self:(
+                        tag: self,
+                        keys: utils.getObjectKeys(map-get($_cssItemsProps, self)),
+                        about: "grid children specific classnames"
+                )
+        )
+);

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

@@ -0,0 +1,25 @@
+
+
+// load scss config file
+@use '../../_utils';
+@use '_grid-build' as build;
+@use "../cssfabric-config";
+// load general config variables
+$config: cssfabric-config.$cssfabric-config;
+
+// load general config variables
+// media queries sizes, in rem
+$_media_quey_sizes: map-get($config, media_quey_sizes);
+ 
+
+// builder responsive  
+$min_value: 0;
+
+@each $mq_size_key,
+$mq_size_value in $_media_quey_sizes {
+  @include utils.fabricResponsiveEncloser($mq_size_value,$min_value) {
+    @include build.makeGrid($mq_size_key);
+  }
+  $min_value: $mq_size_value;
+} 
+ 

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

@@ -0,0 +1,6 @@
+
+// load _build
+@use '_grid-build' as build;
+
+
+@include build.makeGrid(null);

package/src/cssfabric/modules/menu/_menu-build.scss

@@ -0,0 +1,120 @@
+@use 'menu-vars';
+@use '../../_utils';
+
+$menu-config: menu-vars.$menu-config;
+
+// read variables
+$menu_class_name: map-get($menu-config, menu_class_name);
+$menu_class_name_short: map-get($menu-config, menu_class_name_short);
+
+$menu_item_class_name: map-get($menu-config, menu_item_class_name);
+$menu_item_class_name_short: map-get($menu-config, menu_item_class_name_short);
+
+$orientations: map-get($menu-config, orientations);
+$menu_item_disabled_tag: map-get($menu-config, menu_item_disabled_tag);
+$menu_item_selected_tag: map-get($menu-config, menu_item_selected_tag);
+
+$menu_dropdown_tag: map-get($menu-config, menu_dropdown_tag);
+$menu_dropdown_open: map-get($menu-config, menu_dropdown_open);
+$menu_dropdown_close: map-get($menu-config, menu_dropdown_close);
+
+@mixin buildMenu($mq_key) {
+  $class_name: if($mq_key, #{$menu_class_name}-#{$mq_key}, #{$menu_class_name});
+
+  #{$menu_class_name_short} {
+    &.#{$class_name} {
+      list-style: none;
+      list-style-type: none;
+
+
+      @each $orientation_key, $orientation in $orientations {
+
+        &-#{$orientation_key} {
+          padding: 0;
+          margin: 0;
+          line-height: var(--box-density-2);
+
+          & li.#{$menu_item_class_name},
+          li {
+            display: block;
+            margin: 0;
+            width: auto;
+            transition-property: all;
+            transition-duration: 0.15s;
+            padding: var(--box-density-1);
+            border-left: 1px solid var( --theme-color-border );
+
+            &:hover {
+              border-radius: var(--radius-small);
+              background-color: #ededed;
+              border-left: 1px solid var(--theme-color-primary);
+            }
+
+            &.active {
+              border-radius: var(--radius-small);
+              background-color: #ededed;
+              font-weight: bold;
+            }
+
+            &.menu-small {
+
+            }
+          }
+
+          & li {
+            list-style: none;
+          }
+        }
+      }
+
+      &-v {
+        & li.#{$menu_item_class_name},
+        li {
+          &.active {
+            font-weight: bold;
+            margin-left: 1rem;
+          }
+
+        }
+      }
+
+      &-h {
+        max-width: 100%;
+        display: inline-flex;
+        padding: 0 0;
+        position: relative;
+        border-bottom: 1px solid #ededed;
+        overflow-x: auto;
+        overflow-y: hidden;
+
+        & li.#{$menu_item_class_name},
+        li {
+          margin: 0;
+          text-align: center;
+        }
+      }
+    }
+  }
+}
+
+$menu-border-color: red;
+
+
+/* & li.#{$menu_item_class_name}{
+    dsp: none;
+}
+&-drop{
+    dsp: none;
+    & .#{$menu_class_name}-#{$menu_dropdown_open}{
+        dsp: none;
+        & li.#{$menu_item_class_name}, > li{
+            dsp: none;
+        }
+    }
+    & .#{$menu_class_name}-#{$menu_dropdown_close}{
+        dsp: none;
+        & li.#{$menu_item_class_name}, > li{
+            dsp: none;
+        }
+    }
+}*/

package/src/cssfabric/modules/menu/_menu-vars.scss

@@ -0,0 +1,29 @@
+$menu-metadata: (
+        title: menu,
+        tag: ul,
+        description: "cssfabric menu module to set menu style"
+);
+$menu-config: (
+        menu_class_name: menu,
+        menu_class_name_short: ul,
+        orientations: (
+                v: vertical,
+                h: horizontal
+        ),
+        menu_item_class_name: menu-item,
+        menu_item_class_name_short: li,
+        menu_item_disabled_tag: disabled,
+        menu_item_selected_tag: selected,
+        menu_dropdown_tag: drop,
+        menu_dropdown_open: open,
+        menu_dropdown_close: close
+);
+$menu-docs: (
+        attributes:(
+                menu:(tag: menu,
+                        keys:(h v)
+                )
+        )
+);
+
+

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

@@ -0,0 +1,19 @@
+
+@use '../../_utils';
+@use '_menu-build'as build;
+@use "../cssfabric-config";
+// load general config variables
+$config: cssfabric-config.$cssfabric-config;
+
+$_media_quey_sizes: map-get($config, media_quey_sizes);
+
+// builder responsive  
+$min_value: 0;
+
+@each $mq_size_key,
+$mq_size_value in $_media_quey_sizes {
+    @include utils.fabricResponsiveEncloser($mq_size_value, $min_value) {
+        @include build.buildMenu($mq_size_key);
+    }
+    $min_value: $mq_size_value;
+}

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

@@ -0,0 +1,6 @@
+
+// load scss config file
+@use 'menu-build' as build; 
+
+
+@include build.buildMenu(null)

package/src/cssfabric/modules/overflow/_overflow-build.scss

@@ -0,0 +1,22 @@
+
+@use 'overflow-vars';
+$overflow-config: overflow-vars.$overflow-config;
+// load scss config file
+@use '../../_utils'; 
+
+// read variables
+$overflow_props: map-get($overflow-config, overflow_props);
+$overflow_values: map-get($overflow-config, overflow_values);
+
+/* css overflow rules */
+@mixin buildOverflow($mq_size_key: null) {
+  @each $overflow_prop in $overflow_props {
+    $property_key: if($mq_size_key, #{$overflow_prop}-#{$mq_size_key}, #{$overflow_prop});
+
+    @each $overflow_value in $overflow_values {
+      .#{$property_key}-#{$overflow_value} {
+        overflow: $overflow_value;
+      }
+    }
+  }
+}

package/src/cssfabric/modules/overflow/_overflow-vars.scss

@@ -0,0 +1,31 @@
+$_overflow-values: (visible hidden clip scroll auto);
+$_overflow-shorthands: (visible: visible, hidden:hidden, clip:clip, scroll:scroll, _: auto);
+
+$overflow-metadata: (
+        title: overflow,
+        tag: flow,
+        description: "cssfabric overflow module to set overflow styles on all html elements"
+);
+$overflow-config: (
+        overflow_props: overflow overflow-x overflow-y,
+        overflow_values: $_overflow-values,
+        cssProps:(
+                overflow: $_overflow-shorthands
+        )
+);
+$overflow-docs: (
+        attributes:(
+                overflow:(
+                        tag:flow,
+                        keys: $_overflow-values
+                ),
+                overflowX:(
+                        tag:flowX,
+                        keys: $_overflow-values
+                ),
+                overflowY:(
+                        tag:flowY,
+                        keys: $_overflow-values
+                )
+        )
+);

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

@@ -0,0 +1,25 @@
+
+@use "sass:map";
+// load scss config file
+@use '../../_utils'; 
+@use '_overflow-build' as build;
+@use "../cssfabric-config";
+// load general config variables
+$config: cssfabric-config.$cssfabric-config;
+
+// load general config variables
+// media queries sizes, in rem
+$_media_quey_sizes: map-get($config, media_quey_sizes);
+
+ // builder responsive  
+$min_value: 0;
+
+@each $mq_size_key,
+$mq_size_value in $_media_quey_sizes {
+ 
+    @include utils.fabricResponsiveEncloser($mq_size_value,$min_value) {
+        @include build.buildOverflow($mq_size_key);
+    }
+    $min_value: $mq_size_value;
+} 
+ 

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

@@ -0,0 +1,7 @@
+
+// load scss config file
+@use '_overflow-build' as build;
+
+@include build.buildOverflow();
+ 
+ 

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

@@ -0,0 +1,142 @@
+@use 'scale-vars';
+@use '../../_utils';
+@use "sass:math";
+
+$_cfg: utils.get_fabric_conf();
+
+// read variables
+$_has_dimensions_strict: map-get($_cfg, has_dimensions_strict);
+$_has_dimensions_min: true; // map-get($_cfg, has_dimensions_min);
+$_has_dimensions_max: true; // map-get($_cfg, has_dimensions_max);
+
+$scale-defined-steps: scale-vars.$scale-defined-steps;
+$scale-defined-step-unit: scale-vars.$scale-defined-step-unit;
+$scale-defined-step-size: scale-vars.$scale-defined-step-size;
+$scale-grid-ratios-config: scale-vars.$scale-grid-ratios-config;
+
+$scale-sizes: scale-vars.$scale-sizes-config;
+$scale-content: scale-vars.$scale-content-config;
+
+$weight-config: scale-vars.$scale-font-weight-config ;
+$unit-tag-config: scale-vars.$scale-shorthands;
+$scale-sizes-preset-config: scale-vars.$scale-sizes-preset-config;
+
+/// css dimensions rules builder
+@mixin scale-classname-builder($scale_prop, $size_code, $size_value, $media_query_code) {
+
+  $scale_prop_short: map-get($unit-tag-config, $scale_prop);
+
+  $tag: if(
+                  $media_query_code,
+                  #{$scale_prop_short}-#{$media_query_code}-#{$size_code},
+                  #{$scale_prop_short}-#{$size_code}
+  );
+  .#{$tag} { // , .scale-#{$tag}
+    #{$scale_prop}: $size_value;
+
+    @if ($_has_dimensions_max) {
+      &-max {
+        max-#{$scale_prop}: $size_value;
+      }
+    }
+    @if ($_has_dimensions_min) {
+      &-min {
+        min-#{$scale_prop}: $size_value;
+      }
+    }
+    @if ($_has_dimensions_strict) {
+      &-strict {
+        #{$scale_prop}: $size_value;
+        max-#{$scale_prop}: $size_value;
+        min-#{$scale_prop}: $size_value;
+      }
+    }
+  }
+}
+
+// loop on shorthands // ok
+@mixin play_shorthand_loop($scale_prop, $mq_size_key) {
+  @each $scale_shorthand, $scale_shorthand_value in $scale-sizes {
+    @include scale-classname-builder(
+                    $scale_prop,
+                    $scale_shorthand,
+                    map-get($scale-sizes, $scale_shorthand),
+                    $mq_size_key
+    );
+  }
+}
+
+// content-max-min
+@mixin play_dimensions_loop($scale_prop, $mq_size_key) {
+  // loop on dimensions
+  @each $scale_css_key, $scale_css_value in $scale-content {
+    @include scale-classname-builder($scale_prop, $scale_css_key, $scale_css_value, $mq_size_key);
+  }
+}
+
+// loop on defined dimensions
+// w-* h-*
+// build ratio : w-n = n * $scale_defined_step_size
+@mixin play_defined_dimensions_loop($scale_prop, $mq_size_key) {
+  // loop on defined dimensions
+  // @each $scale_defined_size in $scale_defined_steps {
+  $loop_turn: 1;
+  $multiplier: $scale-defined-step-size;
+
+  @each $scale_defined_step in $scale-defined-steps {
+
+    $loop_turn: $loop_turn * $multiplier;
+
+    @include scale-classname-builder(
+                    $scale_prop,
+                    $scale_defined_step,
+                    $scale_defined_step + #{$scale-defined-step-unit},
+                    $mq_size_key
+    );
+  }
+}
+$--var-oi: yt;
+
+// loop on ratio dimensions
+@mixin play_ratio_dimensions_loop($scale_prop, $mq_size_key) {
+  // loop on ratio dimensions
+  @each $dimensions_grid_ratio in $scale-grid-ratios-config {
+    @for $z_value from 1 through $dimensions_grid_ratio {
+      @include scale-classname-builder(
+                      $scale_prop,
+                      $z_value + "-" + $dimensions_grid_ratio,
+                      (math.div($z_value , $dimensions_grid_ratio) * 100) +#{"%"},
+                      $mq_size_key
+      );
+    }
+  }
+}
+
+@mixin play_preset_loop($scale_prop, $mq_size_key) {
+
+  @each $preset, $value in $scale-sizes-preset-config {
+    @include scale-classname-builder(
+                    $scale_prop,
+                    $preset,
+                    $value + #{$scale-defined-step-unit},
+                    $mq_size_key
+    );
+  }
+}
+
+@mixin buildScale($mq_size_key:null) {
+  @each $scale_prop, $scale_prop_short in $unit-tag-config {
+    // loop on shorthands   mid tiers ...
+    @include play_shorthand_loop($scale_prop, $mq_size_key);
+
+    // loop on dimensions
+    @include play_dimensions_loop($scale_prop, $mq_size_key);
+
+    @include play_preset_loop($scale_prop, $mq_size_key);
+    // loop on defined dimensions
+    @include play_defined_dimensions_loop($scale_prop, $mq_size_key);
+
+    // loop on ratio dimensions
+    @include play_ratio_dimensions_loop($scale_prop, $mq_size_key);
+  }
+}

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

@@ -0,0 +1,84 @@
+@use '../../utils';
+@use "../cssfabric-config";
+
+$scale-sizes-config: (
+        full: 100%,
+        mid: 50%,
+        quarter: 25%,
+        tiers: 33%
+);
+$scale-content-config: (
+        content-max: max-content,
+        content-min: min-content
+);
+
+$scale-sizes-preset-config: (
+        tiny: 2,
+        small: 4,
+        medium: 8,
+        large: 16,
+        wide: 32,
+);
+
+$scale-grid-ratios-config: (16);
+
+$scale-defined-steps: (
+        1,
+        2,
+        4,
+        8,
+        16,
+        24,
+        32,
+        48,
+        64
+);
+
+$scale-shorthands: (
+        width: cssfabric-config.$scale-tag-width-shorthand,
+        height: cssfabric-config.$scale-tag-height-shorthand
+);
+
+$_cssProps: (
+        size: $scale-sizes-config,
+        content:$scale-content-config,
+        defined-steps: $scale-defined-steps
+);
+
+$scale-metadata: (
+        title: scale,
+        tag: scale,
+        description: "cssfabric scale module to set dimensions and ratios on all html elements"
+);
+
+$scale-font-weight-config: 1em;
+$scale-defined-step-size: 2;
+$scale-defined-step-unit: rem;
+
+$scale-config: (
+        weight-config: $scale-font-weight-config,
+        unit-tag-config: (
+                width: w,
+                height: h
+        ),
+        grid-ratios-config: $scale-grid-ratios-config,
+        defined-step-size: $scale-defined-step-size,
+        defined-step-unit: $scale-defined-step-unit,
+        defined-steps: $scale-defined-steps,
+        cssProps:$_cssProps
+);
+
+$scale-docs: (
+        attributes:(
+                scale: (
+                        tag: scale,
+                        keys: (w, h),
+                        levels:(
+                                _size : utils.getObjectKeys($scale-sizes-config),
+                                _content: utils.getObjectKeys($scale-content-config),
+                                _defined-steps: utils.getObjectKeys($scale-defined-steps),
+                                _grid-16: utils.getObjectKeys(utils.cssDimensionPropertyBuilder(h, 16)),
+                        )
+                )
+        )
+);

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

@@ -0,0 +1,23 @@
+
+// load scss config file
+@use '../../_utils';
+@use '_scale-build'as build;
+@use "../cssfabric-config";
+// load general config variables
+$config: cssfabric-config.$cssfabric-config;
+
+// load general config variables
+// media queries sizes, in rem
+$_media_quey_sizes: map-get($config, media_quey_sizes);
+
+// builder responsive 
+$min_value: 0;
+ 
+@each $mq_size_key,
+$mq_size_value in $_media_quey_sizes {
+    
+    @include utils.fabricResponsiveEncloser($mq_size_value,$min_value) {
+        @include build.buildScale($mq_size_key);
+    }
+    $min_value: $mq_size_value;
+}

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

@@ -0,0 +1,8 @@
+
+
+// load scss config file
+@use '../../_utils';
+@use '_scale-build'as build;
+
+// builder   
+@include build.buildScale(null);