/** * @class Global_CSS */ /** * Adds a small text shadow (or highlight) to give the impression of beveled text. * * @param {string} $type Either shadow or highlight, decides whether to apply a light shadow or dark. */ @mixin bevel-text($type: 'shadow') { @if $enable-highlights { @if $type == shadow { text-shadow: rgba(0,0,0,.5) 0 -1px 0; } @else { text-shadow: rgba(255,255,255,.25) 0 1px 0; } } } /** * Adds a small box shadow (or highlight) to give the impression of being beveled. * * @param {string} $type Either shadow or highlight, decides whether to apply a light shadow or dark. */ @mixin bevel-box($type: 'light') { @if $enable-highlights { @if $type == shadow { @include st-box-shadow(rgba(#000, .5) 0 -1px 0); } @else { @include st-box-shadow(rgba(#fff, .35) 0 1px 0); } } } /** * Bevels the text based on its background. * * @param {color} $bg-color Background color of element. * * See {@link #bevel-text}. */ @mixin bevel-by-background($bg-color) { @if (lightness($bg-color) > 50) { @include bevel-text(light); } @else { @include bevel-text; } } /** * Creates a background gradient for masked elements, based on the lightness of their background. * * @param {color} $bg-color Background color of element. * @param {percent} $contrast Contrast of the new gradient to its background. * @param {percent} $style Gradient style of the gradient. * * See background-gradient mixin. */ @mixin mask-by-background( $bg-color, $contrast: 100%, $style: $base-background-gradient ) { @if (lightness($bg-color) > 50) { @include background-gradient(darken($bg-color, $contrast), $style); } @else { @include background-gradient(lighten($bg-color, $contrast), $style); } }