1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
|
//------------------------------------------------------------------------------
// Bootstrap Mixins and Functions Extensions
// Those will affect the way bootstrap is generated wherever bootstrap is used
//------------------------------------------------------------------------------
// This variable must be defined here instead of bootstrap overridden files
// otherwise we will have deprecation messages for assets_common generation
$enable-deprecation-messages: false !default;
// Override color-yiq function to handle the alpha component of colors and
// automatic threshold
@function color-yiq($color, $dark: $yiq-text-dark, $light: $yiq-text-light, $background: $body-bg, $cross-mix: true) {
$threshold: if($yiq-contrasted-threshold != false, $yiq-contrasted-threshold / 255 * 100%, false);
@return o-get-most-contrast($color, $light, $dark, $background, $threshold, $cross-mix);
}
@function mute-color($color) {
@return scale-color($color, $alpha: -30%);
}
// This placeholder regroups the rules that will apply on all elements with a
// bg-* class (see o-bg-color, bg-variant). The optimized-css way would be to
// have a common class for them all.
%o-bg-color-component-color-reset {
h1, h2, h3, h4, h5, h6 {
color: inherit;
}
}
$o-yiq-min-opacity-threshold: 0.3 !default;
$o-color-extras-nesting-selector: '&' !default;
@mixin o-bg-color($color, $text-color: null, $with-extras: true, $important: true, $yiq-min-opacity-threshold: $o-yiq-min-opacity-threshold, $background: $body-bg, $nesting-selector: $o-color-extras-nesting-selector) {
@if ($color) {
$-yiq-threshold-met: alpha($color) > $yiq-min-opacity-threshold;
$-yiq-color: if($text-color, $text-color, if($-yiq-threshold-met, color-yiq($color, $background: $background), null));
background-color: $color#{if($important, ' !important', '')};
color: $-yiq-color; // not important so that text utilities still work
@if $with-extras and $-yiq-threshold-met {
#{$nesting-selector} {
@extend %o-bg-color-component-color-reset;
.text-muted {
// Always important since the basic BS rule is important
color: mute-color($-yiq-color) !important;
}
}
}
}
}
// 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;
}
}
|
