1
+ @use ' sass:color' ;
2
+
1
3
// normal
2
4
$btn-color : $grey-dark-font !default ;
3
5
$btn-font-size : 14px !default ;
@@ -47,13 +49,13 @@ $btn-primary-hover-color: $brand-primary-font !default;
47
49
$btn-primary-focus-color : $brand-primary-font !default ;
48
50
$btn-primary-active-color : $brand-primary-font !default ;
49
51
$btn-primary-bgcolor : $brand-primary !default ;
50
- $btn-primary-hover-bgcolor : darken ($brand-primary , 6% ) !default ;
51
- $btn-primary-active-bgcolor : darken ($brand-primary , 10% ) !default ;
52
- $btn-primary-border-color : lighten ($brand-primary , 10% ) !default ;
52
+ $btn-primary-hover-bgcolor : color . adjust ($brand-primary , $lightness : - 6% ) !default ;
53
+ $btn-primary-active-bgcolor : color . adjust ($brand-primary , $lightness : - 10% ) !default ;
54
+ $btn-primary-border-color : color . adjust ($brand-primary , $lightness : 10% ) !default ;
53
55
$btn-primary-hover-border-color : $brand-primary !default ;
54
- $btn-primary-focus-border-color : darken ($brand-primary , 10% ) !default ;
55
- $btn-primary-active-border-color : darken ($brand-primary , 10% ) !default ;
56
- $btn-primary-focus-bgcolor : darken ($brand-primary , 10% ) !default ;
56
+ $btn-primary-focus-border-color : color . adjust ($brand-primary , $lightness : - 10% ) !default ;
57
+ $btn-primary-active-border-color : color . adjust ($brand-primary , $lightness : - 10% ) !default ;
58
+ $btn-primary-focus-bgcolor : color . adjust ($brand-primary , $lightness : - 10% ) !default ;
57
59
$btn-primary-disabled-bgcolor : rgba ($brand-primary , .4 ) !default ;
58
60
$btn-primary-disabled-color : rgba ($brand-primary-font , .4 ) !default ;
59
61
$btn-primary-disabled-border-color : rgba ($brand-primary , .4 ) !default ;
@@ -76,7 +78,7 @@ $btn-outline-active-box-shadow: $btn-active-box-shadow !default;
76
78
$btn-outline-disabled-bgcolor : $btn-disabled-bgcolor !default ;
77
79
$btn-outline-disabled-border-color : $btn-disabled-border-color !default ;
78
80
$btn-outline-disabled-color : $btn-disabled-color !default ;
79
- $btn-outline-primary-color : lighten ($brand-primary , 15% ) !default ;
81
+ $btn-outline-primary-color : color . adjust ($brand-primary , $lightness : 15% ) !default ;
80
82
$btn-outline-primary-focus-bgcolor : $btn-primary-focus-bgcolor !default ;
81
83
$btn-outline-primary-focus-color : $btn-primary-focus-color !default ;
82
84
@@ -109,13 +111,13 @@ $btn-ripple-flat-danger-bgcolor: transparent !default;
109
111
// success
110
112
$btn-success-color : #fff !default ;
111
113
$btn-success-bgcolor : $brand-success-dark !default ;
112
- $btn-success-hover-bgcolor : darken ($btn-success-bgcolor , 5% ) !default ;
113
- $btn-success-focus-bgcolor : darken ($btn-success-bgcolor , 10% ) !default ;
114
- $btn-success-active-bgcolor : darken ($btn-success-bgcolor , 15% ) !default ;
115
- $btn-success-border-color : darken ($btn-success-bgcolor , 10% ) !default ;
116
- $btn-success-hover-border-color : darken ($btn-success-bgcolor , 0% ) !default ;
117
- $btn-success-focus-border-color : darken ($btn-success-bgcolor , 10% ) !default ;
118
- $btn-success-active-border-color : darken ($btn-success-bgcolor , 10% ) !default ;
114
+ $btn-success-hover-bgcolor : color . adjust ($btn-success-bgcolor , $lightness : - 5% ) !default ;
115
+ $btn-success-focus-bgcolor : color . adjust ($btn-success-bgcolor , $lightness : - 10% ) !default ;
116
+ $btn-success-active-bgcolor : color . adjust ($btn-success-bgcolor , $lightness : - 15% ) !default ;
117
+ $btn-success-border-color : color . adjust ($btn-success-bgcolor , $lightness : - 10% ) !default ;
118
+ $btn-success-hover-border-color : color . adjust ($btn-success-bgcolor , $lightness : - 0% ) !default ;
119
+ $btn-success-focus-border-color : color . adjust ($btn-success-bgcolor , $lightness : - 10% ) !default ;
120
+ $btn-success-active-border-color : color . adjust ($btn-success-bgcolor , $lightness : - 10% ) !default ;
119
121
$btn-success-disabled-bgcolor : rgba ($brand-success , .4 ) !default ;
120
122
$btn-success-disabled-color : rgba ($grey-dark-font , .4 ) !default ;
121
123
$btn-success-disabled-border-color : $btn-disabled-border-color !default ;
@@ -128,15 +130,15 @@ $btn-success-active-color: $btn-success-color !default;
128
130
$btn-warning-bgcolor : $brand-warning-dark !default ;
129
131
$btn-warning-color : $base-font !default ;
130
132
$btn-warning-hover-color : $base-font !default ;
131
- $btn-warning-hover-bgcolor : darken ($btn-warning-bgcolor , 15% ) !default ;
132
- $btn-warning-focus-bgcolor : darken ($btn-warning-bgcolor , 10% ) !default ;
133
- $btn-warning-active-bgcolor : darken ($btn-warning-bgcolor , 15% ) !default ;
134
- $btn-warning-border-color : darken ($btn-warning-bgcolor , 10% ) !default ;
135
- $btn-warning-hover-border-color : darken ($btn-warning-bgcolor , 25% ) !default ;
136
- $btn-warning-focus-border-color : darken ($btn-warning-bgcolor , 35% ) !default ;
133
+ $btn-warning-hover-bgcolor : color . adjust ($btn-warning-bgcolor , $lightness : - 15% ) !default ;
134
+ $btn-warning-focus-bgcolor : color . adjust ($btn-warning-bgcolor , $lightness : - 10% ) !default ;
135
+ $btn-warning-active-bgcolor : color . adjust ($btn-warning-bgcolor , $lightness : - 15% ) !default ;
136
+ $btn-warning-border-color : color . adjust ($btn-warning-bgcolor , $lightness : - 10% ) !default ;
137
+ $btn-warning-hover-border-color : color . adjust ($btn-warning-bgcolor , $lightness : - 25% ) !default ;
138
+ $btn-warning-focus-border-color : color . adjust ($btn-warning-bgcolor , $lightness : - 35% ) !default ;
137
139
$btn-warning-focus-color : $base-font !default ;
138
140
$btn-warning-active-color : $base-font !default ;
139
- $btn-warning-active-border-color : darken ($btn-warning-bgcolor , 25% ) !default ;
141
+ $btn-warning-active-border-color : color . adjust ($btn-warning-bgcolor , $lightness : - 25% ) !default ;
140
142
$btn-warning-disabled-bgcolor : rgba ($brand-warning , .4 ) !default ;
141
143
$btn-warning-disabled-color : rgba ($grey-dark-font , .4 ) !default ;
142
144
$btn-warning-disabled-border-color : $btn-disabled-border-color !default ;
@@ -145,14 +147,14 @@ $btn-ripple-warning-bgcolor: transparent !default;
145
147
// danger
146
148
$btn-danger-color : #fff !default ;
147
149
$btn-danger-bgcolor : $brand-danger-dark !default ;
148
- $btn-danger-hover-bgcolor : darken ($brand-danger-dark , 5% ) !default ;
149
- $btn-danger-focus-bgcolor : darken ($brand-danger-dark , 10% ) !default ;
150
- $btn-danger-active-bgcolor : darken ($brand-danger-dark , 15% ) !default ;
150
+ $btn-danger-hover-bgcolor : color . adjust ($brand-danger-dark , $lightness : - 5% ) !default ;
151
+ $btn-danger-focus-bgcolor : color . adjust ($brand-danger-dark , $lightness : - 10% ) !default ;
152
+ $btn-danger-active-bgcolor : color . adjust ($brand-danger-dark , $lightness : - 15% ) !default ;
151
153
$btn-danger-active-color : $btn-danger-color !default ;
152
- $btn-danger-border-color : darken ($btn-danger-bgcolor , 10% ) !default ;
154
+ $btn-danger-border-color : color . adjust ($btn-danger-bgcolor , $lightness : - 10% ) !default ;
153
155
$btn-danger-hover-border-color : $btn-danger-bgcolor !default ;
154
- $btn-danger-focus-border-color : darken ($btn-danger-bgcolor , 10% ) !default ;
155
- $btn-danger-active-border-color : darken ($btn-danger-bgcolor , 10% ) !default ;
156
+ $btn-danger-focus-border-color : color . adjust ($btn-danger-bgcolor , $lightness : - 10% ) !default ;
157
+ $btn-danger-active-border-color : color . adjust ($btn-danger-bgcolor , $lightness : - 10% ) !default ;
156
158
$btn-danger-disabled-bgcolor : rgba ($brand-danger , .4 ) !default ;
157
159
$btn-danger-disabled-color : rgba ($grey-dark-font , .4 ) !default ;
158
160
$btn-danger-disabled-border-color : $btn-disabled-border-color !default ;
@@ -162,13 +164,13 @@ $btn-ripple-danger-bgcolor: transparent !default;
162
164
// info
163
165
$btn-info-bgcolor : $brand-info-dark !default ;
164
166
$btn-info-color : $grey-light-font !default ;
165
- $btn-info-hover-bgcolor : darken ($brand-info-dark , 5% ) !default ;
166
- $btn-info-focus-bgcolor : darken ($btn-info-bgcolor , 10% ) !default ;
167
- $btn-info-active-bgcolor : darken ($btn-info-bgcolor , 15% ) !default ;
167
+ $btn-info-hover-bgcolor : color . adjust ($brand-info-dark , $lightness : - 5% ) !default ;
168
+ $btn-info-focus-bgcolor : color . adjust ($btn-info-bgcolor , $lightness : - 10% ) !default ;
169
+ $btn-info-active-bgcolor : color . adjust ($btn-info-bgcolor , $lightness : - 15% ) !default ;
168
170
$btn-info-border-color : $brand-info !default ;
169
171
$btn-info-hover-border-color : $brand-info-dark !default ;
170
- $btn-info-focus-border-color : darken ($brand-info-dark , 10% ) !default ;
171
- $btn-info-active-border-color : darken ($brand-info-dark , 10% ) !default ;
172
+ $btn-info-focus-border-color : color . adjust ($brand-info-dark , $lightness : - 10% ) !default ;
173
+ $btn-info-active-border-color : color . adjust ($brand-info-dark , $lightness : - 10% ) !default ;
172
174
$btn-info-disabled-bgcolor : rgba ($brand-info , .4 ) !default ;
173
175
$btn-info-disabled-color : rgba ($grey-dark-font , .4 ) !default ;
174
176
$btn-info-disabled-border-color : $btn-disabled-border-color !default ;
@@ -271,8 +273,8 @@ $btn-flat-danger-disabled-color: rgba($btn-flat-danger-color, .4) !default;
271
273
$btn-outline-primary-disabled-color : rgba ($btn-outline-color , .4 ) !default ;
272
274
$btn-outline-primary-disabled-border-color : rgba ($btn-outline-border-color , .4 ) !default ;
273
275
$btn-outline-primary-hover-border-color : $brand-primary !default ;
274
- $btn-outline-primary-focus-border-color : darken ($brand-primary , 10% ) !default ;
275
- $btn-outline-primary-active-border-color : darken ($brand-primary , 10% ) !default ;
276
+ $btn-outline-primary-focus-border-color : color . adjust ($brand-primary , $lightness : - 10% ) !default ;
277
+ $btn-outline-primary-active-border-color : color . adjust ($brand-primary , $lightness : - 10% ) !default ;
276
278
277
279
// outlinesuccess
278
280
$btn-outline-success-disabled-color : rgba ($btn-success-bgcolor , .4 ) !default ;
0 commit comments