@medyll/cssfabric 0.0.10

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,5 @@
+@use '_overflow-build' as build;
+
+@include build.buildOverflow();
+ 
+ 

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

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

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

@@ -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,3 @@
+@use '_scale-build'as build;
+
+@include build.buildScale(null);

package/src/cssfabric/modules/table/_table-build.scss

@@ -0,0 +1,134 @@
+@use 'table-vars';
+@use '../../_utils';
+
+$table-config: table-vars.$table-config;
+
+$TABLE_PREFIX: map-get($table-config, table_class_name);
+$TABLE_PREFIX_SHORT: map-get($table-config, table_class_name_short);
+
+$table_bg_color_head: map-get($table-config, table-bg-color-head);
+$table_bg_color_strip_main: map-get($table-config, table-bg-color-strip-main);
+$table_bg_color_strip_second: map-get($table-config, table-bg-color-strip-second);
+
+$table_border_color_header: map-get($table-config, table-border-color-header);
+$table_border_color_main: map-get($table-config, table-border-color-main);
+$table_border_color_second: map-get($table-config, table-border-color-second);
+
+//  .table-bg-strip-2
+@mixin bg-strip($prefix_short,$nb_strips) {
+  &.#{$prefix_short}-bg-strip-#{$nb_strips} {
+    @for $nb_strip from 1 through $nb_strips {
+      tr:nth-child(#{$nb_strips}n + #{$nb_strip}) td {
+        @if ($nb_strip==$nb_strips) {
+          background-color: #{$table_bg_color_strip_main};
+        }
+
+        @if ($nb_strips%2==1 and $nb_strip%2==0 and $nb_strips > 2 and $nb_strip !=$nb_strips) {
+          // border-bottom: 10px solid black;
+        }
+      }
+    }
+  }
+}
+
+// .table-sticky
+@mixin sticky($table_prefix_short) {
+  &.#{$table_prefix_short}-sticky {
+    position: relative;
+
+    thead tr,
+    .thead .tr {
+      position: static;
+
+      th,
+      .th {
+        background-color: #ededed;
+        position: sticky;
+        top: 0;
+      }
+    }
+  }
+}
+// -layout -h-line -v-line border
+@mixin fabric_table($mq_size_key: null) {
+  /** cssfabric : #{$TABLE_PREFIX_SHORT}*/
+  $prefix_short: if($mq_size_key, #{$TABLE_PREFIX_SHORT}-#{$mq_size_key}, $TABLE_PREFIX_SHORT);
+
+  .#{$TABLE_PREFIX} {
+    border-collapse: collapse;
+    border-spacing: 0;
+
+    thead,
+    .thead {
+      position: relative;
+      margin-bottom:2rem;
+    }
+
+    &.#{$prefix_short}-head thead tr th {
+      background-color: #{table_bg_color_head};
+    }
+
+    thead tr th,
+    .thead .tr .th {
+      padding: 0.5rem 0.25rem;
+      font-weight: normal;
+    }
+
+    tbody tr td,
+    .tbody .tr .td {
+      padding: 0.25em;
+    }
+
+    &.#{$prefix_short}-layout {
+      table-layout: fixed;
+    }
+
+    &.#{$prefix_short}-h-line {
+
+      th,
+      td,
+      .th,
+      .td {
+        border-bottom: 1px solid #{$table_border_color_main};
+      }
+
+      &:last-child {
+        border-bottom: none;
+      }
+    }
+
+    &.#{$prefix_short}-v-line tr th,
+    &.#{$prefix_short}-v-line tr td {
+      border-right: 1px solid #{$table_border_color_main};
+
+      &:last-child {
+        border-right: none;
+      }
+    }
+
+    &.#{$prefix_short}-border {
+      border: 1px solid #{$table_border_color_main};
+    }
+
+    &.#{$prefix_short}-shad {
+      thead tr th {
+        box-shadow: 4px 4px 8px #ccc;
+        z-index: 11;
+
+        &:last-child {
+          box-shadow: 4px 4px 8px #ccc;
+          z-index: -1;
+        }
+      }
+    }
+
+    @include bg-strip($prefix_short, 2);
+    @include bg-strip($prefix_short, 5);
+
+    @include sticky($prefix_short);
+  }
+}
+
+@mixin buildTable($mq_size_key: null) {
+  @include fabric_table($mq_size_key);
+}

package/src/cssfabric/modules/table/_table-vars.scss

@@ -0,0 +1,30 @@
+$table-metadata: (
+        title: table,
+        tag: table,
+        description: "cssfabric table module to set different table styles"
+);
+$table-config: (
+        className: table,
+        classNameShort: tbl,
+        table_class_name: table,
+        table_class_name_short: tbl,
+        table-bg-color-head: #f4f4f4,
+        table-bg-color-strip-main: #ededed,
+        table-bg-color-strip-second: #f5f5f5,
+        table-border-color-header: #ccc,
+        table-border-color-main: #ededed,
+        table-border-color-second: #f5f5f5
+);
+
+$table-docs: (
+        attributes:(
+                table: (
+                        tag: table,
+                        classNames:(
+                                "_": (bg-strip-2 bg-strip-5),
+                                "_pos": (sticky layout),
+                                "_deco": (h-line v-line border),
+                        ),
+                        about: "is a table"
+                )
+        ));

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

@@ -0,0 +1,24 @@
+
+// load scss config file
+@use '../../_utils';
+@use '_table-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.buildTable($mq_size_key);
+    }
+    $min_value: $mq_size_value; 
+}
+    

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

@@ -0,0 +1,3 @@
+@use '_table-build' as build;
+
+@include build.buildTable();

package/src/cssfabric/modules/text/_text-build.scss

@@ -0,0 +1,109 @@
+@use 'text-vars';
+@use "../cssfabric-config";
+@use '../../_utils';
+@use "sass:math";
+
+// load general config variables
+$cssfabric-config: cssfabric-config.$cssfabric-config;
+$sep: map-get($cssfabric-config, sep);
+
+$text-config: text-vars.$text-config;
+$moduleName: map-get($text-config, moduleName);
+$moduleNameShort: map-get($text-config, moduleNameShort);
+
+$cssProps: map-get($text-config, cssProps);
+$color-schemes: map-get($text-config, scheme);
+$color-palette-props: map-get($text-config, palette);
+
+$gray-list: map-get($text-config, gray);
+
+$textTransform: map-get($cssProps, textTransform);
+$fontWeight: map-get($cssProps, fontWeight);
+$textAlign: map-get($cssProps, textAlign);
+
+$font-size-unit-config: map-get($text-config, font-size-unit-config) !default;
+$font-size-h-steps: map-get($text-config, title-size-declination-config) !default;
+$font-size-h-max-config: map-get($text-config, font-sizes-h1-rem-config) !default;
+$font-size-h-min-config: map-get($text-config, font-size-h-min-rem-config) !default;
+
+$size-diff: $font-size-h-max-config - $font-size-h-min-config;
+$steps: $font-size-h-steps - 1;
+
+$step-size: math.div($size-diff, $steps);
+
+@mixin fabric_text($tag_short) {
+
+  $acc: 1 - $step-size ;
+
+  .#{$tag_short}-ellipsis {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+
+  @for $size-index from 1 through $font-size-h-steps {
+    //
+    $acc: (( $font-size-h-steps - $size-index) * $step-size) + 1;
+
+    .h#{$size-index},
+    h#{$size-index} {
+      font-size: var(--font-size-h#{$size-index});
+      line-height: 1.2;
+      font-weight: 400;
+    }
+  }
+
+  .#{$tag_short} {
+    @each $fabricRule, $value in $textTransform {
+      @include utils.fabricAttributes("&" + $sep, $fabricRule, "text-transform", $value);
+    }
+
+    @each $fabricRule, $value in $textAlign {
+      @include utils.fabricAttributes("&" + $sep, $fabricRule, "text-align", $value);
+    }
+
+    @each $fabricRule, $value in $fontWeight {
+      @include utils.fabricAttributes("&" + $sep, $fabricRule, "font-weight", var(--font-weight-#{$fabricRule}));
+    }
+
+    // text shadows color_schemes
+    @each $fabricRule, $value in $color-schemes {
+      @include utils.fabricAttributes("&" + $sep + shad + $sep, $fabricRule, "text-shadow",  var(--text-shadow-#{$fabricRule}));
+    }
+
+    // text shadows color_palette_props
+    @each $fabricRule, $value in $color-palette-props {
+      @include utils.fabricAttributes("&" + $sep+ shad + $sep, $fabricRule, "text-shadow", var(--text-shadow-#{$fabricRule}));
+    }
+  }
+}
+
+@mixin textCssVars() {
+  /*Hs*/
+  @for $size-index from 1 through $font-size-h-steps {
+    $acc: (( $font-size-h-steps - $size-index) * $step-size) + 1;
+    --font-size-h#{$size-index}: #{$acc + $font-size-unit-config};
+  }
+  /*weight*/
+  @each $fabricRule, $value in $fontWeight {
+    --font-weight-#{$fabricRule}: #{$value};
+  }
+  /*text shadows color_schemes*/
+  @each $fabricRule, $value in $color-schemes {
+    $cast-value: 0 0 0.125em #{$value};
+    --text-shadow-#{$fabricRule}: #{$cast-value};
+  }
+  /*text-shadows color_palette */
+  @each $fabricRule, $value in $color-palette-props {
+    $cast-value: 0 0 0.125em #{$value};
+    --text-shadow-#{$fabricRule}: #{$cast-value};
+  }
+}
+
+
+@mixin buildText($mq_size_key: null) {
+
+  $property_key: if($mq_size_key, #{$moduleNameShort}-#{$mq_size_key}, #{$moduleNameShort});
+
+  @include fabric_text($property_key);
+}

package/src/cssfabric/modules/text/_text-vars.scss

@@ -0,0 +1,87 @@
+@use '../../_utils';
+
+$cssProps: (
+        text-transform: (
+                cap: capitalize,
+                up: uppercase,
+                low: lowercase,
+                none: none,
+                full: full-width
+        ),
+        font-weight: (
+                50: 50,
+                100: 100,
+                300: 400,
+                500: 500,
+                900: 900,
+                light: lighter,
+                cap: normal,
+                bold: bold,
+                bolder: bolder
+        ),
+        text-align: (
+                l: left,
+                r: right,
+                center: center,
+                justify: justify
+        ),
+        text-shadow: (
+                palette:(primary, secondary)
+        )
+);
+
+$text-metadata: (
+        title: text,
+        tag: text,
+        description: "cssfabric text module to set text style on all html elements"
+);
+
+$text-config: (
+        moduleName: text,
+        moduleNameShort: text,
+        title-size-declination-config: 6,
+        font-size-unit-config: rem,
+        font-sizes-h1-rem-config: 3.1,
+        font-size-h-min-rem-config: 1,
+        text-ellipsis-tag-config: ellipsis,
+        cssProps: (
+                textTransform: (
+                        cap: capitalize,
+                        up: uppercase,
+                        low: lowercase,
+                        none: none,
+                        full: full-width
+                ),
+                fontWeight: map-get($cssProps, "font-weight"),
+                textAlign: map-get($cssProps, "text-align")
+        ),
+        scheme: utils.get_fabric_conf(scheme),
+        palette: utils.get_fabric_conf(palette),
+        gray: utils.get_fabric_conf(gray)
+);
+
+$text-docs: (
+        attributes: (
+                text-transform: (
+                        tag: text,
+                        keys: utils.getObjectKeys(map-get($cssProps, text-transform))
+                ),
+                font-weight: (
+                        tag: text,
+                        keys: utils.getObjectKeys(map-get($cssProps, font-weight))
+                ),
+                text-align: (
+                        tag: text,
+                        keys: utils.getObjectKeys(map-get($cssProps, text-align))
+                ),
+                text-shadow: (
+                        tag: text-shad,
+                        keys: utils.getObjectKeys(map-get($cssProps, text-shadow))
+                )
+        ),
+        classNames: (
+                "_": (
+                      et:  "ellipsis"
+                )
+        )
+);