beathers 5.7.6 → 5.9.1

package/scss/style/_grid.scss

@@ -1,95 +1,121 @@
-@use '../functions/mediaQueries' as mQ;
-@use '../settings/configs' as configs;
-@use '../functions/validations' as val;
-@use '../settings/index' as settings;
-@use '../functions/others' as func;
-@use '../variables' as vars;
-
-// Definitions
-$useGrid: if(vars.$useGrid != null, vars.$useGrid, settings.$useGrid);
-$useFlex: if(vars.$useFlex != null, vars.$useFlex, settings.$useFlex);
-$useGridMediaQueries: if(vars.$useGridMediaQueries != null, vars.$useGridMediaQueries, settings.$useGridMediaQueries);
-
-@if $useGrid {
-  .grid {
-    display: grid;
-
-    @include mQ.multiSizes($useGridMediaQueries) using ($size, $divider) {
-      @include func.gridDivision(column, $size, $divider);
-      @include func.gridDivision(row, $size, $divider);
-    }
-  }
-}
-
-@if $useFlex {
-  .flex {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-
-    @include mQ.multiSizes($useGridMediaQueries) using ($size, $divider) {
-      @each $property, $values in configs.$flexProperties {
-        // Validate parameters
-        $checkedProperty: val.listItem((flex-wrap, flex-direction), $property, 'flex.properties');
-
-        @each $value in $values {
-          // Validate parameters
-          $checkedProperty: val.listItem(
-            (wrap, nowrap, row, row-reverse, column, column-reverse),
-            $value,
-            'flex.properties.values'
-          );
-
-          $mainClass: if($size, #{$size}#{$divider}#{$value}, $value);
-
-          &.#{$mainClass} {
-            #{$property}: if($size, $value !important, $value);
-          }
-        }
-      }
-
-      &.flex-wrapper {
-        &.row,
-        &.row-reverse {
-          @include func.flexDivision(width, 'cols', $size, $divider);
-          @include func.flexDivision(width, 'col', $size, $divider);
-        }
-
-        &.column,
-        &.column-reverse {
-          @include func.flexDivision(height, 'rows', $size, $divider);
-          @include func.flexDivision(height, 'row', $size, $divider);
-        }
-      }
-    }
-  }
-}
-
-@if $useFlex or $useGrid {
-  @include mQ.multiSizes($useGridMediaQueries) using ($size, $divider) {
-    @each $way, $selections in configs.$justify {
-      @each $selection, $properties in $selections {
-        @each $property in $properties {
-          $mainClass: if($size, '#{$size}#{$divider}#{$way}-#{$selection}#{\:}', '#{$way}-#{$selection}#{\:}');
-
-          .#{$mainClass} {
-            $prefix: if($property == 'around' or $property == 'between' or $property == 'evenly', 'space-', '');
-            $flexPrefix: if($property == 'start' or $property == 'end', 'flex-', '');
-            $value: #{$prefix}#{$property};
-            $flexValue: #{$flexPrefix}#{$value};
-
-            &#{$property} {
-              &.flex,
-              &.d-flex,
-              &.d-inline-flex {
-                #{$way}-#{$selection}: if($size, $flexValue !important, $flexValue);
-              }
-
-              #{$way}-#{$selection}: if($size, $value !important, $value);
-            }
-          }
-        }
-      }
-    }
-  }
-}
+@use '../functions/mediaQueries' as mQ;
+@use '../settings/configs' as configs;
+@use '../functions/validations' as val;
+@use '../settings/index' as settings;
+@use '../functions/others' as func;
+@use '../variables' as vars;
+
+// Definitions
+$useGrid: if(
+  sass(vars.$useGrid != null): vars.$useGrid; else: settings.$useGrid
+);
+$useFlex: if(
+  sass(vars.$useFlex != null): vars.$useFlex; else: settings.$useFlex
+);
+$useGridMediaQueries: if(
+  sass(vars.$useGridMediaQueries != null): vars.$useGridMediaQueries; else: settings.$useGridMediaQueries
+);
+
+@if $useGrid {
+  .grid {
+    display: grid;
+
+    @include mQ.multiSizes($useGridMediaQueries) using ($size, $divider) {
+      @include func.gridDivision(column, $size, $divider);
+      @include func.gridDivision(row, $size, $divider);
+    }
+  }
+}
+
+@if $useFlex {
+  .flex {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+
+    @include mQ.multiSizes($useGridMediaQueries) using ($size, $divider) {
+      @each $property, $values in configs.$flexProperties {
+        // Validate parameters
+        $checkedProperty: val.listItem((flex-wrap, flex-direction), $property, 'flex.properties');
+
+        @each $value in $values {
+          // Validate parameters
+          $checkedProperty: val.listItem(
+            (wrap, nowrap, row, row-reverse, column, column-reverse),
+            $value,
+            'flex.properties.values'
+          );
+
+          $mainClass: if(
+            sass($size): #{$size}#{$divider}#{$value}; else: $value
+          );
+
+          &.#{$mainClass} {
+            @if ($size) {
+              #{$property}: $value !important;
+            } @else {
+              #{$property}: $value;
+            }
+          }
+        }
+      }
+
+      &.flex-wrapper {
+        &.row,
+        &.row-reverse {
+          @include func.flexDivision(width, 'cols', $size, $divider);
+          @include func.flexDivision(width, 'col', $size, $divider);
+        }
+
+        &.column,
+        &.column-reverse {
+          @include func.flexDivision(height, 'rows', $size, $divider);
+          @include func.flexDivision(height, 'row', $size, $divider);
+        }
+      }
+    }
+  }
+}
+
+@if $useFlex or $useGrid {
+  @include mQ.multiSizes($useGridMediaQueries) using ($size, $divider) {
+    @each $way, $selections in configs.$justify {
+      @each $selection, $properties in $selections {
+        @each $property in $properties {
+          $mainClass: if(
+            sass($size): '#{$size}#{$divider}#{$way}-#{$selection}#{\:}' ; else: '#{$way}-#{$selection}#{\:}'
+          );
+
+          .#{$mainClass} {
+            $prefix: if(
+              sass($property == 'around' or $property == 'between' or $property == 'evenly'): 'space-' ; else: ''
+            );
+            $flexPrefix: if(
+              sass($property == 'start' or $property == 'end'): 'flex-' ; else: ''
+            );
+            $value: #{$prefix}#{$property};
+            $flexValue: #{$flexPrefix}#{$value};
+
+            &#{$property} {
+              &.flex,
+              &.d-flex,
+              &.d-inline-flex {
+                @if ($size) {
+                  #{$way}-#{$selection}: $flexValue !important;
+                } @else {
+                  #{$way}-#{$selection}: $flexValue;
+                }
+              }
+
+              @if ($size) {
+                #{$way}-#{$selection}: $value !important;
+              } @else {
+                #{$way}-#{$selection}: $value;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/scss/style/_loader.scss

@@ -1,62 +1,74 @@
-@use '../settings/index' as settings;
-@use '../variables' as vars;
-@use '../settings/defaults' as defs;
-
-// Definitions
-$useLoader: if(vars.$useLoader != null, vars.$useLoader, settings.$useLoader);
-$useColorsLightMode: if(vars.$useColorsLightMode != null, vars.$useColorsLightMode, settings.$useColorsLightMode);
-$useColorsDarkMode: if(vars.$useColorsDarkMode != null, vars.$useColorsDarkMode, settings.$useColorsDarkMode);
-$loaderColorMain: if(vars.$loaderColorMain != null, vars.$loaderColorMain, defs.$loaderColorMain);
-$loaderColorSecond: if(vars.$loaderColorSecond != null, vars.$loaderColorSecond, defs.$loaderColorSecond);
-$loaderDuration: if(vars.$loaderDuration != null, vars.$loaderDuration, defs.$loaderDuration);
-
-@if $useLoader {
-  $colorMainLight: colors.hexToRgba(map.get($colorMain, 'light'), 0.4, 'Glass.light');
-  $colorMainDark: colors.hexToRgba(map.get($colorMain, 'dark'), 0.4, 'Glass.dark');
-  $colorSecondLight: colors.hexToRgba(map.get($colorSecond, 'light'), 0.4, 'Glass.light');
-  $colorSecondDark: colors.hexToRgba(map.get($colorSecond, 'dark'), 0.4, 'Glass.dark');
-
-  .skeleton {
-    $skeletonsVariants: (
-      'rounded': 8px,
-      'sharp': unset,
-      'circle': 100vw,
-      'square': 5px,
-      'text': 3px,
-    ) !default;
-
-    display: inline-block;
-    background: linear-gradient(
-      110deg,
-      var(--skeleton-main-color, $colorMainLight) 0%,
-      var(--skeleton-second-color, $colorSecondLight) 30%,
-      var(--skeleton-second-color, $colorSecondLight) 30%,
-      var(--skeleton-main-color, $colorMainLight) 100%
-    );
-    background-size: 200% 100%;
-    animation: var(--skeleton-duration, $loaderDuration) shine linear infinite;
-
-    @each $variant, $radius in $skeletonsVariants {
-      &.#{$variant} {
-        border-radius: $radius;
-        aspect-ratio: if($variant == 'circle' or $variant == 'square', 1, unset);
-      }
-    }
-
-    .dark & {
-      background: linear-gradient(
-        110deg,
-        var(--skeleton-main-color, $colorMainDark) 0%,
-        var(--skeleton-second-color, $colorSecondDark) 30%,
-        var(--skeleton-second-color, $colorSecondDark) 30%,
-        var(--skeleton-main-color, $colorMainDark) 100%
-      );
-    }
-
-    @keyframes shine {
-      to {
-        background-position-x: -200%;
-      }
-    }
-  }
-}
+@use '../settings/index' as settings;
+@use '../variables' as vars;
+@use '../settings/defaults' as defs;
+
+// Definitions
+$useLoader: if(
+  sass(vars.$useLoader != null): vars.$useLoader; else: settings.$useLoader
+);
+$useColorsLightMode: if(
+  sass(vars.$useColorsLightMode != null): vars.$useColorsLightMode; else: settings.$useColorsLightMode
+);
+$useColorsDarkMode: if(
+  sass(vars.$useColorsDarkMode != null): vars.$useColorsDarkMode; else: settings.$useColorsDarkMode
+);
+$loaderColorMain: if(
+  sass(vars.$loaderColorMain != null): vars.$loaderColorMain; else: defs.$loaderColorMain
+);
+$loaderColorSecond: if(
+  sass(vars.$loaderColorSecond != null): vars.$loaderColorSecond; else: defs.$loaderColorSecond
+);
+$loaderDuration: if(
+  sass(vars.$loaderDuration != null): vars.$loaderDuration; else: defs.$loaderDuration
+);
+
+@if $useLoader {
+  $colorMainLight: colors.hexToRgba(map.get($colorMain, 'light'), 0.4, 'Glass.light');
+  $colorMainDark: colors.hexToRgba(map.get($colorMain, 'dark'), 0.4, 'Glass.dark');
+  $colorSecondLight: colors.hexToRgba(map.get($colorSecond, 'light'), 0.4, 'Glass.light');
+  $colorSecondDark: colors.hexToRgba(map.get($colorSecond, 'dark'), 0.4, 'Glass.dark');
+
+  .skeleton {
+    $skeletonsVariants: (
+      'rounded': 8px,
+      'sharp': unset,
+      'circle': 100vw,
+      'square': 5px,
+      'text': 3px
+    ) !default;
+
+    display: inline-block;
+    background: linear-gradient(
+      110deg,
+      var(--skeleton-main-color, $colorMainLight) 0%,
+      var(--skeleton-second-color, $colorSecondLight) 30%,
+      var(--skeleton-second-color, $colorSecondLight) 30%,
+      var(--skeleton-main-color, $colorMainLight) 100%
+    );
+    background-size: 200% 100%;
+    animation: var(--skeleton-duration, $loaderDuration) shine linear infinite;
+
+    @each $variant, $radius in $skeletonsVariants {
+      &.#{$variant} {
+        border-radius: $radius;
+        aspect-ratio: if(sass($variant == 'circle' or $variant == 'square'): 1; else: unset);
+      }
+    }
+
+    .dark & {
+      background: linear-gradient(
+        110deg,
+        var(--skeleton-main-color, $colorMainDark) 0%,
+        var(--skeleton-second-color, $colorSecondDark) 30%,
+        var(--skeleton-second-color, $colorSecondDark) 30%,
+        var(--skeleton-main-color, $colorMainDark) 100%
+      );
+    }
+
+    @keyframes shine {
+      to {
+        background-position-x: -200%;
+      }
+    }
+  }
+}