/** * @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 -.08em 0; } @else { text-shadow: rgba(255,255,255,.25) 0 .08em 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 -.06em 0); } @else { @include st-box-shadow(rgba(#fff, .35) 0 .06em 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} $percent 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); }}