@epam/uui 4.11.0-alpha.1 → 4.11.0

package/assets/styles/text-layout.scss

@@ -1,81 +1,81 @@
-.line-height-12 { line-height: 12px; }
-.line-height-18 { line-height: 18px; }
-.line-height-24 { line-height: 24px; }
-.line-height-30 { line-height: 30px; }
-
-.font-size-10 { font-size: 10px; }
-.font-size-12 { font-size: 12px; }
-.font-size-14 { font-size: 14px; }
-.font-size-16 { font-size: 16px; }
-.font-size-18 { font-size: 18px; }
-.font-size-24 { font-size: 24px; }
-
-.v-padding-2 {
-    padding-top: 2px;
-    padding-bottom: 2px;
-}
-
-.v-padding-3 {
-    padding-top: 3px;
-    padding-bottom: 3px;
-}
-
-.v-padding-5 {
-    padding-top: 5px;
-    padding-bottom: 5px;
-}
-
-.v-padding-6 {
-    padding-top: 6px;
-    padding-bottom: 6px;
-}
-
-.v-padding-8 {
-    padding-top: 8px;
-    padding-bottom: 8px;
-}
-
-.v-padding-9 {
-    padding-top: 9px;
-    padding-bottom: 9px;
-}
-
-.v-padding-11 {
-    padding-top: 11px;
-    padding-bottom: 11px;
-}
-
-.v-padding-12 {
-    padding-top: 12px;
-    padding-bottom: 12px;
-}
-
-.v-padding-14 {
-    padding-top: 14px;
-    padding-bottom: 14px;
-}
-
-.v-padding-15 {
-    padding-top: 15px;
-    padding-bottom: 15px;
-}
-
-.v-padding-17 {
-    padding-top: 17px;
-    padding-bottom: 17px;
-}
-
-.v-padding-18 {
-    padding-top: 18px;
-    padding-bottom: 18px;
-}
-
-.v-padding-23 {
-    padding-top: 23px;
-    padding-bottom: 23px;
-}
-
-.v-padding-24 {
-    padding-top: 24px;
-    padding-bottom: 24px;
+.line-height-12 { line-height: 12px; }
+.line-height-18 { line-height: 18px; }
+.line-height-24 { line-height: 24px; }
+.line-height-30 { line-height: 30px; }
+
+.font-size-10 { font-size: 10px; }
+.font-size-12 { font-size: 12px; }
+.font-size-14 { font-size: 14px; }
+.font-size-16 { font-size: 16px; }
+.font-size-18 { font-size: 18px; }
+.font-size-24 { font-size: 24px; }
+
+.v-padding-2 {
+    padding-top: 2px;
+    padding-bottom: 2px;
+}
+
+.v-padding-3 {
+    padding-top: 3px;
+    padding-bottom: 3px;
+}
+
+.v-padding-5 {
+    padding-top: 5px;
+    padding-bottom: 5px;
+}
+
+.v-padding-6 {
+    padding-top: 6px;
+    padding-bottom: 6px;
+}
+
+.v-padding-8 {
+    padding-top: 8px;
+    padding-bottom: 8px;
+}
+
+.v-padding-9 {
+    padding-top: 9px;
+    padding-bottom: 9px;
+}
+
+.v-padding-11 {
+    padding-top: 11px;
+    padding-bottom: 11px;
+}
+
+.v-padding-12 {
+    padding-top: 12px;
+    padding-bottom: 12px;
+}
+
+.v-padding-14 {
+    padding-top: 14px;
+    padding-bottom: 14px;
+}
+
+.v-padding-15 {
+    padding-top: 15px;
+    padding-bottom: 15px;
+}
+
+.v-padding-17 {
+    padding-top: 17px;
+    padding-bottom: 17px;
+}
+
+.v-padding-18 {
+    padding-top: 18px;
+    padding-bottom: 18px;
+}
+
+.v-padding-23 {
+    padding-top: 23px;
+    padding-bottom: 23px;
+}
+
+.v-padding-24 {
+    padding-top: 24px;
+    padding-bottom: 24px;
 }

package/assets/styles/text-size.scss

@@ -1,37 +1,37 @@
-@function vpadding($size, $border-width) {
-    @if ($size == 18px or $size == 24px) {
-        @return (3px - $border-width);
-    } @else if ($size == 30px) {
-        @return (6px - $border-width);
-    } @else if ($size == 36px or $size == 42px) {
-        @return (9px - $border-width);
-    } @else if ($size == 48px) {
-        @return (12px - $border-width);
-    }
-
-    @return (null);
-}
-
-@mixin text-size($size, $border-width: 0) {
-    @if ($size == 18px) {
-        line-height: 12px;
-        font-size: 10px;
-    } @else if ($size == 24px) {
-        line-height: 18px;
-        font-size: 12px;
-    } @else if ($size == 30px) {
-        line-height: 18px;
-        font-size: 14px;
-    } @else if ($size == 36px) {
-        line-height: 18px;
-        font-size: 14px;
-    } @else if ($size == 42px) {
-        line-height: 24px;
-        font-size: 16px;
-    } @else if ($size == 48px) {
-        line-height: 24px;
-        font-size: 16px;
-    }
-    padding-top: vpadding($size, $border-width);
-    padding-bottom: vpadding($size, $border-width);
-}
+@function vpadding($size, $border-width) {
+    @if ($size == 18px or $size == 24px) {
+        @return (3px - $border-width);
+    } @else if ($size == 30px) {
+        @return (6px - $border-width);
+    } @else if ($size == 36px or $size == 42px) {
+        @return (9px - $border-width);
+    } @else if ($size == 48px) {
+        @return (12px - $border-width);
+    }
+
+    @return (null);
+}
+
+@mixin text-size($size, $border-width: 0) {
+    @if ($size == 18px) {
+        line-height: 12px;
+        font-size: 10px;
+    } @else if ($size == 24px) {
+        line-height: 18px;
+        font-size: 12px;
+    } @else if ($size == 30px) {
+        line-height: 18px;
+        font-size: 14px;
+    } @else if ($size == 36px) {
+        line-height: 18px;
+        font-size: 14px;
+    } @else if ($size == 42px) {
+        line-height: 24px;
+        font-size: 16px;
+    } @else if ($size == 48px) {
+        line-height: 24px;
+        font-size: 16px;
+    }
+    padding-top: vpadding($size, $border-width);
+    padding-bottom: vpadding($size, $border-width);
+}

package/assets/styles/typography-mixins.scss

@@ -1,159 +1,159 @@
-@mixin overflow-ellipsis() {
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-@mixin typography-header() {
-    :global(.hero-header), h1, h2, h3, h4, h5, h6 {
-        margin: 0;
-    }
-
-    :global(.hero-header) {
-        font-family: var(--font-promo);
-        margin: 30px 0;
-        font-size: 66px;
-        line-height: 72px;
-    }
-
-    :global(.hero-header), :global(.promo-header) {
-        color: var(--uui-text-brand);
-        text-align: center;
-    }
-
-    :global(.promo-header), h1, h2, h3 {
-        font-family: var(--font-primary);
-    }
-
-    :global(.promo-header) {
-        text-transform: uppercase;
-    }
-
-    h4, h5, h6 {
-        font-family: var(--font-semibold);
-    }
-
-    h1, h2, h3, h4, h5, h6 {
-        margin-bottom: 0.5em;
-        margin-top: 1.2em;
-        line-height: 1.35em;
-    }
-
-    h1 {
-        font-size: 36px;
-    }
-
-    h2 {
-        font-size: 30px;
-        letter-spacing: 0.1px;
-
-        &:global(.promo-header) {
-            letter-spacing: 2px;
-        }
-    }
-
-    h3 {
-        font-size: 24px;
-    }
-
-    h4 {
-        font-size: 18px;
-        letter-spacing: 0.1px;
-    }
-
-    h5 {
-        font-size: 16px;
-    }
-
-    h6 {
-        font-size: 14px;
-    }
-}
-
-@mixin typography-inline() {
-    b, strong {
-        font-family: var(--font-semibold);
-    }
-
-    i, em {
-        font-family: var(--font-italic);
-    }
-
-    a {
-        display: inline-flex;
-        align-items: center;
-        color: var(--uui-primary);
-
-        &:visited {
-            color: #5214CC;
-
-            &:hover {
-                color: #3F0F9E;
-            }
-        }
-
-        &:hover {
-            text-decoration: underline;
-            color: var(--uui-primary-dark);
-        }
-    }
-
-    code {
-        padding: 0.125em 0.25em;
-        color: var(--uui-text-primary);
-        background-color: var(--uui-secondary-light);
-        font-family: var(--font-mono);
-        white-space: pre-wrap;
-        word-wrap: normal;
-    }
-}
-
-@mixin typography-block() {
-    ol, ul {
-        padding: 0;
-    }
-
-    li {
-        margin-left: 1.25em;
-        line-height: 1.5;
-    }
-
-    pre {
-        padding: 1.25em;
-        color: var(--gray10);
-        background-color: var(--uui-secondary-darkest);
-        font-family: monospace;
-        white-space: pre-wrap;
-        word-wrap: normal;
-    }
-
-    img {
-        max-width: 100%;
-    }
-
-    figure {
-        margin: 0;
-
-        figcaption {
-            font-size: 0.9em;
-            opacity: 0.9;
-            text-align: center;
-        }
-    }
-
-    p {
-        margin: 0.5em 0;
-        line-height: 1.5;
-    }
-}
-
-@mixin typography-12() {
-    font-size: 12px;
-}
-
-@mixin typography-14() {
-    font-size: 14px;
-}
-
-@mixin typography-16() {
-    font-size: 16px;
-}
+@mixin overflow-ellipsis() {
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+@mixin typography-header() {
+    :global(.hero-header), h1, h2, h3, h4, h5, h6 {
+        margin: 0;
+    }
+
+    :global(.hero-header) {
+        font-family: var(--font-promo);
+        margin: 30px 0;
+        font-size: 66px;
+        line-height: 72px;
+    }
+
+    :global(.hero-header), :global(.promo-header) {
+        color: var(--uui-text-brand);
+        text-align: center;
+    }
+
+    :global(.promo-header), h1, h2, h3 {
+        font-family: var(--font-primary);
+    }
+
+    :global(.promo-header) {
+        text-transform: uppercase;
+    }
+
+    h4, h5, h6 {
+        font-family: var(--font-semibold);
+    }
+
+    h1, h2, h3, h4, h5, h6 {
+        margin-bottom: 0.5em;
+        margin-top: 1.2em;
+        line-height: 1.35em;
+    }
+
+    h1 {
+        font-size: 36px;
+    }
+
+    h2 {
+        font-size: 30px;
+        letter-spacing: 0.1px;
+
+        &:global(.promo-header) {
+            letter-spacing: 2px;
+        }
+    }
+
+    h3 {
+        font-size: 24px;
+    }
+
+    h4 {
+        font-size: 18px;
+        letter-spacing: 0.1px;
+    }
+
+    h5 {
+        font-size: 16px;
+    }
+
+    h6 {
+        font-size: 14px;
+    }
+}
+
+@mixin typography-inline() {
+    b, strong {
+        font-family: var(--font-semibold);
+    }
+
+    i, em {
+        font-family: var(--font-italic);
+    }
+
+    a {
+        display: inline-flex;
+        align-items: center;
+        color: var(--uui-primary);
+
+        &:visited {
+            color: #5214CC;
+
+            &:hover {
+                color: #3F0F9E;
+            }
+        }
+
+        &:hover {
+            text-decoration: underline;
+            color: var(--uui-primary-dark);
+        }
+    }
+
+    code {
+        padding: 0.125em 0.25em;
+        color: var(--uui-text-primary);
+        background-color: var(--uui-secondary-light);
+        font-family: var(--font-mono);
+        white-space: pre-wrap;
+        word-wrap: normal;
+    }
+}
+
+@mixin typography-block() {
+    ol, ul {
+        padding: 0;
+    }
+
+    li {
+        margin-left: 1.25em;
+        line-height: 1.5;
+    }
+
+    pre {
+        padding: 1.25em;
+        color: var(--gray10);
+        background-color: var(--uui-secondary-darkest);
+        font-family: monospace;
+        white-space: pre-wrap;
+        word-wrap: normal;
+    }
+
+    img {
+        max-width: 100%;
+    }
+
+    figure {
+        margin: 0;
+
+        figcaption {
+            font-size: 0.9em;
+            opacity: 0.9;
+            text-align: center;
+        }
+    }
+
+    p {
+        margin: 0.5em 0;
+        line-height: 1.5;
+    }
+}
+
+@mixin typography-12() {
+    font-size: 12px;
+}
+
+@mixin typography-14() {
+    font-size: 14px;
+}
+
+@mixin typography-16() {
+    font-size: 16px;
+}

package/assets/styles/typography.scss

@@ -1,39 +1,39 @@
-@forward "typography-mixins";
-@use "typography-mixins" as *;
-
-@mixin overflow-ellipsis() {
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-:local(.typography-header) {
-    @include typography-header();
-}
-
-:local(.typography-block) {
-    @include typography-block();
-}
-
-:local(.typography-inline) {
-    @include typography-inline();
-}
-
-:local(.typography-16) {
-    @include typography-16();
-}
-
-:local(.typography-14) {
-    @include typography-14();
-}
-
-:local(.typography-12) {
-    @include typography-12();
-}
-
-:local(.typography-promo) {
-    font-family: var(--font-regular);
-    color: var(--uui-text-primary);
-    composes: typography-header;
-    composes: typography-block;
-    composes: typography-inline;
+@forward "typography-mixins";
+@use "typography-mixins" as *;
+
+@mixin overflow-ellipsis() {
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+:local(.typography-header) {
+    @include typography-header();
+}
+
+:local(.typography-block) {
+    @include typography-block();
+}
+
+:local(.typography-inline) {
+    @include typography-inline();
+}
+
+:local(.typography-16) {
+    @include typography-16();
+}
+
+:local(.typography-14) {
+    @include typography-14();
+}
+
+:local(.typography-12) {
+    @include typography-12();
+}
+
+:local(.typography-promo) {
+    font-family: var(--font-regular);
+    color: var(--uui-text-primary);
+    composes: typography-header;
+    composes: typography-block;
+    composes: typography-inline;
 }