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

package/src/scss/inc/_base.scss

@@ -1,496 +0,0 @@
-// 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

@@ -1,6 +0,0 @@
-// 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

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

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