@epam/assets 4.11.0 → 4.12.4

package/less/typography.less

@@ -1,196 +1,196 @@
-@import './loveship-colors.less';
-@import './fonts.less';
-
-.overflow-ellipsis() {
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.typography-header() {
-    :global(.hero-header), h1, h2, h3, h4, h5, h6 {
-        margin: 0;
-    }
-
-    :global(.hero-header), h2 {
-        font-family: @font-sans-bold;
-    }
-
-    h3, h4, h5, h6 {
-        font-family: @font-sans-semibold;
-    }
-
-    h4, h5, h6 {
-        margin: 12px 0;
-        line-height: 24px;
-    }
-
-    :global(.hero-header) {
-        margin: 30px 0;
-        font-size: 72px;
-        line-height: 72px;
-    }
-
-    h1 {
-        margin: 24px 0;
-        font-size: 42px;
-        line-height: 48px;
-    }
-
-    h2 {
-        margin: 18px 0;
-        font-size: 30px;
-        line-height: 36px;
-    }
-
-    h3 {
-        margin: 12px 0;
-        font-size: 24px;
-        line-height: 30px;
-    }
-
-    h4 {
-        font-size: 18px;
-    }
-
-    h5 {
-        font-size: 16px;
-    }
-
-    h6 {
-        font-size: 14px;
-    }
-}
-
-.typography-inline() {
-    b, strong {
-        font-family: @font-sans-semibold;
-    }
-
-    i, em {
-        font-family: @font-sans-italic;
-    }
-
-    a {
-        display: inline-flex;
-        align-items: center;
-        color: @sky;
-
-        &:hover {
-            text-decoration: none;
-            color: darken(@sky, 10%);
-        }
-    }
-
-    code {
-        margin: 0 4px;
-        padding: 2px 4px;
-        color: @night50;
-        background-color: @night700;
-        border-radius: 3px;
-        font-family: @font-roboto-mono;
-        white-space: pre-wrap;
-        word-wrap: normal;
-    }
-}
-
-.typography-block() {
-    p {
-        margin: 12px 0;
-    }
-
-    ol, ul {
-        padding: 0;
-        margin-block-start: 0;
-        margin-block-end: 0;
-
-        ol, ul {
-            margin-left: 18px;
-        }
-    }
-
-    li {
-        // padding-top: 3px;
-        // padding-bottom: 3px;
-    }
-
-    ul li {
-        margin-left: 18px;
-    }
-
-    ol li {
-        margin-left: 14px;
-    }
-
-    pre {
-        margin: 12px 0;
-        padding: 12px 18px;
-        color: @night50;
-        background-color: @night700;
-        border-radius: 3px;
-        font-family: monospace;
-        white-space: pre-wrap;
-        word-wrap: normal;
-    }
-
-    figure {
-        margin: 12px 0;
-    }
-}
-
-.typography-12() {
-    font-size: 12px;
-    line-height: 18px;
-
-    b, strong {
-        color: @night900;
-    }
-
-    p {
-        margin: 6px 0;
-    }
-}
-
-.typography-14() {
-    font-size: 14px;
-    line-height: 24px;
-}
-
-.typography-16() {
-    font-size: 16px;
-    line-height: 24px;
-}
-
-:local(.typography-header) {
-    .typography-header();
-}
-
-:local(.typography-block) {
-    .typography-block();
-}
-
-:local(.typography-inline) {
-    .typography-inline();
-}
-
-:local(.typography-16) {
-    .typography-16();
-}
-
-:local(.typography-14) {
-    .typography-14();
-}
-
-:local(.typography-12) {
-    .typography-12();
-}
-
-:local(.typography-loveship) {
-    font-family: @font-sans;
-    color: @night700;
-    composes: typography-header;
-    composes: typography-block;
-    composes: typography-inline;
-}
-
-
-
+@import './loveship-colors.less';
+@import './fonts.less';
+
+.overflow-ellipsis() {
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.typography-header() {
+    :global(.hero-header), h1, h2, h3, h4, h5, h6 {
+        margin: 0;
+    }
+
+    :global(.hero-header), h2 {
+        font-family: @font-sans-bold;
+    }
+
+    h3, h4, h5, h6 {
+        font-family: @font-sans-semibold;
+    }
+
+    h4, h5, h6 {
+        margin: 12px 0;
+        line-height: 24px;
+    }
+
+    :global(.hero-header) {
+        margin: 30px 0;
+        font-size: 72px;
+        line-height: 72px;
+    }
+
+    h1 {
+        margin: 24px 0;
+        font-size: 42px;
+        line-height: 48px;
+    }
+
+    h2 {
+        margin: 18px 0;
+        font-size: 30px;
+        line-height: 36px;
+    }
+
+    h3 {
+        margin: 12px 0;
+        font-size: 24px;
+        line-height: 30px;
+    }
+
+    h4 {
+        font-size: 18px;
+    }
+
+    h5 {
+        font-size: 16px;
+    }
+
+    h6 {
+        font-size: 14px;
+    }
+}
+
+.typography-inline() {
+    b, strong {
+        font-family: @font-sans-semibold;
+    }
+
+    i, em {
+        font-family: @font-sans-italic;
+    }
+
+    a {
+        display: inline-flex;
+        align-items: center;
+        color: @sky;
+
+        &:hover {
+            text-decoration: none;
+            color: darken(@sky, 10%);
+        }
+    }
+
+    code {
+        margin: 0 4px;
+        padding: 2px 4px;
+        color: @night50;
+        background-color: @night700;
+        border-radius: 3px;
+        font-family: @font-roboto-mono;
+        white-space: pre-wrap;
+        word-wrap: normal;
+    }
+}
+
+.typography-block() {
+    p {
+        margin: 12px 0;
+    }
+
+    ol, ul {
+        padding: 0;
+        margin-block-start: 0;
+        margin-block-end: 0;
+
+        ol, ul {
+            margin-left: 18px;
+        }
+    }
+
+    li {
+        // padding-top: 3px;
+        // padding-bottom: 3px;
+    }
+
+    ul li {
+        margin-left: 18px;
+    }
+
+    ol li {
+        margin-left: 14px;
+    }
+
+    pre {
+        margin: 12px 0;
+        padding: 12px 18px;
+        color: @night50;
+        background-color: @night700;
+        border-radius: 3px;
+        font-family: monospace;
+        white-space: pre-wrap;
+        word-wrap: normal;
+    }
+
+    figure {
+        margin: 12px 0;
+    }
+}
+
+.typography-12() {
+    font-size: 12px;
+    line-height: 18px;
+
+    b, strong {
+        color: @night900;
+    }
+
+    p {
+        margin: 6px 0;
+    }
+}
+
+.typography-14() {
+    font-size: 14px;
+    line-height: 24px;
+}
+
+.typography-16() {
+    font-size: 16px;
+    line-height: 24px;
+}
+
+:local(.typography-header) {
+    .typography-header();
+}
+
+:local(.typography-block) {
+    .typography-block();
+}
+
+:local(.typography-inline) {
+    .typography-inline();
+}
+
+:local(.typography-16) {
+    .typography-16();
+}
+
+:local(.typography-14) {
+    .typography-14();
+}
+
+:local(.typography-12) {
+    .typography-12();
+}
+
+:local(.typography-loveship) {
+    font-family: @font-sans;
+    color: @night700;
+    composes: typography-header;
+    composes: typography-block;
+    composes: typography-inline;
+}
+
+
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@epam/assets",
-  "version": "4.11.0",
+  "version": "4.12.4",
   "description": "EPAM Assets Library",
   "author": "EPAM",
   "license": "MIT",
@@ -15,7 +15,7 @@
     "type": "git",
     "url": "https://github.com/epam/UUI"
   },
-  "gitHead": "973384e2541379fc00068483e742a5efa74f1cbd",
+  "gitHead": "2827e13063c9f511f9fd4d946d4c9565494c6737",
   "publishConfig": {
     "directory": "build"
   }

package/readme.md

@@ -1,7 +1,7 @@
-# UUI Assets package
-
-This package is a part of [EPAM UUI](https://github.com/epam/UUI) library.
-
-@epam/assets contains variety of assets, which are usable without React:
-- icons set
+# UUI Assets package
+
+This package is a part of [EPAM UUI](https://github.com/epam/UUI) library.
+
+@epam/assets contains variety of assets, which are usable without React:
+- icons set
 - SCSS and LESS styles and mixins

package/scss/contrast.scss

@@ -1,39 +1,39 @@
-@use "sass:math";
-
-@function pow($base, $exponent) {
-    $result: 1;
-    @for $_ from 1 through $exponent {
-        $result: $result * $base;
-    }
-
-    @return $result;
-}
-
-@function de-gamma($n) {
-    @if $n <= 0.03928 {
-        @return math.div($n, 12.92);
-    } @else {
-        @return pow(math.div(($n + 0.055), 1.055), 2);
-    }
-}
-
-@function brightness($c) {
-    $rlin: de-gamma(math.div(red($c), 255));
-    $glin: de-gamma(math.div(green($c), 255));
-    $blin: de-gamma(math.div(blue($c), 255));
-    @return (0.2126 * $rlin + 0.7152 * $glin + 0.0722 * $blin) * 100;
-}
-
-@function contrast($color, $dark: #000000, $light: #FFFFFF) {
-    @if $color == null {
-        @return null;
-    }
-
-    @else {
-        $color-brightness: brightness($color);
-        $light-text-brightness: brightness($light);
-        $dark-text-brightness: brightness($dark);
-
-        @return if(abs($color-brightness - $light-text-brightness) > abs($color-brightness - $dark-text-brightness), $light, $dark);
-    }
-}
+@use "sass:math";
+
+@function pow($base, $exponent) {
+    $result: 1;
+    @for $_ from 1 through $exponent {
+        $result: $result * $base;
+    }
+
+    @return $result;
+}
+
+@function de-gamma($n) {
+    @if $n <= 0.03928 {
+        @return math.div($n, 12.92);
+    } @else {
+        @return pow(math.div(($n + 0.055), 1.055), 2);
+    }
+}
+
+@function brightness($c) {
+    $rlin: de-gamma(math.div(red($c), 255));
+    $glin: de-gamma(math.div(green($c), 255));
+    $blin: de-gamma(math.div(blue($c), 255));
+    @return (0.2126 * $rlin + 0.7152 * $glin + 0.0722 * $blin) * 100;
+}
+
+@function contrast($color, $dark: #000000, $light: #FFFFFF) {
+    @if $color == null {
+        @return null;
+    }
+
+    @else {
+        $color-brightness: brightness($color);
+        $light-text-brightness: brightness($light);
+        $dark-text-brightness: brightness($dark);
+
+        @return if(abs($color-brightness - $light-text-brightness) > abs($color-brightness - $dark-text-brightness), $light, $dark);
+    }
+}

package/scss/control-layout.scss

@@ -1,2 +1,2 @@
-$panel-border-radius: 6px;
+$panel-border-radius: 6px;
 $control-border-radius: 3px;

package/scss/control-mods.scss

@@ -1,42 +1,42 @@
-@use './effects' as *;
-@use './loveship-color-vars' as *;
-@use './control-layout' as *;
-
-@mixin control-form-mode() {
-    background-color: $white;
-    border-color: $night200;
-    border-style: solid;
-    border-radius: $control-border-radius;
-
-    &:hover {
-        border-color: $night200;
-    }
-
-    &:global(.uui-focus) {
-        @include control-focus-effect($sky);
-        border-color: darken($sky, 10%);
-    }
-}
-
-@mixin control-inline-mode() {
-    background-color: transparent;
-    border-color: transparent;
-    border-style: solid;
-    border-radius: $control-border-radius;
-
-    &:hover {
-        border-color: $night200;
-    }
-
-    &:global(.uui-focus) {
-        @include control-focus-effect($sky);
-        border-color: darken($sky, 10%);
-    }
-}
-
-@mixin control-cell-mode() {
-    background-color: transparent;
-    border-color: transparent;
-    border-style: solid;
-    border-radius: 0;
-}
+@use './effects' as *;
+@use './loveship-color-vars' as *;
+@use './control-layout' as *;
+
+@mixin control-form-mode() {
+    background-color: $white;
+    border-color: $night200;
+    border-style: solid;
+    border-radius: $control-border-radius;
+
+    &:hover {
+        border-color: $night200;
+    }
+
+    &:global(.uui-focus) {
+        @include control-focus-effect($sky);
+        border-color: darken($sky, 10%);
+    }
+}
+
+@mixin control-inline-mode() {
+    background-color: transparent;
+    border-color: transparent;
+    border-style: solid;
+    border-radius: $control-border-radius;
+
+    &:hover {
+        border-color: $night200;
+    }
+
+    &:global(.uui-focus) {
+        @include control-focus-effect($sky);
+        border-color: darken($sky, 10%);
+    }
+}
+
+@mixin control-cell-mode() {
+    background-color: transparent;
+    border-color: transparent;
+    border-style: solid;
+    border-radius: 0;
+}

package/scss/control-size.scss

@@ -1,7 +1,7 @@
-@use 'sass:math';
-@mixin control-size($size, $borderWidth) {
-    $padding: math.div($size, 6) - $borderWidth;
-    min-width: $size;
-    padding-left: $padding;
-    padding-right: $padding;
+@use 'sass:math';
+@mixin control-size($size, $borderWidth) {
+    $padding: math.div($size, 6) - $borderWidth;
+    min-width: $size;
+    padding-left: $padding;
+    padding-right: $padding;
 }

package/scss/dnd.scss

@@ -1,9 +1,9 @@
-@mixin dnd-cursor-style {
-    &:hover {
-        cursor: grab;
-    }
-
-    &:active {
-        cursor: grabbing;
-    }
+@mixin dnd-cursor-style {
+    &:hover {
+        cursor: grab;
+    }
+
+    &:active {
+        cursor: grabbing;
+    }
 }

package/scss/effects.scss

@@ -1,25 +1,25 @@
-@mixin panel-shadow() { box-shadow: 0 1px 3px 0 rgba(51, 51, 51, 0.2); }
-
-@mixin panel-top-shadow() { box-shadow: inset 0 10px 5px -10px rgba(51, 51, 51, 0.2); }
-
-@mixin button-focus-shadow() { box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1); }
-
-@mixin dnd-ghost-shadow() { box-shadow: 0 1px 3px 0 rgba(51, 51, 51, 0.2); }
-
-@mixin control-focus-effect($name) { box-shadow: 0 0 0 2px fade-out($name, 0.6); }
-
-$scroll-shadow-size: 10px;
-$scroll-shadow-opacity: 0.2;
-
-@mixin scroll-shadow-base() {
-    position: absolute;
-}
-
-@mixin scroll-shadow-top() {
-    @include scroll-shadow-base();
-    top: 0;
-    left: 0;
-    right: 0;
-    height: $scroll-shadow-size;
-    background: 'linear-gradient(to bottom, rgba(0, 0, 0, #{$scroll-shadow-opacity}) 0%, rgba(0, 0, 0, 0) 100%)';
+@mixin panel-shadow() { box-shadow: 0 1px 3px 0 rgba(51, 51, 51, 0.2); }
+
+@mixin panel-top-shadow() { box-shadow: inset 0 10px 5px -10px rgba(51, 51, 51, 0.2); }
+
+@mixin button-focus-shadow() { box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1); }
+
+@mixin dnd-ghost-shadow() { box-shadow: 0 1px 3px 0 rgba(51, 51, 51, 0.2); }
+
+@mixin control-focus-effect($name) { box-shadow: 0 0 0 2px fade-out($name, 0.6); }
+
+$scroll-shadow-size: 10px;
+$scroll-shadow-opacity: 0.2;
+
+@mixin scroll-shadow-base() {
+    position: absolute;
+}
+
+@mixin scroll-shadow-top() {
+    @include scroll-shadow-base();
+    top: 0;
+    left: 0;
+    right: 0;
+    height: $scroll-shadow-size;
+    background: 'linear-gradient(to bottom, rgba(0, 0, 0, #{$scroll-shadow-opacity}) 0%, rgba(0, 0, 0, 0) 100%)';
 }