@ws-serenity/sass-styling 1.2.0 → 1.3.0

package/lib/sass/adaptive.scss

@@ -9,3 +9,47 @@
     @content;
   }
 }
+
+/**
+ * при использовании основного механизма ввода можно без труда навести указатель на элемент
+ * e.g. desktop
+ */
+@mixin device-with-hover {
+  @media (hover: hover) {
+    @content;
+  }
+}
+
+/**
+ * основной механизм ввода не позволяет навести указатель на элемент, или позволяет, но это не очень-то просто
+ * (например — для имитации наведения указателя на элемент используется длительное касание экрана)
+ * e.g. tablet, mobile
+ */
+@mixin device-without-hover {
+  @media (hover: none) {
+    @content;
+  }
+}
+
+/**
+ * стили для пользователей, включивших в системе параметр
+ * минимизации движения или анимаций (accessibility)
+ */
+@mixin prefers-reduced-motion {
+  @media (prefers-reduced-motion: reduce) {
+    @content;
+  }
+}
+
+/**
+ * touch-devices-friendly hover
+ * примененный hover-стиль будет работать только для устройств,
+ * которые полноценно поддерживают hover (e.g. desktop)
+ */
+@mixin hover-friendly {
+  @include device-with-hover {
+    &:hover {
+      @content;
+    }
+  }
+}

package/lib/sass/alignment.scss

@@ -38,6 +38,27 @@
   bottom: 0;
 }
 
+/**
+ * миксин для автоматической гернерации CSS Grid областей и классов
+ * на основе переданного grid-template-areas
+ *
+ * @param $grid-template-areas - строковое представление grid-областей
+ * строка или несколько строк, разделенные пробелом. допускается многострочная запись
+ * точка (.) обозначает пустую ячейку, класс для (.) не создается
+ * e.g.
+ * 'a b b . с с с'
+ *
+ * или
+ * 'a b b' '. с с с .'
+ *
+ * или
+ * 'a b b'
+ * '. с с с .'
+ *
+ * @param $isGlobal - управление скоупом (scope), в котором будут созданы классы
+ * false (по умолчанию) - создаются обычные CSS-классы
+ * true - глобальные классы через :global() (актуально для CSS Modules)
+ */
 @mixin grid-areas($grid-template-areas, $isGlobal:false) {
   display: grid;
   grid-template-areas: $grid-template-areas;
@@ -64,3 +85,43 @@
     }
   }
 }
+
+/**
+ * автоматическое проставление grid-areas дочерним элементам
+ * согласно переданного массива названий $grid-areas.
+ * удобно использовать, если элеметны рендерятся динамически
+ * и явно задать grid-area для каждого элемента не представляется возможным
+ *
+ * e.g.
+ * $grid-areas: a, b, c;
+ *
+ * .some-grid-class {
+ *  @include set-children-grid-areas($grid-areas);
+ *
+ *  grid-template-areas:
+ *   'a b'
+ *   'c c';
+ * }
+*/
+@mixin set-children-grid-areas($grid-areas) {
+  @for $i from 1 through length($grid-areas) {
+    > :nth-child(#{$i}) {
+      grid-area: nth($grid-areas, $i);
+    }
+  }
+}
+
+/**
+ * автоматическое удаление проставленных grid-areas дочерним эл-там
+ * согласно переданного массива названий $grid-areas.
+ * убирает проставленное свойство grid-template-areas у grid-контейнера
+*/
+@mixin unset-children-grid-areas($grid-areas) {
+  @for $i from 1 through length($grid-areas) {
+    > :nth-child(#{$i}) {
+      grid-area: unset !important;
+    }
+  }
+
+  grid-template-areas: initial;
+}

package/lib/sass/keyframes.scss

@@ -23,7 +23,7 @@ $default-shimmer-color: rgba(255, 255, 255, 0.5);
 }
 
 /**
-  * Миксин для создания эффекта пульсации (осцилляции) прозрачности элемента
+ * Миксин для создания эффекта пульсации (осцилляции) прозрачности элемента
  */
 // @formatter:off
 @keyframes oscillating {

package/lib/sass/styling.scss

@@ -53,3 +53,13 @@
   }
 }
 
+/**
+ * миксин для выставление стилей по кол-ву дочерних эл-тов
+ * @param $childrenNumber - количество дочерних элементов.
+ */
+// выставление стилей по кол-ву дочерних эл-тов
+@mixin has-n-children($childrenNumber) {
+  &:has(> :nth-child(#{$childrenNumber}):last-child) {
+    @content;
+  }
+}

package/lib/sass/textUtils.scss

@@ -17,3 +17,21 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
+
+%user-select-none {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+/**
+ * миксин для регулирования возможности выделять текст
+ * @param $value - none, text, all, auto (default)
+*/
+@mixin user-select($value: auto) {
+  -webkit-user-select: $value;
+  -moz-user-select: $value;
+  -ms-user-select: $value;
+  user-select: $value;
+}

package/package.json

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

package/readme.md

@@ -13,10 +13,10 @@
 
 ### Содержимое
 - `adaptive` - миксины для адаптива
-- `alignment` - размещение элементов (flex, margin-center,...)
+- `alignment` - размещение элементов (flex, margin-center, grid, ...)
 - `functions` - полезные sass-функции
 - `keyframes` - анимации
-- `styling` - внешний вид (максимальное скругление, background-alpha)
+- `styling` - внешний вид (максимальное скругление, background-alpha, ...)
 - `svgUtils` - цвет и размер svg
 - `textUtils` - оверфлоу текста