@oat-sa/tao-core-ui 1.62.0 → 1.63.0

package/src/inplacer.js

@@ -30,7 +30,7 @@ var defaults = {
 
 function getText($elt) {
     var text = '';
-    $elt.contents().filter(function() {
+    $elt.contents().filter(function () {
         if (this.nodeType === Node.TEXT_NODE && $.trim(this.nodeValue) !== '') {
             text += $.trim(this.nodeValue);
         }
@@ -46,7 +46,7 @@ function getText($elt) {
 
 function setText($elt, text) {
     var set = false;
-    $elt.contents().filter(function() {
+    $elt.contents().filter(function () {
         if (this.nodeType === Node.TEXT_NODE && set === false) {
             set = true;
             this.nodeValue = text;
@@ -63,8 +63,7 @@ function setText($elt, text) {
  * @param {jQueryElement} $elt - the element to set the text to
  */
 function emptyText($elt) {
-    var set = false;
-    $elt.contents().filter(function() {
+    $elt.contents().filter(function () {
         if (this.nodeType === Node.TEXT_NODE) {
             this.nodeValue = '';
         }
@@ -74,7 +73,7 @@ function emptyText($elt) {
  * The InPlacer component,
  * @exports ui/inplacer
  */
-var InPlacer = {
+const InPlacer = {
     /**
      * Initialize the plugin.
      *
@@ -91,15 +90,15 @@ var InPlacer = {
      * @fires InPlacer#create.inplacer
      * @returns {jQueryElement} for chaining
      */
-    init: function(options) {
+    init: function (options) {
         //get options using default
         options = $.extend(true, {}, defaults, options);
 
-        return this.each(function() {
-            var $elt = $(this);
+        return this.each(function () {
+            const $elt = $(this);
 
             if (!$elt.data(dataNs)) {
-                var $target = options.target;
+                const $target = options.target;
 
                 if (!/^#/.test($target.selector)) {
                     $.error('The target selector must referr to the of an element id or to the element to create.');
@@ -122,7 +121,7 @@ var InPlacer = {
 
                 //bind an event to trigger the toggling
                 if (options.bindEvent !== false) {
-                    $elt.on(options.bindEvent, function(e) {
+                    $elt.on(options.bindEvent, function (e) {
                         if ($elt.children(':text').length === 0) {
                             e.preventDefault();
                             InPlacer._edit($elt);
@@ -147,7 +146,7 @@ var InPlacer = {
      * @param {jQueryElement} $elt - plugin's element
      * @fires InPlacer#toggle.inplacer
      */
-    _toggle: function($elt) {
+    _toggle: function ($elt) {
         if ($elt.children(':text').length > 0) {
             this._leave($elt);
         } else {
@@ -163,7 +162,7 @@ var InPlacer = {
      * @param {jQueryElement} $elt - plugin's element
      * @fires InPlacer#edit.inplacer
      */
-    _edit: function($elt) {
+    _edit: function ($elt) {
         var self = this;
         var options = $elt.data(dataNs);
         var $target = options.target;
@@ -172,7 +171,7 @@ var InPlacer = {
         var $editor;
         emptyText($elt);
         if (_.contains(options.mapping.textarea, $elt.prop('tagName').toLowerCase())) {
-            var height = options.height || $elt.height() + 'px';
+            const height = options.height || $elt.height() + 'px';
             $editor = $elt
                 .append('<textarea>' + text + '</textarea>')
                 .children(':input')
@@ -190,15 +189,15 @@ var InPlacer = {
 
         $editor
             .off('click')
-            .change(function(e) {
+            .change(function (e) {
                 e.stopPropagation(); //the change evt is triggered on the top element on leaving
             })
-            .keyup(function(e) {
+            .keyup(function (e) {
                 if (e.which === 13) {
                     self._leave($elt);
                 }
             })
-            .blur(function() {
+            .blur(function () {
                 self._leave($elt);
             })
             .focus();
@@ -221,7 +220,7 @@ var InPlacer = {
      * @param {jQueryElement} $elt - plugin's element
      * @fires InPlacer#leave.inplacer
      */
-    _leave: function($elt) {
+    _leave: function ($elt) {
         var options = $elt.data(dataNs);
         var $target = options.target;
         var $input = $elt.children(':input');
@@ -249,7 +248,7 @@ var InPlacer = {
      * @param {jQueryElement} $elt - plugin's element
      * @param {jQueryElement} $target - the target to be in sync with
      */
-    _sync: function($elt, $target) {
+    _sync: function ($elt, $target) {
         if ($elt.children(':text').length > 0) {
             $target.val($elt.children(':text').val());
         } else {
@@ -264,8 +263,8 @@ var InPlacer = {
      * @example $('selector').inplacer('destroy');
      * @public
      */
-    destroy: function() {
-        this.each(function() {
+    destroy: function () {
+        this.each(function () {
             var $elt = $(this);
             var options = $elt.data(dataNs);
             $elt.removeClass(options.inplaceClass);
@@ -300,7 +299,7 @@ export default function listenDataAttr($container) {
         listenerEvent: 'click',
         namespace: dataNs
     })
-        .init(function($elt, $target) {
+        .init(function ($elt, $target) {
             var options = {
                 target: $target,
                 bindEvent: false
@@ -310,7 +309,7 @@ export default function listenDataAttr($container) {
             }
             $elt.inplacer(options);
         })
-        .trigger(function($elt) {
+        .trigger(function ($elt) {
             $elt.inplacer('toggle');
         });
 }

package/src/itemButtonList/css/item-button-list.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../scss/item-button-list.scss","../../../scss/inc/_functions.scss","../../../scss/inc/fonts/_tao-icon-vars.scss","../../../scss/inc/_colors.scss"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;EAgBE;ACHF;;;;;;CDUC;AC0PD,oEAAA;ACjRA,gBAAA;AF6BA;IACI,aAAa;IACb,eAAe;IACf,sBAAsB;IACtB,UAAU;IAEV,2BAAA;IA0FA,iCAAA;IAiDA,sEAAA;IAuBA,qCAAA;AAlKJ;;AANA;IAQQ,eAZY;IAaZ,cAbY;IAcZ,aAAa;IACb,uBAAuB;IAAE,gEAAA;IACzB,mBAAmB;IACnB,wBAAA;IACA,UAAU;IACV,YAAY;AAGpB;;AAlBA;IAmBQ,kBAAkB;IAClB,aAAa;IACb,uBAAuB;IACvB,mBAAmB;IACnB,YA5BU;IA6BV,WA7BU;IA8BV,mBAAmB;IACnB,kBAhCY;IAiCZ,sBA9Ba;IA+Bb,qBGTmC;IHUnC,mCAAmC;IACnC,UAAU;IAAE,6BAAA;IACZ,iBAAiB;IACjB,iBAAiB;IACjB,uBCiJiC;IDhJjC,cGfmC;IHgBnC,iBAAiB;IACjB,eAAe;AAIvB;;AAxCA;IAwCQ,gEAAgE;IAChE,kBAAkB;IAClB,gBAAgB;IAChB,mBAAmB;IACnB,oBAAoB;AAI5B;;AAhDA;IA+CQ,UAAU;IACV,MAAM;IACN,OAAO;AAKf;;AAtDA;IAoDQ,aAAa;AAMrB;;AA1DA;IAuDQ,aAAa;AAOrB;;AA9DA;IA2DQ,aAAa;AAOrB;;AAlEA;IA+DQ,kBAAkB;IAClB,YAAY;IACZ,cAAc;IACd,WAAW;IACX,YAAY;IACZ,mBAAmB;IACnB,YC6GiC;ID5GjC,0BC4GiC;ID3GjC,aAAa;IACb,uBAAuB;IACvB,mBAAmB;AAO3B;;AAhFA;IA4EQ,iBAAiB;IACjB,UAAU;IACV,MAAM;IACN,OAAO;AAQf;;AAvFA;IEdwB,gBAAgB;AFyGxC;;AA3FA;IEZuB,gBAAgB;AF2GvC;;AA/FA;IEiLwB,gBAAgB;AF9ExC;;AAnGA;IEgLyB,gBAAgB;AFzEzC;;AAvGA;IC4BY,yBAAwB;IAAxB,oBAAwB;IAAxB,iBAAwB;ADmFpC;;AA/GA;IAsGgB,qBAxGM;IAyGN,cGnF0B;IHoF1B,qBGpF0B;AHiG1C;;AArHA;IA6GgB,qBA/GM;IAgHN,yBG1F0B;IH2F1B,YCmEyB;IDlEzB,qBG5F0B;AHwG1C;;AA5HA;IAqHgB,kBAAkB;IAClB,cAAc;IACd,UAAU;IACV,cGpG0B;IHqG1B,cAAc;IACd,iBAAiB;IACjB,UAAU;IACV,eAAe;IACf,UAAU;IACV,2BAAA;IACA,SAAS;IACT,2BAA2B;AAW3C;;AA3IA;IAsIgB,yBGlKU;AH2K1B;;AA/IA;IA4IgB,yBGpKQ;AH2KxB;;AAnJA;IAoJY,yBA5JsB;IA6JtB,cG/HuC;IHgIvC,qBGhIuC;AHmInD;;AAzJA;;IA2JS,wBAAA;IACA,kCAAkC;IAClC,qBAAqB;IACrB,4BAA4B;AAGrC;;AAjKA;;IAiKY,mBAAmB;IACnB,wBAAA;IACA,iBAAiB;AAK7B;;AAxKA;;IA4KY,WAAW;IACX,cAAc;IACd,kBAAkB;IAClB,aAAa;IACb,cAAc;IACd,SAAS;IACT,QAAQ;IACR,gCAAgC;IAChC,qBAtLU;IAuLV,qBG/JuC;IHgKvC,oBAAoB;IACpB,kBA7LQ;AA8LpB;;AAxLA;;;IA6LY,cGvKuC;AHwKnD;;AA9LA;;IAkMY,uBChB6B;IDiB7B,cG7KuC;IH8KvC,qBG9KuC;AH+KnD;;AArMA;;IAyMY,yBGnLuC;IHoLvC,YCxB6B;IDyB7B,qBGrLuC;AHsLnD","file":"item-button-list.css","sourcesContent":["/**\n * This program is free software; you can redistribute it and/or\n * modify it under the terms of the GNU General Public License\n * as published by the Free Software Foundation; under version 2\n * of the License (non-upgradable).\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program; if not, write to the Free Software\n * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.\n *\n * Copyright (c) 2022 Open Assessment Technologies SA ;\n */\n@import \"inc/bootstrap\";\n\n$correctColor: $success;\n$incorrectColor: $error;\n$hoverBgColor: hsl(208, 100%, 95%);\n\n$radiusCircular: 50%;\n$sizeDefault: 4rem;\n$hitboxSize: 6.25rem;\n$borderThin: 0.125rem;\n$borderMedium: 0.25rem;\n\n.buttonlist-items {\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: start;\n    padding: 0;\n\n    /****** base styles *******/\n    .buttonlist-item {\n        height: $hitboxSize;\n        width: $hitboxSize;\n        display: flex;\n        justify-content: center; /* aligning left - cut focusing board for keyboard interacting */\n        align-items: center;\n        /* reset parent styles */\n        padding: 0;\n        border: none;\n    }\n\n    .buttonlist-btn {\n        position: relative;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        height: $sizeDefault;\n        width: $sizeDefault;\n        border-style: solid;\n        border-radius: $radiusCircular;\n        border-width: $borderThin;\n        border-color: $uiReviewPanelTextDisabled;\n        margin: 1.3rem 0.75rem 1rem 0.75rem;\n        padding: 0; /*Fixes firefox button jumps*/\n        font-weight: bold;\n        font-size: 1.6rem;\n        background-color: $uiReviewPanelBgDefault;\n        color: $uiReviewPanelTextDisabled;\n        text-shadow: none;\n        cursor: pointer;\n    }\n\n    .buttonlist-label {\n        font-family: 'Nunito Sans', 'Source Sans Pro', Arial, sans-serif;\n        max-width: 3.75rem;\n        overflow: hidden;\n        white-space: nowrap;\n        line-height: initial;\n    }\n    .buttonlist-icon {\n        padding: 0;\n        top: 0;\n        left: 0;\n    }\n    .buttonlist-icon:not([class*=\"icon-\"]) {\n        display: none;\n    }\n    .buttonlist-icon[class*=\"icon-\"] ~ .buttonlist-label {\n        display: none;\n    }\n\n    .indicator {\n        display: none;\n    }\n\n    .buttonlist-score-badge {\n        position: absolute;\n        top: -0.9rem;\n        right: -0.9rem;\n        width: 2rem;\n        height: 2rem;\n        border-radius: 100%;\n        color: $uiReviewPanelTextInverted;\n        border: 0.1rem solid $uiReviewPanelTextInverted;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n    }\n    .buttonlist-score-icon {\n        font-size: 1.2rem;\n        padding: 0;\n        top: 0;\n        left: 0;\n    }\n\n    .icon-info::before {\n        @include icon-info-bare;\n    }\n    .icon-flagged::before {\n        @include icon-bookmark;\n    }\n    .icon-correct::before {\n        @include icon-result-ok;\n    }\n    .icon-incorrect::before {\n        @include icon-result-nok;\n    }\n\n\n    /****** step state styles *******/\n    .buttonlist-item {\n        @include disableSelect();\n\n        &.viewed {\n            .buttonlist-btn {\n                border-width: $borderMedium;\n                color: $uiReviewPanelTextDefault;\n                border-color: $uiReviewPanelTextDefault;\n            }\n        }\n        &.answered {\n            .buttonlist-btn {\n                border-width: $borderMedium;\n                background-color: $uiReviewPanelBgInverted;\n                color: $uiReviewPanelTextInverted;\n                border-color: $uiReviewPanelBgInverted;\n            }\n        }\n        &.buttonlist-item-active {\n            .indicator {\n                position: absolute;\n                display: block;\n                z-index: 1;\n                color: $uiReviewPanelTextDefault;\n                height: 1.4rem;\n                min-width: 1.6rem;\n                top: unset;\n                bottom: -1.7rem;\n                padding: 0;\n                /* centering horizontally */\n                left: 50%;\n                transform: translateX(-50%);\n            }\n        }\n\n        &.correct {\n            .buttonlist-score-badge {\n                background-color: $correctColor;\n            }\n        }\n\n        &.incorrect {\n            .buttonlist-score-badge {\n                background-color: $incorrectColor;\n            }\n        }\n    }\n\n    /* disabling is applied at buttonlist-item or buttonlist-items level */\n    &:not(.disabled) .buttonlist-item:not(.disabled) {\n        .buttonlist-btn:hover {\n            background-color: $hoverBgColor;\n            color: $uiReviewPanelPrimaryHighlight;\n            border-color: $uiReviewPanelPrimaryHighlight;\n        }\n    }\n    &.disabled,\n    .buttonlist-item.disabled {\n         /* reset global styles */\n         background-color: unset !important;\n         opacity: 1 !important;\n         text-shadow: none !important;\n\n        .buttonlist-btn {\n            cursor: not-allowed;\n            /* reset global styles */\n            text-shadow: none;\n        }\n    }\n\n\n    /****** keyboard focus styles *******/\n    .buttonlist-item {\n        &.key-navigation-highlight .buttonlist-btn::before,\n        .buttonlist-btn.buttonlist-btn-focus:focus::before {\n            content: '';\n            display: block;\n            position: absolute;\n            width: 5.2rem;\n            height: 5.2rem;\n            left: 50%;\n            top: 50%;\n            transform: translate(-50%, -50%);\n            border-width: $borderMedium;\n            border-color: $uiReviewPanelPrimaryHighlight;\n            border-style: dotted;\n            border-radius: $radiusCircular;\n        }\n\n        &.key-navigation-highlight.buttonlist-item-active .buttonlist-btn .indicator,\n        &.buttonlist-item-active .buttonlist-btn.buttonlist-btn-focus:focus .indicator,\n        &.buttonlist-item-active .buttonlist-btn:focus-visible .indicator {\n            color: $uiReviewPanelPrimaryHighlight;\n        }\n\n        &.key-navigation-highlight.viewed .buttonlist-btn,\n        &.viewed .buttonlist-btn.buttonlist-btn-focus:focus {\n            background-color: $uiReviewPanelBgDefault;\n            color: $uiReviewPanelPrimaryHighlight;\n            border-color: $uiReviewPanelPrimaryHighlight;\n        }\n\n        &.key-navigation-highlight.answered .buttonlist-btn,\n        &.answered .buttonlist-btn.buttonlist-btn-focus:focus {\n            background-color: $uiReviewPanelPrimaryHighlight;\n            color: $uiReviewPanelTextInverted;\n            border-color: $uiReviewPanelPrimaryHighlight;\n        }\n    }\n}\n\n/*# sourceMappingURL=item-button-list.css.map */","@mixin iterate-sprite($iconList, $x, $y, $direction, $prefix:'') {\n    @each $icon in $iconList {\n        #{$prefix}#{$icon} {\n            background-position: $x * 1px $y * 1px;\n        }\n        @if $direction == 'x' {\n            $x: $x - 16;\n        } @else {\n            $y: $y - 16;\n        }\n    }\n}\n\n/*\nUsage:\n- linear-gradient((color1, color2, color3)) - returns linear-gradient with evenly distributed colors,\n   if 3 colors used then the position of each will be 33,33%\n- linear-gradient((color1 0%, color2 30%, color3 80%)) - returns linear-gradient with manually distributed colors,\n   first param - color, second - position. Also you can use px or other valid units for set position.\n*/\n@mixin linear-gradient($colorList, $direction: 'to right') {\n    $percentage: 0;\n    $units: '%';\n    $count: length($colorList);\n    $increment: 100 / ($count - 1);\n    $css: #{$direction + ', '};\n    $sep: ', ';\n    @each $colorItem in $colorList {\n        $color: $colorItem;\n        @if (length($colorItem) > 1) {\n            $color: nth($colorItem, 1);\n            $percentage: nth($colorItem, 2);\n            $units: '';\n        }\n        @if ($percentage >= 100 or index($colorList, $colorItem) == $count) {\n            $sep: '';\n        }\n        $css: #{$css + $color + ' ' + $percentage + $units + $sep};\n        $percentage: $percentage + $increment;\n    }\n    background: linear-gradient( #{$css} );\n}\n\n@mixin grid-unit($span, $numCols: 12, $gutter: 0) {\n    $gridPx: 840;\n    $rawSpanPx: (($gridPx - ($numCols * $gutter)) / $numCols);\n    $spanPx: $rawSpanPx * $span + (($span - 1) * $gutter);\n    $spanPercent: widthPerc($spanPx, $gridPx);\n    $marginPercent: widthPerc($gutter, $gridPx);\n    margin-left: $marginPercent;\n    width: $spanPercent;\n}\n\n\n@mixin vendor-prefix($property, $value, $whatToPrefix: property, $prefixes: (-webkit-, -moz-, -ms-, -o-, '')) {\n    @if $whatToPrefix == 'property' {\n        @each $prefix in $prefixes {\n            #{$prefix + $property}: #{$value};\n        }\n    }\n    @else if $whatToPrefix == 'value' {\n        @each $prefix in $prefixes {\n            #{$property}: #{$prefix + $value};\n        }\n    }\n}\n@mixin flex-container($wrapBehavior: nowrap, $direction : row) {\n    @include vendor-prefix(display, flex, value, (-ms-, -webkit-, ''));\n\n    @include vendor-prefix(flex-direction, $direction, property, (-ms-, -webkit-, ''));\n    @include vendor-prefix(flex-wrap, $wrapBehavior, property, (-ms-, -webkit-, ''));\n\n    @include vendor-prefix(justify-content, flex-start, property, (-webkit-, ''));\n\n    @include vendor-prefix(align-content, flex-start, property, (-webkit-, ''));\n\n    @include vendor-prefix(align-items, stretch, property, (-webkit-, ''));\n}\n\n@mixin simple-flex-box($width: auto, $minWidth: 1) {\n\n    @include vendor-prefix(order, 0, property, (-ms-, -webkit-, ''));\n    flex-item-align: stretch;\n    -ms-flex-item-align: stretch;\n    @include vendor-prefix(align-self, stretch, property, (-webkit-, ''));\n\n    // if both, min width and width are set, width will win this conflict\n    @if ($width == auto) {\n        @if ($minWidth != 1) {\n            @include vendor-prefix(flex, 1 1 $minWidth, property, (-ms-, -webkit-, ''));\n        }\n        @else {\n            @include vendor-prefix(flex, 1 1 auto, property, (-ms-, -webkit-, ''));\n            // @see https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis#Values\n            // for a discussion auto vs. main-size\n            @include vendor-prefix(flex, 1 1, property, (-ms-, -webkit-, ''));\n        }\n    }\n    @else {\n        @include vendor-prefix(flex, 0 0 $width, property, (-ms-, -webkit-, ''));\n    }\n}\n\n\n@mixin box-shadow($horiz: 1px, $vert: 1px, $blur: 2px, $spread: 0, $color: rgba(0, 0, 0, .2)) {\n    @include vendor-prefix(box-shadow, $horiz $vert $blur $spread $color, property);\n}\n\n@mixin simple-border($color: #ddd) {\n    border: 1px solid $color;\n    border-radius: 2px;\n    -webkit-border-radius: 2px;\n}\n\n@mixin border-radius($radius: 2) {\n    -moz-border-radius: $radius * 1px;\n    -webkit-border-radius: $radius * 1px;\n    border-radius: $radius * 1px;\n}\n\n@mixin border-radius-top($radius: 2) {\n    -webkit-border-top-left-radius: $radius * 1px;\n    -webkit-border-top-right-radius: $radius * 1px;\n    -moz-border-radius-topleft: $radius * 1px;\n    -moz-border-radius-topright: $radius * 1px;\n    border-top-left-radius: $radius * 1px;\n    border-top-right-radius: $radius * 1px;\n}\n\n@mixin border-radius-bottom($radius: 2) {\n    -webkit-border-bottom-right-radius: $radius * 1px;\n    -webkit-border-bottom-left-radius: $radius * 1px;\n    -moz-border-radius-bottomright: $radius * 1px;\n    -moz-border-radius-bottomleft: $radius * 1px;\n    border-bottom-right-radius: $radius * 1px;\n    border-bottom-left-radius: $radius * 1px;\n}\n\n@mixin border-radius-left($radius: 2) {\n    -webkit-border-top-left-radius: $radius * 1px;\n    -webkit-border-bottom-left-radius: $radius * 1px;\n    -moz-border-radius-topleft: $radius * 1px;\n    -moz-border-radius-bottomleft: $radius * 1px;\n    border-top-left-radius: $radius * 1px;\n    border-bottom-left-radius: $radius * 1px;\n}\n\n@mixin border-radius-right($radius: 2) {\n    -webkit-border-top-right-radius: $radius * 1px;\n    -webkit-border-bottom-right-radius: $radius * 1px;\n    -moz-border-radius-topright: $radius * 1px;\n    -moz-border-radius-bottomright: $radius * 1px;\n    border-top-right-radius: $radius * 1px;\n    border-bottom-right-radius: $radius * 1px;\n}\n\n@mixin border-radius-top-left($radius: 2) {\n  -webkit-border-top-left-radius: $radius * 1px;\n  -moz-border-radius-topleft: $radius * 1px;\n  border-top-left-radius: $radius * 1px;\n}\n\n@mixin border-radius-top-right($radius: 2) {\n  -webkit-border-top-right-radius: $radius * 1px;\n  -moz-border-radius-topright: $radius * 1px;\n  border-top-right-radius: $radius * 1px;\n}\n\n@mixin border-radius-bottom-right($radius: 2) {\n  -webkit-border-bottom-right-radius: $radius * 1px;\n  -moz-border-radius-bottomright: $radius * 1px;\n  border-bottom-right-radius: $radius * 1px;\n}\n\n@mixin border-radius-bottom-left($radius: 2) {\n    -webkit-border-bottom-left-radius: $radius * 1px;\n    -moz-border-radius-bottomleft: $radius * 1px;\n    border-bottom-left-radius: $radius * 1px;\n}\n\n@mixin border-box() {\n    -moz-box-sizing: border-box;\n    -webkit-box-sizing: border-box;\n    box-sizing: border-box;\n}\n\n@function whiten($color, $white: 0.3) {\n    @return mix(#fff, $color, ($white * 100) * 1%);\n}\n\n@function blacken($color, $black: 0.3) {\n    @return mix(#000, $color, ($black * 100) * 1%);\n}\n\n@function widthPerc($colWidth, $context) {\n    @return ($colWidth * 100 / $context) * 1%\n}\n\n@function remDist($fontSizePx) {\n    @return ($fontSizePx / 10) * 1rem\n}\n\n@function black($alpha: 1) {\n    @return (rgba(0, 0, 0, $alpha))\n}\n\n@function white($alpha: 1) {\n    @return (rgba(255, 255, 255, $alpha))\n}\n\n@mixin font-size($remPx, $important: false) {\n    @if $important == true {\n        font-size: ($remPx) * 1px !important;\n        font-size: ($remPx / 10) * 1rem !important;\n    }\n    @else {\n        font-size: ($remPx) * 1px;\n        font-size: ($remPx / 10) * 1rem;\n    }\n}\n\n\n@mixin keyframes($name) {\n    @-o-keyframes #{$name} { @content };\n    @-moz-keyframes #{$name} { @content };\n    @-webkit-keyframes #{$name} { @content };\n    @keyframes #{$name} { @content };\n}\n\n\n@mixin animation($value, $type:'') {\n    $animation: animation;\n    @if $type != '' {\n        $animation:  $animation + '-' + $type;\n    }\n    @include vendor-prefix($animation, $value, property);\n}\n\n/// CSS transition mixin to the current selection (apply also vendor prefixes).\n/// See <https://developer.mozilla.org/en-US/docs/Web/CSS/transition> for the values\n///\n/// @param {property} [$type = all] the CSS property to apply the transition to\n/// @param {time} [$duration = .5s] the transition property\n/// @param {timing-function} [$effect = ease-out] the transition property\n@mixin transition($type : all, $duration : 0.5s, $effect : ease-out, $delay : 0s){\n    @include vendor-prefix(transition, $type + ', ' + $duration + ', ' + $effect + ', ' + $delay, property);\n}\n\n@mixin fade($duration: 1s){\n\n    @include keyframes(fade) {\n        0%   {opacity:0;}\n        50%   {opacity:1;}\n        100% {opacity:0;}\n    }\n\n    @include vendor-prefix(animation, fade 1s forwards, property);\n}\n\n@mixin repeat(){\n    @include animation(infinite, iteration-count);\n}\n\n@mixin largeHeading() {\n    @include font-size(20);\n    font-family: $headingFont;\n    font-style: normal;\n}\n\n@mixin disableSelect() {\n    @include vendor-prefix(user-select, none, property);\n}\n\n/* based on \"visually-hidden\" mixin in LDS for accessibility goals */\n@mixin visuallyHidden() {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    clip: rect(1px, 1px, 1px, 1px);\n    margin: 0;\n    padding: 0;\n}\n","/* Do not edit */@mixin tao-icon-setup {\n  /* use !important to prevent issues with browser extensions that change fonts */\n  font-family: 'tao' !important;\n  speak: never;\n  font-style: normal;\n  font-weight: normal;\n  font-variant: normal;\n  text-transform: none;\n  line-height: 1;\n\n  /* Better Font Rendering =========== */\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n@mixin icon-info-bare { content: \"\\e923\"; }\n@mixin icon-bookmark-outline { content: \"\\e922\"; }\n@mixin icon-bookmark { content: \"\\e921\"; }\n@mixin icon-indicator { content: \"\\e920\"; }\n@mixin icon-add-subsection { content: \"\\e918\"; }\n@mixin icon-wrap-inline { content: \"\\e915\"; }\n@mixin icon-wrap-left { content: \"\\e916\"; }\n@mixin icon-wrap-right { content: \"\\e917\"; }\n@mixin icon-offline { content: \"\\e913\"; }\n@mixin icon-online { content: \"\\e914\"; }\n@mixin icon-tab { content: \"\\e90d\"; }\n@mixin icon-untab { content: \"\\e90e\"; }\n@mixin icon-multi-select { content: \"\\e90b\"; }\n@mixin icon-clipboard { content: \"\\e90a\"; }\n@mixin icon-filebox { content: \"\\e909\"; }\n@mixin icon-click-to-speak { content: \"\\e907\"; }\n@mixin icon-speech-bubble { content: \"\\f0e5\"; }\n@mixin icon-microphone { content: \"\\f130\"; }\n@mixin icon-microphone-off { content: \"\\f131\"; }\n@mixin icon-disconnect { content: \"\\e905\"; }\n@mixin icon-connect { content: \"\\e906\"; }\n@mixin icon-eliminate { content: \"\\e904\"; }\n@mixin icon-wheelchair { content: \"\\e903\"; }\n@mixin icon-text-marker { content: \"\\e902\"; }\n@mixin icon-unshield { content: \"\\e32a\"; }\n@mixin icon-shield { content: \"\\e8e8\"; }\n@mixin icon-tree { content: \"\\e6b4\"; }\n@mixin icon-home { content: \"\\e6b3\"; }\n@mixin icon-shared-file { content: \"\\e6b2\"; }\n@mixin icon-end-attempt { content: \"\\e603\"; }\n@mixin icon-icon { content: \"\\f1c5\"; }\n@mixin icon-radio-bg { content: \"\\e600\"; }\n@mixin icon-checkbox-bg { content: \"\\e601\"; }\n@mixin icon-tag { content: \"\\e602\"; }\n@mixin icon-style { content: \"\\e604\"; }\n@mixin icon-ownership-transfer { content: \"\\e605\"; }\n@mixin icon-property-advanced { content: \"\\e606\"; }\n@mixin icon-property-add { content: \"\\e607\"; }\n@mixin icon-repository-add { content: \"\\e608\"; }\n@mixin icon-repository-remove { content: \"\\e609\"; }\n@mixin icon-repository { content: \"\\e60a\"; }\n@mixin icon-result-server { content: \"\\e60b\"; }\n@mixin icon-folder { content: \"\\e60c\"; }\n@mixin icon-folder-open { content: \"\\e60d\"; }\n@mixin icon-left { content: \"\\e60e\"; }\n@mixin icon-right { content: \"\\e60f\"; }\n@mixin icon-up { content: \"\\e610\"; }\n@mixin icon-down { content: \"\\e611\"; }\n@mixin icon-undo { content: \"\\e612\"; }\n@mixin icon-redo { content: \"\\e613\"; }\n@mixin icon-screen { content: \"\\e614\"; }\n@mixin icon-laptop { content: \"\\e615\"; }\n@mixin icon-tablet { content: \"\\e616\"; }\n@mixin icon-phone { content: \"\\e617\"; }\n@mixin icon-move { content: \"\\e618\"; }\n@mixin icon-bin { content: \"\\e619\"; }\n@mixin icon-shuffle { content: \"\\e61a\"; }\n@mixin icon-print { content: \"\\e61b\"; }\n@mixin icon-tools { content: \"\\e61c\"; }\n@mixin icon-settings { content: \"\\e61d\"; }\n@mixin icon-video { content: \"\\e61e\"; }\n@mixin icon-find { content: \"\\e61f\"; }\n@mixin icon-image { content: \"\\e620\"; }\n@mixin icon-edit { content: \"\\e621\"; }\n@mixin icon-document { content: \"\\e622\"; }\n@mixin icon-resize-grid { content: \"\\e623\"; }\n@mixin icon-resize { content: \"\\e624\"; }\n@mixin icon-help { content: \"\\e625\"; }\n@mixin icon-mobile-menu { content: \"\\e626\"; }\n@mixin icon-fix { content: \"\\e627\"; }\n@mixin icon-unlock { content: \"\\e628\"; }\n@mixin icon-lock { content: \"\\e629\"; }\n@mixin icon-ul { content: \"\\e62a\"; }\n@mixin icon-ol { content: \"\\e62b\"; }\n@mixin icon-email { content: \"\\e62c\"; }\n@mixin icon-download { content: \"\\e62d\"; }\n@mixin icon-logout { content: \"\\e62e\"; }\n@mixin icon-login { content: \"\\e62f\"; }\n@mixin icon-spinner { content: \"\\e630\"; }\n@mixin icon-preview { content: \"\\e631\"; }\n@mixin icon-external { content: \"\\e632\"; }\n@mixin icon-time { content: \"\\e633\"; }\n@mixin icon-save { content: \"\\e634\"; }\n@mixin icon-warning { content: \"\\e635\"; }\n@mixin icon-add { content: \"\\e636\"; }\n@mixin icon-error { content: \"\\e900\"; }\n@mixin icon-close { content: \"\\e637\"; }\n@mixin icon-success { content: \"\\e638\"; }\n@mixin icon-remove { content: \"\\e639\"; }\n@mixin icon-info { content: \"\\e63a\"; }\n@mixin icon-danger { content: \"\\e63b\"; }\n@mixin icon-users { content: \"\\e63c\"; }\n@mixin icon-user { content: \"\\e63d\"; }\n@mixin icon-test-taker { content: \"\\e63e\"; }\n@mixin icon-test-takers { content: \"\\e63f\"; }\n@mixin icon-item { content: \"\\e640\"; }\n@mixin icon-test { content: \"\\e641\"; }\n@mixin icon-delivery { content: \"\\e642\"; }\n@mixin icon-eye-slash { content: \"\\e643\"; }\n@mixin icon-result { content: \"\\e644\"; }\n@mixin icon-delivery-small { content: \"\\e645\"; }\n@mixin icon-upload { content: \"\\e646\"; }\n@mixin icon-result-small { content: \"\\e647\"; }\n@mixin icon-mobile-preview { content: \"\\e648\"; }\n@mixin icon-extension { content: \"\\e649\"; }\n@mixin icon-desktop-preview { content: \"\\e64a\"; }\n@mixin icon-tablet-preview { content: \"\\e64b\"; }\n@mixin icon-insert-horizontal-line { content: \"\\e64c\"; }\n@mixin icon-table { content: \"\\e64d\"; }\n@mixin icon-anchor { content: \"\\e64e\"; }\n@mixin icon-unlink { content: \"\\e64f\"; }\n@mixin icon-link { content: \"\\e650\"; }\n@mixin icon-right-left { content: \"\\e651\"; }\n@mixin icon-left-right { content: \"\\e652\"; }\n@mixin icon-special-character { content: \"\\e653\"; }\n@mixin icon-source { content: \"\\e654\"; }\n@mixin icon-new-page { content: \"\\e655\"; }\n@mixin icon-templates { content: \"\\e656\"; }\n@mixin icon-cut { content: \"\\e657\"; }\n@mixin icon-replace { content: \"\\e658\"; }\n@mixin icon-copy { content: \"\\e659\"; }\n@mixin icon-paste { content: \"\\e65a\"; }\n@mixin icon-select-all { content: \"\\e65b\"; }\n@mixin icon-paste-text { content: \"\\e65c\"; }\n@mixin icon-paste-word { content: \"\\e65d\"; }\n@mixin icon-bold { content: \"\\e65e\"; }\n@mixin icon-italic { content: \"\\e65f\"; }\n@mixin icon-underline { content: \"\\e660\"; }\n@mixin icon-subscript { content: \"\\e661\"; }\n@mixin icon-superscript { content: \"\\e662\"; }\n@mixin icon-strike-through { content: \"\\e663\"; }\n@mixin icon-decrease-indent { content: \"\\e664\"; }\n@mixin icon-increase-indent { content: \"\\e665\"; }\n@mixin icon-block-quote { content: \"\\e666\"; }\n@mixin icon-div-container { content: \"\\e667\"; }\n@mixin icon-align-left { content: \"\\e668\"; }\n@mixin icon-center { content: \"\\e669\"; }\n@mixin icon-align-right { content: \"\\e66a\"; }\n@mixin icon-justify { content: \"\\e66b\"; }\n@mixin icon-choice { content: \"\\e66c\"; }\n@mixin icon-inline-choice { content: \"\\e66d\"; }\n@mixin icon-match { content: \"\\e66e\"; }\n@mixin icon-associate { content: \"\\e66f\"; }\n@mixin icon-media { content: \"\\e670\"; }\n@mixin icon-graphic-order { content: \"\\e671\"; }\n@mixin icon-hotspot { content: \"\\e672\"; }\n@mixin icon-graphic-gap { content: \"\\e673\"; }\n@mixin icon-graphic-associate { content: \"\\e674\"; }\n@mixin icon-select-point { content: \"\\e675\"; }\n@mixin icon-pin { content: \"\\e676\"; }\n@mixin icon-import { content: \"\\e677\"; }\n@mixin icon-export { content: \"\\e678\"; }\n@mixin icon-move-item { content: \"\\e679\"; }\n@mixin icon-meta-data { content: \"\\e67a\"; }\n@mixin icon-slider { content: \"\\e67b\"; }\n@mixin icon-summary-report { content: \"\\e67c\"; }\n@mixin icon-text-entry { content: \"\\e67d\"; }\n@mixin icon-extended-text { content: \"\\e67e\"; }\n@mixin icon-eraser { content: \"\\e67f\"; }\n@mixin icon-row { content: \"\\e680\"; }\n@mixin icon-column { content: \"\\e681\"; }\n@mixin icon-text-color { content: \"\\e682\"; }\n@mixin icon-background-color { content: \"\\e683\"; }\n@mixin icon-spell-check { content: \"\\e684\"; }\n@mixin icon-polygon { content: \"\\e685\"; }\n@mixin icon-rectangle { content: \"\\e686\"; }\n@mixin icon-gap-match { content: \"\\e687\"; }\n@mixin icon-order { content: \"\\e688\"; }\n@mixin icon-hottext { content: \"\\e689\"; }\n@mixin icon-free-form { content: \"\\e68a\"; }\n@mixin icon-step-backward { content: \"\\e68b\"; }\n@mixin icon-fast-backward { content: \"\\e68c\"; }\n@mixin icon-backward { content: \"\\e68d\"; }\n@mixin icon-play { content: \"\\e68e\"; }\n@mixin icon-pause { content: \"\\e68f\"; }\n@mixin icon-stop { content: \"\\e690\"; }\n@mixin icon-forward { content: \"\\e691\"; }\n@mixin icon-fast-forward { content: \"\\e692\"; }\n@mixin icon-step-forward { content: \"\\e693\"; }\n@mixin icon-ellipsis { content: \"\\e694\"; }\n@mixin icon-circle { content: \"\\e695\"; }\n@mixin icon-target { content: \"\\e696\"; }\n@mixin icon-guide-arrow { content: \"\\e697\"; }\n@mixin icon-range-slider-right { content: \"\\e698\"; }\n@mixin icon-range-slider-left { content: \"\\e699\"; }\n@mixin icon-radio-checked { content: \"\\e69a\"; }\n@mixin icon-checkbox-indeterminate { content: \"\\e901\"; }\n@mixin icon-checkbox { content: \"\\e69b\"; }\n@mixin icon-checkbox-crossed { content: \"\\e69c\"; }\n@mixin icon-checkbox-checked { content: \"\\e69d\"; }\n@mixin icon-result-nok { content: \"\\e69e\"; }\n@mixin icon-result-ok { content: \"\\e69f\"; }\n@mixin icon-not-evaluated { content: \"\\e6a0\"; }\n@mixin icon-filter { content: \"\\e6a1\"; }\n@mixin icon-translate { content: \"\\e6a2\"; }\n@mixin icon-eject { content: \"\\e6a3\"; }\n@mixin icon-continue { content: \"\\e6a4\"; }\n@mixin icon-radio { content: \"\\e6a5\"; }\n@mixin icon-sphere { content: \"\\e6a6\"; }\n@mixin icon-reset { content: \"\\e6a7\"; }\n@mixin icon-smaller { content: \"\\e6a8\"; }\n@mixin icon-larger { content: \"\\e6a9\"; }\n@mixin icon-clock { content: \"\\e6aa\"; }\n@mixin icon-font { content: \"\\e6ab\"; }\n@mixin icon-maths { content: \"\\e6ac\"; }\n@mixin icon-grip { content: \"\\e6ad\"; }\n@mixin icon-rubric { content: \"\\e6ae\"; }\n@mixin icon-audio { content: \"\\e6af\"; }\n@mixin icon-grip-h { content: \"\\e6b0\"; }\n@mixin icon-magicwand { content: \"\\e6b1\"; }\n@mixin icon-loop { content: \"\\ea2e\"; }\n@mixin icon-calendar { content: \"\\e953\"; }\n@mixin icon-reload { content: \"\\e984\"; }\n@mixin icon-speed { content: \"\\e9a6\"; }\n@mixin icon-volume { content: \"\\ea27\"; }\n@mixin icon-contrast { content: \"\\e9d5\"; }\n@mixin icon-headphones { content: \"\\e910\"; }\n@mixin icon-compress { content: \"\\f066\"; }\n@mixin icon-map-o { content: \"\\f278\"; }\n@mixin icon-variable { content: \"\\e908\"; }\n@mixin icon-tooltip { content: \"\\e90c\"; }\n@mixin icon-globe { content: \"\\e9c9\"; }\n@mixin icon-highlighter { content: \"\\e90f\"; }\n@mixin icon-eliminate-crossed { content: \"\\e911\"; }\n@mixin icon-play-from-here { content: \"\\e912\"; }\n","// buttons and alerts\n$success: rgb(14, 145, 75);\n$info: rgb(14, 93, 145);\n$warning: rgb(216, 174, 91);\n$danger: rgb(201, 96, 67);\n$error: rgb(186, 18, 43);\n$activeInteraction: rgb(195, 90, 19);\n\n// corporate identity\n$logoRed: rgb(186, 18, 43);\n$grey: rgb(173, 161, 148);\n$darkBlueGrey: rgb(164, 187, 197);\n$mediumBlueGrey: rgb(193, 212, 220);\n$lightBlueGrey: rgb(228, 236, 239);\n$brownRedGrey: rgb(154, 137, 123);\n$darkBrown: rgb(111, 99, 89);\n$websiteBorder: rgb(141, 148, 158);\n\n// ui elements, these should only variations of the above\n// naming convention: jQueryUi theme roller -> camelCase\n\n$textColor: #222;\n$textHighlight: white;\n$textSecondary: #737373;\n$shadowColor: rgba(0, 0, 0, 0.25);\n\n$modalBorderColor: #dddfe2;\n$searchInp: #dddfe2;\n\n$uiGeneralContentBg: white();\n$uiGeneralContentBorder: #ddd;\n\n$uiHeaderBg: #d4d5d7;\n\n$uiClickableDefaultBg: #f3f1ef;\n$uiClickableHoverBg: whiten($info, 0.2);\n//$uiClickableActiveBg: $uiHeaderBg;\n$uiClickableActiveBg: whiten($websiteBorder, 0.2);\n//$uiClickableActiveBg: #aaa;\n\n$uiSelectableSelectedBg: whiten($info, 0.2);\n$uiSelectableSelectedHoverBg: whiten($info, 0.1);\n$uiSelectableHoverBg: whiten($info, 0.9);\n\n$uiOverlay: $lightBlueGrey;\n\n// new layout. Implemented now only for review panel\n$uiReviewPanelBg: #f2f2f2;\n$uiReviewPanelTextDisabled: hsl(0, 0%, 45%);\n$uiReviewPanelTextDefault: hsl(0, 0%, 12%);\n$uiReviewPanelBgDefault: $uiGeneralContentBg;\n$uiReviewPanelPrimaryHighlight: hsl(208, 100%, 32%);\n$uiReviewPanelBgInverted: $uiReviewPanelTextDefault;\n$uiReviewPanelTextInverted: $uiGeneralContentBg;\n\n// sidebars etc.\n$canvas: mix(#fff, $grey, 85%);\n\n// colors taken from feedback.scss\n$successBgColor: whiten($success, 0.8);\n$successBorderColor: whiten($success, 0.1);\n\n$infoBgColor: whiten($info, 0.8);\n$infoBorderColor: whiten($info, 0.1);\n\n$warningBgColor: whiten($warning, 0.8);\n$warningBorderColor: whiten($warning, 0.1);\n\n$dangerBgColor: whiten($danger, 0.8);\n$dangerBorderColor: whiten($danger, 0.1);\n\n$errorBgColor: whiten($error, 0.8);\n$errorBorderColor: whiten($error, 0.1);\n\n$darkBar: rgb(51, 51, 51);\n$darkBarTxt: rgb(230, 230, 230);\n$darkBarIcon: rgb(220, 220, 220);\n\n$actionLinkColor: #276d9b;\n$actionLinkHoverColor: #4f83a7;\n\n$colorWheel-01: #c3ba13;\n$colorWheel-02: #84a610;\n$colorWheel-03: #2b8e0e;\n$colorWheel-04: #0f9787;\n$colorWheel-05: #0e5d91;\n$colorWheel-06: #0d2689;\n$colorWheel-07: #400d83;\n$colorWheel-08: #960e7d;\n$colorWheel-09: #ba122b;\n$colorWheel-10: #c34713;\n$colorWheel-11: #c36f13;\n$colorWheel-12: #c39413;\n"]}
+{"version":3,"sources":["../scss/item-button-list.scss","../../../scss/inc/_functions.scss","../../../scss/inc/fonts/_tao-icon-vars.scss","../../../scss/inc/_colors.scss"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;EAgBE;ACHF;;;;;;CDUC;AC0PD,oEAAA;ACjRA,gBAAA;AF6BA;IACI,aAAa;IACb,eAAe;IACf,sBAAsB;IACtB,UAAU;IAEV,2BAAA;IA0FA,iCAAA;IAiDA,sEAAA;IAuBA,qCAAA;AAlKJ;;AANA;IAQQ,eAZY;IAaZ,cAbY;IAcZ,aAAa;IACb,uBAAuB;IAAE,gEAAA;IACzB,mBAAmB;IACnB,wBAAA;IACA,UAAU;IACV,YAAY;AAGpB;;AAlBA;IAmBQ,kBAAkB;IAClB,aAAa;IACb,uBAAuB;IACvB,mBAAmB;IACnB,YA5BU;IA6BV,WA7BU;IA8BV,mBAAmB;IACnB,kBAhCY;IAiCZ,sBA9Ba;IA+Bb,qBGTmC;IHUnC,mCAAmC;IACnC,UAAU;IAAE,6BAAA;IACZ,iBAAiB;IACjB,iBAAiB;IACjB,uBCiJiC;IDhJjC,cGfmC;IHgBnC,iBAAiB;IACjB,eAAe;AAIvB;;AAxCA;IAwCQ,gEAAgE;IAChE,kBAAkB;IAClB,gBAAgB;IAChB,mBAAmB;IACnB,oBAAoB;AAI5B;;AAhDA;IA+CQ,UAAU;IACV,MAAM;IACN,OAAO;AAKf;;AAtDA;IAoDQ,aAAa;AAMrB;;AA1DA;IAuDQ,aAAa;AAOrB;;AA9DA;IA2DQ,aAAa;AAOrB;;AAlEA;IA+DQ,kBAAkB;IAClB,YAAY;IACZ,cAAc;IACd,WAAW;IACX,YAAY;IACZ,mBAAmB;IACnB,YC6GiC;ID5GjC,0BC4GiC;ID3GjC,aAAa;IACb,uBAAuB;IACvB,mBAAmB;AAO3B;;AAhFA;IA4EQ,iBAAiB;IACjB,UAAU;IACV,MAAM;IACN,OAAO;AAQf;;AAvFA;IEZwB,gBAAgB;AFuGxC;;AA3FA;IEVuB,gBAAgB;AFyGvC;;AA/FA;IEkLwB,gBAAgB;AF/ExC;;AAnGA;IEiLyB,gBAAgB;AF1EzC;;AAvGA;IC4BY,yBAAwB;IAAxB,oBAAwB;IAAxB,iBAAwB;ADmFpC;;AA/GA;IAsGgB,qBAxGM;IAyGN,cGnF0B;IHoF1B,qBGpF0B;AHiG1C;;AArHA;IA6GgB,qBA/GM;IAgHN,yBG1F0B;IH2F1B,YCmEyB;IDlEzB,qBG5F0B;AHwG1C;;AA5HA;IAqHgB,kBAAkB;IAClB,cAAc;IACd,UAAU;IACV,cGpG0B;IHqG1B,cAAc;IACd,iBAAiB;IACjB,UAAU;IACV,eAAe;IACf,UAAU;IACV,2BAAA;IACA,SAAS;IACT,2BAA2B;AAW3C;;AA3IA;IAsIgB,yBGlKU;AH2K1B;;AA/IA;IA4IgB,yBGpKQ;AH2KxB;;AAnJA;IAoJY,yBA5JsB;IA6JtB,cG/HuC;IHgIvC,qBGhIuC;AHmInD;;AAzJA;;IA2JS,wBAAA;IACA,kCAAkC;IAClC,qBAAqB;IACrB,4BAA4B;AAGrC;;AAjKA;;IAiKY,mBAAmB;IACnB,wBAAA;IACA,iBAAiB;AAK7B;;AAxKA;;IA4KY,WAAW;IACX,cAAc;IACd,kBAAkB;IAClB,aAAa;IACb,cAAc;IACd,SAAS;IACT,QAAQ;IACR,gCAAgC;IAChC,qBAtLU;IAuLV,qBG/JuC;IHgKvC,oBAAoB;IACpB,kBA7LQ;AA8LpB;;AAxLA;;;IA6LY,cGvKuC;AHwKnD;;AA9LA;;IAkMY,uBChB6B;IDiB7B,cG7KuC;IH8KvC,qBG9KuC;AH+KnD;;AArMA;;IAyMY,yBGnLuC;IHoLvC,YCxB6B;IDyB7B,qBGrLuC;AHsLnD","file":"item-button-list.css","sourcesContent":["/**\n * This program is free software; you can redistribute it and/or\n * modify it under the terms of the GNU General Public License\n * as published by the Free Software Foundation; under version 2\n * of the License (non-upgradable).\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program; if not, write to the Free Software\n * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.\n *\n * Copyright (c) 2022 Open Assessment Technologies SA ;\n */\n@import \"inc/bootstrap\";\n\n$correctColor: $success;\n$incorrectColor: $error;\n$hoverBgColor: hsl(208, 100%, 95%);\n\n$radiusCircular: 50%;\n$sizeDefault: 4rem;\n$hitboxSize: 6.25rem;\n$borderThin: 0.125rem;\n$borderMedium: 0.25rem;\n\n.buttonlist-items {\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: start;\n    padding: 0;\n\n    /****** base styles *******/\n    .buttonlist-item {\n        height: $hitboxSize;\n        width: $hitboxSize;\n        display: flex;\n        justify-content: center; /* aligning left - cut focusing board for keyboard interacting */\n        align-items: center;\n        /* reset parent styles */\n        padding: 0;\n        border: none;\n    }\n\n    .buttonlist-btn {\n        position: relative;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        height: $sizeDefault;\n        width: $sizeDefault;\n        border-style: solid;\n        border-radius: $radiusCircular;\n        border-width: $borderThin;\n        border-color: $uiReviewPanelTextDisabled;\n        margin: 1.3rem 0.75rem 1rem 0.75rem;\n        padding: 0; /*Fixes firefox button jumps*/\n        font-weight: bold;\n        font-size: 1.6rem;\n        background-color: $uiReviewPanelBgDefault;\n        color: $uiReviewPanelTextDisabled;\n        text-shadow: none;\n        cursor: pointer;\n    }\n\n    .buttonlist-label {\n        font-family: 'Nunito Sans', 'Source Sans Pro', Arial, sans-serif;\n        max-width: 3.75rem;\n        overflow: hidden;\n        white-space: nowrap;\n        line-height: initial;\n    }\n    .buttonlist-icon {\n        padding: 0;\n        top: 0;\n        left: 0;\n    }\n    .buttonlist-icon:not([class*=\"icon-\"]) {\n        display: none;\n    }\n    .buttonlist-icon[class*=\"icon-\"] ~ .buttonlist-label {\n        display: none;\n    }\n\n    .indicator {\n        display: none;\n    }\n\n    .buttonlist-score-badge {\n        position: absolute;\n        top: -0.9rem;\n        right: -0.9rem;\n        width: 2rem;\n        height: 2rem;\n        border-radius: 100%;\n        color: $uiReviewPanelTextInverted;\n        border: 0.1rem solid $uiReviewPanelTextInverted;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n    }\n    .buttonlist-score-icon {\n        font-size: 1.2rem;\n        padding: 0;\n        top: 0;\n        left: 0;\n    }\n\n    .icon-info::before {\n        @include icon-info-bare;\n    }\n    .icon-flagged::before {\n        @include icon-bookmark;\n    }\n    .icon-correct::before {\n        @include icon-result-ok;\n    }\n    .icon-incorrect::before {\n        @include icon-result-nok;\n    }\n\n\n    /****** step state styles *******/\n    .buttonlist-item {\n        @include disableSelect();\n\n        &.viewed {\n            .buttonlist-btn {\n                border-width: $borderMedium;\n                color: $uiReviewPanelTextDefault;\n                border-color: $uiReviewPanelTextDefault;\n            }\n        }\n        &.answered {\n            .buttonlist-btn {\n                border-width: $borderMedium;\n                background-color: $uiReviewPanelBgInverted;\n                color: $uiReviewPanelTextInverted;\n                border-color: $uiReviewPanelBgInverted;\n            }\n        }\n        &.buttonlist-item-active {\n            .indicator {\n                position: absolute;\n                display: block;\n                z-index: 1;\n                color: $uiReviewPanelTextDefault;\n                height: 1.4rem;\n                min-width: 1.6rem;\n                top: unset;\n                bottom: -1.7rem;\n                padding: 0;\n                /* centering horizontally */\n                left: 50%;\n                transform: translateX(-50%);\n            }\n        }\n\n        &.correct {\n            .buttonlist-score-badge {\n                background-color: $correctColor;\n            }\n        }\n\n        &.incorrect {\n            .buttonlist-score-badge {\n                background-color: $incorrectColor;\n            }\n        }\n    }\n\n    /* disabling is applied at buttonlist-item or buttonlist-items level */\n    &:not(.disabled) .buttonlist-item:not(.disabled) {\n        .buttonlist-btn:hover {\n            background-color: $hoverBgColor;\n            color: $uiReviewPanelPrimaryHighlight;\n            border-color: $uiReviewPanelPrimaryHighlight;\n        }\n    }\n    &.disabled,\n    .buttonlist-item.disabled {\n         /* reset global styles */\n         background-color: unset !important;\n         opacity: 1 !important;\n         text-shadow: none !important;\n\n        .buttonlist-btn {\n            cursor: not-allowed;\n            /* reset global styles */\n            text-shadow: none;\n        }\n    }\n\n\n    /****** keyboard focus styles *******/\n    .buttonlist-item {\n        &.key-navigation-highlight .buttonlist-btn::before,\n        .buttonlist-btn.buttonlist-btn-focus:focus::before {\n            content: '';\n            display: block;\n            position: absolute;\n            width: 5.2rem;\n            height: 5.2rem;\n            left: 50%;\n            top: 50%;\n            transform: translate(-50%, -50%);\n            border-width: $borderMedium;\n            border-color: $uiReviewPanelPrimaryHighlight;\n            border-style: dotted;\n            border-radius: $radiusCircular;\n        }\n\n        &.key-navigation-highlight.buttonlist-item-active .buttonlist-btn .indicator,\n        &.buttonlist-item-active .buttonlist-btn.buttonlist-btn-focus:focus .indicator,\n        &.buttonlist-item-active .buttonlist-btn:focus-visible .indicator {\n            color: $uiReviewPanelPrimaryHighlight;\n        }\n\n        &.key-navigation-highlight.viewed .buttonlist-btn,\n        &.viewed .buttonlist-btn.buttonlist-btn-focus:focus {\n            background-color: $uiReviewPanelBgDefault;\n            color: $uiReviewPanelPrimaryHighlight;\n            border-color: $uiReviewPanelPrimaryHighlight;\n        }\n\n        &.key-navigation-highlight.answered .buttonlist-btn,\n        &.answered .buttonlist-btn.buttonlist-btn-focus:focus {\n            background-color: $uiReviewPanelPrimaryHighlight;\n            color: $uiReviewPanelTextInverted;\n            border-color: $uiReviewPanelPrimaryHighlight;\n        }\n    }\n}\n\n/*# sourceMappingURL=item-button-list.css.map */","@mixin iterate-sprite($iconList, $x, $y, $direction, $prefix:'') {\n    @each $icon in $iconList {\n        #{$prefix}#{$icon} {\n            background-position: $x * 1px $y * 1px;\n        }\n        @if $direction == 'x' {\n            $x: $x - 16;\n        } @else {\n            $y: $y - 16;\n        }\n    }\n}\n\n/*\nUsage:\n- linear-gradient((color1, color2, color3)) - returns linear-gradient with evenly distributed colors,\n   if 3 colors used then the position of each will be 33,33%\n- linear-gradient((color1 0%, color2 30%, color3 80%)) - returns linear-gradient with manually distributed colors,\n   first param - color, second - position. Also you can use px or other valid units for set position.\n*/\n@mixin linear-gradient($colorList, $direction: 'to right') {\n    $percentage: 0;\n    $units: '%';\n    $count: length($colorList);\n    $increment: 100 / ($count - 1);\n    $css: #{$direction + ', '};\n    $sep: ', ';\n    @each $colorItem in $colorList {\n        $color: $colorItem;\n        @if (length($colorItem) > 1) {\n            $color: nth($colorItem, 1);\n            $percentage: nth($colorItem, 2);\n            $units: '';\n        }\n        @if ($percentage >= 100 or index($colorList, $colorItem) == $count) {\n            $sep: '';\n        }\n        $css: #{$css + $color + ' ' + $percentage + $units + $sep};\n        $percentage: $percentage + $increment;\n    }\n    background: linear-gradient( #{$css} );\n}\n\n@mixin grid-unit($span, $numCols: 12, $gutter: 0) {\n    $gridPx: 840;\n    $rawSpanPx: (($gridPx - ($numCols * $gutter)) / $numCols);\n    $spanPx: $rawSpanPx * $span + (($span - 1) * $gutter);\n    $spanPercent: widthPerc($spanPx, $gridPx);\n    $marginPercent: widthPerc($gutter, $gridPx);\n    margin-left: $marginPercent;\n    width: $spanPercent;\n}\n\n\n@mixin vendor-prefix($property, $value, $whatToPrefix: property, $prefixes: (-webkit-, -moz-, -ms-, -o-, '')) {\n    @if $whatToPrefix == 'property' {\n        @each $prefix in $prefixes {\n            #{$prefix + $property}: #{$value};\n        }\n    }\n    @else if $whatToPrefix == 'value' {\n        @each $prefix in $prefixes {\n            #{$property}: #{$prefix + $value};\n        }\n    }\n}\n@mixin flex-container($wrapBehavior: nowrap, $direction : row) {\n    @include vendor-prefix(display, flex, value, (-ms-, -webkit-, ''));\n\n    @include vendor-prefix(flex-direction, $direction, property, (-ms-, -webkit-, ''));\n    @include vendor-prefix(flex-wrap, $wrapBehavior, property, (-ms-, -webkit-, ''));\n\n    @include vendor-prefix(justify-content, flex-start, property, (-webkit-, ''));\n\n    @include vendor-prefix(align-content, flex-start, property, (-webkit-, ''));\n\n    @include vendor-prefix(align-items, stretch, property, (-webkit-, ''));\n}\n\n@mixin simple-flex-box($width: auto, $minWidth: 1) {\n\n    @include vendor-prefix(order, 0, property, (-ms-, -webkit-, ''));\n    flex-item-align: stretch;\n    -ms-flex-item-align: stretch;\n    @include vendor-prefix(align-self, stretch, property, (-webkit-, ''));\n\n    // if both, min width and width are set, width will win this conflict\n    @if ($width == auto) {\n        @if ($minWidth != 1) {\n            @include vendor-prefix(flex, 1 1 $minWidth, property, (-ms-, -webkit-, ''));\n        }\n        @else {\n            @include vendor-prefix(flex, 1 1 auto, property, (-ms-, -webkit-, ''));\n            // @see https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis#Values\n            // for a discussion auto vs. main-size\n            @include vendor-prefix(flex, 1 1, property, (-ms-, -webkit-, ''));\n        }\n    }\n    @else {\n        @include vendor-prefix(flex, 0 0 $width, property, (-ms-, -webkit-, ''));\n    }\n}\n\n\n@mixin box-shadow($horiz: 1px, $vert: 1px, $blur: 2px, $spread: 0, $color: rgba(0, 0, 0, .2)) {\n    @include vendor-prefix(box-shadow, $horiz $vert $blur $spread $color, property);\n}\n\n@mixin simple-border($color: #ddd) {\n    border: 1px solid $color;\n    border-radius: 2px;\n    -webkit-border-radius: 2px;\n}\n\n@mixin border-radius($radius: 2) {\n    -moz-border-radius: $radius * 1px;\n    -webkit-border-radius: $radius * 1px;\n    border-radius: $radius * 1px;\n}\n\n@mixin border-radius-top($radius: 2) {\n    -webkit-border-top-left-radius: $radius * 1px;\n    -webkit-border-top-right-radius: $radius * 1px;\n    -moz-border-radius-topleft: $radius * 1px;\n    -moz-border-radius-topright: $radius * 1px;\n    border-top-left-radius: $radius * 1px;\n    border-top-right-radius: $radius * 1px;\n}\n\n@mixin border-radius-bottom($radius: 2) {\n    -webkit-border-bottom-right-radius: $radius * 1px;\n    -webkit-border-bottom-left-radius: $radius * 1px;\n    -moz-border-radius-bottomright: $radius * 1px;\n    -moz-border-radius-bottomleft: $radius * 1px;\n    border-bottom-right-radius: $radius * 1px;\n    border-bottom-left-radius: $radius * 1px;\n}\n\n@mixin border-radius-left($radius: 2) {\n    -webkit-border-top-left-radius: $radius * 1px;\n    -webkit-border-bottom-left-radius: $radius * 1px;\n    -moz-border-radius-topleft: $radius * 1px;\n    -moz-border-radius-bottomleft: $radius * 1px;\n    border-top-left-radius: $radius * 1px;\n    border-bottom-left-radius: $radius * 1px;\n}\n\n@mixin border-radius-right($radius: 2) {\n    -webkit-border-top-right-radius: $radius * 1px;\n    -webkit-border-bottom-right-radius: $radius * 1px;\n    -moz-border-radius-topright: $radius * 1px;\n    -moz-border-radius-bottomright: $radius * 1px;\n    border-top-right-radius: $radius * 1px;\n    border-bottom-right-radius: $radius * 1px;\n}\n\n@mixin border-radius-top-left($radius: 2) {\n  -webkit-border-top-left-radius: $radius * 1px;\n  -moz-border-radius-topleft: $radius * 1px;\n  border-top-left-radius: $radius * 1px;\n}\n\n@mixin border-radius-top-right($radius: 2) {\n  -webkit-border-top-right-radius: $radius * 1px;\n  -moz-border-radius-topright: $radius * 1px;\n  border-top-right-radius: $radius * 1px;\n}\n\n@mixin border-radius-bottom-right($radius: 2) {\n  -webkit-border-bottom-right-radius: $radius * 1px;\n  -moz-border-radius-bottomright: $radius * 1px;\n  border-bottom-right-radius: $radius * 1px;\n}\n\n@mixin border-radius-bottom-left($radius: 2) {\n    -webkit-border-bottom-left-radius: $radius * 1px;\n    -moz-border-radius-bottomleft: $radius * 1px;\n    border-bottom-left-radius: $radius * 1px;\n}\n\n@mixin border-box() {\n    -moz-box-sizing: border-box;\n    -webkit-box-sizing: border-box;\n    box-sizing: border-box;\n}\n\n@function whiten($color, $white: 0.3) {\n    @return mix(#fff, $color, ($white * 100) * 1%);\n}\n\n@function blacken($color, $black: 0.3) {\n    @return mix(#000, $color, ($black * 100) * 1%);\n}\n\n@function widthPerc($colWidth, $context) {\n    @return ($colWidth * 100 / $context) * 1%\n}\n\n@function remDist($fontSizePx) {\n    @return ($fontSizePx / 10) * 1rem\n}\n\n@function black($alpha: 1) {\n    @return (rgba(0, 0, 0, $alpha))\n}\n\n@function white($alpha: 1) {\n    @return (rgba(255, 255, 255, $alpha))\n}\n\n@mixin font-size($remPx, $important: false) {\n    @if $important == true {\n        font-size: ($remPx) * 1px !important;\n        font-size: ($remPx / 10) * 1rem !important;\n    }\n    @else {\n        font-size: ($remPx) * 1px;\n        font-size: ($remPx / 10) * 1rem;\n    }\n}\n\n\n@mixin keyframes($name) {\n    @-o-keyframes #{$name} { @content };\n    @-moz-keyframes #{$name} { @content };\n    @-webkit-keyframes #{$name} { @content };\n    @keyframes #{$name} { @content };\n}\n\n\n@mixin animation($value, $type:'') {\n    $animation: animation;\n    @if $type != '' {\n        $animation:  $animation + '-' + $type;\n    }\n    @include vendor-prefix($animation, $value, property);\n}\n\n/// CSS transition mixin to the current selection (apply also vendor prefixes).\n/// See <https://developer.mozilla.org/en-US/docs/Web/CSS/transition> for the values\n///\n/// @param {property} [$type = all] the CSS property to apply the transition to\n/// @param {time} [$duration = .5s] the transition property\n/// @param {timing-function} [$effect = ease-out] the transition property\n@mixin transition($type : all, $duration : 0.5s, $effect : ease-out, $delay : 0s){\n    @include vendor-prefix(transition, $type + ', ' + $duration + ', ' + $effect + ', ' + $delay, property);\n}\n\n@mixin fade($duration: 1s){\n\n    @include keyframes(fade) {\n        0%   {opacity:0;}\n        50%   {opacity:1;}\n        100% {opacity:0;}\n    }\n\n    @include vendor-prefix(animation, fade 1s forwards, property);\n}\n\n@mixin repeat(){\n    @include animation(infinite, iteration-count);\n}\n\n@mixin largeHeading() {\n    @include font-size(20);\n    font-family: $headingFont;\n    font-style: normal;\n}\n\n@mixin disableSelect() {\n    @include vendor-prefix(user-select, none, property);\n}\n\n/* based on \"visually-hidden\" mixin in LDS for accessibility goals */\n@mixin visuallyHidden() {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    clip: rect(1px, 1px, 1px, 1px);\n    margin: 0;\n    padding: 0;\n}\n","/* Do not edit */@mixin tao-icon-setup {\n  /* use !important to prevent issues with browser extensions that change fonts */\n  font-family: 'tao' !important;\n  speak: never;\n  font-style: normal;\n  font-weight: normal;\n  font-variant: normal;\n  text-transform: none;\n  line-height: 1;\n\n  /* Better Font Rendering =========== */\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n@mixin icon-furigana { content: \"\\e919\"; }\n@mixin icon-add-subsection { content: \"\\e918\"; }\n@mixin icon-info-bare { content: \"\\e923\"; }\n@mixin icon-bookmark-outline { content: \"\\e922\"; }\n@mixin icon-bookmark { content: \"\\e921\"; }\n@mixin icon-indicator { content: \"\\e920\"; }\n@mixin icon-wrap-inline { content: \"\\e915\"; }\n@mixin icon-wrap-left { content: \"\\e916\"; }\n@mixin icon-wrap-right { content: \"\\e917\"; }\n@mixin icon-offline { content: \"\\e913\"; }\n@mixin icon-online { content: \"\\e914\"; }\n@mixin icon-tab { content: \"\\e90d\"; }\n@mixin icon-untab { content: \"\\e90e\"; }\n@mixin icon-multi-select { content: \"\\e90b\"; }\n@mixin icon-clipboard { content: \"\\e90a\"; }\n@mixin icon-filebox { content: \"\\e909\"; }\n@mixin icon-click-to-speak { content: \"\\e907\"; }\n@mixin icon-speech-bubble { content: \"\\f0e5\"; }\n@mixin icon-microphone { content: \"\\f130\"; }\n@mixin icon-microphone-off { content: \"\\f131\"; }\n@mixin icon-disconnect { content: \"\\e905\"; }\n@mixin icon-connect { content: \"\\e906\"; }\n@mixin icon-eliminate { content: \"\\e904\"; }\n@mixin icon-wheelchair { content: \"\\e903\"; }\n@mixin icon-text-marker { content: \"\\e902\"; }\n@mixin icon-unshield { content: \"\\e32a\"; }\n@mixin icon-shield { content: \"\\e8e8\"; }\n@mixin icon-tree { content: \"\\e6b4\"; }\n@mixin icon-home { content: \"\\e6b3\"; }\n@mixin icon-shared-file { content: \"\\e6b2\"; }\n@mixin icon-end-attempt { content: \"\\e603\"; }\n@mixin icon-icon { content: \"\\f1c5\"; }\n@mixin icon-radio-bg { content: \"\\e600\"; }\n@mixin icon-checkbox-bg { content: \"\\e601\"; }\n@mixin icon-tag { content: \"\\e602\"; }\n@mixin icon-style { content: \"\\e604\"; }\n@mixin icon-ownership-transfer { content: \"\\e605\"; }\n@mixin icon-property-advanced { content: \"\\e606\"; }\n@mixin icon-property-add { content: \"\\e607\"; }\n@mixin icon-repository-add { content: \"\\e608\"; }\n@mixin icon-repository-remove { content: \"\\e609\"; }\n@mixin icon-repository { content: \"\\e60a\"; }\n@mixin icon-result-server { content: \"\\e60b\"; }\n@mixin icon-folder { content: \"\\e60c\"; }\n@mixin icon-folder-open { content: \"\\e60d\"; }\n@mixin icon-left { content: \"\\e60e\"; }\n@mixin icon-right { content: \"\\e60f\"; }\n@mixin icon-up { content: \"\\e610\"; }\n@mixin icon-down { content: \"\\e611\"; }\n@mixin icon-undo { content: \"\\e612\"; }\n@mixin icon-redo { content: \"\\e613\"; }\n@mixin icon-screen { content: \"\\e614\"; }\n@mixin icon-laptop { content: \"\\e615\"; }\n@mixin icon-tablet { content: \"\\e616\"; }\n@mixin icon-phone { content: \"\\e617\"; }\n@mixin icon-move { content: \"\\e618\"; }\n@mixin icon-bin { content: \"\\e619\"; }\n@mixin icon-shuffle { content: \"\\e61a\"; }\n@mixin icon-print { content: \"\\e61b\"; }\n@mixin icon-tools { content: \"\\e61c\"; }\n@mixin icon-settings { content: \"\\e61d\"; }\n@mixin icon-video { content: \"\\e61e\"; }\n@mixin icon-find { content: \"\\e61f\"; }\n@mixin icon-image { content: \"\\e620\"; }\n@mixin icon-edit { content: \"\\e621\"; }\n@mixin icon-document { content: \"\\e622\"; }\n@mixin icon-resize-grid { content: \"\\e623\"; }\n@mixin icon-resize { content: \"\\e624\"; }\n@mixin icon-help { content: \"\\e625\"; }\n@mixin icon-mobile-menu { content: \"\\e626\"; }\n@mixin icon-fix { content: \"\\e627\"; }\n@mixin icon-unlock { content: \"\\e628\"; }\n@mixin icon-lock { content: \"\\e629\"; }\n@mixin icon-ul { content: \"\\e62a\"; }\n@mixin icon-ol { content: \"\\e62b\"; }\n@mixin icon-email { content: \"\\e62c\"; }\n@mixin icon-download { content: \"\\e62d\"; }\n@mixin icon-logout { content: \"\\e62e\"; }\n@mixin icon-login { content: \"\\e62f\"; }\n@mixin icon-spinner { content: \"\\e630\"; }\n@mixin icon-preview { content: \"\\e631\"; }\n@mixin icon-external { content: \"\\e632\"; }\n@mixin icon-time { content: \"\\e633\"; }\n@mixin icon-save { content: \"\\e634\"; }\n@mixin icon-warning { content: \"\\e635\"; }\n@mixin icon-add { content: \"\\e636\"; }\n@mixin icon-error { content: \"\\e900\"; }\n@mixin icon-close { content: \"\\e637\"; }\n@mixin icon-success { content: \"\\e638\"; }\n@mixin icon-remove { content: \"\\e639\"; }\n@mixin icon-info { content: \"\\e63a\"; }\n@mixin icon-danger { content: \"\\e63b\"; }\n@mixin icon-users { content: \"\\e63c\"; }\n@mixin icon-user { content: \"\\e63d\"; }\n@mixin icon-test-taker { content: \"\\e63e\"; }\n@mixin icon-test-takers { content: \"\\e63f\"; }\n@mixin icon-item { content: \"\\e640\"; }\n@mixin icon-test { content: \"\\e641\"; }\n@mixin icon-delivery { content: \"\\e642\"; }\n@mixin icon-eye-slash { content: \"\\e643\"; }\n@mixin icon-result { content: \"\\e644\"; }\n@mixin icon-delivery-small { content: \"\\e645\"; }\n@mixin icon-upload { content: \"\\e646\"; }\n@mixin icon-result-small { content: \"\\e647\"; }\n@mixin icon-mobile-preview { content: \"\\e648\"; }\n@mixin icon-extension { content: \"\\e649\"; }\n@mixin icon-desktop-preview { content: \"\\e64a\"; }\n@mixin icon-tablet-preview { content: \"\\e64b\"; }\n@mixin icon-insert-horizontal-line { content: \"\\e64c\"; }\n@mixin icon-table { content: \"\\e64d\"; }\n@mixin icon-anchor { content: \"\\e64e\"; }\n@mixin icon-unlink { content: \"\\e64f\"; }\n@mixin icon-link { content: \"\\e650\"; }\n@mixin icon-right-left { content: \"\\e651\"; }\n@mixin icon-left-right { content: \"\\e652\"; }\n@mixin icon-special-character { content: \"\\e653\"; }\n@mixin icon-source { content: \"\\e654\"; }\n@mixin icon-new-page { content: \"\\e655\"; }\n@mixin icon-templates { content: \"\\e656\"; }\n@mixin icon-cut { content: \"\\e657\"; }\n@mixin icon-replace { content: \"\\e658\"; }\n@mixin icon-copy { content: \"\\e659\"; }\n@mixin icon-paste { content: \"\\e65a\"; }\n@mixin icon-select-all { content: \"\\e65b\"; }\n@mixin icon-paste-text { content: \"\\e65c\"; }\n@mixin icon-paste-word { content: \"\\e65d\"; }\n@mixin icon-bold { content: \"\\e65e\"; }\n@mixin icon-italic { content: \"\\e65f\"; }\n@mixin icon-underline { content: \"\\e660\"; }\n@mixin icon-subscript { content: \"\\e661\"; }\n@mixin icon-superscript { content: \"\\e662\"; }\n@mixin icon-strike-through { content: \"\\e663\"; }\n@mixin icon-decrease-indent { content: \"\\e664\"; }\n@mixin icon-increase-indent { content: \"\\e665\"; }\n@mixin icon-block-quote { content: \"\\e666\"; }\n@mixin icon-div-container { content: \"\\e667\"; }\n@mixin icon-align-left { content: \"\\e668\"; }\n@mixin icon-center { content: \"\\e669\"; }\n@mixin icon-align-right { content: \"\\e66a\"; }\n@mixin icon-justify { content: \"\\e66b\"; }\n@mixin icon-choice { content: \"\\e66c\"; }\n@mixin icon-inline-choice { content: \"\\e66d\"; }\n@mixin icon-match { content: \"\\e66e\"; }\n@mixin icon-associate { content: \"\\e66f\"; }\n@mixin icon-media { content: \"\\e670\"; }\n@mixin icon-graphic-order { content: \"\\e671\"; }\n@mixin icon-hotspot { content: \"\\e672\"; }\n@mixin icon-graphic-gap { content: \"\\e673\"; }\n@mixin icon-graphic-associate { content: \"\\e674\"; }\n@mixin icon-select-point { content: \"\\e675\"; }\n@mixin icon-pin { content: \"\\e676\"; }\n@mixin icon-import { content: \"\\e677\"; }\n@mixin icon-export { content: \"\\e678\"; }\n@mixin icon-move-item { content: \"\\e679\"; }\n@mixin icon-meta-data { content: \"\\e67a\"; }\n@mixin icon-slider { content: \"\\e67b\"; }\n@mixin icon-summary-report { content: \"\\e67c\"; }\n@mixin icon-text-entry { content: \"\\e67d\"; }\n@mixin icon-extended-text { content: \"\\e67e\"; }\n@mixin icon-eraser { content: \"\\e67f\"; }\n@mixin icon-row { content: \"\\e680\"; }\n@mixin icon-column { content: \"\\e681\"; }\n@mixin icon-text-color { content: \"\\e682\"; }\n@mixin icon-background-color { content: \"\\e683\"; }\n@mixin icon-spell-check { content: \"\\e684\"; }\n@mixin icon-polygon { content: \"\\e685\"; }\n@mixin icon-rectangle { content: \"\\e686\"; }\n@mixin icon-gap-match { content: \"\\e687\"; }\n@mixin icon-order { content: \"\\e688\"; }\n@mixin icon-hottext { content: \"\\e689\"; }\n@mixin icon-free-form { content: \"\\e68a\"; }\n@mixin icon-step-backward { content: \"\\e68b\"; }\n@mixin icon-fast-backward { content: \"\\e68c\"; }\n@mixin icon-backward { content: \"\\e68d\"; }\n@mixin icon-play { content: \"\\e68e\"; }\n@mixin icon-pause { content: \"\\e68f\"; }\n@mixin icon-stop { content: \"\\e690\"; }\n@mixin icon-forward { content: \"\\e691\"; }\n@mixin icon-fast-forward { content: \"\\e692\"; }\n@mixin icon-step-forward { content: \"\\e693\"; }\n@mixin icon-ellipsis { content: \"\\e694\"; }\n@mixin icon-circle { content: \"\\e695\"; }\n@mixin icon-target { content: \"\\e696\"; }\n@mixin icon-guide-arrow { content: \"\\e697\"; }\n@mixin icon-range-slider-right { content: \"\\e698\"; }\n@mixin icon-range-slider-left { content: \"\\e699\"; }\n@mixin icon-radio-checked { content: \"\\e69a\"; }\n@mixin icon-checkbox-indeterminate { content: \"\\e901\"; }\n@mixin icon-checkbox { content: \"\\e69b\"; }\n@mixin icon-checkbox-crossed { content: \"\\e69c\"; }\n@mixin icon-checkbox-checked { content: \"\\e69d\"; }\n@mixin icon-result-nok { content: \"\\e69e\"; }\n@mixin icon-result-ok { content: \"\\e69f\"; }\n@mixin icon-not-evaluated { content: \"\\e6a0\"; }\n@mixin icon-filter { content: \"\\e6a1\"; }\n@mixin icon-translate { content: \"\\e6a2\"; }\n@mixin icon-eject { content: \"\\e6a3\"; }\n@mixin icon-continue { content: \"\\e6a4\"; }\n@mixin icon-radio { content: \"\\e6a5\"; }\n@mixin icon-sphere { content: \"\\e6a6\"; }\n@mixin icon-reset { content: \"\\e6a7\"; }\n@mixin icon-smaller { content: \"\\e6a8\"; }\n@mixin icon-larger { content: \"\\e6a9\"; }\n@mixin icon-clock { content: \"\\e6aa\"; }\n@mixin icon-font { content: \"\\e6ab\"; }\n@mixin icon-maths { content: \"\\e6ac\"; }\n@mixin icon-grip { content: \"\\e6ad\"; }\n@mixin icon-rubric { content: \"\\e6ae\"; }\n@mixin icon-audio { content: \"\\e6af\"; }\n@mixin icon-grip-h { content: \"\\e6b0\"; }\n@mixin icon-magicwand { content: \"\\e6b1\"; }\n@mixin icon-loop { content: \"\\ea2e\"; }\n@mixin icon-calendar { content: \"\\e953\"; }\n@mixin icon-reload { content: \"\\e984\"; }\n@mixin icon-speed { content: \"\\e9a6\"; }\n@mixin icon-volume { content: \"\\ea27\"; }\n@mixin icon-contrast { content: \"\\e9d5\"; }\n@mixin icon-headphones { content: \"\\e910\"; }\n@mixin icon-compress { content: \"\\f066\"; }\n@mixin icon-map-o { content: \"\\f278\"; }\n@mixin icon-variable { content: \"\\e908\"; }\n@mixin icon-tooltip { content: \"\\e90c\"; }\n@mixin icon-globe { content: \"\\e9c9\"; }\n@mixin icon-highlighter { content: \"\\e90f\"; }\n@mixin icon-eliminate-crossed { content: \"\\e911\"; }\n@mixin icon-play-from-here { content: \"\\e912\"; }\n","// buttons and alerts\n$success: rgb(14, 145, 75);\n$info: rgb(14, 93, 145);\n$warning: rgb(216, 174, 91);\n$danger: rgb(201, 96, 67);\n$error: rgb(186, 18, 43);\n$activeInteraction: rgb(195, 90, 19);\n\n// corporate identity\n$logoRed: rgb(186, 18, 43);\n$grey: rgb(173, 161, 148);\n$darkBlueGrey: rgb(164, 187, 197);\n$mediumBlueGrey: rgb(193, 212, 220);\n$lightBlueGrey: rgb(228, 236, 239);\n$brownRedGrey: rgb(154, 137, 123);\n$darkBrown: rgb(111, 99, 89);\n$websiteBorder: rgb(141, 148, 158);\n\n// ui elements, these should only variations of the above\n// naming convention: jQueryUi theme roller -> camelCase\n\n$textColor: #222;\n$textHighlight: white;\n$textSecondary: #737373;\n$shadowColor: rgba(0, 0, 0, 0.25);\n\n$modalBorderColor: #dddfe2;\n$searchInp: #dddfe2;\n\n$uiGeneralContentBg: white();\n$uiGeneralContentBorder: #ddd;\n\n$uiHeaderBg: #d4d5d7;\n\n$uiClickableDefaultBg: #f3f1ef;\n$uiClickableHoverBg: whiten($info, 0.2);\n//$uiClickableActiveBg: $uiHeaderBg;\n$uiClickableActiveBg: whiten($websiteBorder, 0.2);\n//$uiClickableActiveBg: #aaa;\n\n$uiSelectableSelectedBg: whiten($info, 0.2);\n$uiSelectableSelectedHoverBg: whiten($info, 0.1);\n$uiSelectableHoverBg: whiten($info, 0.9);\n\n$uiOverlay: $lightBlueGrey;\n\n// new layout. Implemented now only for review panel\n$uiReviewPanelBg: #f2f2f2;\n$uiReviewPanelTextDisabled: hsl(0, 0%, 45%);\n$uiReviewPanelTextDefault: hsl(0, 0%, 12%);\n$uiReviewPanelBgDefault: $uiGeneralContentBg;\n$uiReviewPanelPrimaryHighlight: hsl(208, 100%, 32%);\n$uiReviewPanelBgInverted: $uiReviewPanelTextDefault;\n$uiReviewPanelTextInverted: $uiGeneralContentBg;\n\n// sidebars etc.\n$canvas: mix(#fff, $grey, 85%);\n\n// colors taken from feedback.scss\n$successBgColor: whiten($success, 0.8);\n$successBorderColor: whiten($success, 0.1);\n\n$infoBgColor: whiten($info, 0.8);\n$infoBorderColor: whiten($info, 0.1);\n\n$warningBgColor: whiten($warning, 0.8);\n$warningBorderColor: whiten($warning, 0.1);\n\n$dangerBgColor: whiten($danger, 0.8);\n$dangerBorderColor: whiten($danger, 0.1);\n\n$errorBgColor: whiten($error, 0.8);\n$errorBorderColor: whiten($error, 0.1);\n\n$darkBar: rgb(51, 51, 51);\n$darkBarTxt: rgb(230, 230, 230);\n$darkBarIcon: rgb(220, 220, 220);\n\n$actionLinkColor: #276d9b;\n$actionLinkHoverColor: #4f83a7;\n\n$colorWheel-01: #c3ba13;\n$colorWheel-02: #84a610;\n$colorWheel-03: #2b8e0e;\n$colorWheel-04: #0f9787;\n$colorWheel-05: #0e5d91;\n$colorWheel-06: #0d2689;\n$colorWheel-07: #400d83;\n$colorWheel-08: #960e7d;\n$colorWheel-09: #ba122b;\n$colorWheel-10: #c34713;\n$colorWheel-11: #c36f13;\n$colorWheel-12: #c39413;\n"]}

package/src/keyNavigation/navigableDomElement.js

@@ -66,7 +66,7 @@ export default function navigableDomElement(element) {
          * @param {Boolean} propagateTab - allows the key event to propagate when the Tab key is pressed.
          * @returns {navigableDomElement}
          */
-        init({propagateTab = false} = {}) {
+        init({ propagateTab = false } = {}) {
             const keyboard = (key, el) => {
                 /**
                  * @event key
@@ -118,29 +118,33 @@ export default function navigableDomElement(element) {
                 });
 
             // init standard key bindings
-            shortcuts.clear()
-                .add(
-                    'tab shift+tab',
-                    (e, key) => keyboard(key, e.target),
-                    {
-                        propagate: !!propagateTab,
-                        prevent: true
-                    }
-                )
+            shortcuts
+                .clear()
+                .add('tab shift+tab', (e, key) => keyboard(key, e.target), {
+                    propagate: !!propagateTab,
+                    prevent: true
+                })
                 .add(
                     'up down left right',
                     (e, key) => {
                         const $target = $(e.target);
                         if (!isInput($target)) {
-                            if (!$target.is('img') &&
+                            if (
+                                !$target.is('img') &&
                                 !$target.hasClass('key-navigation-scrollable') &&
-                                !($target.hasClass('key-navigation-scrollable-up') && (key === 'up' || key === 'left')) &&
-                                !($target.hasClass('key-navigation-scrollable-down') && (key === 'down' || key === 'right'))
+                                !(
+                                    $target.hasClass('key-navigation-scrollable-up') &&
+                                    (key === 'up' || key === 'left')
+                                ) &&
+                                !(
+                                    $target.hasClass('key-navigation-scrollable-down') &&
+                                    (key === 'down' || key === 'right')
+                                )
                             ) {
                                 // prevent scrolling of parent element
                                 e.preventDefault();
                             }
-                            keyboard(key, e.target)
+                            keyboard(key, e.target);
                         }
                     },
                     {
@@ -171,9 +175,7 @@ export default function navigableDomElement(element) {
          * @returns {navigableDomElement}
          */
         destroy() {
-            $element
-                .removeClass(navigableCls)
-                .off(eventNS);
+            $element.removeClass(navigableCls).off(eventNS);
 
             if (initialTabIndex || initialTabIndex === 0) {
                 $element.attr('tabindex', initialTabIndex);
@@ -251,7 +253,7 @@ export default function navigableDomElement(element) {
             return this;
         }
     });
-};
+}
 
 /**
  * From a jQuery container, returns an array of navigableDomElement
@@ -279,4 +281,5 @@ navigableDomElement.createFromDoms = $elements => {
  * @param {Object} navigable
  * @returns {Boolean}
  */
-navigableDomElement.isNavigableElement = navigable => !!navigable && navigableApi.every(n => 'function' === typeof navigable[n]);
+navigableDomElement.isNavigableElement = navigable =>
+    !!navigable && navigableApi.every(n => 'function' === typeof navigable[n]);

package/src/keyNavigation/navigator.js

@@ -69,7 +69,9 @@ export default function keyNavigatorFactory(config) {
     const navigatorConfig = Object.assign({}, defaults, config || {});
 
     const id = navigatorConfig.id || _.uniqueId('navigator_');
-    const $group = navigatorConfig.group && $(navigatorConfig.group).addClass('key-navigation-group').attr('data-navigation-id', id);
+    const $group =
+        navigatorConfig.group &&
+        $(navigatorConfig.group).addClass('key-navigation-group').attr('data-navigation-id', id);
     if (navigatorConfig.group && (!$group.length || !$.contains(document.body, $group.get(0)))) {
         throw new TypeError('group element does not exist');
     }
@@ -146,7 +148,7 @@ export default function keyNavigatorFactory(config) {
                             $group.removeClass('focusin');
                         }
                     });
-                
+
                 focusOutObserver = new MutationObserver(() => {
                     if (!this.isVisible() && $group.hasClass('focusin')) {
                         $group.removeClass('focusin');
@@ -166,7 +168,7 @@ export default function keyNavigatorFactory(config) {
                 }
 
                 if (navigable.getType() === 'element') {
-                    navigable.init({propagateTab: navigatorConfig.propagateTab});
+                    navigable.init({ propagateTab: navigatorConfig.propagateTab });
                 }
 
                 navigable
@@ -192,9 +194,7 @@ export default function keyNavigatorFactory(config) {
          */
         destroy() {
             if ($group) {
-                $group
-                    .off(`.${this.getId()}`)
-                    .removeClass('focusin');
+                $group.off(`.${this.getId()}`).removeClass('focusin');
             }
 
             if (focusOutObserver) {
@@ -265,7 +265,7 @@ export default function keyNavigatorFactory(config) {
          */
         getCursorAt(position) {
             const navigable = this.getNavigableAt(position);
-            return {position: navigable ? position : -1, navigable};
+            return { position: navigable ? position : -1, navigable };
         },
 
         /**
@@ -369,9 +369,7 @@ export default function keyNavigatorFactory(config) {
          * @returns {keyNavigator}
          */
         first() {
-            this.setCursorAt(
-                getClosestPositionRight(0)
-            );
+            this.setCursorAt(getClosestPositionRight(0));
             return this;
         },
 
@@ -380,9 +378,7 @@ export default function keyNavigatorFactory(config) {
          * @returns {keyNavigator}
          */
         last() {
-            this.setCursorAt(
-                getClosestPositionLeft(navigableElements.length - 1)
-            );
+            this.setCursorAt(getClosestPositionLeft(navigableElements.length - 1));
             return this;
         },
 
@@ -524,20 +520,16 @@ export default function keyNavigatorFactory(config) {
                 }
             }
 
-            this.setCursorAt(
-                getClosestPositionRight(position)
-            );
+            this.setCursorAt(getClosestPositionRight(position));
             return this;
         }
     });
 
-    return keyNavigator
-        .init()
-        .on('key', (key, el) => {
-            if (key === 'space' || key === 'enter') {
-                keyNavigator.activate(el);
-            } else {
-                keyNavigator.trigger(key, el);
-            }
-        });
-};
+    return keyNavigator.init().on('key', (key, el) => {
+        if (key === 'space' || key === 'enter') {
+            keyNavigator.activate(el);
+        } else {
+            keyNavigator.trigger(key, el);
+        }
+    });
+}