@mixin trans-prop-nice-resize-h() { @include transition-property(height, bottom, top); @include transition-duration(0.4s); @include transition-timing-function(ease-in-out); } @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 containerSubtle($bg: $colorBodyBg, $fg: $colorBodyFg, $hover: false) { @include background-image(linear-gradient(lighten($bg, 10%), lighten($bg, 5%))); @include border-radius($controlCr); @include box-sizing(border-box); // @include box-shadow(rgba(black, 0.3) 0 1px 2px); @include boxShdwSubtle(); border-top: 1px solid lighten($bg, 20%); color: $fg; display: inline-block; @if $hover == true { &:hover { @include background-image(linear-gradient(lighten($bg, 20%), lighten($bg, 15%))); } } } @mixin sliderTrack($bg: $scrollbarTrackColorBg) { $b: 1px solid lighten($bg, 30%); @include border-radius(2px); @include box-sizing(border-box); @include boxIncised(0.7); background-color: $bg; border-bottom: $b; border-right: $b; } @mixin controlGrippy($b, $direction: horizontal, $w: 1px, $style: dotted) { &:before { // Grippy content: ''; display: block; height: auto; position: absolute; z-index: 2; @if $direction == "horizontal" { border-top: $w $style darken($b, 15%); top: 2px; left: 5px; right: 5px; } @else if $direction == "vertical" { border-left: $w $style darken($b, 15%); left: 2px; bottom: 5px; top: 5px; } } &:not(.disabled):hover:before { border-color: rgba($colorKey, 0.9); } } @mixin btnSubtle($bg: $colorBodyBg, $fg: $colorBodyFg) { @include containerSubtle($bg, $fg); &:not(.disabled):hover { @include background-image(linear-gradient(lighten($bg, 20%), lighten($bg, 10%))); } } @mixin btnNoticeable($bg: $colorBodyBg, $fg: $colorBodyFg) { @include containerSubtle($bg, $fg); @include background-image(linear-gradient(lighten($bg, 20%), $bg)); &:not(.disabled):hover { @include background-image(linear-gradient(lighten($bg, 30%), lighten($bg, 10%))); } } @mixin boxIncised($sVal: 0.6) { @include box-shadow(inset rgba(black, $sVal) 0 1px 5px); } @mixin boxOutline($c: lighten($colorBodyBg, 20%)) { border: 1px solid $c; } @mixin boxShdwSubtle($sVal: 0.3) { @include box-shadow(rgba(black, $sVal) 0 1px 3px); } @mixin boxShdwLarge($sVal: 0.7) { @include box-shadow(rgba(black, $sVal) 0 3px 10px); } @mixin outerGlow($color: #fff, $sVal: 0.3) { @include box-shadow(rgba($color, $sVal) 0 0 30px); } @mixin txtShdwSubtle($sVal: 0.1) { @include text-shadow(rgba(black, $sVal) 0 1px 2px); } @mixin txtShdwLarge($sVal: 0.7) { @include text-shadow(rgba(black, $sVal) 0 3px 7px); } @mixin invokeMenu($baseColor) { $c: $baseColor; color: $c; &:hover { color: lighten($c, $ltGamma); } } @mixin menuUlReset() { margin: 0; padding: 0; li { list-style-type: none; margin:0; padding: 0; } } @mixin vertical-align { /* This doesn't work on an element inside an element with absolute positioning that has height: auto */ position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } @mixin wait-spinner($b: 5px, $c: $colorAlt1) { display: block; position: absolute; -webkit-animation: rotation .6s infinite linear; -moz-animation: rotation .6s infinite linear; -o-animation: rotation .6s infinite linear; animation: rotation .6s infinite linear; border-color: rgba($c, 0.25); border-top-color: rgba($c, 1.0); border-style: solid; border-width: $b; border-radius: 100%; } @mixin test($c: #ffcc00, $a: 0.2) { background-color: rgba($c, $a); }