beathers 5.7.6 → 5.9.1

package/scss/style/_dialog.scss

@@ -1,146 +1,147 @@
-@use '../settings/index' as settings;
-@use '../variables' as vars;
-
-// Definitions
-$useLoader: if(vars.$useLoader != null, vars.$useLoader, settings.$useLoader);
-
-
-$dialogInline: (
-  height: 100dvh,
-  transition: all 300ms ease-in-out,
-);
-
-$dialogBlock: (
-  transform: translateX(-50%),
-  max-width: 95%,
-  max-height: 95%,
-  transition: all 300ms ease-in-out,
-);
-
-$dialogCenter: (
-  transform: translate(-50%, -50%),
-  max-width: 95%,
-  max-height: 95%,
-  transition: all 300ms cubic-bezier(0, 2.5, 1, 1),
-);
-
-$dialogPositions: (
-  'top': (
-    origin: (
-      top: -150%,
-      left: 50%,
-    ),
-    active: (
-      top: 2.5%,
-    ),
-  ),
-  'bottom': (
-    origin: (
-      bottom: -150%,
-      left: 50%,
-    ),
-    active: (
-      bottom: 2.5%,
-    ),
-  ),
-  'left': (
-    origin: (
-      top: 0,
-      left: -100%,
-      right: unset,
-    ),
-    active: (
-      left: 0,
-    ),
-  ),
-  'start': (
-    origin: (
-      top: 0,
-      inset-inline-start: -100%,
-      inset-inline-end: unset,
-    ),
-    active: (
-      inset-inline-start: 0,
-    ),
-  ),
-  'right': (
-    origin: (
-      top: 0,
-      right: -100%,
-      left: unset,
-    ),
-    active: (
-      right: 0,
-    ),
-  ),
-  'end': (
-    origin: (
-      top: 0,
-      inset-inline-end: -100%,
-      inset-inline-start: unset,
-    ),
-    active: (
-      inset-inline-end: 0,
-    ),
-  ),
-  'center': (
-    origin: (
-      top: 150%,
-      left: 50%,
-    ),
-    active: (
-      top: 50%,
-    ),
-  ),
-);
-
-.dialog {
-  --dialog-width: 400px;
-  --dialog-min-width: 380px;
-
-  position: fixed;
-  border: unset;
-  overflow-y: auto;
-  z-index: 2000;
-  pointer-events: none;
-  opacity: 0;
-
-  &.active {
-    pointer-events: all;
-    opacity: 1;
-  }
-
-  @each $position, $modes in $dialogPositions {
-    &.#{$position} {
-      min-width: var(--dialog-min-width);
-
-      @if $position == 'center' {
-        @each $posProp, $posValue in $dialogCenter {
-          #{$posProp}: $posValue;
-        }
-      } @else if $position == 'left' or $position == 'right' or $position == 'start' or $position == 'end' {
-        @each $posProp, $posValue in $dialogInline {
-          #{$posProp}: $posValue;
-        }
-
-        width: var(--dialog-width);
-      } @else if $position == 'top' or $position == 'bottom' {
-        @each $posProp, $posValue in $dialogBlock {
-          #{$posProp}: $posValue;
-        }
-      }
-
-      @each $mode, $values in $modes {
-        @each $prop, $value in $values {
-          @if $mode == 'active' {
-            &.active {
-              #{$prop}: $value;
-            }
-          } @else {
-            #{$prop}: $value;
-          }
-        }
-      }
-    }
-  }
-}
+@use '../settings/index' as settings;
+@use '../variables' as vars;
+
+// Definitions
+$useLoader: if(
+  sass(vars.$useLoader != null): vars.$useLoader; else: settings.$useLoader
+);
+
+$dialogInline: (
+  height: 100dvh,
+  transition: all 300ms ease-in-out
+);
+
+$dialogBlock: (
+  transform: translateX(-50%),
+  max-width: 95%,
+  max-height: 95%,
+  transition: all 300ms ease-in-out
+);
+
+$dialogCenter: (
+  transform: translate(-50%, -50%),
+  max-width: 95%,
+  max-height: 95%,
+  transition: all 300ms cubic-bezier(0, 2.5, 1, 1)
+);
+
+$dialogPositions: (
+  'top': (
+    origin: (
+      top: -150%,
+      left: 50%
+    ),
+    active: (
+      top: 2.5%
+    )
+  ),
+  'bottom': (
+    origin: (
+      bottom: -150%,
+      left: 50%
+    ),
+    active: (
+      bottom: 2.5%
+    )
+  ),
+  'left': (
+    origin: (
+      top: 0,
+      left: -100%,
+      right: unset
+    ),
+    active: (
+      left: 0
+    )
+  ),
+  'start': (
+    origin: (
+      top: 0,
+      inset-inline-start: -100%,
+      inset-inline-end: unset
+    ),
+    active: (
+      inset-inline-start: 0
+    )
+  ),
+  'right': (
+    origin: (
+      top: 0,
+      right: -100%,
+      left: unset
+    ),
+    active: (
+      right: 0
+    )
+  ),
+  'end': (
+    origin: (
+      top: 0,
+      inset-inline-end: -100%,
+      inset-inline-start: unset
+    ),
+    active: (
+      inset-inline-end: 0
+    )
+  ),
+  'center': (
+    origin: (
+      top: 150%,
+      left: 50%
+    ),
+    active: (
+      top: 50%
+    )
+  )
+);
+
+.dialog {
+  --dialog-width: 400px;
+  --dialog-min-width: 380px;
+
+  position: fixed;
+  border: unset;
+  overflow-y: auto;
+  z-index: 2000;
+  pointer-events: none;
+  opacity: 0;
+
+  &.active {
+    pointer-events: all;
+    opacity: 1;
+  }
+
+  @each $position, $modes in $dialogPositions {
+    &.#{$position} {
+      min-width: var(--dialog-min-width);
+
+      @if $position == 'center' {
+        @each $posProp, $posValue in $dialogCenter {
+          #{$posProp}: $posValue;
+        }
+      } @else if $position == 'left' or $position == 'right' or $position == 'start' or $position == 'end' {
+        @each $posProp, $posValue in $dialogInline {
+          #{$posProp}: $posValue;
+        }
+
+        width: var(--dialog-width);
+      } @else if $position == 'top' or $position == 'bottom' {
+        @each $posProp, $posValue in $dialogBlock {
+          #{$posProp}: $posValue;
+        }
+      }
+
+      @each $mode, $values in $modes {
+        @each $prop, $value in $values {
+          @if $mode == 'active' {
+            &.active {
+              #{$prop}: $value;
+            }
+          } @else {
+            #{$prop}: $value;
+          }
+        }
+      }
+    }
+  }
+}

package/scss/style/_glass.scss

@@ -1,80 +1,98 @@
-@use 'sass:map';
-@use '../functions/colors' as colors;
-@use '../settings/index' as settings;
-@use '../settings/defaults' as defs;
-@use '../variables' as vars;
-
-// Definitions
-$useGlass: if(vars.$useGlass != null, vars.$useGlass, settings.$useGlass);
-$useColorsLightMode: if(vars.$useColorsLightMode != null, vars.$useColorsLightMode, settings.$useColorsLightMode);
-$useColorsDarkMode: if(vars.$useColorsDarkMode != null, vars.$useColorsDarkMode, settings.$useColorsDarkMode);
-$glassBlur: if(vars.$glassBlur != null, vars.$glassBlur, defs.$glassBlur);
-$glassColor: if(vars.$glassColor != null, vars.$glassColor, defs.$glassColor);
-$glassBorderThickness: if(vars.$glassBorderThickness != null, vars.$glassBorderThickness, defs.$glassBorderThickness);
-$glassBorder1Color: if(vars.$glassBorder1Color != null, vars.$glassBorder1Color, defs.$glassBorder1Color);
-$glassBorder2Color: if(vars.$glassBorder2Color != null, vars.$glassBorder2Color, defs.$glassBorder2Color);
-$glassLightAngle: if(vars.$glassLightAngle != null, vars.$glassLightAngle, defs.$glassLightAngle);
-
-@if $useGlass {
-  $glassColorLight: colors.hexToRgba(map.get($glassColor, 'light'), 0.15, 'Glass.light');
-  $glassColorDark: colors.hexToRgba(map.get($glassColor, 'dark'), 0.15, 'Glass.dark');
-  $glassBorder1ColorLight: colors.hexToRgba(map.get($glassBorder1Color, 'light'), 0.4, 'Glass.light');
-  $glassBorder1ColorDark: colors.hexToRgba(map.get($glassBorder1Color, 'dark'), 0.4, 'Glass.dark');
-  $glassBorder2ColorLight: colors.hexToRgba(map.get($glassBorder2Color, 'light'), 0.4, 'Glass.light');
-  $glassBorder2ColorDark: colors.hexToRgba(map.get($glassBorder2Color, 'dark'), 0.4, 'Glass.dark');
-
-  .bg\:glass {
-    position: relative;
-    isolation: isolate;
-    backdrop-filter: blur(var(--glass-blur, $glassBlur));
-
-    &::before {
-      content: '';
-      position: absolute;
-      inset: 0;
-      border-radius: inherit;
-      border: var(--glass-border-thickness, $glassBorderThickness) solid transparent;
-      mask:
-        linear-gradient(black, black) border-box,
-        linear-gradient(black, black) padding-box;
-      mask-composite: subtract;
-      z-index: -1;
-    }
-
-    @if ($useColorsLightMode) {
-      .light &,
-      .light\:#{&},
-      &.light {
-        background: var(--glass-color-light, $glassColorLight);
-
-        &::before {
-          background: linear-gradient(
-              var(--glass-light-angle, $glassLightAngle),
-              var(--glass-border-2-color-light, $glassBorder2ColorLight),
-              var(--glass-border-1-color-light, $glassBorder1ColorLight),
-              var(--glass-border-2-color-light, $glassBorder2ColorLight)
-            )
-            border-box;
-        }
-      }
-    }
-
-    @if ($useColorsDarkMode) {
-      .dark &,
-      .dark\:#{&},
-      &.dark {
-        background: var(--glass-color-dark, $glassColorDark);
-
-        &::before {
-          background: linear-gradient(
-              var(--glass-light-angle, $glassLightAngle),
-              var(--glass-border-2-color-dark, $glassBorder2ColorDark),
-              var(--glass-border-1-color-dark, $glassBorder1ColorDark),
-              var(--glass-border-2-color-dark, $glassBorder2ColorDark)
-            )
-            border-box;
-        }
-      }
-    }
-  }
-}
+@use 'sass:map';
+@use '../functions/colors' as colors;
+@use '../settings/index' as settings;
+@use '../settings/defaults' as defs;
+@use '../variables' as vars;
+
+// Definitions
+$useGlass: if(
+  sass(vars.$useGlass != null): vars.$useGlass; else: settings.$useGlass
+);
+$useColorsLightMode: if(
+  sass(vars.$useColorsLightMode != null): vars.$useColorsLightMode; else: settings.$useColorsLightMode
+);
+$useColorsDarkMode: if(
+  sass(vars.$useColorsDarkMode != null): vars.$useColorsDarkMode; else: settings.$useColorsDarkMode
+);
+$glassBlur: if(
+  sass(vars.$glassBlur != null): vars.$glassBlur; else: defs.$glassBlur
+);
+$glassColor: if(
+  sass(vars.$glassColor != null): vars.$glassColor; else: defs.$glassColor
+);
+$glassBorderThickness: if(
+  sass(vars.$glassBorderThickness != null): vars.$glassBorderThickness; else: defs.$glassBorderThickness
+);
+$glassBorder1Color: if(
+  sass(vars.$glassBorder1Color != null): vars.$glassBorder1Color; else: defs.$glassBorder1Color
+);
+$glassBorder2Color: if(
+  sass(vars.$glassBorder2Color != null): vars.$glassBorder2Color; else: defs.$glassBorder2Color
+);
+$glassLightAngle: if(
+  sass(vars.$glassLightAngle != null): vars.$glassLightAngle; else: defs.$glassLightAngle
+);
+
+@if $useGlass {
+  $glassColorLight: colors.hexToRgba(map.get($glassColor, 'light'), 0.15, 'Glass.light');
+  $glassColorDark: colors.hexToRgba(map.get($glassColor, 'dark'), 0.15, 'Glass.dark');
+  $glassBorder1ColorLight: colors.hexToRgba(map.get($glassBorder1Color, 'light'), 0.4, 'Glass.light');
+  $glassBorder1ColorDark: colors.hexToRgba(map.get($glassBorder1Color, 'dark'), 0.4, 'Glass.dark');
+  $glassBorder2ColorLight: colors.hexToRgba(map.get($glassBorder2Color, 'light'), 0.4, 'Glass.light');
+  $glassBorder2ColorDark: colors.hexToRgba(map.get($glassBorder2Color, 'dark'), 0.4, 'Glass.dark');
+
+  .bg\:glass {
+    position: relative;
+    isolation: isolate;
+    backdrop-filter: blur(var(--glass-blur, $glassBlur));
+
+    &::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      border-radius: inherit;
+      border: var(--glass-border-thickness, $glassBorderThickness) solid transparent;
+      mask:
+        linear-gradient(black, black) border-box,
+        linear-gradient(black, black) padding-box;
+      mask-composite: subtract;
+      z-index: -1;
+    }
+
+    @if ($useColorsLightMode) {
+      .light &,
+      .light\:#{&},
+      &.light {
+        background: var(--glass-color-light, $glassColorLight);
+
+        &::before {
+          background: linear-gradient(
+              var(--glass-light-angle, $glassLightAngle),
+              var(--glass-border-2-color-light, $glassBorder2ColorLight),
+              var(--glass-border-1-color-light, $glassBorder1ColorLight),
+              var(--glass-border-2-color-light, $glassBorder2ColorLight)
+            )
+            border-box;
+        }
+      }
+    }
+
+    @if ($useColorsDarkMode) {
+      .dark &,
+      .dark\:#{&},
+      &.dark {
+        background: var(--glass-color-dark, $glassColorDark);
+
+        &::before {
+          background: linear-gradient(
+              var(--glass-light-angle, $glassLightAngle),
+              var(--glass-border-2-color-dark, $glassBorder2ColorDark),
+              var(--glass-border-1-color-dark, $glassBorder1ColorDark),
+              var(--glass-border-2-color-dark, $glassBorder2ColorDark)
+            )
+            border-box;
+        }
+      }
+    }
+  }
+}