openmct/platform/commonUI/general/res/sass/controls/_buttons.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.
 *****************************************************************************/
$baseRatio: 1.5;
$pad: $interiorMargin * $baseRatio;

.s-button {
    @include user-select(none);
    @include btnSubtle($bg: $colorBtnBg, $bgHov: $colorBtnBgHov, $fg: $colorBtnFg, $ic: $colorBtnIcon);
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    font-size: 0.7rem;
    text-decoration: none;
    height: $btnStdH;
    line-height: $btnStdH;
    padding: 0 $pad;

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

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

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

    &.major {
        @include btnSubtle($bg: $colorBtnMajorBg, $bgHov: $colorBtnMajorBgHov, $fg: $colorBtnMajorFg, $fgHov: $colorBtnMajorFgHov, $ic: $colorBtnMajorFg, $icHov: $colorBtnMajorFgHov);
    }

    &.no-label {
        .label, .title-label { display: none; }
    }

    &[disabled="true"] {
        opacity: 0.3;
    }

    &.pause-play {
        @extend .icon-pause;
        &.paused {
            @include btnSubtle($bg: $colorPausedBg, $bgHov: pushBack($colorPausedBg, 10%), $fg: $colorPausedFg, $ic: $colorPausedFg);
            @extend .icon-play;
            &:before { @include pulse($dur: 1000ms); }
        }
    }

    .icon {
        font-size: 0.8rem;
    }

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

body.desktop .mini-tab-icon {
    // Meant to be used as pane hide/show control elements in concert with mct-splitter
    // Font glyphs set in _layout.scss
    background-color: $colorMiniTabBg;
    color: $colorMiniTabFg;
    cursor: pointer;
    display: block;
    font-family: 'symbolsfont';
    font-size: $uePaneMiniTabFontSize;
    position: absolute;
    height: $uePaneMiniTabH; width: $uePaneMiniTabW;
    line-height: $uePaneMiniTabH;
    overflow: hidden;
    text-align: center;

    &:before {
        display: inline-block;
    }

    &:hover {
        background-color: $colorMiniTabBgHov;
        color: $colorMiniTabFgHov;
    }
}

@mixin btnSetButtonFirst() {
    @include border-left-radius($controlCr);
    margin-left: 0;
}

@mixin btnSetButtonLast() {
    @include border-right-radius($controlCr);
}

.l-btn-set {
    // Buttons that have a very tight conceptual grouping - no internal space between them.
    font-size: 0; // Remove space between s-button elements due to white space in markup
    white-space: nowrap;

    .s-button {
        border-radius: 0;
        margin-left: 1px !important;
    }

    > .s-button {
        // Styles for .s-button as immediate descendants in .l-btn-set
        &:first-child { @include btnSetButtonFirst(); }
        &:last-child { @include btnSetButtonLast(); }
    }

    // Must use following due to DOM structure of action buttons,
    // which have structure like .l-btn-set > mct-representation class=first|last > .s-button
    .first > .s-button { @include btnSetButtonFirst(); }
    .last > .s-button { @include btnSetButtonLast(); }
}

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