beathers 5.6.2 → 5.7.0

package/scss/style/_dialog.scss

@@ -0,0 +1,146 @@
+@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;
+          }
+        }
+      }
+    }
+  }
+}

package/scss/style/_loader.scss

@@ -0,0 +1,61 @@
+@use '../settings/index' as settings;
+@use '../variables' as vars;
+
+// 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%;
+      }
+    }
+  }
+}

package/scss/style/_resets.scss

@@ -52,18 +52,6 @@ table {
   border-spacing: 0;
 }
 
-button {
-  cursor: pointer;
-  background: transparent;
-  border: none;
-}
-
-:focus,
-button:focus {
-  outline: unset;
-  box-shadow: unset;
-}
-
 fieldset {
   border: 0;
   margin: 0;