@oat-sa/tao-core-ui 1.58.2 → 1.59.0

package/src/scss/inc/_functions.scss

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

package/src/scss/inc/_grid.scss

@@ -0,0 +1,66 @@
+[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

@@ -0,0 +1,254 @@
+/* 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%;
+                }
+            }
+        }
+    }
+}
+