@medyll/cssfabric 0.1.12 → 0.2.0

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

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

@@ -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;
-}

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

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

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

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

@@ -1,30 +0,0 @@
-$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"
-                )
-        ));