@ws-serenity/sass-styling 1.2.0 → 2.0.0

package/lib/sass/styling.scss

@@ -1,55 +1,65 @@
-%__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;
+    }
+  }
+}
+
+/**
+ * миксин для выставление стилей по кол-ву дочерних эл-тов
+ * @param $childrenNumber - количество дочерних элементов.
+ */
+// выставление стилей по кол-ву дочерних эл-тов
+@mixin has-n-children($childrenNumber) {
+  &:has(> :nth-child(#{$childrenNumber}):last-child) {
+    @content;
+  }
+}

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,37 @@
-%__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;
+}
+
+%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/lib/side-effect/reset.scss

@@ -1,74 +1,74 @@
-* {
-  padding: 0;
-  margin: 0;
-  border: 0;
-}
-
-*, *::before, *::after {
-  box-sizing: border-box;
-}
-
-:focus, :active {
-  outline: none;
-}
-
-a {
-  text-decoration: none;
-}
-
-a:focus, a:active {
-  outline: none;
-}
-
-nav, footer, header, aside {
-  display: block;
-}
-
-html, body, #root {
-  overflow-x: hidden;
-  height: 100%;
-  width: 100%;
-  line-height: 1;
-  font-size: 14px;
-  text-size-adjust: 100%;
-  -webkit-tap-highlight-color: transparent;
-  scroll-behavior: smooth;
-  overscroll-behavior: none;
-}
-
-input, button, textarea {
-  font-family: inherit;
-  outline: none !important;
-  box-shadow: none;
-}
-
-input {
-  color: inherit;
-
-  &::-ms-clear {
-    display: none;
-  }
-}
-
-button::-moz-focus-inner {
-  padding: 0;
-  border: 0;
-}
-
-ul li {
-  list-style: none;
-}
-
-img {
-  vertical-align: top;
-}
-
-h1, h2, h3, h4, h5, h6 {
-  font-size: inherit;
-  font-weight: 400;
-}
-
-button {
-  background-color: inherit;
-  cursor: pointer;
-}
+* {
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+:focus, :active {
+  outline: none;
+}
+
+a {
+  text-decoration: none;
+}
+
+a:focus, a:active {
+  outline: none;
+}
+
+nav, footer, header, aside {
+  display: block;
+}
+
+html, body, #root {
+  overflow-x: hidden;
+  height: 100%;
+  width: 100%;
+  line-height: 1;
+  font-size: 14px;
+  text-size-adjust: 100%;
+  -webkit-tap-highlight-color: transparent;
+  scroll-behavior: smooth;
+  overscroll-behavior: none;
+}
+
+input, button, textarea {
+  font-family: inherit;
+  outline: none !important;
+  box-shadow: none;
+}
+
+input {
+  color: inherit;
+
+  &::-ms-clear {
+    display: none;
+  }
+}
+
+button::-moz-focus-inner {
+  padding: 0;
+  border: 0;
+}
+
+ul li {
+  list-style: none;
+}
+
+img {
+  vertical-align: top;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-size: inherit;
+  font-weight: 400;
+}
+
+button {
+  background-color: inherit;
+  cursor: pointer;
+}

package/package.json

@@ -1,17 +1,17 @@
-{
-  "name": "@ws-serenity/sass-styling",
-  "version": "1.2.0",
-  "description": "",
-  "directories": {
-    "lib": "lib"
-  },
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "peerDependencies": {
-    "sass": "^1.69.3"
-  },
-  "keywords": [],
-  "author": "",
-  "license": "ISC"
-}
+{
+  "name": "@ws-serenity/sass-styling",
+  "version": "2.0.0",
+  "description": "",
+  "directories": {
+    "lib": "lib"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "peerDependencies": {
+    "sass": "^1.69.3"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC"
+}

package/readme.md

@@ -1,92 +1,92 @@
-## About
-
-Библиотека базовых sass-стилей
-
-## Sass
-
-Папка не обладает сайд-эффектами, ее можно импортировать сколько угодно. 
-
-Общий импорт:
-```scss
-@import '@ws-serenity/sass-styling/lib/sass';
-```
-
-### Содержимое
-- `adaptive` - миксины для адаптива
-- `alignment` - размещение элементов (flex, margin-center,...)
-- `functions` - полезные sass-функции
-- `keyframes` - анимации
-- `styling` - внешний вид (максимальное скругление, background-alpha)
-- `svgUtils` - цвет и размер svg
-- `textUtils` - оверфлоу текста
-
-## Side-effect
-
-Импортировать эти файлы необходимо единожды! Иначе возникнет дублирование стилей
-
-## Generator
-
-### Палитры
-```scss
-@import '@ws-serenity/sass-styling/lib/generator/colors';
-
-// for $themes and $themes-config declaration check storybook
-
-@mixin create-css-themes-root() {
-  @each $theme-name, $theme in $themes {
-    $theme-colors: generate-theme-colors($theme, $theme-config);
-
-    &.#{$theme-name}-theme {
-      @each $color-name, $color-value in $theme-colors {
-        --#{$color-name}: #{$color-value}
-      }
-    }
-  }
-}
-```
-
-### Шрифтов
-
-```scss
-@import '@ws-serenity/sass-styling/lib/generator/fonts';
-
-// for full example check storybook
-
-:root {
-  // 1. declare css-vars
-  @include set-fonts-css-vars-by-map((
-    // @formatter:off
-          heading-1   50 bold      140% -0.03em,
-          body-1      18 regular   140% -0.03em,
-    // @formatter:on
-  ));
-
-  // 2. declare font and use in as placeholder, combined with mixin
-  %font-family-roboto {
-    font-family: 'Roboto', sans-serif;
-  }
-  @mixin use-font($name) {
-    @extend %font-family-roboto;
-    // 2.5 call special mixin from library, to set css-vars
-    @include use-css-vars-based-font($name);
-  }
-
-  // 3. declare placeholders and just use mixin above
-  %heading-1 {
-    @include use-font(heading-1);
-  }
-
-  %body-1 {
-    @include use-font(body-1);
-  }
-
-  // 4. declare the styles
-  .body-1 {
-    @extend %body-1;
-  }
-
-  .heading-1 {
-    @extend %heading-1;
-  }
-}
-```
+## About
+
+Библиотека базовых sass-стилей
+
+## Sass
+
+Папка не обладает сайд-эффектами, ее можно импортировать сколько угодно. 
+
+Общий импорт:
+```scss
+@import '@ws-serenity/sass-styling/lib/sass';
+```
+
+### Содержимое
+- `adaptive` - миксины для адаптива
+- `alignment` - размещение элементов (flex, margin-center, grid, ...)
+- `functions` - полезные sass-функции
+- `keyframes` - анимации
+- `styling` - внешний вид (максимальное скругление, background-alpha, ...)
+- `svgUtils` - цвет и размер svg
+- `textUtils` - оверфлоу текста
+
+## Side-effect
+
+Импортировать эти файлы необходимо единожды! Иначе возникнет дублирование стилей
+
+## Generator
+
+### Палитры
+```scss
+@import '@ws-serenity/sass-styling/lib/generator/colors';
+
+// for $themes and $themes-config declaration check storybook
+
+@mixin create-css-themes-root() {
+  @each $theme-name, $theme in $themes {
+    $theme-colors: generate-theme-colors($theme, $theme-config);
+
+    &.#{$theme-name}-theme {
+      @each $color-name, $color-value in $theme-colors {
+        --#{$color-name}: #{$color-value}
+      }
+    }
+  }
+}
+```
+
+### Шрифтов
+
+```scss
+@import '@ws-serenity/sass-styling/lib/generator/fonts';
+
+// for full example check storybook
+
+:root {
+  // 1. declare css-vars
+  @include set-fonts-css-vars-by-map((
+    // @formatter:off
+          heading-1   50 bold      140% -0.03em,
+          body-1      18 regular   140% -0.03em,
+    // @formatter:on
+  ));
+
+  // 2. declare font and use in as placeholder, combined with mixin
+  %font-family-roboto {
+    font-family: 'Roboto', sans-serif;
+  }
+  @mixin use-font($name) {
+    @extend %font-family-roboto;
+    // 2.5 call special mixin from library, to set css-vars
+    @include use-css-vars-based-font($name);
+  }
+
+  // 3. declare placeholders and just use mixin above
+  %heading-1 {
+    @include use-font(heading-1);
+  }
+
+  %body-1 {
+    @include use-font(body-1);
+  }
+
+  // 4. declare the styles
+  .body-1 {
+    @extend %body-1;
+  }
+
+  .heading-1 {
+    @extend %heading-1;
+  }
+}
+```