//------------------------------------------------------------------------------ // Bootstrap Mixins and Functions Extensions // Those will affect the way bootstrap is generated wherever bootstrap is used //------------------------------------------------------------------------------ // Override color-yiq function to handle the alpha component of colors and // automatic threshold @function color-yiq($color, $background: $body-bg, $cross-mix: true) { $threshold: if($yiq-contrasted-threshold != false, $yiq-contrasted-threshold / 255 * 100%, false); @return o-get-most-contrast($color, $yiq-text-light, $yiq-text-dark, $background, $threshold, $cross-mix); } @mixin o-bg-color($color, $text-color: null, $with-muted: true) { @if ($color) { $-yiq-color: if($text-color, $text-color, color-yiq($color)); background-color: $color !important; color: $-yiq-color; // not important so that text utilities still work @if ($with-muted) { .text-muted { color: rgba($-yiq-color, 0.4) !important; } } @include o-bg-color-extension($color, $text-color, $with-muted); } } // Override background utilities so that they come with a default contrasted // color (especially useful in the frontend editor for example). Also modifies // the way .text-muted elements are rendered in those environments. @mixin bg-variant($parent, $color, $text-color: null) { #{$parent} { @include o-bg-color($color, $text-color); } a#{$parent}, button#{$parent} { @include hover-focus { @include o-bg-color(darken($color, 10%), $text-color, false); } } } @mixin bg-gradient-variant($parent, $color, $text-color: null) { #{$parent} { @include o-bg-color($color, $text-color); background-image: linear-gradient(180deg, mix($body-bg, $color, 15%), $color) !important; background-repeat: repeat-x !important; } }