openmct/platform/commonUI/general/res/sass/_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.
 *****************************************************************************/

@mixin absPosDefault($offset: 0px, $overflow: hidden) {
    overflow: $overflow;
    position: absolute;
    top: $offset;
    right: $offset;
    bottom: $offset;
    left: $offset;
    width: auto;
    height: auto;
}

@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 trans-prop-nice($props, $dur: 500ms, $delay: 0) {
    // Multiple $props must be in parans like this: (left, right)
    @if $dur == 0 {
        @include transition-property(none);
    } @else {
        @include transition-property($props);
        @include transition-duration($dur);
        @include transition-timing-function(ease-in-out);
        @include transition-delay($delay);
    }
}

@mixin trans-prop-nice-fade($dur: 500ms, $delay: 0) {
    @if $dur == 0 {
        @include transition-property(none);
    } @else {
        @include transition-property(opacity, background-color, border-color, color);
        @include transition-duration($dur);
        @include transition-timing-function(ease-in-out);
        @include transition-delay($delay);
    }
}

@mixin trans-prop-nice-resize($t: 0.5s, $tf: ease-in-out) {
    @include transition-property(height, width, top, right, bottom, left, opacity);
    @include transition-duration($t);
    @include transition-timing-function($tf);
}

@mixin trans-prop-nice-resize-h($dur: 500ms, $delay: 0) {
    @include transition-property(height, bottom, top);
    @include transition-duration($dur);
    @include transition-timing-function(ease-in-out);
    @include transition-delay($delay);
}

@mixin trans-prop-nice-resize-w($dur: 500ms, $delay: 0) {
    @include transition-property(width, left, right);
    @include transition-duration($dur);
    @include transition-timing-function(ease-in-out);
    @include transition-delay($delay);
}

@mixin triangle-right($size, $color) {
    $size: $size/2;
    $ratio: 1;
    width: 0;
    height: 0;
    border-top: $size/$ratio solid transparent;
    border-left: $size solid $color;
    border-bottom: $size/$ratio solid transparent;
}

@mixin triangle-down($size, $color) {
    $size: $size/2;
    $ratio: 1;
    width: 0;
    height: 0;
    border-left: $size/$ratio solid transparent;
    border-top: $size solid $color;
    border-right: $size/$ratio solid transparent;
}

@mixin triangle($dir: "left", $size: 5px, $ratio: 1, $color: red) {
    width: 0;
    height: 0;
    $slopedB: $size/$ratio solid transparent;
    $straightB: $size solid $color;
    @if $dir == "up" {
        border-left: $slopedB;
        border-right: $slopedB;
        border-bottom: $straightB;
    } @else if $dir == "right" {
        border-top: $slopedB;
        border-bottom: $slopedB;
        border-left: $straightB;
    } @else if $dir == "down" {
        border-left: $slopedB;
        border-right: $slopedB;
        border-top: $straightB;
    } @else {
        border-top: $slopedB;
        border-bottom: $slopedB;
        border-right: $straightB;
    }
}

@mixin bgDiagonalStripes($c: yellow, $a: 0.1, $d: 40px) {
    @include 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) {
    @include 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 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;
}

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

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

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

@mixin sliderTrack($bg: $scrollbarTrackColorBg) {
    border-radius: 2px;
    box-sizing: border-box;
    @include boxIncised(0.7);
    background-color: $bg;
}

@mixin controlGrippy($b, $direction: horizontal, $w: 1px, $style: dotted) {
    content: '';
    display: block;
    pointer-events: none;
    position: absolute;
    z-index: 2;

    @if $direction == "horizontal" {
        border-top: $w $style darken($b, 15%);
        top: 2px;
        left: 5px;
        right: 5px;
        height: 1px;

    } @else if $direction == "vertical" {
        border-left: $w $style darken($b, 15%);
        left: 2px;
        bottom: 5px;
        top: 5px;
        width: 1px;
    }
}

@mixin boxIncised($sVal: 0.6, $inset: 5px) {
    box-shadow: inset rgba(black, $sVal) 0 1px $inset;
}

@mixin boxOutline($c: lighten($colorBodyBg, 20%)) {
    border: 1px solid $c;
}

@mixin boxShdw($sVal: rgba(black, 0.4) 0 0 3px) {
	@if $sVal != 'none' {
		box-shadow: $sVal;
	}
}

@mixin boxShdwSubtle($sVal: 0.2) {
	@if $sVal != 'none' {
		box-shadow: rgba(black, $sVal) 0 1px 2px;
	}
}

@mixin boxShdwLarge($sVal: 0.7) {
	@if $sVal != 'none' {
		box-shadow: rgba(black, $sVal) 0 3px 10px;
	}
}

@mixin outerGlow($color: #fff, $sVal: 0.3) {
    box-shadow: rgba($color, $sVal) 0 0 30px;
}

@mixin linearGlow($deg: 0, $c: red, $a: 0.4) {
    @include background-image(linear-gradient($deg, rgba($c, 0), rgba($c, $a) 100%));
}

@mixin subtleGrad($deg: 0, $c: red, $a0: 0.2, $a1: 0.3) {
    @include background-image(linear-gradient($deg, rgba($c, $a0), rgba($c, $a1) 100%));
}

@mixin txtShdw($sVal) {
	//@if $sVal != 'none' {
		text-shadow: $sVal;
	//}
}

@mixin txtShdwSubtle($sVal: 0.1) {
	@if $sVal != 'none' {
	    text-shadow: rgba(black, $sVal) 0 1px 2px;
	}
}

@mixin txtShdwLarge($sVal: 0.7) {
    text-shadow: rgba(black, $sVal) 0 3px 7px;
}

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

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

@function splitterHandleInset($splitterD: 21px, $splitterHandleD: 1px) {
    // Space to either side of the handle
    @return ($splitterD - $splitterHandleD) / 2;
}

/*********************************************** CONTROLS, FORM ELEMENTS */

@mixin containerBase($bg: $colorBodyBg, $fg: $colorBodyFg) {
	background-color: $bg;
	//border-radius: $controlCr;
	box-sizing: border-box;
	color: $fg;
}

@mixin btnBase($bg: $colorBtnBg, $bgHov: $colorBtnBgHov, $fg: $colorBtnFg, $fgHov: $colorBtnFgHov, $ic: $colorBtnIcon, $icHov: $colorBtnIconHov) {
	@include user-select(none);
    border-radius: $controlCr;
    color: $fg;
	.icon,
    &:before {
		color: $ic;
	}
  @if $bgHov != none {
      &:not([disabled="true"]):not(.disabled):hover {
          background: $bgHov;
          color: $fgHov;
          >.icon,
          &:before {
              color: $icHov;
          }
      }
  }
}

@mixin btnSubtle($bg: $colorBtnBg, $bgHov: $colorBtnBgHov, $fg: $colorBtnFg, $fgHov: $colorBtnFgHov, $ic: $colorBtnIcon, $icHov: $colorBtnIconHov) {
    @include containerSubtle($bg, $fg);
    @include btnBase($bgHov: $bgHov, $fg: $fg, $fgHov: $fgHov, $ic: $ic, $icHov: $icHov);
    text-shadow: $shdwItemText;
}

@mixin input-base() {
	@include appearance(none);
	border-radius: $controlCr;
	box-sizing: border-box;
    &:focus { outline: 0; }
	&.error {
		background-color: $colorFormFieldErrorBg;
        color: $colorFormFieldErrorFg;
	}
}

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

@mixin nice-input($bg: $colorInputBg, $fg: $colorInputFg, $shdw: rgba(black, 0.5) 0 0px 2px) {
    @include s-input($bg, $fg, $shdw);
    border: none;
    outline: none;
}

@mixin contextArrow() {
	text-shadow: none;
	content: $glyph-icon-arrow-down;
	display: inline-block;
	font-family: 'symbolsfont';
	margin-left: $interiorMarginSm;
}

@mixin nice-textarea($bg: $colorBodyBg, $fg: $colorBodyFg) {
    @include nice-input($bg, $fg);
    padding: $interiorMargin;
}

@mixin subdued-input($bg: $colorBodyBg, $fg: $colorBodyFg) {
    @include nice-input($bg, $fg);
    background: lighten($bg, 3%);
    border-bottom: 1px solid lighten($bg, 10%);
}

@mixin menuUlReset() {
    margin: 0;
    padding: 0;
    li {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
}

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

@mixin verticalCenter {
    /* This doesn't work on an element inside an element with absolute positioning that has height: auto */
    //position: relative;
    top: 50%;
    transform: translateY(-50%);
}

@mixin verticalCenterBlock($holderH, $itemH) {
    top: floor(($holderH - $itemH) / 2);
    bottom: auto;
    height: $itemH;
}

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

@mixin reverseEllipsis() {
    direction: rtl;
    unicode-bidi:bidi-override;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

@mixin scrollH($showBar: auto) {
    overflow-x: $showBar;
    overflow-y: hidden;
}

@mixin scrollV($showBar: auto) {
    overflow-x: hidden;
    overflow-y: $showBar;
}

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

@mixin tmpBorder($c: #ffcc00, $a: 0.75) {
    box-sizing: border-box;
    border: 1px dotted rgba($c, $a);
}

@mixin testObj($w: 2000px, $h: 1000px, $c: black, $a: 0.1) {
    &:after {
        box-sizing: border-box;
        @include bgDiagonalStripes($c, $a);
        color: rgba(white, 0.3);
        font-style: italic;
        content: "Test Object";
        display: block;
        padding: 20px;
        position: relative;
        width: $w;
        height: $h;
        transform: scaleX(1) scaleY(1) scaleZ(1);
        transform-origin: 50% 50% 0;
    }
}

@mixin s-stale($a: 0.5) {
    color: rgba($colorTelemFresh, $a) !important;
    font-style: italic;
}