@epam/uui 5.5.3 → 5.6.0

package/assets/styles/buttonLayout.scss

@@ -1,67 +1,67 @@
-@use './text-size' as *;
-
-@mixin button-layout($size, $borderWidth) {
-    @include button-horizontal-layout($size, $borderWidth);
-    @include button-vertical-layout($size, $borderWidth);
-}
-
-@mixin link-button-layout($size) {
-    @include link-button-horizontal-layout($size);
-    @include button-vertical-layout($size, 0);
-}
-
-@mixin button-vertical-layout($size, $borderWidth) {
-    &:global(.uui-button-box) {
-        min-height: $size;
-        border-width: $borderWidth;
-    }
-
-    :global(.uui-caption) {
-        @include text-size($size, $borderWidth);
-
-        @if ($size == 42px or $size == 48px) {
-            font-size: 16px;
-        }
-    }
-}
-
-@mixin button-horizontal-layout($size, $borderWidth) {
-    min-width: $size;
-
-    @if ($size == 18px) {
-        @include button-padding(3px, 3px, $borderWidth);
-    } @else if ($size == 24px) {
-        @include button-padding(6px, 6px, $borderWidth);
-    } @else if ($size == 30px) {
-        @include button-padding(6px, 6px, $borderWidth);
-    } @else if ($size == 36px) {
-        @include button-padding(6px, 6px, $borderWidth);
-    } @else if ($size == 42px) {
-        @include button-padding(12px, 6px, $borderWidth);
-    } @else if ($size == 48px) {
-        @include button-padding(12px, 6px, $borderWidth);
-    } @else {
-        @include button-padding(6px, 6px, $borderWidth); }
-}
-
-@mixin button-padding($controlPadding, $captionPadding, $borderWidth) {
-    padding-left: $controlPadding - $borderWidth;
-    padding-right: $controlPadding - $borderWidth;
-
-    :global(.uui-caption) {
-        padding-left: $captionPadding;
-        padding-right: $captionPadding;
-    }
-}
-
-@mixin link-button-horizontal-layout($size) {
-    min-width: $size;
-
-    &:global(.uui-has-left-icon) :global(.uui-caption) {
-        padding-left: 6px;
-    }
-
-    &:global(.uui-has-right-icon) :global(.uui-caption) {
-        padding-right: 6px;
-    }
-}
+@use './text-size' as *;
+
+@mixin button-layout($size, $borderWidth) {
+    @include button-horizontal-layout($size, $borderWidth);
+    @include button-vertical-layout($size, $borderWidth);
+}
+
+@mixin link-button-layout($size) {
+    @include link-button-horizontal-layout($size);
+    @include button-vertical-layout($size, 0);
+}
+
+@mixin button-vertical-layout($size, $borderWidth) {
+    &:global(.uui-button-box) {
+        min-height: $size;
+        border-width: $borderWidth;
+    }
+
+    :global(.uui-caption) {
+        @include text-size($size, $borderWidth);
+
+        @if ($size == 42px or $size == 48px) {
+            font-size: 16px;
+        }
+    }
+}
+
+@mixin button-horizontal-layout($size, $borderWidth) {
+    min-width: $size;
+
+    @if ($size == 18px) {
+        @include button-padding(3px, 3px, $borderWidth);
+    } @else if ($size == 24px) {
+        @include button-padding(6px, 6px, $borderWidth);
+    } @else if ($size == 30px) {
+        @include button-padding(6px, 6px, $borderWidth);
+    } @else if ($size == 36px) {
+        @include button-padding(6px, 6px, $borderWidth);
+    } @else if ($size == 42px) {
+        @include button-padding(12px, 6px, $borderWidth);
+    } @else if ($size == 48px) {
+        @include button-padding(12px, 6px, $borderWidth);
+    } @else {
+        @include button-padding(6px, 6px, $borderWidth); }
+}
+
+@mixin button-padding($controlPadding, $captionPadding, $borderWidth) {
+    padding-left: $controlPadding - $borderWidth;
+    padding-right: $controlPadding - $borderWidth;
+
+    :global(.uui-caption) {
+        padding-left: $captionPadding;
+        padding-right: $captionPadding;
+    }
+}
+
+@mixin link-button-horizontal-layout($size) {
+    min-width: $size;
+
+    &:global(.uui-has-left-icon) :global(.uui-caption) {
+        padding-left: 6px;
+    }
+
+    &:global(.uui-has-right-icon) :global(.uui-caption) {
+        padding-right: 6px;
+    }
+}

package/assets/styles/clickable.scss

@@ -0,0 +1,27 @@
+@mixin clickable-styles() {
+    text-decoration: none;
+    outline: none;
+    border: 0;
+    background: none;
+    box-sizing: border-box;
+    appearance: none;
+    align-items: unset;
+    padding: unset;
+    margin: unset;
+    justify-content: unset;
+    overflow: hidden;
+    display: flex;
+    position: relative;
+
+    &:hover {
+        text-decoration: none;
+    }
+
+    &:global(.-clickable) {
+        cursor: pointer;
+    }
+
+    &:global(.uui-disabled) {
+        cursor: default;
+    }
+}

package/assets/styles/controlLayout.scss

@@ -1,28 +1,28 @@
-@use 'text-size' as *;
-
-@mixin control-vertical-layout($size, $borderWidth) {
-    :global(.uui-caption), :global(.uui-input) {
-        @include text-size($size, $borderWidth);
-    }
-
-    &:global(.uui-button-box), &:global(.uui-input-box) {
-        min-height: $size;
-        border-width: $borderWidth;
-    }
-}
-
-@mixin control-box-layout($size, $borderWidth) {
-    min-width: $size;
-    padding-left: 5px;
-    padding-right: 5px;
-
-    :global(.uui-caption), :global(.uui-input) {
-        padding-left: 6px;
-        padding-right: 6px;
-    }
-
-    &:global(.uui-button-box), &:global(.uui-input-box) {
-        min-height: $size;
-        border-width: $borderWidth;
-    }
-}
+@use 'text-size' as *;
+
+@mixin control-vertical-layout($size, $borderWidth) {
+    :global(.uui-caption), :global(.uui-input) {
+        @include text-size($size, $borderWidth);
+    }
+
+    &:global(.uui-button-box), &:global(.uui-input-box) {
+        min-height: $size;
+        border-width: $borderWidth;
+    }
+}
+
+@mixin control-box-layout($size, $borderWidth) {
+    min-width: $size;
+    padding-left: 5px;
+    padding-right: 5px;
+
+    :global(.uui-caption), :global(.uui-input) {
+        padding-left: 6px;
+        padding-right: 6px;
+    }
+
+    &:global(.uui-button-box), &:global(.uui-input-box) {
+        min-height: $size;
+        border-width: $borderWidth;
+    }
+}

package/assets/styles/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/assets/styles/effects.scss

@@ -1,7 +1,7 @@
-@mixin dnd-ghost-shadow() { box-shadow: 0 6px 18px 0 rgba(29, 30, 38, 0.05), 0 3px 12px 0 rgba(29, 30, 38, 0.05); }
-
-@mixin focus-visible-effect($offset: 2px, $radius: 2px) {
-    outline: 2px solid var(--uui-outline-focus);
-    outline-offset: $offset;
-    border-radius: $radius;
-}
+@mixin dnd-ghost-shadow() { box-shadow: 0 6px 18px 0 rgba(29, 30, 38, 0.05), 0 3px 12px 0 rgba(29, 30, 38, 0.05); }
+
+@mixin focus-visible-effect($offset: 2px, $radius: 2px) {
+    outline: 2px solid var(--uui-outline-focus);
+    outline-offset: $offset;
+    border-radius: $radius;
+}

package/assets/styles/icons.scss

@@ -1,19 +1,19 @@
-@use 'sass:math';
-
-@mixin icon-layout($size) {
-    :global(.uui-icon) {
-        svg {
-            height: math.div($size, 36) * 24;
-            max-width: math.div($size, 36) * 24;
-        }
-    }
-}
-
-@mixin icon-size($size) {
-    :global(.uui-icon) {
-        svg {
-            height: $size;
-            max-width: $size;
-        }
-    }
-}
+@use 'sass:math';
+
+@mixin icon-layout($size) {
+    :global(.uui-icon) {
+        svg {
+            height: math.div($size, 36) * 24;
+            max-width: math.div($size, 36) * 24;
+        }
+    }
+}
+
+@mixin icon-size($size) {
+    :global(.uui-icon) {
+        svg {
+            height: $size;
+            max-width: $size;
+        }
+    }
+}

package/assets/styles/index.scss

@@ -1,8 +1,9 @@
-@forward 'buttonLayout';
-@forward 'controlLayout';
-@forward 'effects';
-@forward 'icons';
-@forward 'inputs';
-@forward 'text-size';
-@forward 'typography';
-@forward 'dnd';
+@forward 'buttonLayout';
+@forward 'clickable';
+@forward 'controlLayout';
+@forward 'effects';
+@forward 'icons';
+@forward 'inputs';
+@forward 'text-size';
+@forward 'typography';
+@forward 'dnd';

package/assets/styles/inputs.scss

@@ -1,74 +1,74 @@
-@mixin disabled-input() {
-    &.mode-form {
-        @include input-colors(var(--uui-control-bg-disabled), var(--uui-control-text-disabled), var(--uui-control-border-disabled), var(--uui-control-placeholder-disabled));
-        cursor: default;
-        pointer-events: none;
-
-        &:hover, &:active, &:focus {
-            @include input-colors(var(--uui-control-bg-disabled), var(--uui-control-text-disabled), var(--uui-control-border-disabled), var(--uui-control-placeholder-disabled));
-            box-shadow: none;
-        }
-    }
-
-    &.mode-cell {
-        @include input-colors(transparent, var(--uui-control-text-disabled), transparent, var(--uui-control-placeholder-disabled));
-        cursor: default;
-        pointer-events: none;
-
-        &:hover, &:active, &:focus {
-            @include input-colors(transparent, var(--uui-control-text-disabled), transparent, var(--uui-control-placeholder-disabled));
-            box-shadow: none;
-        }
-    }
-}
-
-@mixin readonly-input() {
-    &.mode-form {
-        background-color: var(--uui-control-bg-disabled);
-        border-color: var(--uui-control-border-disabled);
-        pointer-events: none;
-
-        &:hover {
-            border-color: var(--uui-control-border-disabled);
-        }
-
-        :global(.uui-input) {
-            &::placeholder {
-                color: var(--uui-control-placeholder-disabled);
-            }
-        }
-    }
-
-    &.mode-cell {
-        background-color: transparent;
-        border-color: transparent;
-        pointer-events: none;
-
-        &:hover {
-            background-color: transparent;
-            border-color: transparent;
-        }
-
-        :global(.uui-input) {
-            &::placeholder {
-                color: var(--uui-control-placeholder-disabled);
-            }
-        }
-    }
-}
-
-@mixin input-colors($bg, $color, $border, $placeholder) {
-    background-color: $bg;
-    color: $color;
-    fill: $color;
-    border-color: $border;
-
-    // override more selective selector on input tag in browsers stylesheets
-    :global(.uui-input) {
-        color: $color;
-
-        &::placeholder {
-            color: $placeholder;
-        }
-    }
-}
+@mixin disabled-input() {
+    &.mode-form {
+        @include input-colors(var(--uui-control-bg-disabled), var(--uui-control-text-disabled), var(--uui-control-border-disabled), var(--uui-control-placeholder-disabled));
+        cursor: default;
+        pointer-events: none;
+
+        &:hover, &:active, &:focus {
+            @include input-colors(var(--uui-control-bg-disabled), var(--uui-control-text-disabled), var(--uui-control-border-disabled), var(--uui-control-placeholder-disabled));
+            box-shadow: none;
+        }
+    }
+
+    &.mode-cell {
+        @include input-colors(transparent, var(--uui-control-text-disabled), transparent, var(--uui-control-placeholder-disabled));
+        cursor: default;
+        pointer-events: none;
+
+        &:hover, &:active, &:focus {
+            @include input-colors(transparent, var(--uui-control-text-disabled), transparent, var(--uui-control-placeholder-disabled));
+            box-shadow: none;
+        }
+    }
+}
+
+@mixin readonly-input() {
+    &.mode-form {
+        background-color: var(--uui-control-bg-disabled);
+        border-color: var(--uui-control-border-disabled);
+        pointer-events: none;
+
+        &:hover {
+            border-color: var(--uui-control-border-disabled);
+        }
+
+        :global(.uui-input) {
+            &::placeholder {
+                color: var(--uui-control-placeholder-disabled);
+            }
+        }
+    }
+
+    &.mode-cell {
+        background-color: transparent;
+        border-color: transparent;
+        pointer-events: none;
+
+        &:hover {
+            background-color: transparent;
+            border-color: transparent;
+        }
+
+        :global(.uui-input) {
+            &::placeholder {
+                color: var(--uui-control-placeholder-disabled);
+            }
+        }
+    }
+}
+
+@mixin input-colors($bg, $color, $border, $placeholder) {
+    background-color: $bg;
+    color: $color;
+    fill: $color;
+    border-color: $border;
+
+    // override more selective selector on input tag in browsers stylesheets
+    :global(.uui-input) {
+        color: $color;
+
+        &::placeholder {
+            color: $placeholder;
+        }
+    }
+}

package/assets/styles/text-size.scss

@@ -1,42 +1,42 @@
-@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);
-    } @else if ($size == 60px) {
-        @return (15px - $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;
-    } @else if ($size == 60px) {
-        line-height: 24px;
-        font-size: 20px;
-    }
-    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);
+    } @else if ($size == 60px) {
+        @return (15px - $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;
+    } @else if ($size == 60px) {
+        line-height: 24px;
+        font-size: 20px;
+    }
+    padding-top: vpadding($size, $border-width);
+    padding-bottom: vpadding($size, $border-width);
+}