@oat-sa/tao-core-ui 1.55.0 → 1.56.2

package/src/scss/inc/_functions.scss

@@ -1,283 +0,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;
-}

package/src/scss/inc/_grid.scss

@@ -1,66 +0,0 @@
-[class*=" col-"], [class^="col-"] {
-    float: left;
-    min-height: 1rem;
-    &:first-child {
-        margin-left: 0;
-    }
-    &.grid-container {
-        margin-bottom: 0;
-    }
-}
-
-.col-12 {
-    float: none;
-}
-
-.grid-container {
-    overflow-x: hidden; 
-}
-
-.grid-row, .fixed-grid-row, .colrow {
-    @extend .clearfix;
-    width: widthPerc(852, 840);
-}
-
-@for $i from 1 through 12 {
-    .col-#{$i} {
-        @include grid-unit($i, 12, 12);
-        margin-bottom: 12px;
-    }
-    .alpha {
-        margin-left: 0 !important
-    }
-}
-
-#icon-editor {
-
-    .grid-row {
-        @extend .clearfix;
-        width: 100%
-    }
-    @for $i from 1 through 12 {
-        .col-#{$i} {
-            @include grid-unit($i, 12);
-            margin-top: 0 !important;
-            margin-bottom: 0 !important;
-        }
-    }
-}
-
-@media all and (max-width: 1600px) {
-    //  @for $i from 1 through 12 {
-    //    .box.col-#{$i} { @include grid-unit($i, 12); }
-    //  }
-}
-
-@media all and (max-width: 1100px) {
-    //  @for $i from 1 through 8 {
-    //    .box.col-#{$i} { @include grid-unit($i, 8); }
-    //  }
-}
-
-@media all and (max-width: 768px) {
-    //  @for $i from 1 through 6 {
-    //    .box.col-#{$i} { @include grid-unit($i, 6); }
-    //  }
-}

package/src/scss/inc/_jquery.nouislider.scss

@@ -1,254 +0,0 @@
-/* Functional styling;
- * These styles are required for noUiSlider to function.
- * You don't need to change these rules to apply your design.
- */
-
-.noUi-target,
-.noUi-target * {
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -ms-touch-action: none;
-    -ms-user-select: none;
-    -moz-user-select: none;
-    -moz-box-sizing: border-box;
-    box-sizing: border-box;
-}
-.noUi-base {
-    width: 100%;
-    height: 100%;
-    position: relative;
-}
-.noUi-origin {
-    position: absolute;
-    right: 0;
-    top: 0;
-    left: 0;
-    bottom: 0;
-}
-.noUi-handle {
-    position: relative;
-    z-index: 1;
-}
-.noUi-stacking .noUi-handle {
-    /* This class is applied to the lower origin when
-       its values is > 50%. */
-    z-index: 10;
-}
-.noUi-stacking + .noUi-origin {
-    /* Fix stacking order in IE7, which incorrectly
-       creates a new context for the origins. */
-    *z-index: -1;
-}
-.noUi-state-tap .noUi-origin {
-}
-.noUi-state-drag * {
-    cursor: inherit !important;
-}
-
-/* Slider size and handle placement;
- */
-.noUi-horizontal {
-    height: 11px;
-}
-.noUi-horizontal .noUi-handle {
-    width: 10px;
-    height: 17px;
-    left: -5px;
-    top: -4px;
-}
-
-.noUi-horizontal .noUi-handle:after {
-    border-top: 3px solid $uiClickableActiveBg;
-    border-left: 5px solid transparent;
-    border-right: 5px solid transparent;
-    content: "";
-    left: 0;
-    position: absolute;
-    bottom: -3px;
-    width: 0;
-}
-
-.qti-slider-values{
-    margin-top: 6px !important;
-}
-
-.noUi-horizontal .noUi-handle {
-    &:hover:after {
-        border-top: 3px solid $uiClickableHoverBg;
-    }
-    &.noUi-active {
-        &:after {
-            border-top-color: $uiClickableHoverBg;
-        }
-    }
-}
-
-.noUi-horizontal.noUi-extended {
-    padding: 0 15px;
-}
-.noUi-horizontal.noUi-extended .noUi-origin  {
-    right: -15px;
-}
-.noUi-vertical {
-    width: 11px;
-    height: 200px;
-    display: inline-block;
-}
-.noUi-vertical .noUi-handle {
-    width: 17px;
-    height: 10px;
-    left: -4px;
-    top: -5px;
-}
-.noUi-vertical.noUi-extended {
-    padding: 15px 0;
-}
-.noUi-vertical.noUi-extended .noUi-origin  {
-    bottom: -15px;
-}
-
-/* Styling;
- */
-.noUi-background {
-    background: $uiGeneralContentBg;
-}
-.noUi-connect {
-    background: $uiClickableDefaultBg;
-}
-.noUi-origin {
-}
-.noUi-target {
-    @include simple-border()
-}
-
-/* Handles and cursors;
- */
-.noUi-dragable {
-    cursor: w-resize;
-}
-.noUi-vertical .noUi-dragable {
-    cursor: n-resize;
-}
-.noUi-handle {
-    background: $uiClickableActiveBg;
-    color: $uiClickableActiveBg;
-    cursor: default;
-}
-
-.noUi-active, .noUi-handle:hover{
-    background:$uiClickableHoverBg;
-    color: $uiClickableHoverBg;
-}
-
-.noUi-handle:after {
-    left: 17px;
-}
-.noUi-vertical .noUi-handle:before,
-.noUi-vertical .noUi-handle:after {
-    width: 14px;
-    height: 1px;
-    left: 6px;
-    top: 14px;
-}
-.noUi-vertical .noUi-handle:after {
-    top: 17px;
-}
-
-/* Disabled state;
- */
-[disabled].noUi-connect,
-[disabled] .noUi-connect {
-    background: #B8B8B8;
-}
-[disabled] .noUi-handle {
-    cursor: not-allowed;
-}
-
-.noUi-horizontal {
-
-    .step-marker {
-        position:relative;
-        //margin-bottom: 10px;
-        span {
-            font-size: 10px;
-            position: relative;
-            display:block;
-            float:left;
-            text-align:center;
-            min-height: 10px;
-            &:before {
-                width: 1px;
-                height: 5px;
-                position: absolute;
-                content: '';
-                background: whiten($textColor, .15);
-                left: 50%;
-            }
-        }
-        &:before {
-        }
-        &.after {
-            top: 5px;
-            span {
-                &:before {
-                    top: -4px;
-                }
-            }
-        }
-        &.before {
-            top: -28px;
-            span {
-                &:before {
-                    top: 13px;
-                }
-            }
-        }
-    }
-}
-
-.item-editor-sidebar .noUi-target {
-    margin-left: 4px;
-    margin-right: 4px;
-}
-
-.noUi-vertical-wrapper {
-    position: relative;
-    display: inline-block;
-    .step-marker {
-        position:absolute;
-        height: 100%;
-        top: 0;
-        span {
-            font-size: 10px;
-            position: relative;
-            display: block;
-            &:before {
-                width: 5px;
-                height: 1px;
-                position: absolute;
-                content: '';
-                background: whiten($textColor, .15);
-                top: 50%;
-            }
-        }
-        &:before {
-        }
-
-        &.after {
-            left: 20px;
-            span {
-                &:before {
-                    left: -9px;
-                }
-            }
-        }
-        &.before {
-            span {
-                &:before {
-                    left: -40%;
-                }
-            }
-        }
-    }
-}
-