openmct/src/styles-new/_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.
 *****************************************************************************/

/********* Buttons */
// Optionally can include icon in :before via markup
button {
    @include htmlInputReset();
}

.c-button,
.c-button--menu {
    @include cButton();
}

.c-button--menu {
    $m: $interiorMargin;

    &:before,
    > * {
        margin-right: $m;
    }

    &:after {
        content: $glyph-icon-arrow-down;
        font-family: symbolsfont;
        opacity: 0.5;
    }
}

/********* Icon Buttons */
.c-click-icon {
    @include cClickIcon();

    &--menu {
        &:after {
            content: $glyph-icon-arrow-down;
            font-family: symbolsfont;
            font-size: 0.6em;
            margin-left: floor($interiorMarginSm * 0.8);
            opacity: 0.5;
        }
    }

    &--swatched {
        // Color control, show swatch element
        display: flex;
        flex-flow: column nowrap;
        align-items: center;
        justify-content: center;

        > [class*='swatch'] {
            box-shadow: inset rgba(black, 0.2) 0 0 1px;
            flex: 0 0 auto;
            height: 4px;
            width: 100%;
            margin-top: 1px;
        }

        &:before {
            // Reduce size of icon to make a bit of room
            flex: 1 1 auto;
            font-size: 1.1em;
        }
    }
}

/******************************************************** DISCLOSURE CONTROLS */
/********* Disclosure Button */
// Provides a downward arrow icon that when clicked displays a context menu
// Always placed AFTER an element
.c-disclosure-button {
    @include cClickIcon();
    margin-left: $interiorMarginSm;

    &:before {
        content: $glyph-icon-arrow-down;
        font-family: symbolsfont;
        font-size: 0.7em;
    }
}
/********* Disclosure Triangle */
// Provides an arrow icon that when clicked expands an element to reveal its contents.
// Used in tree items. Always placed BEFORE an element.
.c-disclosure-triangle {
    $d: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: $d;
    position: relative;

    &.is-enabled:before {
        $s: .65;
        content: $glyph-icon-arrow-right-equilateral;
        display: block;
        font-family: symbolsfont;
        font-size: 1rem * $s;
        position: absolute;
        transform-origin: floor(($d / 2) * $s); // This is slightly better than 'center'
        transition: transform 100ms ease-in-out;
    }

    &--expanded {
        &:before {
            transform: rotate(90deg);
        }
    }
}

/******************************************************** FORM ELEMENTS */
input, textarea {
    font-family: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
}

input[type=text],
input[type=search],
input[type=number] {
    @include reactive-input();
    padding: $inputTextP;
    &.numeric {
        text-align: right;
    }
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    margin-right: -5px !important;
    margin-top: -1px !important;
}

.c-input {
    &--datetime {
        // Sized for values such as 2018-09-28 22:32:33.468Z
        width: 160px;
    }

    &--hrs-min-sec {
        // Sized for values such as 00:25:00
        width: 60px;
    }

    &-inline,
    &--inline {
        // A text input or contenteditable element that indicates edit affordance on hover and looks like an input on focus
        @include reactive-input($bg: transparent);
        box-shadow: none;
        display: block !important;
        min-width: 0;
        padding-left: 0;
        padding-right: 0;
        overflow: hidden;
        transition: all 250ms ease;
        white-space: nowrap;

        &:not(:focus) {
            text-overflow: ellipsis;
        }

        &:hover,
        &:focus {
            background: $colorInputBg;
            padding-left: $inputTextPLeftRight;
            padding-right: $inputTextPLeftRight;
        }
    }

    &--labeled {
        // TODO: replace .c-labeled-input with this
        // An input used in the Toolbar
        // Assumes label is before the input
        @include cControl();

        input {
            margin-left: $interiorMarginSm;
        }
    }
}

.c-labeled-input {
    // An input used in the Toolbar
    // Assumes label is before the input
    @include cControl();

    input {
        margin-left: $interiorMarginSm;
    }
}

/******************************************************** HYPERLINKS AND HYPERLINK BUTTONS */
.c-hyperlink {
    &--link {
        color: $colorKey;
    }

    &--button {
        @include cButton();
    }
}

/******************************************************** MENUS */
@mixin menuOuter() {
    border-radius: $basicCr;
    background: $colorMenuBg;
    text-shadow: $shdwMenuText;
    padding: $interiorMarginSm;
    box-shadow: $shdwMenu;
    display: block;
    position: absolute;
    z-index: 70;
}

@mixin menuInner() {
    li {
        @include cControl();
        justify-content: start;
        color: $colorMenuFg;
        cursor: pointer;
        display: flex;
        padding: nth($menuItemPad, 1) nth($menuItemPad, 2);
        transition: $transIn;
        white-space: nowrap;

        &:hover {
            background: $colorMenuHovBg;
            color: $colorMenuHovFg;
            &:before {
                color: $colorMenuHovIc;
            }
        }
        &:before {
            color: $colorMenuIc;
            font-size: 1em;
            margin-right: $interiorMargin;
        }
    }
}

.c-menu {
    @include menuOuter();
    @include menuInner();
}

.c-super-menu {
    // Two column layout, menu items on left with detail of hover element on right
    @include menuOuter();
    display: flex;
    padding: $interiorMarginLg;
    flex-direction: row;

    > [class*="__"] {
        $m: $interiorMarginLg;
        flex: 1 1 50%;
        &:first-child {
            margin-right: $m;
        }

        &:last-child {
            border-left: 1px solid $colorInteriorBorder;
            padding-left: $m;
        }
    }

    &__menu {
        @include menuInner();
        overflow: auto;

        ul {
            margin-right: $interiorMarginSm; // Fend off scrollbar
        }

        li {
            border-radius: $controlCr;
        }
    }

    &__item-description {
        display: flex;
        flex-direction: column;
        justify-content: stretch;

        .l-item-description {
            &__name,
            &__description {
                margin-top: $interiorMarginLg;
            }

            &__icon {
                min-height: 20%;
                margin: 10% 25%;
            }

            &__name {
                color: $colorMenuFg;
                flex: 0 0 auto;
                font-size: 1.25em;
            }

            &__description {
                font-size: $fontBaseSize;
            }
        }
    }
}

/******************************************************** PALETTES */
.c-palette {
    display: flex;
    flex-flow: column nowrap;

    &__items {
        flex: 1 1 auto;
        display: grid;
        grid-template-columns: repeat(10, [col] auto );
        grid-gap: 1px;
    }

    &__item {
        $d: 16px;

        border: 1px solid transparent;
        cursor: pointer;
        width: 16px; height: 16px;
        transition: $transOut;

        &:hover {
            transition: $transIn;
            $o: 0.7;
            border-color: rgba($paletteItemBorderOuterColorSelected, $o);
            box-shadow: inset rgba($paletteItemBorderInnerColorSelected, $o) 0 0 0 1px;
        }

        &.is-selected {
            border-color: $paletteItemBorderOuterColorSelected !important;
            border-width: 2px;
            box-shadow: inset rgba($paletteItemBorderInnerColorSelected, 1) 0 0 0 1px;
        }
    }

    &__item-none {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        margin-bottom: $interiorMarginSm;

        .c-palette__item {
            @include noColor();
            border-color: $paletteItemBorderInnerColor;
            margin-right: $interiorMarginSm;
        }
    }
}

/******************************************************** TOOLBAR */
.c-ctrl-wrapper {
    @include cCtrlWrapper();
}

.c-toolbar,
.c-toolbar .c-ctrl-wrapper {
    display: flex;
    align-items: stretch;
}

.c-toolbar {
    height: 24px; // Need to standardize the height

    .c-click-icon {
        @include cControl();
        $pLR: $interiorMargin - 1;
        $pTB: 2px;
        color: $colorBodyFg;
        padding: $pTB $pLR;

        &--swatched {
            padding-bottom: floor($pTB / 2);
            width: 2em; // Standardize the width
        }

        &[class*='--caution'] {
            &:before {
                color: $colorBtnCautionBg;
            }

            &:hover {
                background: rgba($colorBtnCautionBgHov, 0.2);
                :before {
                    color: $colorBtnCautionBgHov;
                }
            }
        }
    }

    .c-labeled-input {
        font-size: 0.9em;
        input[type='number'] {
            width: 40px; // Number input sucks and must have size set using this method
        }

        + .c-labeled-input {
            margin-left: $interiorMargin;
        }
    }
}

/********* Button Sets */
.c-button-set {
    // When one set is adjacent to another, provides a divider between

    display: inline-flex;
    flex: 0 0 auto;

    > * {
        // Assume buttons are immediate descendants
        flex: 0 0 auto;

        + * {
            // margin-left: $interiorMarginSm;
        }
    }

    + .c-button-set {
        $m: $interiorMargin;
        $b: 1px;
        &:before {
            content: '';
            display: block;
            width: $m + $b; // Allow for border
            border-right: $b solid $colorInteriorBorder;
            margin-right: $m;
        }
    }

    &[class*='--strip'] {
        // Buttons are smashed together with minimal margin
        // c-buttons don't have border-radius between buttons, creates a tool-button-strip look
        // c-click-icons get grouped more closely together
        &[class^="c-button"] {
            // Only apply the following to buttons that have background, eg. c-button
            border-radius: 0;

            + * {
                margin-left: 1px;
            }

            &:first-child {
                border-top-left-radius: $controlCr;
                border-bottom-left-radius: $controlCr;
            }

            &:last-child {
                border-top-right-radius: $controlCr;
                border-bottom-right-radius: $controlCr;
            }
        }
    }
}

/***************************************************** SLIDERS */
.c-slider {
    @include cControl();
    > * + * { margin-left: $interiorMargin; }
}