openmct/platform/commonUI/general/res/sass/controls/_controls.scss

/*****************************************************************************
 * Open MCT, Copyright (c) 2014-2018, United States Government
 * as represented by the Administrator of the National Aeronautics and Space
 * Administration. All rights reserved.
 *
 * Open MCT is licensed under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * http://www.apache.org/licenses/LICENSE-2.0.
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations
 * under the License.
 *
 * Open MCT includes source code licensed under additional open source
 * licenses. See the Open Source Licenses file (LICENSES.md) included with
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/

.accordion {
    $accordionHeadH: 18px;
    margin-top: $interiorMargin;
    &:first-child {
        margin-top: 0;
    }
    .accordion-head {
        $op: 0.2;
        border-radius: $basicCr * 0.75;
        box-sizing: border-box;
        background: rgba($colorBodyFg, $op);
        cursor: pointer;
        font-size: 0.75em;
        line-height: $accordionHeadH;
        margin-bottom: $interiorMargin;
        padding: 0 $interiorMargin;
        position: absolute;
        top: 0;
        right: 0;
        bottom: auto;
        left: 0;
        width: auto;
        height: $accordionHeadH;
        text-transform: uppercase;
        &:hover {
            background: rgba($colorBodyFg, $op * 2);
        }
        &:after {
            content: "^";
            display: block;
            font-family: 'symbolsfont';
            font-size: 0.9em;
            position: absolute;
            right: $interiorMargin;
            text-transform: none;
            top: 0;
        }
        &:not(.expanded):after {
            content: "v";
        }
    }
    .accordion-contents {
        position: absolute;
        top: $accordionHeadH + $interiorMargin;
        right: 0;
        bottom: 0;
        left: 0;
        overflow-y: auto;
        overflow-x: hidden;
    }
}

// Hyperlink objects
.s-hyperlink {
    .label {
        font-size: 0.8rem !important;
    }
    &:not(.s-button) {
        color: $colorKey;
        &:hover { color: $colorKeyHov; }
    }
}

.s-icon-button {
    // Clickable icon elements that have hover
    @extend .ui-symbol;
    color: $colorClickIcon;
    &:hover {
        color: $colorClickIconHov;
    }
}

.s-toggle-icon {
    // Has default (in-active) and .active states
    @extend .s-icon-button;
    color: $colorToggleIcon;
    &:hover { color: rgba($colorToggleIconHov, 0.5); }
    &.active { color: $colorToggleIconActive; }
}

.l-composite-control {
    vertical-align: middle;
    &:not(.l-inline) {
        margin-bottom: $interiorMargin;
    }
    &.l-inline {
        display: inline-block;
    }
    &.l-checkbox {
        .composite-control-label {
            line-height: 18px;
        }
    }
}

.l-control-group {
    // Buttons that have a conceptual grouping - internal space between, and a divider between groups.
    box-sizing: border-box;
    border-left: 1px solid $colorInteriorBorder;
    display: inline-block;
    padding: 0 $interiorMargin;
    position: relative;
    &:first-child {
        border-left: none;
        padding-left: 0;
    }
}

.l-local-controls {
    // Control shown when hovering over an object, like plots and imagery
    // Default position is upper right
    $p: $interiorMargin;
    position: absolute;
    top: $p; right: $p; bottom: auto;
    text-align: right;
    z-index: 5;
}

.s-local-controls {
    font-size: 0.7rem;
    &.s-wrapper-transluc {
        // Semi-opaque wrapper to visually distinguish a control
        // from the background
        background: rgba($colorTransLucBg, 0.7);
        box-sizing: border-box;
        border-radius: $controlCr;
    }
}

.has-local-controls {
    .local-control {
        @include trans-prop-nice($props: opacity, $dur: 250ms);
        opacity: 0;
    }
    &:hover {
        .local-control {
            @include trans-prop-nice($props: opacity, $dur: 10ms);
            opacity: 1;
        }
    }
}

/******************************************************** VIEW CONTROLS */
// Expand/collapse > and v arrows, used in tree and plot legend
// Moved this over from a tree-only context 5/18/17

.view-control {
    @extend .ui-symbol;
    cursor: pointer;
    height: 1em; width: 1em;
    line-height: inherit;
    &:before {
        position: absolute;
        @include trans-prop-nice(transform, 100ms);
        content: $glyph-icon-arrow-right;
        @include transform-origin(center);
    }
    &.expanded:before {
        @include transform(rotate(90deg));
    }
}

/******************************************************** CUSTOM CHECKBOXES */
label.checkbox.custom,
label.radio.custom {
    $bg: pullForward($colorBodyBg, 10%);
    $d: $formRowCtrlsH;
    cursor: pointer;
    display: inline-block;
    line-height: 120%;
    margin-right: $interiorMargin * 4;
    padding-left: $d + $interiorMargin;
    position: relative;
    em {
        color: $colorBodyFg;
        display: inline-block;
        height: $d;
        width: $d;
        &:before {
            border-radius: $basicCr * .75;
            background: $bg;
            box-shadow: inset rgba(black, 0.4) 0 1px 2px;
            box-sizing: border-box;
            content: "";
            font-family: 'symbolsfont';
            font-size: 0.7em;
            display: inline-block;
            height: $d;
            width: $d;
            left: 0;
            top: 0;
            position: absolute;
            text-align: center;
        }
    }
    &.no-text {
        overflow: hidden;
        margin-right: 0;
        padding-left: 0;
        height: $d;
        width: $d;
        em {
            overflow: hidden;
        }
    }
    input {
        display: none;
        &:checked ~ em:before {
            background: $colorCheck;
            color: lighten($colorCheck, 50%);
        }
    }
}

label.checkbox.custom input:checked ~ em:before { content: $glyph-icon-check; }
label.radio.custom input:checked ~ em:before { content: $glyph-icon-bullet; }

.s-menu-button label.checkbox.custom {
    margin-left: 5px;
}

.item .checkbox {
    &.checked label {
        box-shadow: none;
        border-bottom: none;
    }
}

label.form-control.checkbox {
    input {
        margin-right: $interiorMargin;
        vertical-align: top;
    }
}

/******************************************************** PLACEHOLDERS */
input[type="text"],
input[type="search"],
textarea {
    @include placeholder {
        color: rgba($colorInputFg, 0.4);
        font-style: italic;
    }
}

/******************************************************** INPUTS */
%input-base {
    @include input-base();
}

input[type="text"],
input[type="search"],
input[type="number"] {
    @include nice-input();
    vertical-align: baseline;
    padding: $inputTextPTopBtm $inputTextPLeftRight;
    &.numeric {
        text-align: right;
    }
}

.l-input-sm {
    input[type="text"],
    input[type="search"],
    input[type="number"] {
        width: 50px !important;
    }
}

.l-input-lg input[type="text"],
input[type="text"].lg {  width: 100% !important; }
.l-input-med input[type="text"],
input[type="text"].med { width: 200px !important; }
input[type="text"].sm, input[type="number"].sm {  width: 50px !important; }
.l-numeric input[type="text"],
input[type="text"].numeric { text-align: right; }

.l-textarea-sm textarea,
textarea.sm { position: relative; height: 50px; }
.l-textarea-med textarea,
textarea.med { position: relative; height: 150px; }
.l-textarea-lg textarea,
textarea.lg { position: relative; height: 300px; }

.input-labeled {
    // Used in toolbar
    margin-left: $interiorMargin;
    label {
        display: inline-block;
        margin-right: $interiorMarginSm;
    }
    &.inline {
        display: inline-block;
    }
    &:first-child {
        margin-left: 0;
    }
}

*[contenteditable].s-input-inline,
input[type="text"].s-input-inline,
.s-input-inline input[type="text"] {
    // A text input or contenteditable element that indicates edit affordance on hover and looks like an input on focus
    @extend %input-base;
    @include trans-prop-nice((padding, box-shadow), 250ms);
    background: none;
    box-shadow: none;
    border: 1px solid transparent;
    min-width: 20px;
    padding-left: 0;
    padding-right: 0;
    &:hover,
    &:focus {
        padding-left: $inputTextPLeftRight;
        padding-right: $inputTextPLeftRight;
    }
    &:hover {
        border-color: rgba($colorBodyFg, 0.2);
    }
    &:focus {
        @include s-input();
        border-color: transparent;
    }
}

/******************************************************** SELECTS */
.select {
    @include btnSubtle($bg: $colorSelectBg);
    @extend .icon-arrow-down; // Context arrow
    display: inline-block;
    flex: 0 0 auto; // When used in a flex context, controls need to hold their width
    padding: 0 $interiorMargin;
    overflow: hidden;
    position: relative;
    select {
        @include appearance(none);
        box-sizing: border-box;
        &:focus { outline: 0; }
        background: none;
        color: $colorSelectFg;
        cursor: pointer;
        border: none !important;
        padding: 4px 25px 2px 0px;
        width: 130%;
        option {
            margin: $interiorMargin 0; // Firefox
        }
    }
    &:before {
        transform: translateY(-50%);
        color: rgba($colorInvokeMenu, percentToDecimal($contrastInvokeMenuPercent));
        display: block;
        pointer-events: none;
        position: absolute;
        right: $interiorMargin;
        top: 50%;
    }
}

/******************************************************** AUTOCOMPLETE */
.autocomplete {
    input {
        width: 226px;
        padding: 5px 0px 5px 7px;
    }
    .icon-arrow-down {
        position: absolute;
        top: 8px;
        left: 210px;
        font-size: 10px;
        cursor: pointer;
    }
    .autocompleteOptions {
        border: 1px solid $colorFormLines;
        border-radius: 5px;
        width: 224px;
        max-height: 170px;
        overflow-y: auto;
        overflow-x: hidden;
        li {
            border: 1px solid $colorFormLines;
            padding: 8px 0px 8px 5px;
            .optionText {
                cursor: pointer;
            }
        }
        .optionPreSelected {
            background-color: $colorInspectorSectionHeaderBg;
            color: $colorInspectorSectionHeaderFg;
        }
    }
}

/******************************************************** OBJECT-HEADER */
.object-header {
    font-size: 1em;

    > .type-icon {
        color: $colorObjHdrIc;
        font-size: 120%;
        float: left;
        margin-right: $interiorMargin;
    }

    .l-elem-wrapper {
        mct-representation {
            // Holds the context-available item
            // Must have min-width to make flex work properly in Safari
            min-width: 0.7em;
        }
    }

    .action {
        margin-right: $interiorMargin;
    }

    .title-label {
        color: $colorObjHdrTxt;
        @include ellipsize();
    }

    .context-available-w {
        z-index: 5;
    }

    .context-available {
        font-size: 0.7em;
        flex: 0 0 1;
    }

    .t-object-alert {
        display: none;
    }
}

/******************************************************** PROGRESS BAR */
@include keyframes(progress) {
    100% { background-position: $progressBarStripeW center; }
}

@mixin bgProgressAnim($c: yellow, $a: 0.1, $d: 20px) {
    @include background-image(linear-gradient(-90deg,
        rgba($c, $a) 0%, transparent 50%,
        transparent 50%, rgba($c, $a) 100%
    ));
    background-position: 0 center;
    background-repeat: repeat-x;
    background-size: $d 40%;
}

.l-progress-bar {
    // Assume will be determinate by default
    display: inline-block;
    overflow: hidden;
    position: relative;

    .progress-amt-holder {
        @include absPosDefault(1px);
    }
    .progress-amt,
    .progress-amt:before,
    .progress-amt:after {
        @include absPosDefault();
        display: block;
        content: '';
    }

    .progress-amt {
        right: auto; // Allow inline width to control }
    }

    &.indeterminate {
        .progress-amt {
            width: 100% !important;
        }
    }
}

.s-progress-bar {
    border-radius: $basicCr;
    @include boxIncised(0.3, 4px);
    background: $colorProgressBarOuter;
    .progress-amt {
        border-radius: $basicCr;
        @include boxShdw();
        border-radius: $basicCr - 1;
        @include trans-prop-nice(width);
        &:before {
            background-color: $colorProgressBarAmt;
        }
        &:after {
            // Sheen
            @include background-image(linear-gradient(
                    transparent 5%, rgba(#fff,0.25) 30%, transparent 100%
            ));
        }
    }

    &:not(.indeterminate) {
        .progress-amt:before {
            // More subtle anim for determinate progress
            @include animation(progress .4s linear infinite);
            @include bgProgressAnim(#fff, 0.1, $progressBarStripeW);
        }
    }

    &.indeterminate .progress-amt {
        &:before {
            // More visible std diag stripe anim for indeterminate progress
            @include animation(progress .6s linear infinite);
            @include bgDiagonalStripes(#fff, 0.2, $progressBarStripeW);
        }
        &:after { display: none; }
    }
}

/******************************************************** SLIDERS */
.slider {
    $knobH: 100%;
    .slot {
        width: auto;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }
    .knob {
        @include trans-prop-nice-fade(.25s);
        background-color: $sliderColorKnob;
        &:hover {
            background-color: $sliderColorKnobHov;
        }
        position: absolute;
        height: $knobH;
        width: $sliderKnobW;
        top: 0;
        auto: 0;
        bottom: auto;
        left: auto;
    }
    .knob-l {
        @include border-left-radius($sliderKnobR);
        cursor: w-resize;
    }
    .knob-r {
        @include border-right-radius($sliderKnobR);
        cursor: e-resize;
    }
    .range {
        @include trans-prop-nice-fade(.25s);
        background-color: $sliderColorRange;
        cursor: ew-resize;
        position: absolute;
        top: 0;
        right: auto;
        bottom: 0;
        left: auto;
        height: auto;
        width: auto;
        &:hover {
            background-color: $sliderColorRangeHov;
        }
    }
}

@mixin sliderKnob() {
    $h: 16px;
    cursor: pointer;
    width: floor($h/1.75);
    height: $h;
    margin-top: 1 + floor($h/2) * -1;
    @include btnSubtle(pullForward($colorBtnBg, 10%));
}

@mixin sliderKnobRound() {
    $h: 12px;
    cursor: pointer;
    width: $h;
    height: $h;
    margin-top: 1 + floor($h/2) * -1;
    @include btnSubtle(pullForward($colorBtnBg, 20%));
    border-radius: 50% !important;
}

input[type="range"] {
    // HTML5 range inputs
    -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
    background: transparent; /* Otherwise white in Chrome */
    &:focus {
        outline: none; /* Removes the blue border. */
    }

    // Thumb
    &::-webkit-slider-thumb {
        -webkit-appearance: none;
        @include sliderKnobRound();
    }
    &::-moz-range-thumb {
        border: none;
        @include sliderKnobRound();
    }
    &::-ms-thumb {
        border: none;
        @include sliderKnobRound();
    }

    // Track
    &::-webkit-slider-runnable-track {
        width: 100%;
        height: 3px;
        @include sliderTrack();
    }

    &::-moz-range-track {
        width: 100%;
        height: 3px;
        @include sliderTrack();
    }
}

/******************************************************** DATETIME PICKER */
.l-datetime-picker {
    $r1H: 15px;
    @include user-select(none);
    font-size: 0.8rem;
    padding: $interiorMarginLg !important;
    .l-month-year-pager {
        $pagerW: 20px;
        height: $r1H;
        margin-bottom: $interiorMargin;
        position: relative;
        .pager,
        .val {
            @extend .abs;
        }
        .pager {
            width: $pagerW;
            @extend .ui-symbol;
            &.prev {
                @extend .icon-arrow-left;
                right: auto;
            }
            &.next {
                @extend .icon-arrow-right;
                left: auto;
                text-align: right;
            }
        }
        .val {
            text-align: center;
            left: $pagerW + $interiorMargin;
            right: $pagerW + $interiorMargin;
        }
    }
    .l-calendar,
    .l-time-selects {
        border-top: 1px solid $colorInteriorBorder
    }
    .l-time-selects {
        line-height: inherit;
    }
}

/******************************************************** CALENDAR */
.l-calendar {
    $colorMuted: pushBack($colorMenuFg, 30%);
    ul.l-cal-row {
        display: flex;
        flex-flow: row nowrap;
        margin-top: 1px;
        &:first-child {
            margin-top: 0;
        }
        li {
            flex: 1 0;
            margin-left: 1px;
            padding: $interiorMargin;
            text-align: center;
            &:first-child {
                margin-left: 0;
            }
        }
        &.l-header li {
            color: $colorMuted;
        }
        &.l-body li {
            @include trans-prop-nice(background-color, .25s);
            cursor: pointer;
            &.in-month {
                background-color: $colorCalCellInMonthBg;
            }
            .sub {
                color: $colorMuted;
                font-size: 0.8em;
            }
            &.selected {
                background: $colorCalCellSelectedBg;
                color: $colorCalCellSelectedFg;
                .sub {
                    color: inherit;
                }
            }
            &:hover {
                background-color: $colorCalCellHovBg;
                color: $colorCalCellHovFg;
                .sub {
                    color: inherit;
                }
            }
        }
    }
}

@include phone {
    .l-datetime-picker {
        padding: $interiorMargin !important;
    }
    .l-calendar {
        ul.l-cal-row {
            li {
                padding: 2px $interiorMargin;
            }
        }
    }
}

/******************************************************** TEXTAREA */
textarea {
    @include nice-textarea($colorInputBg, $colorInputFg);
    position: absolute;
    height: 100%;
    width: 100%;
}

/******************************************************** MISC */
.context-available {
    @extend .icon-arrow-down;
    color: $colorKey;
    &:hover {
        color: $colorKeyHov;
    }
}

.view-switcher,
.t-btn-view-large {
    @include trans-prop-nice-fade($controlFadeMs);
}

.view-control {
    @extend .icon-arrow-right;
    cursor: pointer;
    font-size: 0.75em;
    &:before {
        position: absolute;
        @include trans-prop-nice(transform, 100ms);
        transform-origin: center;
    }
    &.expanded:before {
        transform: rotate(90deg);
    }
}

.grippy,
.grippy-sm,
.drag-vertical,
.drag-vertical-sm {
    cursor: move;
}

.drag-vertical {
    @extend .icon-list-view;
}

.drag-vertical-sm {
    @extend .icon-list-view-12px;
}

.grippy {
    // Used in Summary Widgets
    @extend .icon-grippy;
}

.grippy-sm {
    // Used in editor Elements pool
    @extend .icon-grippy-12px;
}

/******************************************************** BROWSER ELEMENTS */
body.desktop {
    ::-webkit-scrollbar {
        box-sizing: border-box;
        box-shadow: inset $scrollbarTrackShdw;
        background-color: $scrollbarTrackColorBg;
        height: $scrollbarTrackSize;
        width: $scrollbarTrackSize;
    }

    ::-webkit-scrollbar-thumb {
        box-sizing: border-box;
        background: $scrollbarThumbColor;
        &:hover { background: $scrollbarThumbColorHov; }
    }

    .overlay ::-webkit-scrollbar-thumb {
        background: $scrollbarThumbColorOverlay;
        &:hover { background: $scrollbarThumbColorOverlayHov; }
    }

    .menu ::-webkit-scrollbar-thumb {
        background: $scrollbarThumbColorMenu;
        &:hover { background: $scrollbarThumbColorMenuHov; }
    }

    ::-webkit-scrollbar-corner {
        background: $scrollbarTrackColorBg;
    }
}