@medyll/cssfabric 0.0.10

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

@@ -0,0 +1,169 @@
+// load scss config file
+@use '../../_utils';
+@use '../cssfabric-config' as cssfabric-vars;
+@use 'flex-vars';
+
+$flex-config: flex-vars.$flex-config;
+$cssfabric-config: cssfabric-vars.$cssfabric-config;
+
+$sep: map-get($cssfabric-config, sep);
+// read variables
+$grid-code: map-get($flex-config, moduleNameShort);
+$grid-h: map-get($flex-config, horCode);
+$grid-v: map-get($flex-config, vertCode);
+
+$cssProps: map-get($flex-config, cssProps);
+$cssItemsProps: map-get($flex-config, cssItemsProps);
+
+$gridFullWidth: map-get($flex-config, gridFullWidth);
+
+$grow-shrink-steps: map-get($flex-config, grow-shrink-steps);
+
+$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};
+
+  %flex {
+    display: flex;
+  }
+
+  .#{$h_prop} {
+    display: flex;
+    flex-direction: row;
+
+    & > .#{$grid-code-sep}#{$gridFullWidth} {
+      flex: 1 1 0;
+    }
+
+    &.align-middle, &.#{$grid-code-sep}align-middle {
+      align-items: center;
+    }
+
+    &.align-top, &.#{$grid-code-sep}align-top {
+      align-items: flex-start;
+    }
+
+    &.align-left, &.#{$grid-code-sep}align-left {
+      // justify-content: flex-start;
+      align-items: flex-start;
+    }
+
+    &.align-right, &.#{$grid-code-sep}align-right {
+      justify-content: flex-end;
+      // align-items: end;
+    }
+
+    &.align-bottom, &.#{$grid-code-sep}align-bottom {
+      align-items: flex-end;
+    }
+
+    &.align-center, &.#{$grid-code-sep}align-center {
+      justify-content: center;
+    }
+
+    &.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 {
+      color: blue;
+      align-items: stretch;
+    }
+  }
+
+  .#{$v_prop} {
+    display: flex;
+    flex-direction: column;
+
+    & > .#{$grid-code-sep}#{$gridFullWidth} {
+      flex: 1 1 0;
+      max-height: 100%;
+    }
+
+    &.align-middle, &.#{$grid-code-sep}align-middle {
+      justify-content: center;
+    }
+
+    &.align-top, &.#{$grid-code-sep}align-top {
+      justify-content: flex-start;
+    }
+
+    &.align-left, &.#{$grid-code-sep}align-left {
+      align-items: flex-start;
+    }
+
+    &.align-right, &.#{$grid-code-sep}align-right {
+      align-items: flex-end;
+    }
+
+    &.align-bottom, &.#{$grid-code-sep}align-bottom {
+      justify-content: flex-end;
+    }
+
+    &.align-center, &.#{$grid-code-sep}align-center {
+      align-items: center;
+    }
+
+    &.align-middle-center, &.#{$grid-code-sep}align-middle-center {
+      align-items: center;
+      justify-content: center;
+    }
+
+    &.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;
+    }
+
+    @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;
+      }
+    }
+  }
+
+  /** 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);
+      }
+    }
+
+    // align-self rules for children */
+    & .self {
+      @each $fabricRule, $value in map-get($cssItemsProps, self) {
+        @include utils.fabricAttributes('&-', $fabricRule, 'align-self', $value);
+      }
+    }
+  }
+
+
+}

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

@@ -0,0 +1,87 @@
+@use '../../utils';
+
+
+$_grow-shrink-steps: 4;
+
+
+$_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
+        )
+);
+
+$flex-metadata: (
+        title: "flex",
+        tag: "flex",
+        description: "cssfabric flex system module"
+);
+
+$flex-config: (
+        moduleName: flex,
+        moduleNameShort: flex,
+        horCode: h,
+        vertCode: v,
+        gridFullWidth: main,
+        grow-shrink-steps:$_grow-shrink-steps,
+        cssProps: $_cssProps,
+        cssItemsProps: $_cssItemsProps
+);
+
+$flex-docs: (// add align-middle non generated className // grow + shrink
+        attributes:(
+                grid:(
+                        tag: flex,
+                        keys: (v, h),
+                        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 !"
+                ),
+                self:(
+                        tag: self,
+                        keys: utils.getObjectKeys(map-get($_cssItemsProps, self)),
+                        about: "grid children specific classnames"
+                )
+        )
+);

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

@@ -0,0 +1,25 @@
+
+
+// load scss config file
+@use '../../_utils';
+@use '_flex-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/flex/flex.scss

@@ -0,0 +1,3 @@
+@use '_flex-build' as build;
+
+@include build.makeGrid(null);

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

@@ -0,0 +1,91 @@
+// 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-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};
+
+  %flex {
+    display: grid; 
+  }
+
+  .#{$h_prop} {
+    display: grid;
+    flex-direction: row;
+
+    & > .#{$grid-code-sep}#{$gridFullWidth} {
+      flex: 1 1 0;
+    }
+
+
+  }
+
+  .#{$v_prop} {
+    display: grid;
+    flex-direction: column;
+
+    & > .#{$grid-code-sep}#{$gridFullWidth} {
+      flex: 1 1 0;
+      max-height: 100%;
+    }
+
+    &.align-middle, &.#{$grid-code-sep}align-middle {
+      justify-content: center;
+    }
+
+  }
+
+  .#{$h_prop},
+  .#{$v_prop} {
+
+    & > *:not(.#{$grid-code-sep}#{$gridFullWidth}) {
+      flex: 0 0 auto;
+    }
+
+    &.#{$grid-code-sep}inline {
+      display: inline-grid;
+    }
+
+  }
+
+  /** 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);
+      }
+    }
+
+    // align-self rules for children */
+    & .self {
+      @each $fabricRule, $value in map-get($cssItemsProps, self) {
+        @include utils.fabricAttributes('&-', $fabricRule, 'align-self', $value);
+      }
+    }
+  }
+
+
+}

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

@@ -0,0 +1,87 @@
+@use '../../utils';
+
+
+$_grow-shrink-steps: 4;
+
+
+$_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-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 !
+                          //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 !"
+                ),
+                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,3 @@
+@use '_grid-build' as build;
+
+@include build.makeGrid(null);

package/src/cssfabric/modules/main.scss

@@ -0,0 +1,3 @@
+@use 'box/box-build' as build;
+
+@include build.buildBox(null);

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

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

@@ -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,3 @@
+@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;
+      }
+    }
+  }
+}