tao-test/app/taoQtiItem/views/scss/qti/_qti-base.scss

@charset "UTF-8";

@import "inc/bootstrap";

// override font to avoid @font-face load
$regularFont: 'Franklin Gothic', 'Franklin Gothic Medium', sans-serif;

$mainContainer : '.qti-item';
@import "inc/base";
@import "inc/select2";
@import "inc/mediaelementplayer";

%selectableHover {
    background: whiten($info, .95) !important;
    color: darken($textColor, .95) !important;
    cursor: pointer !important;
}
%activeHover {
    background: whiten($info, .91) !important;
    color: darken($textColor, .91) !important;
}

%dragged {
    z-index:10;
    background: whiten($info, .91) !important;
    color: darken($textColor, .91) !important;
}

%dropzone {
    background: whiten($info, .80) !important;
    color: darken($textColor, .80) !important;
    border: 1px $uiClickableHoverBg dashed !important;
}

%droppable {
    background: whiten($info, .80) !important;
    color: darken($textColor, .80) !important;
}

%qtiModalFeedback {
    color : blacken($textColor, .5);/*because of the overlay, make it darker*/
    margin-top : 10px;
    .qti-title{
        margin-top: 0px;
    }
    border : 4px solid $infoBorderColor;
    &.positive{
        border-color : $successBorderColor;
    }
    &.negative{
        border-color : $errorBorderColor;
    }
}

#{$mainContainer} {
    @import "inc/fonts/tao-icon-classes";

    @import "inc/feedback";
    @import "inc/grid";
    @import "inc/tooltip";
    @import "inc/buttons";
    @import "inc/jquery.nouislider";

    // reset grid set-up within the item context

    //!important to override all attempts to change this in the theme
    overflow-x: visible !important;
    .grid-row, .fixed-grid-row {
        width: 100%;
        [class*=" col-"], [class^="col-"] {
            &.col-12 {
                width: 100%;
            }
            &:last-child {
                margin-right: 0;
            }
        }
    }

    .grid-container {
        overflow-x: visible !important;
    }

    padding: 15px;
    background: white();
    margin:auto;
    max-width: 1024px;

    &.runtime {
        min-height: 100%;
    }

    [class*="col-"] {
        img {
            max-width: initial;
        }
    }

    #modalFeedbacks {
        max-height:0;
        .qti-modalFeedback{
            @extend %qtiModalFeedback;
        }
    }

    .qti-itemBody{
        .qti-modalFeedback{
            @extend %qtiModalFeedback;
            border-width : 1px;
            padding:10px 10px 15px;
            background: $infoBgColor;
            position: relative;
            z-index: 100002;
            &.positive{
                background: $successBgColor;
            }
            &.negative{
                background: $errorBgColor;
            }
        }

        &.highlighter-cursor {
            cursor: url("../img/qtiIconsPng/marker.png") 0 32, auto;
        }
    }

    .interaction-cover{
        display : block;
        opacity : 0.05;
    }

    /* authoring */

    .qti-choice, .qti-prompt-container {
        p:last-child {
            margin-bottom: 0 !important;
        }
    }

    .prompt, .qti-prompt {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }


    // MathJax reset
    .MathJax {
        display: inline-table;
        &:focus {
            outline: 0;
        }
        span {
            line-height: inherit;
            font-size: inherit;
        }
    }

    //scope all hover, active style for delivery under the runtime class
    &.runtime {
        .block-listing {
            & > li {
                &.active {
                    border-color: whiten($info, .2) !important;
                    &:hover{
                        @extend %activeHover;
                    }
                }
                &:hover{
                    @extend %selectableHover;
                }
                &.dragged, &.dragged:hover { // :hover is to override .active:hover
                    @extend %dragged;
                }
                &.droppable, &.droppable:hover { // :hover is to override .active:hover
                    @extend %droppable;
                }
                &.dropzone {
                    @extend %dropzone;
                }
            }
        }
    }

    .block-listing {
        & > li {
            @include simple-border(#e0e0e0);
            background: transparent;
            padding: 5px;
            margin: 3px;
            cursor: pointer;
            position:relative;
        }
        &.horizontal {
            @extend .clearfix;
            padding-right: 3px;
            padding-left: 3px;
            &:after {
                @extend .clearfix:after;
            }
            &:before {
                @extend .clearfix:before;
            }
            & > li {
                display: block;
                float: left;

                @include rtl {
                    float: right;
                }
            }
        }
        &.solid, &.bordered {
            padding-top: 3px;
            padding-bottom: 3px;

            &.none {
                padding-left: 3px;

                @include rtl {
                    padding-left: auto;
                    padding-right: 3px;
                }
            }
        }
    }

    .qti-block {
        border:1px solid transparent;
    }

    .qti-interaction {
        &:focus {
            outline-color: $colorWheel-05;
        }
        .text-container{
            min-height: 50px;

            &.text-preformatted{
                font-family: $monospaceFont;
            }
        }

        .solid {
            //background: whiten($uiClickableDefaultBg, .4);
            // @include simple-border(whiten($uiClickableDefaultBg, .4));
            // original: above; new: below
            border: 6px solid  whiten($uiClickableDefaultBg, .2);
        }
        .bordered {
            @include simple-border(#e0e0e0);
            background: white;
        }
        .empty {
            border: 1px $uiClickableHoverBg dashed !important;
            min-height: 50px;
            cursor: default;
        }

        input[type="color"],
        input[type="date"],
        input[type="datetime"],
        input[type="datetime-local"],
        input[type="email"],
        input[type="month"],
        input[type="number"],
        input[type="range"],
        input[type="search"],
        input[type="tel"],
        input[type="time"],
        input[type="text"],
        input[type="password"],
        input[type="url"],
        input[type="week"],
        textarea,
        select {
            border-top-color  : #aaa;
            border-left-color : #aaa;
        }
    }

    @import "all-interactions";
    @import "object";
    @import "choice";
    @import "order";
    @import "extended-text";
    @import "feedback";
    @import "associate";
    @import "match";
    @import "media";
    @import "graphic";
    @import "hottext";
    @import "gap-match";
    @import "slider";
    @import "inline-choice";
    @import "text-entry";
    @import "upload";
    @import "rubric-block";
    @import "custom";
    @import "table";
    @import "tooltip";

}

.tao-preview-scope{
    padding-top: 20px;
}