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

/*****************************************************************************
 * Open MCT Web, Copyright (c) 2014-2015, United States Government
 * as represented by the Administrator of the National Aeronautics and Space
 * Administration. All rights reserved.
 *
 * Open MCT Web 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 Web 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.
 *****************************************************************************/
$baseRatio: 1.5;
$pad: $interiorMargin * $baseRatio;

.s-btn,
.s-icon-btn {
    @include user-select(none);
    cursor: pointer;
    text-decoration: none;
    height: $btnStdH;
    line-height: $btnStdH;
}

.s-btn {
    box-sizing: border-box;
    padding: 0 $pad;
    font-size: 0.7rem;
    vertical-align: top;
    @include btnSubtle($colorBtnBg, $colorBtnBgHov, $colorBtnFg, $colorBtnIcon);

	&.lg {
		font-size: 1rem;
	}

    &.sm {
        padding: 0 $pad / $baseRatio;
    }

    &.vsm {
        padding: 0 ($pad / $baseRatio) / 2;
    }

    &.major,
    &.key-edit {
        $bg: $colorBtnMajorBg;
        $hc: lighten($bg, 10%);
        @include btnSubtle($bg, $hc, $colorBtnMajorFg, $colorBtnMajorFg);
    }

    &.t-save:before {
        content:'\e612';
        font-family: symbolsfont;
        margin-right: $interiorMarginSm;
    }
    &.t-save-as:before {
        content:'\e612';
        font-family: symbolsfont;
        margin-right: $interiorMarginSm;
    }
    &.t-cancel {
        .title-label { display: none; }
        &:before {
            content:'\78';
            font-family: symbolsfont;
        }
    }

    &.pause-play {
        .icon:before {
            content: "\0000F1";
        }
        &.paused {
            @include btnSubtle($colorPausedBg, pushBack($colorPausedBg, 10%), $colorPausedFg, $colorPausedFg);
            .icon {
                @include pulse($dur: 1000ms);
                :before {
                    content: "\0000EF";
                }
            }
        }
    }

    &.show-thumbs {
        .icon:before {
            content: "\000039";
        }
    }

    .icon {
        font-size: 0.8rem;
        color: $colorKey;
    }

    .title-label {
        vertical-align: top;
    }
}

.s-icon-btn {
    @extend .ui-symbol;
    // Color and styling additionally in _controls.scss
}

body.desktop .mini-tab {
    // Meant to be used as pane hide/show control elements in concert with mct-splitter
    $iconH: $uePaneMiniTabH;
    $iconW: $uePaneMiniTabW;
    $iconInnerLR: 0;
    $arwD: 9px;
    $arwOffsetX: 0px;
    $arwAnimOffsetX: 2px + $iconInnerLR;
    $cBg: pullForward($colorBodyBg, 15%);
    $cFg: $cBg;


    border-radius: $basicCr;
    //@include boxShdw($shdwBtns);
    box-sizing: border-box;
    @include trans-prop-nice((color, background-color), 100ms);
    color: $cFg;
    cursor: pointer;
    font-family: symbolsfont;
    font-size: $arwD;
    display: block;
    position: absolute;
    line-height: $iconH;
    height: $iconH; width: $iconW;
    text-align: center;

    &.collapsed {
        // State when the pane this element controls has been collapsed
        @include btnSubtle($colorBtnBg, $colorKey, $colorBtnFg, $colorBtnIcon);
        &:before { opacity: 0; }
        &:after { opacity: 1; }
        &:hover {
            &:before { opacity: 1; }
            &:after { opacity: 0; }
        }

    }

    &:before,
    &:after {
        @include trans-prop-nice((left, right, opacity), 250ms);
        display: block;
        height: 100%;
        position: absolute;
    }

    &:before {
        // Always the arrow icon
        width: $arwD;
    }
    &:after {
        // Always icon; content is set in _layout.scss
        width: 100%;
        text-align: center;
        opacity: 0;
    }

    &.anchor-left {
        // |<
        text-align: right;
        &:before {
            content:'\3c'; // Collapse left icon e613
            right: $iconInnerLR;
        }
        &.collapsed {
            @include border-left-radius(0);
            text-align: left;
            &:before {
                content:'\3e';
                left: $iconInnerLR;
            }
            &:hover:before { left: $arwAnimOffsetX; }
        }
    }
    &.anchor-right {
        // >|
        text-align: left;
        &:before {
            content:'\3e'; // Collapse right icon e614
            left: $iconInnerLR;
        }
        &.collapsed {
            @include border-right-radius(0);
            &:before {
                text-align: right;
                content:'\3c';
                right: $iconInnerLR;
            }
            &:hover:before { right: $arwAnimOffsetX; }
        }
    }
}

body.desktop .mini-tab-icon {
    // Meant to be used as pane hide/show control elements in concert with mct-splitter
    $d: $uePaneMiniTabW;
    color: pullForward($colorBodyBg, 15%);
    cursor: pointer;
    display: block;
    font-family: symbolsfont;
    font-size: $d;
    position: absolute;
    height: $d; width: $d;
    line-height: $d;
    overflow: hidden;
    word-break: break-all;

    &.collapsed {
        $d: $uePaneMiniTabCollapsedW;
        width: $d; font-size: $d;
    }

    &:before,
    &:after {
        position: absolute;
        display: inherit;
    }

    &:before {
        content: '\78'; // X icon
    }

    &:hover {
        color: $colorKey;
    }
}

.l-btn-set {
    // Buttons that have a very tight conceptual grouping - no internal space between them.
    // Structure: .btn-set > mct-representation class=first|last > .s-btn
    font-size: 0; // Remove space between s-btn elements due to white space in markup

    .s-btn {
        border-radius: 0;
        margin-left: 1px;
    }

    .first {
        .s-btn,
        &.s-btn {
            @include border-left-radius($controlCr);
            margin-left: 0;
        }
    }

    .last {
        .s-btn,
        &.s-btn {
            @include border-right-radius($controlCr);
        }
    }
}

.paused {
    &:not(.s-btn) {
        border-color: $colorPausedBg !important;
        color: $colorPausedBg !important;
    }
}