@ws-serenity/sass-styling 1.1.3 → 1.2.0

package/lib/sass/index.scss

@@ -4,3 +4,4 @@
 @import './styling';
 @import './svgUtils';
 @import './textUtils';
+@import './keyframes';

package/lib/sass/keyframes.scss

@@ -1,5 +1,14 @@
-@mixin shake-animation($color, $animation-duration, $animation-curve) {
-  animation: shake $animation-duration $animation-curve;
+$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 {
@@ -13,7 +22,9 @@
   // @formatter:on
 }
 
-
+/**
+  * Миксин для создания эффекта пульсации (осцилляции) прозрачности элемента
+ */
 // @formatter:off
 @keyframes oscillating {
   0% { opacity: 100%; }
@@ -21,3 +32,181 @@
   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

@@ -33,3 +33,23 @@
   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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ws-serenity/sass-styling",
-  "version": "1.1.3",
+  "version": "1.2.0",
   "description": "",
   "directories": {
     "lib": "lib"