@ws-serenity/sass-styling 1.1.4 → 1.2.0

package/lib/sass/alignment.scss

@@ -1,66 +1,66 @@
-@use 'sass:string';
-@use 'sass:list';
-
-%__flex {
-  display: flex;
-}
-
-%__flex-column {
-  flex-direction: column;
-}
-
-@mixin flex-column($gap:null) {
-  @extend %__flex;
-  @extend %__flex-column;
-
-  @if ($gap != null) {
-    row-gap: $gap;
-  }
-}
-
-@mixin flex($gap:null) {
-  @extend %__flex;
-
-  @if ($gap != null) {
-    column-gap: $gap;
-  }
-}
-
-%margin-center {
-  margin: 0 auto;
-}
-
-%absolute-stretch {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-}
-
-@mixin grid-areas($grid-template-areas, $isGlobal:false) {
-  display: grid;
-  grid-template-areas: $grid-template-areas;
-  // чтобы не дублировать стили храним массив созданных классов
-  $used: ();
-
-  @each $areaLine in $grid-template-areas {
-    $areas: string.split($areaLine, ' ');
-
-    @each $a in $areas {
-      @if not list.index($used, $a) and $a != '.' {
-        @if ($isGlobal) {
-          :global(.#{$a}) {
-            grid-area: string.unquote($a);
-          }
-        } @else {
-          .#{$a} {
-            grid-area: string.unquote($a);
-          }
-        }
-
-        $used: list.append($used, $a);
-      }
-    }
-  }
-}
+@use 'sass:string';
+@use 'sass:list';
+
+%__flex {
+  display: flex;
+}
+
+%__flex-column {
+  flex-direction: column;
+}
+
+@mixin flex-column($gap:null) {
+  @extend %__flex;
+  @extend %__flex-column;
+
+  @if ($gap != null) {
+    row-gap: $gap;
+  }
+}
+
+@mixin flex($gap:null) {
+  @extend %__flex;
+
+  @if ($gap != null) {
+    column-gap: $gap;
+  }
+}
+
+%margin-center {
+  margin: 0 auto;
+}
+
+%absolute-stretch {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+@mixin grid-areas($grid-template-areas, $isGlobal:false) {
+  display: grid;
+  grid-template-areas: $grid-template-areas;
+  // чтобы не дублировать стили храним массив созданных классов
+  $used: ();
+
+  @each $areaLine in $grid-template-areas {
+    $areas: string.split($areaLine, ' ');
+
+    @each $a in $areas {
+      @if not list.index($used, $a) and $a != '.' {
+        @if ($isGlobal) {
+          :global(.#{$a}) {
+            grid-area: string.unquote($a);
+          }
+        } @else {
+          .#{$a} {
+            grid-area: string.unquote($a);
+          }
+        }
+
+        $used: list.append($used, $a);
+      }
+    }
+  }
+}

package/lib/sass/functions.scss

@@ -1,3 +1,3 @@
-@function hex-to-rgba($hex, $alpha) {
-  @return rgba(red($hex), green($hex), blue($hex), $alpha);
-}
+@function hex-to-rgba($hex, $alpha) {
+  @return rgba(red($hex), green($hex), blue($hex), $alpha);
+}

package/lib/sass/index.scss

@@ -1,6 +1,7 @@
-@import './adaptive';
-@import './alignment';
-@import './functions';
-@import './styling';
-@import './svgUtils';
-@import './textUtils';
+@import './adaptive';
+@import './alignment';
+@import './functions';
+@import './styling';
+@import './svgUtils';
+@import './textUtils';
+@import './keyframes';

package/lib/sass/keyframes.scss

@@ -1,23 +1,212 @@
-@mixin shake-animation($color, $animation-duration, $animation-curve) {
-  animation: shake $animation-duration $animation-curve;
-
-  // @formatter:off
-  @keyframes shake {
-    // allow pass color
-    5%, 45% { transform: translate3d(-1px, 0, 0); }
-    10%, 40% { transform: translate3d(2px, 0, 0); }
-    20%, 80% { color: $color; }
-    15%, 25%, 35% { transform: translate3d(-4px, 0, 0); }
-    20%, 30% { transform: translate3d(4px, 0, 0); }
-  }
-  // @formatter:on
-}
-
-
-// @formatter:off
-@keyframes oscillating {
-  0% { opacity: 100%; }
-  50% { opacity: 50%; }
-  100% { opacity: 100%; }
-}
-// @formatter:on
+$default-animation-timing: ease-out;
+$default-shimmer-color: rgba(255, 255, 255, 0.5);
+
+/**
+ * Миксин для создания fade-анимаций с опциональным направлением.
+ * @param $color - цвет для анимации.
+ * @param $animation-duration - Длительность анимации.
+ * @param $animation-timing - Функция плавности (по умолчанию: ease-out)
+ */
+@mixin shake-animation($color, $animation-duration, $animation-timing: $default-animation-timing) {
+  animation: shake $animation-duration $animation-timing;
+
+  // @formatter:off
+  @keyframes shake {
+    // allow pass color
+    5%, 45% { transform: translate3d(-1px, 0, 0); }
+    10%, 40% { transform: translate3d(2px, 0, 0); }
+    20%, 80% { color: $color; }
+    15%, 25%, 35% { transform: translate3d(-4px, 0, 0); }
+    20%, 30% { transform: translate3d(4px, 0, 0); }
+  }
+  // @formatter:on
+}
+
+/**
+  * Миксин для создания эффекта пульсации (осцилляции) прозрачности элемента
+ */
+// @formatter:off
+@keyframes oscillating {
+  0% { opacity: 100%; }
+  50% { opacity: 50%; }
+  100% { opacity: 100%; }
+}
+// @formatter:on
+
+/**
+ * Миксин для создания keyframes с автоматической генерацией префиксов.
+ * @param $name - Название анимации.
+ * @content - Блок с ключевыми кадрами анимации.
+ */
+@mixin keyframes($name) {
+  @keyframes #{$name} {
+    @content;
+  }
+}
+
+/**
+ * Миксин для transition с настраиваемыми параметрами
+ * @param $animation-duration - Длительность анимации.
+ * @param $property - Свойство для анимации (по умолчанию: all)
+ * @param $animation-timing - Функция плавности (по умолчанию: ease-out)
+ */
+@mixin transition($animation-duration, $properties: all, $animation-timing: $default-animation-timing) {
+  @if type-of($properties) == 'list' {
+    transition: #{$properties} $animation-duration $animation-timing;
+  } @else {
+    transition: $properties $animation-duration $animation-timing;
+  }
+}
+
+/**
+ * Миксин для создания fade-анимаций с опциональным направлением.
+ * Генерирует анимации исчезновения/появления с перемещением или без.
+ * @param $animation-duration - Длительность анимации.
+ * @param $direction - Направление анимации (Up, Down или null для появления без смещения).
+ * @param $animation-distance - Расстояние смещения (e.g. 100%, 64px) при появлении.
+ * @param $animation-timing - Функция плавности (по умолчанию: ease-out)
+ * @param $start-opacity - Изначальная прозрачность (по умолчанию - 0)
+ * @param $end-opacity - Конечная прозрачность (по умолчанию - 1).
+ */
+@mixin fade-animation($animation-duration, $direction: null, $animation-distance: 100%, $animation-timing: $default-animation-timing, $start-opacity: 0, $end-opacity: 1) {
+  // Генерация имени анимации в зависимости от направления.
+  $animation-name: if($direction, fadeIn#{$direction}, fadeIn);
+
+  @include keyframes(#{$animation-name}) {
+    0% {
+      opacity: $start-opacity;
+      @if $direction == 'Up' {
+        transform: translate3d(0, $animation-distance, 0);
+      } @else if $direction == 'Down' {
+        transform: translate3d(0, calc(-1 * #{$animation-distance}), 0);
+      }
+    }
+
+    100% {
+      opacity: $end-opacity;
+      @if $direction {
+        transform: none;
+      }
+    }
+  }
+
+  animation: $animation-name $animation-duration $animation-timing;
+}
+
+/**
+ * Миксин для создания slide-анимаций с различными направлениями.
+ * @param $animation-duration - Длительность анимации.
+ * @param $direction - Направление движения (Left, Right, Up, Down).
+ * @param $animation-slide-offset - Расстояние смещения (e.g. 100%, 64px).
+ * @param $animation-timing - Функция плавности (по умолчанию: ease-out)
+ */
+@mixin slide-animation($animation-duration, $direction, $animation-slide-offset: 100%, $animation-timing: $default-animation-timing) {
+  $animation-name: slideIn#{$direction};
+
+  @include keyframes(#{$animation-name}) {
+    0% {
+      opacity: 0;
+      @if $direction == 'Left' {
+        transform: translate3d(calc(-1 * #{$animation-slide-offset}), 0, 0);
+      } @else if $direction == 'Right' {
+        transform: translate3d($animation-slide-offset, 0, 0);
+      } @else if $direction == 'Up' {
+        transform: translate3d(0, calc(-1 * #{$animation-slide-offset}), 0);
+      } @else if $direction == 'Down' {
+        transform: translate3d(0, $animation-slide-offset, 0);
+      }
+    }
+
+    100% {
+      opacity: 1;
+      transform: none;
+    }
+  }
+
+  animation: $animation-name $animation-duration $animation-timing;
+}
+
+/**
+ * Миксин для создания scale-анимации.
+ * @param $animation-duration - Длительность анимации.
+ * @param $values - Значения для трансформации.
+ * @param $animation-timing - Функция плавности (по умолчанию: ease-out)
+ */
+@mixin scale3d-animation($animation-duration, $scaleX, $scaleY: $scaleX, $scaleZ: $scaleX, $animation-timing: $default-animation-timing) {
+  @include keyframes(fadeInWithScale) {
+    0% {
+      opacity: 0;
+      transform: scale3d($scaleX, $scaleY, $scaleZ);
+    }
+
+    100% {
+      opacity: 1;
+      transform: none;
+    }
+  }
+
+  animation: fadeInWithScale $animation-duration $animation-timing;
+}
+
+/**
+ * Миксин для создания pulse-анимации.
+ * @param $animation-duration - Длительность анимации.
+ * @param $animation-timing - Функция плавности (по умолчанию: ease-out)
+ */
+@mixin pulse-animation($animation-duration: 1s, $animation-timing: $default-animation-timing) {
+  @include keyframes(pulse) {
+    0% {
+      opacity: 1;
+      filter: brightness(1);
+    }
+    50% {
+      opacity: 0.4;
+      filter: brightness(0.95);
+    }
+    100% {
+      opacity: 1;
+      filter: brightness(1);
+    }
+  }
+
+  animation: pulse $animation-duration $animation-timing infinite !important;
+}
+
+/**
+ * Миксин для создания эффекта "блика" (Shimmer/Skeleton).
+ * Создает псевдоэлемент ::after с градиентом, который пробегает по контейнеру.
+ *
+ * ВАЖНО: Родительский элемент должен иметь position: relative и overflow: hidden.
+ *
+ * @param $color - Цвет блика (по умолчанию полупрозрачный белый).
+ * @param $animation-duration - Длительность анимаци (по умолчанию 2s).
+ */
+@mixin shimmer-animation($color: $default-shimmer-color, $animation-duration: 2s) {
+  @include keyframes(shimmerSlide) {
+    0% {
+      transform: translateX(-100%);
+    }
+    100% {
+      transform: translateX(100%);
+    }
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+
+    background: linear-gradient(
+            90deg,
+            transparent 0%,
+            $color 50%,
+            transparent 100%
+    );
+
+    animation: shimmerSlide $animation-duration infinite;
+    pointer-events: none;
+  }
+}

package/lib/sass/styling.scss

@@ -1,55 +1,55 @@
-%__background-alpha {
-  &::before {
-    content: '';
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    left: 0;
-    z-index: -1;
-  }
-}
-
-@mixin background-alpha($color, $alpha) {
-  @extend %__background-alpha;
-
-  &::before {
-    background-color: $color;
-    opacity: $alpha;
-  }
-}
-
-%border-radius-max {
-  // таким образом получается добиться максимального радиуса скругления, а не круглого элемента
-  border-radius: 9999px;
-}
-
-%hide-scrollbar {
-  /* Hide scrollbar for Chrome, Safari and Opera */
-  &::-webkit-scrollbar {
-    display: none;
-  }
-
-  -ms-overflow-style: none; /* IE and Edge */
-  scrollbar-width: none; /* Firefox */
-}
-
-@mixin scrollbar($width, $track-color, $track-radius, $thumb-color, $thumb-color-hover, $thumb-radius) {
-  &::-webkit-scrollbar {
-    width: $width;
-  }
-
-  &::-webkit-scrollbar-track {
-    background-color: $track-color;
-    border-radius: $track-radius;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background-color: $thumb-color;
-    border-radius: $thumb-radius;
-
-    &:hover {
-      background-color: $thumb-color-hover;
-    }
-  }
-}
-
+%__background-alpha {
+  &::before {
+    content: '';
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    left: 0;
+    z-index: -1;
+  }
+}
+
+@mixin background-alpha($color, $alpha) {
+  @extend %__background-alpha;
+
+  &::before {
+    background-color: $color;
+    opacity: $alpha;
+  }
+}
+
+%border-radius-max {
+  // таким образом получается добиться максимального радиуса скругления, а не круглого элемента
+  border-radius: 9999px;
+}
+
+%hide-scrollbar {
+  /* Hide scrollbar for Chrome, Safari and Opera */
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+}
+
+@mixin scrollbar($width, $track-color, $track-radius, $thumb-color, $thumb-color-hover, $thumb-radius) {
+  &::-webkit-scrollbar {
+    width: $width;
+  }
+
+  &::-webkit-scrollbar-track {
+    background-color: $track-color;
+    border-radius: $track-radius;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: $thumb-color;
+    border-radius: $thumb-radius;
+
+    &:hover {
+      background-color: $thumb-color-hover;
+    }
+  }
+}
+

package/lib/sass/svgUtils.scss

@@ -1,14 +1,14 @@
-@mixin color-svg($color) {
-  color: $color;
-
-  svg {
-    fill: $color;
-  }
-}
-
-@mixin size-svg($height, $width: $height) {
-  svg {
-    height: $height;
-    width: $width;
-  }
-}
+@mixin color-svg($color) {
+  color: $color;
+
+  svg {
+    fill: $color;
+  }
+}
+
+@mixin size-svg($height, $width: $height) {
+  svg {
+    height: $height;
+    width: $width;
+  }
+}

package/lib/sass/textUtils.scss

@@ -1,19 +1,19 @@
-%__multiline-ellipsis-overflow {
-  display: -webkit-box;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  -webkit-box-orient: vertical;
-}
-
-@mixin multiline-ellipsis-overflow($lines-amount) {
-  @extend %__multiline-ellipsis-overflow;
-
-  -webkit-line-clamp: $lines-amount;
-  line-clamp: $lines-amount;
-}
-
-%text-overflow-ellipsis {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
+%__multiline-ellipsis-overflow {
+  display: -webkit-box;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-box-orient: vertical;
+}
+
+@mixin multiline-ellipsis-overflow($lines-amount) {
+  @extend %__multiline-ellipsis-overflow;
+
+  -webkit-line-clamp: $lines-amount;
+  line-clamp: $lines-amount;
+}
+
+%text-overflow-ellipsis {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}