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

package/scss/inc/_bootstrap.scss

@@ -1,6 +1,6 @@
-// to be included into your scss files, don't forget to set the includePaths (--load-path) in your compiler
-//@charset "UTF-8";
-@import "inc/variables";
-@import "inc/functions";
-@import "inc/colors";
-@import "inc/fonts/tao-icon-vars";
+// to be included into your scss files, don't forget to set the includePaths (--load-path) in your compiler
+//@charset "UTF-8";
+@import "inc/variables";
+@import "inc/functions";
+@import "inc/colors";
+@import "inc/fonts/tao-icon-vars";

package/scss/inc/_buttons.scss

@@ -1,114 +1,114 @@
-@mixin generic-btn-primary($color, $background) {
-    color: $color;
-    background-color: whiten($background, .1);
-    text-shadow: 1px 1px 0 blacken($background, .2);
-}
-
-@mixin generic-btn-secondary($color, $background) {
-    color: whiten($color, .1);
-    border: 1px solid whiten($color, .1);
-    background-color: $background;
-    text-shadow: none;
-}
-
-%generic-btn-code {
-    @include border-radius(3);
-    font-size: 14px !important;
-    font-size: 1.4rem !important;
-    cursor: pointer;
-    text-decoration: none !important;
-    vertical-align: middle;
-    outline: 0;
-    overflow: visible;
-    border: none;
-    display: inline-block;
-    line-height: 2.5;
-    padding: 0 15px;
-    font-weight: normal;
-    font-style: normal;
-    text-align: center;
-    height: 35px;
-    @include generic-btn-primary(white(), $uiClickableActiveBg);
-    &.btn-secondary {
-        @include generic-btn-secondary($uiClickableActiveBg, $uiGeneralContentBg);
-        line-height: 2.3;
-    }
-    &.small {
-        line-height: 1.8;
-        height: 25px;
-        &.btn-secondary {
-            line-height: 1.5;
-        }
-        [class^="icon-"], [class*=" icon-"] {
-            @include font-size(13);
-        }
-    }
-    [class^="icon-"], [class*=" icon-"] {
-        font: tao !important;
-        font-family:tao;
-        @include font-size(14);
-        line-height: 1;
-        padding: 0 9px 0 0;
-        position: relative;
-        top: 1px;
-        left: -1px;
-        text-shadow: 0 1px 0 black(.1);
-        &.r {
-            padding: 0 0 0 9px;
-        }
-    }
-    &:hover {
-        opacity: .85;
-    }
-    &.btn-info {
-        @include generic-btn-primary(white(), $info);
-        &.btn-secondary {
-            @include generic-btn-secondary($info, $uiGeneralContentBg);
-        }
-    }
-    &.btn-error {
-        @include generic-btn-primary(white(), $error);
-        &.btn-secondary {
-            @include generic-btn-secondary($error, $uiGeneralContentBg);
-        }
-    }
-
-    &.btn-success {
-        @include generic-btn-primary(white(), $success);
-        &.btn-secondary {
-            @include generic-btn-secondary($success, $uiGeneralContentBg);
-        }
-    }
-
-    &.btn-warning {
-        @include generic-btn-primary(white(), $warning);
-        &.btn-secondary {
-            @include generic-btn-secondary($warning, $uiGeneralContentBg);
-        }
-    }
-}
-
-// this construction was needed to avoid problems with extending this code elsewhere
-[class^="btn-"], [class*=" btn-"], .btn-default,
-button, input[type="submit"], input[type="reset"] {
-    @extend %generic-btn-code;
-}
-
-/* todo move to main ? */
-.disabled, button[disabled] {
-    // !important is required here to overwrite any other inherited rule no matter the specificity,
-    // as the disabled style must be consistent all across the stylesheet
-    background-color: whiten($websiteBorder, .3) !important;
-    text-shadow: 1px 1px 0 white(.8) !important;
-    cursor: not-allowed !important;
-    opacity: .55 !important;
-    color: #000 !important;
-    border: none !important;
-}
-
-// jquery ui
-.ui-button {
-    [class^="icon-"], [class*=" icon-"] {
-        font-family: tao !important;
-    }
-}
+@mixin generic-btn-primary($color, $background) {
+    color: $color;
+    background-color: whiten($background, .1);
+    text-shadow: 1px 1px 0 blacken($background, .2);
+}
+
+@mixin generic-btn-secondary($color, $background) {
+    color: whiten($color, .1);
+    border: 1px solid whiten($color, .1);
+    background-color: $background;
+    text-shadow: none;
+}
+
+%generic-btn-code {
+    @include border-radius(3);
+    font-size: 14px !important;
+    font-size: 1.4rem !important;
+    cursor: pointer;
+    text-decoration: none !important;
+    vertical-align: middle;
+    outline: 0;
+    overflow: visible;
+    border: none;
+    display: inline-block;
+    line-height: 2.5;
+    padding: 0 15px;
+    font-weight: normal;
+    font-style: normal;
+    text-align: center;
+    height: 35px;
+    @include generic-btn-primary(white(), $uiClickableActiveBg);
+    &.btn-secondary {
+        @include generic-btn-secondary($uiClickableActiveBg, $uiGeneralContentBg);
+        line-height: 2.3;
+    }
+    &.small {
+        line-height: 1.8;
+        height: 25px;
+        &.btn-secondary {
+            line-height: 1.5;
+        }
+        [class^="icon-"], [class*=" icon-"] {
+            @include font-size(13);
+        }
+    }
+    [class^="icon-"], [class*=" icon-"] {
+        font: tao !important;
+        font-family:tao;
+        @include font-size(14);
+        line-height: 1;
+        padding: 0 9px 0 0;
+        position: relative;
+        top: 1px;
+        left: -1px;
+        text-shadow: 0 1px 0 black(.1);
+        &.r {
+            padding: 0 0 0 9px;
+        }
+    }
+    &:hover {
+        opacity: .85;
+    }
+    &.btn-info {
+        @include generic-btn-primary(white(), $info);
+        &.btn-secondary {
+            @include generic-btn-secondary($info, $uiGeneralContentBg);
+        }
+    }
+    &.btn-error {
+        @include generic-btn-primary(white(), $error);
+        &.btn-secondary {
+            @include generic-btn-secondary($error, $uiGeneralContentBg);
+        }
+    }
+
+    &.btn-success {
+        @include generic-btn-primary(white(), $success);
+        &.btn-secondary {
+            @include generic-btn-secondary($success, $uiGeneralContentBg);
+        }
+    }
+
+    &.btn-warning {
+        @include generic-btn-primary(white(), $warning);
+        &.btn-secondary {
+            @include generic-btn-secondary($warning, $uiGeneralContentBg);
+        }
+    }
+}
+
+// this construction was needed to avoid problems with extending this code elsewhere
+[class^="btn-"], [class*=" btn-"], .btn-default,
+button, input[type="submit"], input[type="reset"] {
+    @extend %generic-btn-code;
+}
+
+/* todo move to main ? */
+.disabled, button[disabled] {
+    // !important is required here to overwrite any other inherited rule no matter the specificity,
+    // as the disabled style must be consistent all across the stylesheet
+    background-color: whiten($websiteBorder, .3) !important;
+    text-shadow: 1px 1px 0 white(.8) !important;
+    cursor: not-allowed !important;
+    opacity: .55 !important;
+    color: #000 !important;
+    border: none !important;
+}
+
+// jquery ui
+.ui-button {
+    [class^="icon-"], [class*=" icon-"] {
+        font-family: tao !important;
+    }
+}

package/scss/inc/_colors.scss

@@ -1,93 +1,93 @@
-// buttons and alerts
-$success: rgb(14, 145, 75);
-$info: rgb(14, 93, 145);
-$warning: rgb(216, 174, 91);
-$danger: rgb(201, 96, 67);
-$error: rgb(186, 18, 43);
-$activeInteraction: rgb(195, 90, 19);
-
-// corporate identity
-$logoRed: rgb(186, 18, 43);
-$grey: rgb(173, 161, 148);
-$darkBlueGrey: rgb(164, 187, 197);
-$mediumBlueGrey: rgb(193, 212, 220);
-$lightBlueGrey: rgb(228, 236, 239);
-$brownRedGrey: rgb(154, 137, 123);
-$darkBrown: rgb(111, 99, 89);
-$websiteBorder: rgb(141, 148, 158);
-
-// ui elements, these should only variations of the above
-// naming convention: jQueryUi theme roller -> camelCase
-
-$textColor: #222;
-$textHighlight: white;
-$textSecondary: #737373;
-$shadowColor: rgba(0, 0, 0, 0.25);
-
-$modalBorderColor: #dddfe2;
-$searchInp: #dddfe2;
-
-$uiGeneralContentBg: white();
-$uiGeneralContentBorder: #ddd;
-
-$uiHeaderBg: #d4d5d7;
-
-$uiClickableDefaultBg: #f3f1ef;
-$uiClickableHoverBg: whiten($info, 0.2);
-//$uiClickableActiveBg: $uiHeaderBg;
-$uiClickableActiveBg: whiten($websiteBorder, 0.2);
-//$uiClickableActiveBg: #aaa;
-
-$uiSelectableSelectedBg: whiten($info, 0.2);
-$uiSelectableSelectedHoverBg: whiten($info, 0.1);
-$uiSelectableHoverBg: whiten($info, 0.9);
-
-$uiOverlay: $lightBlueGrey;
-
-// new layout. Implemented now only for review panel
-$uiReviewPanelBg: #f2f2f2;
-$uiReviewPanelTextDisabled: hsl(0, 0%, 45%);
-$uiReviewPanelTextDefault: hsl(0, 0%, 12%);
-$uiReviewPanelBgDefault: $uiGeneralContentBg;
-$uiReviewPanelPrimaryHighlight: hsl(208, 100%, 32%);
-$uiReviewPanelBgInverted: $uiReviewPanelTextDefault;
-$uiReviewPanelTextInverted: $uiGeneralContentBg;
-
-// sidebars etc.
-$canvas: mix(#fff, $grey, 85%);
-
-// colors taken from feedback.scss
-$successBgColor: whiten($success, 0.8);
-$successBorderColor: whiten($success, 0.1);
-
-$infoBgColor: whiten($info, 0.8);
-$infoBorderColor: whiten($info, 0.1);
-
-$warningBgColor: whiten($warning, 0.8);
-$warningBorderColor: whiten($warning, 0.1);
-
-$dangerBgColor: whiten($danger, 0.8);
-$dangerBorderColor: whiten($danger, 0.1);
-
-$errorBgColor: whiten($error, 0.8);
-$errorBorderColor: whiten($error, 0.1);
-
-$darkBar: rgb(51, 51, 51);
-$darkBarTxt: rgb(230, 230, 230);
-$darkBarIcon: rgb(220, 220, 220);
-
-$actionLinkColor: #276d9b;
-$actionLinkHoverColor: #4f83a7;
-
-$colorWheel-01: #c3ba13;
-$colorWheel-02: #84a610;
-$colorWheel-03: #2b8e0e;
-$colorWheel-04: #0f9787;
-$colorWheel-05: #0e5d91;
-$colorWheel-06: #0d2689;
-$colorWheel-07: #400d83;
-$colorWheel-08: #960e7d;
-$colorWheel-09: #ba122b;
-$colorWheel-10: #c34713;
-$colorWheel-11: #c36f13;
-$colorWheel-12: #c39413;
+// buttons and alerts
+$success: rgb(14, 145, 75);
+$info: rgb(14, 93, 145);
+$warning: rgb(216, 174, 91);
+$danger: rgb(201, 96, 67);
+$error: rgb(186, 18, 43);
+$activeInteraction: rgb(195, 90, 19);
+
+// corporate identity
+$logoRed: rgb(186, 18, 43);
+$grey: rgb(173, 161, 148);
+$darkBlueGrey: rgb(164, 187, 197);
+$mediumBlueGrey: rgb(193, 212, 220);
+$lightBlueGrey: rgb(228, 236, 239);
+$brownRedGrey: rgb(154, 137, 123);
+$darkBrown: rgb(111, 99, 89);
+$websiteBorder: rgb(141, 148, 158);
+
+// ui elements, these should only variations of the above
+// naming convention: jQueryUi theme roller -> camelCase
+
+$textColor: #222;
+$textHighlight: white;
+$textSecondary: #737373;
+$shadowColor: rgba(0, 0, 0, 0.25);
+
+$modalBorderColor: #dddfe2;
+$searchInp: #dddfe2;
+
+$uiGeneralContentBg: white();
+$uiGeneralContentBorder: #ddd;
+
+$uiHeaderBg: #d4d5d7;
+
+$uiClickableDefaultBg: #f3f1ef;
+$uiClickableHoverBg: whiten($info, 0.2);
+//$uiClickableActiveBg: $uiHeaderBg;
+$uiClickableActiveBg: whiten($websiteBorder, 0.2);
+//$uiClickableActiveBg: #aaa;
+
+$uiSelectableSelectedBg: whiten($info, 0.2);
+$uiSelectableSelectedHoverBg: whiten($info, 0.1);
+$uiSelectableHoverBg: whiten($info, 0.9);
+
+$uiOverlay: $lightBlueGrey;
+
+// new layout. Implemented now only for review panel
+$uiReviewPanelBg: #f2f2f2;
+$uiReviewPanelTextDisabled: hsl(0, 0%, 45%);
+$uiReviewPanelTextDefault: hsl(0, 0%, 12%);
+$uiReviewPanelBgDefault: $uiGeneralContentBg;
+$uiReviewPanelPrimaryHighlight: hsl(208, 100%, 32%);
+$uiReviewPanelBgInverted: $uiReviewPanelTextDefault;
+$uiReviewPanelTextInverted: $uiGeneralContentBg;
+
+// sidebars etc.
+$canvas: mix(#fff, $grey, 85%);
+
+// colors taken from feedback.scss
+$successBgColor: whiten($success, 0.8);
+$successBorderColor: whiten($success, 0.1);
+
+$infoBgColor: whiten($info, 0.8);
+$infoBorderColor: whiten($info, 0.1);
+
+$warningBgColor: whiten($warning, 0.8);
+$warningBorderColor: whiten($warning, 0.1);
+
+$dangerBgColor: whiten($danger, 0.8);
+$dangerBorderColor: whiten($danger, 0.1);
+
+$errorBgColor: whiten($error, 0.8);
+$errorBorderColor: whiten($error, 0.1);
+
+$darkBar: rgb(51, 51, 51);
+$darkBarTxt: rgb(230, 230, 230);
+$darkBarIcon: rgb(220, 220, 220);
+
+$actionLinkColor: #276d9b;
+$actionLinkHoverColor: #4f83a7;
+
+$colorWheel-01: #c3ba13;
+$colorWheel-02: #84a610;
+$colorWheel-03: #2b8e0e;
+$colorWheel-04: #0f9787;
+$colorWheel-05: #0e5d91;
+$colorWheel-06: #0d2689;
+$colorWheel-07: #400d83;
+$colorWheel-08: #960e7d;
+$colorWheel-09: #ba122b;
+$colorWheel-10: #c34713;
+$colorWheel-11: #c36f13;
+$colorWheel-12: #c39413;