@medyll/cssfabric 0.1.0 → 0.2.0

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

@@ -1,84 +0,0 @@
-// load scss config file
-@use '../../_utils';
-@use '../cssfabric-config';
-@use 'grid-vars';
-
-$grid-config: grid-vars.$grid-config;
-$cssfabric-config: cssfabric-config.$cssfabric-config;
-
-$sep: map-get($cssfabric-config, sep);
-// read variables
-$grid-code: map-get($grid-config, moduleNameShort);
-$grid-h: map-get($grid-config, horCode);
-$grid-v: map-get($grid-config, vertCode);
-
-$cssProps: map-get($grid-config, cssProps);
-$cssItemsProps: map-get($grid-config, cssItemsProps);
-
-$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) {
-  $prefix: if($mqKey, #{$grid-code}-#{$mqKey}, #{$grid-code});
-  $h_prop: #{$prefix}#{$sep}#{$grid-h};
-  $v_prop: #{$prefix}#{$sep}#{$grid-v};
-
-  .#{$grid-code} {
-    display: grid;
-    &-auto-flow-cols {
-      grid-auto-flow: column;
-    }
-    &-auto-cols-auto {
-      grid-auto-columns: auto;
-    }
-    &-auto-cols-min	 {
-      grid-auto-columns: min-content;
-    }
-    &-auto-cols-max {
-      grid-auto-columns: max-content;
-    }
-    &-auto-cols {
-      grid-auto-columns: minmax(0, 1fr);
-    }
-
-    &-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);
-    }
-
-
-  }
-
-  .#{$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));
-    }
-  }
-  /* 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

@@ -1,88 +0,0 @@
-@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

@@ -1,25 +0,0 @@
-
-
-// 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

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

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

@@ -1,119 +0,0 @@
-@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: 1rem;
-
-          & li.#{$menu_item_class_name},
-          li {
-            display: block;
-            margin: 0 1rem;
-            width: auto;
-            transition-property: all;
-            transition-duration: 0.5s;
-            padding: 1rem;
-
-            &:hover {
-              border-radius: 4px;
-              background-color: #ededed;
-              // text-align: center;
-            }
-
-            &.active {
-              border-radius: 4px;
-              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

@@ -1,29 +0,0 @@
-$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

@@ -1,19 +0,0 @@
-
-@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

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

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

@@ -1,22 +0,0 @@
-
-@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

@@ -1,31 +0,0 @@
-$_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

@@ -1,25 +0,0 @@
-
-@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

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

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

@@ -1,129 +0,0 @@
-@use 'scale-vars';
-@use '../../_utils';
-@use "sass:math";
-
-$scale-config: scale-vars.$scale-config;
-$_cfg: utils.get_fabric_conf();
-$cssProps: map-get($scale-config, cssProps);
-
-// 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: map-get($scale-config, defined-steps);
-$scale-defined-step-unit: map-get($scale-config, defined-step-unit);
-$scale-defined-step-size: map-get($scale-config, defined-step-size);
-$scale-grid-ratios-config: map-get($scale-config, grid-ratios-config);
-
-$scale-sizes: map-get($cssProps, size);
-$scale-content: map-get($cssProps, content);
-
-$weight-config: map-get($scale-config, weight-config)!default;
-$unit-tag-config: map-get($scale-config, unit-tag-config)!default;
-
-/// 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
-    );
-  }
-}
-
-// loop on dimensions
-@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
-    );
-  }
-}
-
-// 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 buildScale($mq_size_key:null) {
-  @each $scale_prop, $scale_prop_short in $unit-tag-config {
-    // loop on shorthands
-    @include play_shorthand_loop($scale_prop, $mq_size_key);
-
-    // loop on dimensions
-    @include play_dimensions_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

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

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

@@ -1,23 +0,0 @@
-
-// 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;
-}