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

package/src/scss/inc/_base.scss

@@ -0,0 +1,496 @@
+// this combines the most common features from normalize, h5bp main and tao base
+
+//these vars enables you to include this base in a scoped env.
+$mainContainer : html !default;
+
+// Those styles can't be scoped because it's the base to use REM
+html {
+    -webkit-text-size-adjust: 100%;
+    -ms-text-size-adjust: 100%;
+    font-size: 62.5%;
+    line-height: 1.4;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    -webkit-background-size: cover;
+    -moz-background-size: cover;
+    -o-background-size: cover;
+    background-size: cover;
+    &.fullscreen {
+        width: 100%;
+    }
+}
+
+body {
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    font-size: 14px;
+}
+
+// cannot be scoped
+::-webkit-scrollbar-corner { background-color: ThreeDHighlight;}
+
+#{$mainContainer} {
+
+    *, *:before, *:after {
+        -moz-box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        box-sizing: border-box;
+    }
+
+    &, body{
+        color: $textColor;
+        font-family: $regularFont;
+        font-weight: normal;
+        margin: 0;
+        padding: 0;
+        position: relative;
+        height: 100%;
+        z-index: 0;
+        line-height: 1.4;
+        background: white;
+        border-width: 1px;
+        @if($mainContainer != html){
+            @include font-size(14);
+        }
+    }
+
+    address, article, aside, audio, blockquote, dd, div, dl, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header,
+    hr, noscript, ol, output, p, pre, section, summary, ul, main {
+        margin-top: 0;
+        padding-top: 0;
+        padding-bottom: 0;
+        white-space: normal;
+    }
+
+    h1 {
+        font-size: 2em;
+        margin: 0.67em 0;
+    }
+
+    h2 {
+        font-size: 1.5em;
+        margin: 0.83em 0;
+    }
+
+    h3 {
+        font-size: 1.17em;
+        margin: 1em 0;
+    }
+
+    h4 {
+        font-size: 1em;
+        margin: 1.33em 0;
+    }
+
+    h5 {
+        font-size: 0.83em;
+        margin: 1.67em 0;
+    }
+
+    h6 {
+        font-size: 0.67em;
+        margin: 2.33em 0;
+    }
+
+    blockquote {
+        margin: 1em 40px;
+    }
+
+    blockquote, dd, dl, fieldset, figure, h1, h2, h3, h4, h5, h6,
+    hr, ol, p, pre, ul {
+        display: block;
+        margin-bottom: 10px;
+        white-space: normal;
+    }
+
+    h1, h2, h3, h4, h5, h6 {
+        font-weight: normal;
+        font-style: normal;
+    }
+
+    iframe {
+        border: none;
+    }
+
+    audio,
+    canvas,
+    video,
+    svg {
+        display: inline-block;
+        vertical-align: middle;
+    }
+
+    // the above rule breaks SVG on MathJax and thus requires a reset
+    .MathJax svg {
+        display: inline;
+        vertical-align: baseline;
+    }
+
+    a {
+        cursor: pointer;
+        background: transparent;
+        text-decoration: none;
+        outline: 0;
+        color: $uiClickableHoverBg;
+        &:focus {
+            outline: thin dotted;
+        }
+        &:hover {
+            text-decoration: underline;
+            color: $info;
+            &:before, &:after {
+                text-decoration: none !important;
+            }
+        }
+        &.block {
+            color: $textColor;
+            text-decoration: none;
+            display: block;
+        }
+        &[rel="external"] span.icon-external {
+            &:before {
+                @include font-size(11);
+                padding: 0 0 0 4px;
+                position: relative;
+                top: 1px;
+            }
+        }
+    }
+
+    b, .b, strong, .strong {
+        font-weight: bold;
+    }
+
+    i, .i, em, .em, dfn {
+        font-style: italic;
+    }
+
+    code, pre, kdb, samp {
+        font-family: $monospaceFont;
+        @include font-size(14);
+    }
+
+    pre {
+        white-space: pre;
+        white-space: pre-wrap;
+        word-wrap: break-word;
+    }
+
+    code {
+        background: whiten($lightBlueGrey, .5);
+        padding: 2px 6px;
+        display: inline-block;
+        margin: 0 3px;
+        @include border-radius();
+    }
+
+    hr {
+        display: block;
+        height: 1px;
+        border: 0;
+        border-top: 1px solid #ccc;
+        margin: 1em 0;
+        padding: 0;
+    }
+
+    q {
+        quotes: "\201C" "\201D" "\2018" "\2019";
+        &:before,
+        &:after {
+            content: '';
+            content: none;
+        }
+    }
+
+    small {
+        @include font-size(11);
+    }
+
+    sub,
+    sup {
+        font-size: .75em;
+        line-height: 0;
+        position: relative;
+        vertical-align: baseline;
+    }
+
+    sup {
+        top: -0.5em;
+    }
+
+    sub {
+        bottom: -0.25em;
+    }
+
+    img {
+        border: 0;
+        max-width: 100%;
+    }
+
+    svg:not(:root) {
+        overflow: hidden;
+    }
+
+
+    fieldset {
+        border: 0;
+        margin: 0;
+        padding: 0;
+    }
+
+    legend {
+        border: 0;
+        padding: 0;
+    }
+
+    textarea {
+        overflow: auto;
+        vertical-align: top;
+        resize: vertical;
+    }
+
+    label, button {
+        cursor: pointer;
+    }
+
+    button {
+        vertical-align: middle;
+        outline: 0;
+        overflow: visible;
+        border: none;
+    }
+
+    button, input {
+        &::-moz-focus-inner {
+            border: 0;
+            padding: 0;
+        }
+        // avoid usage of the IE clear button
+        &::-ms-clear {
+            display: none;
+        }
+        &::-ms-reveal {
+            display: none;
+        }
+    }
+
+    button,
+    input,
+    select,
+    textarea {
+        font-family: $regularFont;
+        font-weight: normal;
+        line-height: normal;
+        text-transform: none;
+        vertical-align: baseline;
+    }
+
+    button,
+    html input[type="button"],
+    input[type="reset"],
+    input[type="submit"] {
+        -webkit-appearance: button;
+        cursor: pointer;
+    }
+
+    input {
+        @include simple-border();
+        @include border-radius(1);
+
+        &[type="search"] {
+            -webkit-appearance: textfield;
+            -moz-box-sizing: content-box;
+            -webkit-box-sizing: content-box;
+            box-sizing: content-box;
+            &::-webkit-search-cancel-button,
+            &::-webkit-search-decoration {
+                -webkit-appearance: none;
+            }
+        }
+
+        &[type="checkbox"],
+        &[type="radio"] {
+            box-sizing: border-box;
+            padding: 0;
+        }
+    }
+
+    select {
+        max-width: 100%;
+    }
+
+    audio:not([controls]),
+    [hidden], template,
+    .hidden, .deleted,
+    .js, .js-hide {
+        display: none !important;
+    }
+
+    .visuallyhidden {
+        border: 0;
+        clip: rect(0 0 0 0);
+        height: 1px;
+        margin: -1px;
+        overflow: hidden;
+        padding: 0;
+        position: absolute;
+        width: 1px;
+        &.focusable {
+            &:active,
+            &:focus {
+                clip: auto;
+                height: auto;
+                margin: 0;
+                overflow: visible;
+                position: static;
+                width: auto;
+            }
+        }
+    }
+
+    .invisible {
+        visibility: hidden;
+    }
+
+    .viewport-hidden {
+        position: absolute;
+        left: -10000px;
+        top: -10000px;
+    }
+
+    .clearfix {
+        &:before, &:after {
+            content: " ";
+            display: table;
+        }
+        &:after {
+            clear: both;
+        }
+    }
+
+    .clear {
+        display: block;
+        clear: both;
+    }
+
+
+    .lft,
+    .wrap-left {
+        display: inline;
+        float: left;
+    }
+
+    .rgt,
+    .wrap-right {
+        display: inline;
+        float: right;
+    }
+
+    .wrap-left {
+        margin: 20px 20px 20px 0;
+    }
+
+    .wrap-right {
+        margin: 20px 0 20px 20px;
+    }
+
+    .txt-ctr {
+        text-align: center;
+    }
+
+    .txt-lft {
+        text-align: left;
+    }
+
+    .txt-rgt {
+        text-align: right;
+    }
+
+    .txt-jty {
+        text-align: justify;
+    }
+
+    // added to make _u_ in ck QTI compatible
+    .txt-underline {
+        text-decoration: underline;
+        font-size : inherit;
+    }
+
+    .txt-highlight {
+        padding: 0 5px;
+        background: #FF6416;
+        color: white;
+    }
+
+    ::-moz-selection {
+        background: #b3d4fc;
+        text-shadow: none;
+    }
+
+    ::selection {
+        background: #b3d4fc;
+        text-shadow: none;
+    }
+
+    .placeholder {
+        color: #777 !important;
+    }
+
+    ::-webkit-input-placeholder {
+        color: #777 !important;
+    }
+
+    :-moz-placeholder {
+        color: #777 !important;
+    }
+
+    ::-moz-placeholder {
+        color: #777 !important;
+    }
+
+    .truncate {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .disabled, *:disabled {
+        cursor: default;
+        opacity: .7;
+    }
+
+    .overlay, .ui-widget-overlay {
+        background: white(.9);
+    }
+
+    .ui-widget {
+        font-family: $regularFont;
+        font-size: 1.4rem !important;
+    }
+
+    .ui-widget .ui-widget {
+        font-size: 1.4rem !important;
+    }
+
+    .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
+        font-family: $regularFont;
+        font-size: 1.4rem !important;
+    }
+
+
+
+    // everything on list styles and counters
+    @import 'base/list-style';
+
+    // everything tables
+    @import 'base/table';
+
+    // everything svg
+    @import 'base/svg';
+
+    // everything user highlight
+    @import 'base/highlight';
+
+}

package/src/scss/inc/_bootstrap.scss

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

package/src/scss/inc/_buttons.scss

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

package/src/scss/inc/_colors.scss

@@ -0,0 +1,88 @@
+// 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;
+
+$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;