@oat-sa/tao-core-ui 1.64.1 → 1.64.2

package/scss/inc/_functions.scss

@@ -1,283 +1,283 @@
-@mixin iterate-sprite($iconList, $x, $y, $direction, $prefix:'') {
-    @each $icon in $iconList {
-        #{$prefix}#{$icon} {
-            background-position: $x * 1px $y * 1px;
-        }
-        @if $direction == 'x' {
-            $x: $x - 16;
-        } @else {
-            $y: $y - 16;
-        }
-    }
-}
-
-/*
-Usage:
-- linear-gradient((color1, color2, color3)) - returns linear-gradient with evenly distributed colors,
-   if 3 colors used then the position of each will be 33,33%
-- linear-gradient((color1 0%, color2 30%, color3 80%)) - returns linear-gradient with manually distributed colors,
-   first param - color, second - position. Also you can use px or other valid units for set position.
-*/
-@mixin linear-gradient($colorList, $direction: 'to right') {
-    $percentage: 0;
-    $units: '%';
-    $count: length($colorList);
-    $increment: 100 / ($count - 1);
-    $css: #{$direction + ', '};
-    $sep: ', ';
-    @each $colorItem in $colorList {
-        $color: $colorItem;
-        @if (length($colorItem) > 1) {
-            $color: nth($colorItem, 1);
-            $percentage: nth($colorItem, 2);
-            $units: '';
-        }
-        @if ($percentage >= 100 or index($colorList, $colorItem) == $count) {
-            $sep: '';
-        }
-        $css: #{$css + $color + ' ' + $percentage + $units + $sep};
-        $percentage: $percentage + $increment;
-    }
-    background: linear-gradient( #{$css} );
-}
-
-@mixin grid-unit($span, $numCols: 12, $gutter: 0) {
-    $gridPx: 840;
-    $rawSpanPx: (($gridPx - ($numCols * $gutter)) / $numCols);
-    $spanPx: $rawSpanPx * $span + (($span - 1) * $gutter);
-    $spanPercent: widthPerc($spanPx, $gridPx);
-    $marginPercent: widthPerc($gutter, $gridPx);
-    margin-left: $marginPercent;
-    width: $spanPercent;
-}
-
-
-@mixin vendor-prefix($property, $value, $whatToPrefix: property, $prefixes: (-webkit-, -moz-, -ms-, -o-, '')) {
-    @if $whatToPrefix == 'property' {
-        @each $prefix in $prefixes {
-            #{$prefix + $property}: #{$value};
-        }
-    }
-    @else if $whatToPrefix == 'value' {
-        @each $prefix in $prefixes {
-            #{$property}: #{$prefix + $value};
-        }
-    }
-}
-@mixin flex-container($wrapBehavior: nowrap, $direction : row) {
-    @include vendor-prefix(display, flex, value, (-ms-, -webkit-, ''));
-
-    @include vendor-prefix(flex-direction, $direction, property, (-ms-, -webkit-, ''));
-    @include vendor-prefix(flex-wrap, $wrapBehavior, property, (-ms-, -webkit-, ''));
-
-    @include vendor-prefix(justify-content, flex-start, property, (-webkit-, ''));
-
-    @include vendor-prefix(align-content, flex-start, property, (-webkit-, ''));
-
-    @include vendor-prefix(align-items, stretch, property, (-webkit-, ''));
-}
-
-@mixin simple-flex-box($width: auto, $minWidth: 1) {
-
-    @include vendor-prefix(order, 0, property, (-ms-, -webkit-, ''));
-    flex-item-align: stretch;
-    -ms-flex-item-align: stretch;
-    @include vendor-prefix(align-self, stretch, property, (-webkit-, ''));
-
-    // if both, min width and width are set, width will win this conflict
-    @if ($width == auto) {
-        @if ($minWidth != 1) {
-            @include vendor-prefix(flex, 1 1 $minWidth, property, (-ms-, -webkit-, ''));
-        }
-        @else {
-            @include vendor-prefix(flex, 1 1 auto, property, (-ms-, -webkit-, ''));
-            // @see https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis#Values
-            // for a discussion auto vs. main-size
-            @include vendor-prefix(flex, 1 1, property, (-ms-, -webkit-, ''));
-        }
-    }
-    @else {
-        @include vendor-prefix(flex, 0 0 $width, property, (-ms-, -webkit-, ''));
-    }
-}
-
-
-@mixin box-shadow($horiz: 1px, $vert: 1px, $blur: 2px, $spread: 0, $color: rgba(0, 0, 0, .2)) {
-    @include vendor-prefix(box-shadow, $horiz $vert $blur $spread $color, property);
-}
-
-@mixin simple-border($color: #ddd) {
-    border: 1px solid $color;
-    border-radius: 2px;
-    -webkit-border-radius: 2px;
-}
-
-@mixin border-radius($radius: 2) {
-    -moz-border-radius: $radius * 1px;
-    -webkit-border-radius: $radius * 1px;
-    border-radius: $radius * 1px;
-}
-
-@mixin border-radius-top($radius: 2) {
-    -webkit-border-top-left-radius: $radius * 1px;
-    -webkit-border-top-right-radius: $radius * 1px;
-    -moz-border-radius-topleft: $radius * 1px;
-    -moz-border-radius-topright: $radius * 1px;
-    border-top-left-radius: $radius * 1px;
-    border-top-right-radius: $radius * 1px;
-}
-
-@mixin border-radius-bottom($radius: 2) {
-    -webkit-border-bottom-right-radius: $radius * 1px;
-    -webkit-border-bottom-left-radius: $radius * 1px;
-    -moz-border-radius-bottomright: $radius * 1px;
-    -moz-border-radius-bottomleft: $radius * 1px;
-    border-bottom-right-radius: $radius * 1px;
-    border-bottom-left-radius: $radius * 1px;
-}
-
-@mixin border-radius-left($radius: 2) {
-    -webkit-border-top-left-radius: $radius * 1px;
-    -webkit-border-bottom-left-radius: $radius * 1px;
-    -moz-border-radius-topleft: $radius * 1px;
-    -moz-border-radius-bottomleft: $radius * 1px;
-    border-top-left-radius: $radius * 1px;
-    border-bottom-left-radius: $radius * 1px;
-}
-
-@mixin border-radius-right($radius: 2) {
-    -webkit-border-top-right-radius: $radius * 1px;
-    -webkit-border-bottom-right-radius: $radius * 1px;
-    -moz-border-radius-topright: $radius * 1px;
-    -moz-border-radius-bottomright: $radius * 1px;
-    border-top-right-radius: $radius * 1px;
-    border-bottom-right-radius: $radius * 1px;
-}
-
-@mixin border-radius-top-left($radius: 2) {
-  -webkit-border-top-left-radius: $radius * 1px;
-  -moz-border-radius-topleft: $radius * 1px;
-  border-top-left-radius: $radius * 1px;
-}
-
-@mixin border-radius-top-right($radius: 2) {
-  -webkit-border-top-right-radius: $radius * 1px;
-  -moz-border-radius-topright: $radius * 1px;
-  border-top-right-radius: $radius * 1px;
-}
-
-@mixin border-radius-bottom-right($radius: 2) {
-  -webkit-border-bottom-right-radius: $radius * 1px;
-  -moz-border-radius-bottomright: $radius * 1px;
-  border-bottom-right-radius: $radius * 1px;
-}
-
-@mixin border-radius-bottom-left($radius: 2) {
-    -webkit-border-bottom-left-radius: $radius * 1px;
-    -moz-border-radius-bottomleft: $radius * 1px;
-    border-bottom-left-radius: $radius * 1px;
-}
-
-@mixin border-box() {
-    -moz-box-sizing: border-box;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-}
-
-@function whiten($color, $white: 0.3) {
-    @return mix(#fff, $color, ($white * 100) * 1%);
-}
-
-@function blacken($color, $black: 0.3) {
-    @return mix(#000, $color, ($black * 100) * 1%);
-}
-
-@function widthPerc($colWidth, $context) {
-    @return ($colWidth * 100 / $context) * 1%
-}
-
-@function remDist($fontSizePx) {
-    @return ($fontSizePx / 10) * 1rem
-}
-
-@function black($alpha: 1) {
-    @return (rgba(0, 0, 0, $alpha))
-}
-
-@function white($alpha: 1) {
-    @return (rgba(255, 255, 255, $alpha))
-}
-
-@mixin font-size($remPx, $important: false) {
-    @if $important == true {
-        font-size: ($remPx) * 1px !important;
-        font-size: ($remPx / 10) * 1rem !important;
-    }
-    @else {
-        font-size: ($remPx) * 1px;
-        font-size: ($remPx / 10) * 1rem;
-    }
-}
-
-
-@mixin keyframes($name) {
-    @-o-keyframes #{$name} { @content };
-    @-moz-keyframes #{$name} { @content };
-    @-webkit-keyframes #{$name} { @content };
-    @keyframes #{$name} { @content };
-}
-
-
-@mixin animation($value, $type:'') {
-    $animation: animation;
-    @if $type != '' {
-        $animation:  $animation + '-' + $type;
-    }
-    @include vendor-prefix($animation, $value, property);
-}
-
-/// CSS transition mixin to the current selection (apply also vendor prefixes).
-/// See <https://developer.mozilla.org/en-US/docs/Web/CSS/transition> for the values
-///
-/// @param {property} [$type = all] the CSS property to apply the transition to
-/// @param {time} [$duration = .5s] the transition property
-/// @param {timing-function} [$effect = ease-out] the transition property
-@mixin transition($type : all, $duration : 0.5s, $effect : ease-out, $delay : 0s){
-    @include vendor-prefix(transition, $type + ', ' + $duration + ', ' + $effect + ', ' + $delay, property);
-}
-
-@mixin fade($duration: 1s){
-
-    @include keyframes(fade) {
-        0%   {opacity:0;}
-        50%   {opacity:1;}
-        100% {opacity:0;}
-    }
-
-    @include vendor-prefix(animation, fade 1s forwards, property);
-}
-
-@mixin repeat(){
-    @include animation(infinite, iteration-count);
-}
-
-@mixin largeHeading() {
-    @include font-size(20);
-    font-family: $headingFont;
-    font-style: normal;
-}
-
-@mixin disableSelect() {
-    @include vendor-prefix(user-select, none, property);
-}
-
-/* based on "visually-hidden" mixin in LDS for accessibility goals */
-@mixin visuallyHidden() {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    overflow: hidden;
-    clip: rect(1px, 1px, 1px, 1px);
-    margin: 0;
-    padding: 0;
-}
+@mixin iterate-sprite($iconList, $x, $y, $direction, $prefix:'') {
+    @each $icon in $iconList {
+        #{$prefix}#{$icon} {
+            background-position: $x * 1px $y * 1px;
+        }
+        @if $direction == 'x' {
+            $x: $x - 16;
+        } @else {
+            $y: $y - 16;
+        }
+    }
+}
+
+/*
+Usage:
+- linear-gradient((color1, color2, color3)) - returns linear-gradient with evenly distributed colors,
+   if 3 colors used then the position of each will be 33,33%
+- linear-gradient((color1 0%, color2 30%, color3 80%)) - returns linear-gradient with manually distributed colors,
+   first param - color, second - position. Also you can use px or other valid units for set position.
+*/
+@mixin linear-gradient($colorList, $direction: 'to right') {
+    $percentage: 0;
+    $units: '%';
+    $count: length($colorList);
+    $increment: 100 / ($count - 1);
+    $css: #{$direction + ', '};
+    $sep: ', ';
+    @each $colorItem in $colorList {
+        $color: $colorItem;
+        @if (length($colorItem) > 1) {
+            $color: nth($colorItem, 1);
+            $percentage: nth($colorItem, 2);
+            $units: '';
+        }
+        @if ($percentage >= 100 or index($colorList, $colorItem) == $count) {
+            $sep: '';
+        }
+        $css: #{$css + $color + ' ' + $percentage + $units + $sep};
+        $percentage: $percentage + $increment;
+    }
+    background: linear-gradient( #{$css} );
+}
+
+@mixin grid-unit($span, $numCols: 12, $gutter: 0) {
+    $gridPx: 840;
+    $rawSpanPx: (($gridPx - ($numCols * $gutter)) / $numCols);
+    $spanPx: $rawSpanPx * $span + (($span - 1) * $gutter);
+    $spanPercent: widthPerc($spanPx, $gridPx);
+    $marginPercent: widthPerc($gutter, $gridPx);
+    margin-left: $marginPercent;
+    width: $spanPercent;
+}
+
+
+@mixin vendor-prefix($property, $value, $whatToPrefix: property, $prefixes: (-webkit-, -moz-, -ms-, -o-, '')) {
+    @if $whatToPrefix == 'property' {
+        @each $prefix in $prefixes {
+            #{$prefix + $property}: #{$value};
+        }
+    }
+    @else if $whatToPrefix == 'value' {
+        @each $prefix in $prefixes {
+            #{$property}: #{$prefix + $value};
+        }
+    }
+}
+@mixin flex-container($wrapBehavior: nowrap, $direction : row) {
+    @include vendor-prefix(display, flex, value, (-ms-, -webkit-, ''));
+
+    @include vendor-prefix(flex-direction, $direction, property, (-ms-, -webkit-, ''));
+    @include vendor-prefix(flex-wrap, $wrapBehavior, property, (-ms-, -webkit-, ''));
+
+    @include vendor-prefix(justify-content, flex-start, property, (-webkit-, ''));
+
+    @include vendor-prefix(align-content, flex-start, property, (-webkit-, ''));
+
+    @include vendor-prefix(align-items, stretch, property, (-webkit-, ''));
+}
+
+@mixin simple-flex-box($width: auto, $minWidth: 1) {
+
+    @include vendor-prefix(order, 0, property, (-ms-, -webkit-, ''));
+    flex-item-align: stretch;
+    -ms-flex-item-align: stretch;
+    @include vendor-prefix(align-self, stretch, property, (-webkit-, ''));
+
+    // if both, min width and width are set, width will win this conflict
+    @if ($width == auto) {
+        @if ($minWidth != 1) {
+            @include vendor-prefix(flex, 1 1 $minWidth, property, (-ms-, -webkit-, ''));
+        }
+        @else {
+            @include vendor-prefix(flex, 1 1 auto, property, (-ms-, -webkit-, ''));
+            // @see https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis#Values
+            // for a discussion auto vs. main-size
+            @include vendor-prefix(flex, 1 1, property, (-ms-, -webkit-, ''));
+        }
+    }
+    @else {
+        @include vendor-prefix(flex, 0 0 $width, property, (-ms-, -webkit-, ''));
+    }
+}
+
+
+@mixin box-shadow($horiz: 1px, $vert: 1px, $blur: 2px, $spread: 0, $color: rgba(0, 0, 0, .2)) {
+    @include vendor-prefix(box-shadow, $horiz $vert $blur $spread $color, property);
+}
+
+@mixin simple-border($color: #ddd) {
+    border: 1px solid $color;
+    border-radius: 2px;
+    -webkit-border-radius: 2px;
+}
+
+@mixin border-radius($radius: 2) {
+    -moz-border-radius: $radius * 1px;
+    -webkit-border-radius: $radius * 1px;
+    border-radius: $radius * 1px;
+}
+
+@mixin border-radius-top($radius: 2) {
+    -webkit-border-top-left-radius: $radius * 1px;
+    -webkit-border-top-right-radius: $radius * 1px;
+    -moz-border-radius-topleft: $radius * 1px;
+    -moz-border-radius-topright: $radius * 1px;
+    border-top-left-radius: $radius * 1px;
+    border-top-right-radius: $radius * 1px;
+}
+
+@mixin border-radius-bottom($radius: 2) {
+    -webkit-border-bottom-right-radius: $radius * 1px;
+    -webkit-border-bottom-left-radius: $radius * 1px;
+    -moz-border-radius-bottomright: $radius * 1px;
+    -moz-border-radius-bottomleft: $radius * 1px;
+    border-bottom-right-radius: $radius * 1px;
+    border-bottom-left-radius: $radius * 1px;
+}
+
+@mixin border-radius-left($radius: 2) {
+    -webkit-border-top-left-radius: $radius * 1px;
+    -webkit-border-bottom-left-radius: $radius * 1px;
+    -moz-border-radius-topleft: $radius * 1px;
+    -moz-border-radius-bottomleft: $radius * 1px;
+    border-top-left-radius: $radius * 1px;
+    border-bottom-left-radius: $radius * 1px;
+}
+
+@mixin border-radius-right($radius: 2) {
+    -webkit-border-top-right-radius: $radius * 1px;
+    -webkit-border-bottom-right-radius: $radius * 1px;
+    -moz-border-radius-topright: $radius * 1px;
+    -moz-border-radius-bottomright: $radius * 1px;
+    border-top-right-radius: $radius * 1px;
+    border-bottom-right-radius: $radius * 1px;
+}
+
+@mixin border-radius-top-left($radius: 2) {
+  -webkit-border-top-left-radius: $radius * 1px;
+  -moz-border-radius-topleft: $radius * 1px;
+  border-top-left-radius: $radius * 1px;
+}
+
+@mixin border-radius-top-right($radius: 2) {
+  -webkit-border-top-right-radius: $radius * 1px;
+  -moz-border-radius-topright: $radius * 1px;
+  border-top-right-radius: $radius * 1px;
+}
+
+@mixin border-radius-bottom-right($radius: 2) {
+  -webkit-border-bottom-right-radius: $radius * 1px;
+  -moz-border-radius-bottomright: $radius * 1px;
+  border-bottom-right-radius: $radius * 1px;
+}
+
+@mixin border-radius-bottom-left($radius: 2) {
+    -webkit-border-bottom-left-radius: $radius * 1px;
+    -moz-border-radius-bottomleft: $radius * 1px;
+    border-bottom-left-radius: $radius * 1px;
+}
+
+@mixin border-box() {
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+@function whiten($color, $white: 0.3) {
+    @return mix(#fff, $color, ($white * 100) * 1%);
+}
+
+@function blacken($color, $black: 0.3) {
+    @return mix(#000, $color, ($black * 100) * 1%);
+}
+
+@function widthPerc($colWidth, $context) {
+    @return ($colWidth * 100 / $context) * 1%
+}
+
+@function remDist($fontSizePx) {
+    @return ($fontSizePx / 10) * 1rem
+}
+
+@function black($alpha: 1) {
+    @return (rgba(0, 0, 0, $alpha))
+}
+
+@function white($alpha: 1) {
+    @return (rgba(255, 255, 255, $alpha))
+}
+
+@mixin font-size($remPx, $important: false) {
+    @if $important == true {
+        font-size: ($remPx) * 1px !important;
+        font-size: ($remPx / 10) * 1rem !important;
+    }
+    @else {
+        font-size: ($remPx) * 1px;
+        font-size: ($remPx / 10) * 1rem;
+    }
+}
+
+
+@mixin keyframes($name) {
+    @-o-keyframes #{$name} { @content };
+    @-moz-keyframes #{$name} { @content };
+    @-webkit-keyframes #{$name} { @content };
+    @keyframes #{$name} { @content };
+}
+
+
+@mixin animation($value, $type:'') {
+    $animation: animation;
+    @if $type != '' {
+        $animation:  $animation + '-' + $type;
+    }
+    @include vendor-prefix($animation, $value, property);
+}
+
+/// CSS transition mixin to the current selection (apply also vendor prefixes).
+/// See <https://developer.mozilla.org/en-US/docs/Web/CSS/transition> for the values
+///
+/// @param {property} [$type = all] the CSS property to apply the transition to
+/// @param {time} [$duration = .5s] the transition property
+/// @param {timing-function} [$effect = ease-out] the transition property
+@mixin transition($type : all, $duration : 0.5s, $effect : ease-out, $delay : 0s){
+    @include vendor-prefix(transition, $type + ', ' + $duration + ', ' + $effect + ', ' + $delay, property);
+}
+
+@mixin fade($duration: 1s){
+
+    @include keyframes(fade) {
+        0%   {opacity:0;}
+        50%   {opacity:1;}
+        100% {opacity:0;}
+    }
+
+    @include vendor-prefix(animation, fade 1s forwards, property);
+}
+
+@mixin repeat(){
+    @include animation(infinite, iteration-count);
+}
+
+@mixin largeHeading() {
+    @include font-size(20);
+    font-family: $headingFont;
+    font-style: normal;
+}
+
+@mixin disableSelect() {
+    @include vendor-prefix(user-select, none, property);
+}
+
+/* based on "visually-hidden" mixin in LDS for accessibility goals */
+@mixin visuallyHidden() {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip: rect(1px, 1px, 1px, 1px);
+    margin: 0;
+    padding: 0;
+}