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

/************************** VISUALS */
@mixin ancillaryIcon($d, $c) {
    // Used for small icons used in combination with larger icons,
    // like the link and alert icons in tree items.
    color: $c;
    font-size: $d;
    line-height: $d;
    height: $d;
    width: $d;
}

@mixin bgDiagonalStripes($c: yellow, $a: 0.1, $d: 40px) {
    background-image: linear-gradient(-45deg,
        rgba($c, $a) 25%, transparent 25%,
        transparent 50%, rgba($c, $a) 50%,
        rgba($c, $a) 75%, transparent 75%,
        transparent 100%
    );
    background-repeat: repeat;
    background-size: $d $d;
}

@mixin bgStripes($c: yellow, $a: 0.1, $bgsize: 5px, $angle: 90deg) {
    background-image: linear-gradient($angle,
        rgba($c, $a) 25%, transparent 25%,
        transparent 50%, rgba($c, $a) 50%,
        rgba($c, $a) 75%, transparent 75%,
        transparent 100%
    );
    background-repeat: repeat;
    background-size: $bgsize $bgsize;
}

@mixin noColor() {
    // A "no fill/stroke" selection option. Used in palettes.
    $c: red;
    $s: 48%;
    $e: 52%;
    background-image: linear-gradient(-45deg,
        transparent $s - 5%,
        $c $s,
        $c $e,
        transparent $e + 5%
    );
    background-repeat: no-repeat;
    background-size: contain;
}

@mixin bgTicks($c: $colorBodyFg, $repeatDir: 'x') {
    $deg: 90deg;
    @if ($repeatDir != 'x') {
        $deg: 0deg;
        $repeatDir: repeat-y;
    } @else {
        $repeatDir: repeat-x;
    }

    background-image: linear-gradient($deg,
            $c 1px, transparent 1px,
            transparent 100%
    );
    background-repeat: $repeatDir;
}

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

/************************** LAYOUT */
@mixin abs($m: 0) {
    position: absolute;
    top: $m; right: $m; bottom: $m; left: $m;
}

@mixin gridTwoColumn() {
    display: grid;
    grid-row-gap: 0;
    grid-template-columns: 1fr 2fr;
    align-items: start;

    [class*="header"] {
        border-radius: $smallCr;
        background-color: $colorInspectorSectionHeaderBg;
        color: $colorInspectorSectionHeaderFg;
        margin: 0 0 $interiorMarginSm 0;
        padding: $interiorMarginSm $interiorMargin;

        &:not(:first-child) {
            // Allow multiple headers within a component
            margin-top: $interiorMarginLg;
        }
    }

    [class*="span-all"],
    [class*="header"] {
        @include gridTwoColumnSpanCols();
    }
}

@mixin gridTwoColumnSpanCols() {
    grid-column: 1 / 3;
}

/************************** TEXT */
@mixin ellipsize() {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@mixin reverseEllipsis() {
    @include ellipsize();
    direction: rtl;
    unicode-bidi:bidi-override;
}

@mixin test($c: #ffcc00, $a: 0.2) {
    background-color: rgba($c, $a) !important;
}

/************************** CONTROLS, BUTTONS */
@mixin input-base() {
    appearance: none;
    border: none;
    border-radius: $controlCr;
    outline: none;

    &:focus {
        outline: 0;
    }

    &.error {
        background-color: $colorFormFieldErrorBg;
        color: $colorFormFieldErrorFg;
    }
}

@mixin nice-input($bg: $colorInputBg, $fg: $colorInputFg, $shdw: rgba(black, 0.5) 0 0 2px) {
    @include input-base();
    background: $bg;
    color: $fg;
    box-shadow: inset $shdw;
}

@mixin reactive-input($bg: $colorInputBg, $fg: $colorInputFg) {
    @include input-base();
    background: $bg;
    box-shadow: $shdwInput;
    color: $fg;

    &:hover {
        box-shadow: $shdwInputHov;
    }

    &:focus {
        box-shadow: $shdwInputFoc;
    }
}

@mixin button($bg: $colorBtnBg, $fg: $colorBtnFg, $radius: $controlCr, $shdw: none) {
    background: $bg;
    color: $fg;
    border-radius: $radius;
    box-shadow: $shdw;
}

@mixin wrappedInput() {
    // An input that is wrapped. Optionally includes a __label or icon element.
    // Based on .c-search.
    @include nice-input();
    display: flex;
    align-items: center;
    padding-left: 4px;
    padding-right: 4px;

    &:before,
    [class*='__label'] {
        opacity: 0.5;
    }

    &:before {
        // Adds an icon. Content defined in class.
        direction: rtl; // Aligns glyph to right-hand side of container, for transition
        display: block;
        font-family: symbolsfont;
        flex: 0 0 auto;
        overflow: hidden;
        padding: 2px 0; // Prevents clipping
        transition: width 250ms ease;
        width: 1em;
    }

    &:hover {
        box-shadow: inset rgba(black, 0.8) 0 0px 2px;
        &:before {
            opacity: 0.9;
        }
    }

    &--major {
        padding: 4px;
    }

    &__input,
    input[type='text'],
    input[type='search'],
    input[type='number'] {
        background: none  !important;
        box-shadow: none !important; // !important needed to override default for [input]
        flex: 1 1 auto;
        padding-left: 2px !important;
        padding-right: 2px !important;
        min-width: 10px; // Must be set to allow input to collapse below browser min
    }

    &.is-active {
        &:before {
            padding: 2px 0px;
            width: 0px;
        }
    }
}

/************************** MATH */
@function percentToDecimal($p) {
    @return $p / 100%;
}

@function decimalToPercent($d) {
    @return percentage($d);
}

/************************** UTILITIES */
@mixin browserPrefix($prop, $val) {
    #{$prop}: $val;
    -ms-#{$prop}: $val;
    -moz-#{$prop}: $val;
    -webkit-#{$prop}: $val;
}

@mixin userSelectNone() {
    @include browserPrefix(user-select, none);
}

@mixin cursorGrab() {
    cursor: grab;
    cursor: -webkit-grab;
    &:active {
        cursor: grabbing;
        cursor: -webkit-grabbing;
    }
}