viniBaxter-desk_front 30.0.1 → 31.0.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/lib/viniBaxter/desk_front/version.rb +2 -2
- data/lib/viniBaxter/sass/desk_front/beckyBaxter/mixins/_buttons.scss +358 -300
- data/lib/viniBaxter/sass/desk_front/bootstrap/_buttons.scss +34 -8
- data/lib/viniBaxter/sass/desk_front/bootstrap/_grid.scss +14 -0
- data/lib/viniBaxter/sass/desk_front/bootstrap/_list-group.scss +8 -7
- data/lib/viniBaxter/sass/desk_front/bootstrap/_modal.scss +7 -15
- data/lib/viniBaxter/sass/desk_front/bootstrap/_reboot.scss +2 -1
- data/lib/viniBaxter/sass/desk_front/bootstrap/bootstrap.scss +1 -2
- metadata +1 -1
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: f391a8a21c93d67ad74b2fd8e3d50aeeb02f8560bd9f083a66545f9f3ffca4ca
|
4
|
+
data.tar.gz: 43487ca1ed8a29c7bf7664b15f8ef718c76008947ada66239e0ec18c3c1e56b4
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 7e46dcbecb936c08fde34fd3acaf6c91b6534814af4324b96feedcab3059797b1e82c66c9091a6105e84d2c3922386f68d81a7671584d9a14c8042cb8406d842
|
7
|
+
data.tar.gz: e1f21a33ffd3f3779c3fec0401c2092327507b865b9278e2ed6638c54cd646d36dd16634249742ec2edbc70c16e88c6ab6057ab8aefeea76f6056481afbe2a4b
|
@@ -1,357 +1,415 @@
|
|
1
1
|
@mixin btn-styles($btn-color, $btn-states-color) {
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
box-shadow: none;
|
6
|
-
|
7
|
-
&.animation-on-hover:hover {
|
8
|
-
background-position: bottom left;
|
9
|
-
transition: 0.3s ease-in-out;
|
10
|
-
}
|
11
|
-
|
12
|
-
&:hover,
|
13
|
-
&:focus,
|
14
|
-
&:active,
|
15
|
-
&.active,
|
16
|
-
&:active:focus,
|
17
|
-
&:active:hover,
|
18
|
-
&.active:focus,
|
19
|
-
&.active:hover {
|
20
|
-
background-color: $btn-states-color !important;
|
21
|
-
background-image: linear-gradient(to bottom left, $btn-color, $btn-states-color, $btn-color) !important;
|
22
|
-
background-image: -webkit-linear-gradient(to bottom left, $btn-color, $btn-states-color, $btn-color) !important;
|
23
|
-
background-image: -o-linear-gradient(to bottom left, $btn-color, $btn-states-color, $btn-color) !important;
|
24
|
-
background-image: -moz-linear-gradient(to bottom left, $btn-color, $btn-states-color, $btn-color) !important;
|
25
|
-
color: $white;
|
2
|
+
@include diagonal-gradient($btn-color, $btn-states-color);
|
3
|
+
background-color: $btn-color;
|
4
|
+
transition: all 0.15s ease;
|
26
5
|
box-shadow: none;
|
27
|
-
}
|
28
|
-
|
29
|
-
&:active {
|
30
|
-
box-shadow: none !important;
|
31
|
-
transform: translateY(1px) !important;
|
32
|
-
transition: all .15s ease;
|
33
|
-
}
|
34
|
-
|
35
|
-
&:not([data-action]):hover {
|
36
6
|
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
&.disabled,
|
43
|
-
&:disabled,
|
44
|
-
&[disabled],
|
45
|
-
fieldset[disabled] & {
|
7
|
+
&.animation-on-hover:hover {
|
8
|
+
background-position: bottom left;
|
9
|
+
transition: 0.3s ease-in-out;
|
10
|
+
}
|
46
11
|
|
47
|
-
&,
|
48
12
|
&:hover,
|
49
13
|
&:focus,
|
50
|
-
&.focus,
|
51
14
|
&:active,
|
52
|
-
&.active {
|
53
|
-
background-color: $btn-color;
|
54
|
-
border-color: $btn-color;
|
55
|
-
}
|
56
|
-
}
|
57
|
-
|
58
|
-
// btn-neutral style
|
59
|
-
@if $btn-color==$white {
|
60
|
-
color: $primary;
|
61
|
-
|
62
|
-
&.btn-danger {
|
63
|
-
color: $danger;
|
64
|
-
|
65
|
-
&:hover,
|
66
|
-
&:focus,
|
67
|
-
&:active,
|
68
|
-
&:active:focus {
|
69
|
-
color: $danger-states;
|
70
|
-
}
|
71
|
-
}
|
72
|
-
|
73
|
-
&.btn-info {
|
74
|
-
color: $info;
|
75
|
-
|
76
|
-
&:hover,
|
77
|
-
&:focus,
|
78
|
-
&:active,
|
79
|
-
&:active:focus {
|
80
|
-
color: $info-states;
|
81
|
-
}
|
82
|
-
}
|
83
|
-
|
84
|
-
&.btn-warning {
|
85
|
-
color: $warning;
|
86
|
-
|
87
|
-
&:hover,
|
88
|
-
&:focus,
|
89
|
-
&:active,
|
90
|
-
&:active:focus {
|
91
|
-
color: $warning-states;
|
92
|
-
}
|
93
|
-
}
|
94
|
-
|
95
|
-
&.btn-success {
|
96
|
-
color: $success;
|
97
|
-
|
98
|
-
&:hover,
|
99
|
-
&:focus,
|
100
|
-
&:active,
|
101
|
-
&:active:focus {
|
102
|
-
color: $success-states;
|
103
|
-
}
|
104
|
-
}
|
105
|
-
|
106
|
-
&.btn-default {
|
107
|
-
color: $default;
|
108
|
-
|
109
|
-
&:hover,
|
110
|
-
&:focus,
|
111
|
-
&:active,
|
112
|
-
&:active:focus {
|
113
|
-
color: $default-states;
|
114
|
-
}
|
115
|
-
}
|
116
|
-
|
117
15
|
&.active,
|
118
|
-
&:active,
|
119
16
|
&:active:focus,
|
120
17
|
&:active:hover,
|
121
18
|
&.active:focus,
|
122
|
-
&.active:hover
|
123
|
-
.show>&.dropdown-toggle,
|
124
|
-
.show>&.dropdown-toggle:focus,
|
125
|
-
.show>&.dropdown-toggle:hover {
|
126
|
-
background-color: $white;
|
127
|
-
color: $primary-states;
|
128
|
-
box-shadow: none;
|
129
|
-
}
|
130
|
-
|
131
|
-
&:hover,
|
132
|
-
&:focus {
|
133
|
-
color: $primary-states;
|
134
|
-
|
135
|
-
&:not(.nav-link) {
|
136
|
-
box-shadow: none;
|
137
|
-
}
|
138
|
-
|
139
|
-
}
|
140
|
-
|
141
|
-
}
|
142
|
-
|
143
|
-
@else {
|
144
|
-
color: $white;
|
145
|
-
}
|
146
|
-
|
147
|
-
&.btn-simple {
|
148
|
-
color: $btn-color;
|
149
|
-
border-color: $btn-color;
|
150
|
-
background: $transparent-bg;
|
151
|
-
|
152
|
-
&:hover,
|
153
|
-
&:focus,
|
154
|
-
&:active,
|
155
|
-
&:not(:disabled):not(.disabled):active {
|
156
|
-
color: $btn-color;
|
157
|
-
border-color: $btn-color;
|
158
|
-
background-color: $transparent-bg !important;
|
159
|
-
background-image: none !important;
|
160
|
-
box-shadow: none;
|
161
|
-
}
|
162
|
-
|
163
|
-
&.active {
|
164
|
-
border-color: $btn-color !important;
|
165
|
-
|
166
|
-
&:hover,
|
167
|
-
&:focus,
|
168
|
-
&:active,
|
169
|
-
&:not(:disabled):not(.disabled):active {
|
170
|
-
color: $white;
|
171
|
-
border-color: $btn-color;
|
172
|
-
background-image: linear-gradient(to bottom left, $btn-color, $btn-states-color, $btn-color) !important;
|
173
|
-
background-image: -webkit-linear-gradient(to bottom left, $btn-color, $btn-states-color, $btn-color) !important;
|
174
|
-
background-image: -o-linear-gradient(to bottom left, $btn-color, $btn-states-color, $btn-color) !important;
|
175
|
-
background-image: -moz-linear-gradient(to bottom left, $btn-color, $btn-states-color, $btn-color) !important;
|
19
|
+
&.active:hover {
|
176
20
|
background-color: $btn-states-color !important;
|
21
|
+
background-image: linear-gradient(
|
22
|
+
to bottom left,
|
23
|
+
$btn-color,
|
24
|
+
$btn-states-color,
|
25
|
+
$btn-color
|
26
|
+
) !important;
|
27
|
+
background-image: -webkit-linear-gradient(
|
28
|
+
to bottom left,
|
29
|
+
$btn-color,
|
30
|
+
$btn-states-color,
|
31
|
+
$btn-color
|
32
|
+
) !important;
|
33
|
+
background-image: -o-linear-gradient(
|
34
|
+
to bottom left,
|
35
|
+
$btn-color,
|
36
|
+
$btn-states-color,
|
37
|
+
$btn-color
|
38
|
+
) !important;
|
39
|
+
background-image: -moz-linear-gradient(
|
40
|
+
to bottom left,
|
41
|
+
$btn-color,
|
42
|
+
$btn-states-color,
|
43
|
+
$btn-color
|
44
|
+
) !important;
|
45
|
+
color: $white;
|
177
46
|
box-shadow: none;
|
178
|
-
}
|
179
47
|
}
|
180
|
-
}
|
181
48
|
|
182
|
-
&.btn-link {
|
183
|
-
color: $btn-color;
|
184
|
-
|
185
|
-
&:hover,
|
186
|
-
&:focus,
|
187
49
|
&:active {
|
188
|
-
|
189
|
-
|
190
|
-
|
191
|
-
text-decoration: none;
|
192
|
-
box-shadow: none;
|
50
|
+
box-shadow: none !important;
|
51
|
+
transform: translateY(1px) !important;
|
52
|
+
transition: all 0.15s ease;
|
193
53
|
}
|
194
|
-
}
|
195
|
-
}
|
196
54
|
|
197
|
-
|
198
|
-
|
199
|
-
|
200
|
-
|
201
|
-
|
55
|
+
&:not([data-action]):hover {
|
56
|
+
box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4);
|
57
|
+
transform: translateY(-1px);
|
58
|
+
-webkit-transform: translateY(-1px);
|
59
|
+
}
|
202
60
|
|
203
|
-
|
204
|
-
|
205
|
-
|
206
|
-
|
207
|
-
|
61
|
+
&.disabled,
|
62
|
+
&:disabled,
|
63
|
+
&[disabled],
|
64
|
+
fieldset[disabled] & {
|
65
|
+
&,
|
66
|
+
&:hover,
|
67
|
+
&:focus,
|
68
|
+
&.focus,
|
69
|
+
&:active,
|
70
|
+
&.active {
|
71
|
+
background-color: $btn-color;
|
72
|
+
border-color: $btn-color;
|
73
|
+
}
|
74
|
+
}
|
208
75
|
|
209
|
-
|
210
|
-
|
76
|
+
// btn-neutral style
|
77
|
+
@if $btn-color==$white {
|
78
|
+
color: $primary;
|
79
|
+
|
80
|
+
&.btn-danger {
|
81
|
+
color: $danger;
|
82
|
+
|
83
|
+
&:hover,
|
84
|
+
&:focus,
|
85
|
+
&:active,
|
86
|
+
&:active:focus {
|
87
|
+
color: $danger-states;
|
88
|
+
}
|
89
|
+
}
|
90
|
+
|
91
|
+
&.btn-info {
|
92
|
+
color: $info;
|
93
|
+
|
94
|
+
&:hover,
|
95
|
+
&:focus,
|
96
|
+
&:active,
|
97
|
+
&:active:focus {
|
98
|
+
color: $info-states;
|
99
|
+
}
|
100
|
+
}
|
101
|
+
|
102
|
+
&.btn-warning {
|
103
|
+
color: $warning;
|
104
|
+
|
105
|
+
&:hover,
|
106
|
+
&:focus,
|
107
|
+
&:active,
|
108
|
+
&:active:focus {
|
109
|
+
color: $warning-states;
|
110
|
+
}
|
111
|
+
}
|
112
|
+
|
113
|
+
&.btn-success {
|
114
|
+
color: $success;
|
115
|
+
|
116
|
+
&:hover,
|
117
|
+
&:focus,
|
118
|
+
&:active,
|
119
|
+
&:active:focus {
|
120
|
+
color: $success-states;
|
121
|
+
}
|
122
|
+
}
|
123
|
+
|
124
|
+
&.btn-default {
|
125
|
+
color: $default;
|
126
|
+
|
127
|
+
&:hover,
|
128
|
+
&:focus,
|
129
|
+
&:active,
|
130
|
+
&:active:focus {
|
131
|
+
color: $default-states;
|
132
|
+
}
|
133
|
+
}
|
134
|
+
|
135
|
+
&.active,
|
136
|
+
&:active,
|
137
|
+
&:active:focus,
|
138
|
+
&:active:hover,
|
139
|
+
&.active:focus,
|
140
|
+
&.active:hover,
|
141
|
+
.show > &.dropdown-toggle,
|
142
|
+
.show > &.dropdown-toggle:focus,
|
143
|
+
.show > &.dropdown-toggle:hover {
|
144
|
+
background-color: $white;
|
145
|
+
color: $primary-states;
|
146
|
+
box-shadow: none;
|
147
|
+
}
|
148
|
+
|
149
|
+
&:hover,
|
150
|
+
&:focus {
|
151
|
+
color: $primary-states;
|
152
|
+
|
153
|
+
&:not(.nav-link) {
|
154
|
+
box-shadow: none;
|
155
|
+
}
|
156
|
+
}
|
157
|
+
} @else {
|
158
|
+
color: $white;
|
159
|
+
}
|
211
160
|
|
212
|
-
|
213
|
-
|
214
|
-
|
161
|
+
&.btn-simple {
|
162
|
+
color: $btn-color;
|
163
|
+
border-color: $btn-color;
|
164
|
+
background: $transparent-bg;
|
165
|
+
|
166
|
+
&:hover,
|
167
|
+
&:focus,
|
168
|
+
&:active,
|
169
|
+
&:not(:disabled):not(.disabled):active {
|
170
|
+
color: $btn-color;
|
171
|
+
border-color: $btn-color;
|
172
|
+
background-color: $transparent-bg !important;
|
173
|
+
background-image: none !important;
|
174
|
+
box-shadow: none;
|
175
|
+
}
|
176
|
+
|
177
|
+
&.active {
|
178
|
+
border-color: $btn-color !important;
|
179
|
+
|
180
|
+
&:hover,
|
181
|
+
&:focus,
|
182
|
+
&:active,
|
183
|
+
&:not(:disabled):not(.disabled):active {
|
184
|
+
color: $white;
|
185
|
+
border-color: $btn-color;
|
186
|
+
background-image: linear-gradient(
|
187
|
+
to bottom left,
|
188
|
+
$btn-color,
|
189
|
+
$btn-states-color,
|
190
|
+
$btn-color
|
191
|
+
) !important;
|
192
|
+
background-image: -webkit-linear-gradient(
|
193
|
+
to bottom left,
|
194
|
+
$btn-color,
|
195
|
+
$btn-states-color,
|
196
|
+
$btn-color
|
197
|
+
) !important;
|
198
|
+
background-image: -o-linear-gradient(
|
199
|
+
to bottom left,
|
200
|
+
$btn-color,
|
201
|
+
$btn-states-color,
|
202
|
+
$btn-color
|
203
|
+
) !important;
|
204
|
+
background-image: -moz-linear-gradient(
|
205
|
+
to bottom left,
|
206
|
+
$btn-color,
|
207
|
+
$btn-states-color,
|
208
|
+
$btn-color
|
209
|
+
) !important;
|
210
|
+
background-color: $btn-states-color !important;
|
211
|
+
box-shadow: none;
|
212
|
+
}
|
213
|
+
}
|
215
214
|
}
|
216
215
|
|
217
|
-
|
218
|
-
|
216
|
+
&.btn-link {
|
217
|
+
color: $btn-color;
|
218
|
+
|
219
|
+
&:hover,
|
220
|
+
&:focus,
|
221
|
+
&:active {
|
222
|
+
background-color: $transparent-bg !important;
|
223
|
+
background-image: none !important;
|
224
|
+
color: $white !important;
|
225
|
+
text-decoration: none;
|
226
|
+
box-shadow: none;
|
227
|
+
}
|
219
228
|
}
|
220
|
-
|
229
|
+
}
|
221
230
|
|
222
|
-
|
223
|
-
|
224
|
-
|
231
|
+
@mixin button-variant(
|
232
|
+
$background,
|
233
|
+
$border,
|
234
|
+
$hover-background: darken($background, 0%),
|
235
|
+
$hover-border: darken($border, 0%),
|
236
|
+
$active-background: darken($background, 10%),
|
237
|
+
$active-border: darken($border, 0%)
|
238
|
+
) {
|
225
239
|
color: color-yiq($background);
|
226
|
-
|
240
|
+
@include gradient-bg($background);
|
227
241
|
border-color: $border;
|
228
|
-
|
242
|
+
@include box-shadow($btn-box-shadow);
|
229
243
|
|
230
|
-
|
231
|
-
|
232
|
-
|
233
|
-
|
234
|
-
background-color: $active-background;
|
235
|
-
|
236
|
-
@if $enable-gradients {
|
237
|
-
background-image: none; // Remove the gradient for the pressed/active state
|
244
|
+
@include hover {
|
245
|
+
color: color-yiq($hover-background);
|
246
|
+
@include gradient-bg($hover-background);
|
247
|
+
border-color: $hover-border;
|
238
248
|
}
|
239
249
|
|
240
|
-
|
241
|
-
|
242
|
-
|
250
|
+
&:focus,
|
251
|
+
&.focus {
|
252
|
+
// Avoid using mixin so we can pass custom focus shadow properly
|
253
|
+
@if $enable-shadows {
|
254
|
+
box-shadow: $btn-box-shadow, 0 0 0 $btn-focus-width rgba($border, 0.5);
|
255
|
+
} @else {
|
256
|
+
box-shadow: 0 0 0 $btn-focus-width rgba($border, 0.5);
|
257
|
+
}
|
258
|
+
}
|
243
259
|
|
244
|
-
|
245
|
-
|
246
|
-
|
247
|
-
|
260
|
+
// Disabled comes first so active can properly restyle
|
261
|
+
&.disabled,
|
262
|
+
&:disabled {
|
263
|
+
color: color-yiq($background);
|
264
|
+
background-color: $background;
|
265
|
+
border-color: $border;
|
266
|
+
}
|
248
267
|
|
249
|
-
|
250
|
-
|
251
|
-
|
268
|
+
&:not(:disabled):not(.disabled):active,
|
269
|
+
&:not(:disabled):not(.disabled).active,
|
270
|
+
.show > &.dropdown-toggle {
|
271
|
+
color: color-yiq($active-background);
|
272
|
+
background-color: $active-background;
|
273
|
+
|
274
|
+
@if $enable-gradients {
|
275
|
+
background-image: none; // Remove the gradient for the pressed/active state
|
276
|
+
}
|
277
|
+
|
278
|
+
border-color: $active-border;
|
279
|
+
|
280
|
+
&:focus {
|
281
|
+
// Avoid using mixin so we can pass custom focus shadow properly
|
282
|
+
@if $enable-shadows {
|
283
|
+
box-shadow: $btn-active-box-shadow,
|
284
|
+
0 0 0 $btn-focus-width rgba($border, 0.5);
|
285
|
+
} @else {
|
286
|
+
box-shadow: 0 0 0 $btn-focus-width rgba($border, 0.5);
|
287
|
+
}
|
288
|
+
}
|
252
289
|
}
|
253
|
-
}
|
254
290
|
}
|
255
291
|
|
256
|
-
@mixin button-outline-variant(
|
257
|
-
|
258
|
-
|
259
|
-
|
260
|
-
|
261
|
-
|
262
|
-
&:hover {
|
263
|
-
color: $color-hover;
|
264
|
-
background-color: $active-background;
|
265
|
-
border-color: $active-border;
|
266
|
-
}
|
267
|
-
|
268
|
-
&:focus,
|
269
|
-
&.focus {
|
270
|
-
box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
|
271
|
-
}
|
272
|
-
|
273
|
-
&.disabled,
|
274
|
-
&:disabled {
|
292
|
+
@mixin button-outline-variant(
|
293
|
+
$color,
|
294
|
+
$color-hover: color-yiq($color),
|
295
|
+
$active-background: $color,
|
296
|
+
$active-border: $color
|
297
|
+
) {
|
275
298
|
color: $color;
|
276
299
|
background-color: transparent;
|
277
|
-
|
300
|
+
background-image: none;
|
301
|
+
border-color: $color;
|
278
302
|
|
279
|
-
|
280
|
-
|
281
|
-
|
282
|
-
|
283
|
-
|
284
|
-
border-color: $active-border;
|
303
|
+
&:hover {
|
304
|
+
color: $color-hover;
|
305
|
+
background-color: $active-background;
|
306
|
+
border-color: $active-border;
|
307
|
+
}
|
285
308
|
|
286
|
-
&:focus
|
309
|
+
&:focus,
|
310
|
+
&.focus {
|
311
|
+
box-shadow: 0 0 0 $btn-focus-width rgba($color, 0.5);
|
312
|
+
}
|
287
313
|
|
288
|
-
|
289
|
-
|
290
|
-
|
291
|
-
|
314
|
+
&.disabled,
|
315
|
+
&:disabled {
|
316
|
+
color: $color;
|
317
|
+
background-color: transparent;
|
318
|
+
}
|
292
319
|
|
293
|
-
|
294
|
-
|
295
|
-
|
320
|
+
&:not(:disabled):not(.disabled):active,
|
321
|
+
&:not(:disabled):not(.disabled).active,
|
322
|
+
.show > &.dropdown-toggle {
|
323
|
+
color: color-yiq($active-background);
|
324
|
+
background-color: $active-background;
|
325
|
+
border-color: $active-border;
|
326
|
+
|
327
|
+
&:focus {
|
328
|
+
// Avoid using mixin so we can pass custom focus shadow properly
|
329
|
+
@if $enable-shadows and $btn-active-box-shadow !=none {
|
330
|
+
box-shadow: $btn-active-box-shadow,
|
331
|
+
0 0 0 $btn-focus-width rgba($color, 0.5);
|
332
|
+
} @else {
|
333
|
+
box-shadow: 0 0 0 $btn-focus-width rgba($color, 0.5);
|
334
|
+
}
|
335
|
+
}
|
296
336
|
}
|
297
|
-
}
|
298
337
|
}
|
299
338
|
|
300
339
|
// Button sizes
|
301
340
|
@mixin btn-size($padding-vertical, $padding-horizontal, $font-size, $border) {
|
302
|
-
|
303
|
-
|
304
|
-
|
305
|
-
|
306
|
-
&.btn-simple {
|
307
|
-
padding: $padding-vertical - 1 $padding-horizontal - 1;
|
308
|
-
}
|
341
|
+
font-size: $font-size;
|
342
|
+
border-radius: $border;
|
343
|
+
padding: $padding-vertical $padding-horizontal;
|
309
344
|
|
345
|
+
&.btn-simple {
|
346
|
+
padding: $padding-vertical - 1 $padding-horizontal - 1;
|
347
|
+
}
|
310
348
|
}
|
311
349
|
|
312
350
|
// for social buttons
|
313
|
-
@mixin social-buttons-color
|
314
|
-
|
315
|
-
|
316
|
-
color: $white;
|
317
|
-
background-size: 210% 210%;
|
318
|
-
background-position: top right;
|
319
|
-
background-repeat: space;
|
320
|
-
|
321
|
-
&:focus,
|
322
|
-
&:active,
|
323
|
-
&:hover {
|
324
|
-
background-color: $state-color;
|
325
|
-
background-image: linear-gradient(to bottom left, $color, darken($color, 20%), $color) !important;
|
326
|
-
background-image: -webkit-linear-gradient(to bottom left, $color, darken($color, 20%), $color) !important;
|
327
|
-
background-image: -o-linear-gradient(to bottom left, $color, darken($color, 20%), $color) !important;
|
328
|
-
background-image: -moz-linear-gradient(to bottom left, $color, darken($color, 20%), $color) !important;
|
351
|
+
@mixin social-buttons-color($color, $state-color) {
|
352
|
+
@include diagonal-gradient($color, darken($color, 20%));
|
353
|
+
//background-color: $color;
|
329
354
|
color: $white;
|
330
|
-
|
331
|
-
|
332
|
-
|
333
|
-
color: $state-color;
|
334
|
-
background-color: $transparent-bg;
|
335
|
-
background-image: none !important;
|
336
|
-
box-shadow: none;
|
337
|
-
border-color: $state-color;
|
355
|
+
background-size: 210% 210%;
|
356
|
+
background-position: top right;
|
357
|
+
background-repeat: space;
|
338
358
|
|
339
|
-
&:hover,
|
340
359
|
&:focus,
|
341
|
-
&:active
|
342
|
-
|
343
|
-
|
360
|
+
&:active,
|
361
|
+
&:hover {
|
362
|
+
background-color: $state-color;
|
363
|
+
background-image: linear-gradient(
|
364
|
+
to bottom left,
|
365
|
+
$color,
|
366
|
+
darken($color, 20%),
|
367
|
+
$color
|
368
|
+
) !important;
|
369
|
+
background-image: -webkit-linear-gradient(
|
370
|
+
to bottom left,
|
371
|
+
$color,
|
372
|
+
darken($color, 20%),
|
373
|
+
$color
|
374
|
+
) !important;
|
375
|
+
background-image: -o-linear-gradient(
|
376
|
+
to bottom left,
|
377
|
+
$color,
|
378
|
+
darken($color, 20%),
|
379
|
+
$color
|
380
|
+
) !important;
|
381
|
+
background-image: -moz-linear-gradient(
|
382
|
+
to bottom left,
|
383
|
+
$color,
|
384
|
+
darken($color, 20%),
|
385
|
+
$color
|
386
|
+
) !important;
|
387
|
+
color: $white;
|
344
388
|
}
|
345
|
-
}
|
346
389
|
|
347
|
-
|
348
|
-
|
349
|
-
|
390
|
+
&.btn-simple {
|
391
|
+
color: $state-color;
|
392
|
+
background-color: $transparent-bg;
|
393
|
+
background-image: none !important;
|
394
|
+
box-shadow: none;
|
395
|
+
border-color: $state-color;
|
396
|
+
|
397
|
+
&:hover,
|
398
|
+
&:focus,
|
399
|
+
&:active {
|
400
|
+
color: $state-color;
|
401
|
+
border-color: $state-color;
|
402
|
+
}
|
403
|
+
}
|
350
404
|
|
351
|
-
|
352
|
-
|
353
|
-
|
354
|
-
|
405
|
+
&.btn-neutral {
|
406
|
+
color: $color;
|
407
|
+
background-color: $white;
|
408
|
+
|
409
|
+
&:hover,
|
410
|
+
&:focus,
|
411
|
+
&:active {
|
412
|
+
color: $state-color;
|
413
|
+
}
|
355
414
|
}
|
356
|
-
|
357
|
-
}
|
415
|
+
}
|
@@ -55,6 +55,10 @@
|
|
55
55
|
}
|
56
56
|
}
|
57
57
|
}
|
58
|
+
|
59
|
+
&.long {
|
60
|
+
padding: $btn-padding-y $btn-padding-x * 2;
|
61
|
+
}
|
58
62
|
}
|
59
63
|
|
60
64
|
// Future-proof disabling of clicks on `<a>` elements
|
@@ -73,6 +77,13 @@ fieldset:disabled a.btn {
|
|
73
77
|
}
|
74
78
|
}
|
75
79
|
|
80
|
+
@each $color, $value in $theme-colors {
|
81
|
+
.btn-rounded-#{$color} {
|
82
|
+
border-radius: 30px !important;
|
83
|
+
border: 1px solid $value !important;
|
84
|
+
}
|
85
|
+
}
|
86
|
+
|
76
87
|
@each $color, $value in $theme-colors {
|
77
88
|
.btn-outline-#{$color} {
|
78
89
|
@include button-outline-variant($value);
|
@@ -80,16 +91,31 @@ fieldset:disabled a.btn {
|
|
80
91
|
}
|
81
92
|
|
82
93
|
// Gradient
|
94
|
+
@mixin local_mixin_for_gradient_active($color) {
|
95
|
+
@include set-gradient-button($color);
|
96
|
+
color: $light;
|
97
|
+
// background-size: 300% 100%;
|
98
|
+
transition: all 0.4s ease-in-out;
|
99
|
+
border: 0px solid transparent !important;
|
100
|
+
&:hover {
|
101
|
+
background-position: 100% 0;
|
102
|
+
transition: all 0.4s ease-in-out;
|
103
|
+
color: $light;
|
104
|
+
}
|
105
|
+
}
|
106
|
+
|
83
107
|
@each $color, $value in $theme-gradient-colors {
|
84
108
|
.btn-gradient-#{$color} {
|
85
|
-
@include
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
|
92
|
-
|
109
|
+
@include local_mixin_for_gradient_active($color);
|
110
|
+
&[aria-selected='true'] {
|
111
|
+
border: 1px solid #fff !important;
|
112
|
+
}
|
113
|
+
&[aria-selected='false'] {
|
114
|
+
// display: none !important;
|
115
|
+
// @include button-outline-variant($value);
|
116
|
+
background: #fff !important;
|
117
|
+
border: 1px solid #454545 !important;
|
118
|
+
color: #454545 !important;
|
93
119
|
}
|
94
120
|
}
|
95
121
|
}
|
@@ -19,6 +19,9 @@
|
|
19
19
|
@include media-breakpoint-up($breakpoint, $grid-breakpoints) {
|
20
20
|
%responsive-container-#{$breakpoint} {
|
21
21
|
max-width: $container-max-width;
|
22
|
+
&.container-nav-bar {
|
23
|
+
max-width: $container-max-width * 1.2;
|
24
|
+
}
|
22
25
|
}
|
23
26
|
|
24
27
|
// Extend each breakpoint which is smaller or equal to the current breakpoint
|
@@ -38,6 +41,17 @@
|
|
38
41
|
}
|
39
42
|
}
|
40
43
|
}
|
44
|
+
|
45
|
+
.container-full-xs {
|
46
|
+
@include media-breakpoint-down(md) {
|
47
|
+
max-width: 100vw !important;
|
48
|
+
padding: 0px !important;
|
49
|
+
}
|
50
|
+
}
|
51
|
+
|
52
|
+
.container-full-xl {
|
53
|
+
max-width: 1300px !important;
|
54
|
+
}
|
41
55
|
}
|
42
56
|
|
43
57
|
// Row
|
@@ -12,6 +12,7 @@
|
|
12
12
|
@include border-radius($list-group-border-radius);
|
13
13
|
}
|
14
14
|
|
15
|
+
|
15
16
|
// Interactive list items
|
16
17
|
//
|
17
18
|
// Use anchor or button elements instead of `li`s or `div`s to create interactive
|
@@ -36,6 +37,7 @@
|
|
36
37
|
}
|
37
38
|
}
|
38
39
|
|
40
|
+
|
39
41
|
// Individual list items
|
40
42
|
//
|
41
43
|
// Use on `li`s or `div`s within the `.list-group` parent.
|
@@ -46,8 +48,8 @@
|
|
46
48
|
padding: $list-group-item-padding-y $list-group-item-padding-x;
|
47
49
|
color: $list-group-color;
|
48
50
|
text-decoration: if($link-decoration == none, null, none);
|
49
|
-
|
50
|
-
border:
|
51
|
+
background-color: $list-group-bg;
|
52
|
+
border: $list-group-border-width solid $list-group-border-color;
|
51
53
|
|
52
54
|
&:first-child {
|
53
55
|
@include border-top-radius(inherit);
|
@@ -82,6 +84,7 @@
|
|
82
84
|
}
|
83
85
|
}
|
84
86
|
|
87
|
+
|
85
88
|
// Horizontal
|
86
89
|
//
|
87
90
|
// Change the layout of list group items from vertical (default) to horizontal.
|
@@ -122,6 +125,7 @@
|
|
122
125
|
}
|
123
126
|
}
|
124
127
|
|
128
|
+
|
125
129
|
// Flush list items
|
126
130
|
//
|
127
131
|
// Remove borders and border-radius to keep list group items edge-to-edge. Most
|
@@ -139,15 +143,12 @@
|
|
139
143
|
}
|
140
144
|
}
|
141
145
|
|
146
|
+
|
142
147
|
// Contextual variants
|
143
148
|
//
|
144
149
|
// Add modifier classes to change text and background color on individual items.
|
145
150
|
// Organizationally, this must come after the `:hover` states.
|
146
151
|
|
147
152
|
@each $color, $value in $theme-colors {
|
148
|
-
@include list-group-item-variant(
|
149
|
-
$color,
|
150
|
-
theme-color-level($color, -9),
|
151
|
-
theme-color-level($color, 6)
|
152
|
-
);
|
153
|
+
@include list-group-item-variant($color, theme-color-level($color, -9), theme-color-level($color, 6));
|
153
154
|
}
|
@@ -3,6 +3,7 @@
|
|
3
3
|
// .modal-dialog - positioning shell for the actual modal
|
4
4
|
// .modal-content - actual modal w/ bg and corners and stuff
|
5
5
|
|
6
|
+
|
6
7
|
.modal-open {
|
7
8
|
// Kill the scroll on the body
|
8
9
|
overflow: hidden;
|
@@ -83,7 +84,7 @@
|
|
83
84
|
display: block; // IE10
|
84
85
|
height: subtract(100vh, $modal-dialog-margin * 2);
|
85
86
|
height: min-content; // Reset height to 0 except on IE
|
86
|
-
content:
|
87
|
+
content: "";
|
87
88
|
}
|
88
89
|
|
89
90
|
// Ensure `.modal-body` shows scrollbar (IE10/11)
|
@@ -131,12 +132,8 @@
|
|
131
132
|
background-color: $modal-backdrop-bg;
|
132
133
|
|
133
134
|
// Fade for backdrop
|
134
|
-
&.fade {
|
135
|
-
|
136
|
-
}
|
137
|
-
&.show {
|
138
|
-
opacity: $modal-backdrop-opacity;
|
139
|
-
}
|
135
|
+
&.fade { opacity: 0; }
|
136
|
+
&.show { opacity: $modal-backdrop-opacity; }
|
140
137
|
}
|
141
138
|
|
142
139
|
// Modal header
|
@@ -152,8 +149,7 @@
|
|
152
149
|
.close {
|
153
150
|
padding: $modal-header-padding;
|
154
151
|
// auto on the left force icon to the right even when there is no .modal-title
|
155
|
-
margin: (-$modal-header-padding-y) (-$modal-header-padding-x)
|
156
|
-
(-$modal-header-padding-y) auto;
|
152
|
+
margin: (-$modal-header-padding-y) (-$modal-header-padding-x) (-$modal-header-padding-y) auto;
|
157
153
|
}
|
158
154
|
}
|
159
155
|
|
@@ -229,9 +225,7 @@
|
|
229
225
|
@include box-shadow($modal-content-box-shadow-sm-up);
|
230
226
|
}
|
231
227
|
|
232
|
-
.modal-sm {
|
233
|
-
max-width: $modal-sm;
|
234
|
-
}
|
228
|
+
.modal-sm { max-width: $modal-sm; }
|
235
229
|
}
|
236
230
|
|
237
231
|
@include media-breakpoint-up(lg) {
|
@@ -242,7 +236,5 @@
|
|
242
236
|
}
|
243
237
|
|
244
238
|
@include media-breakpoint-up(xl) {
|
245
|
-
.modal-xl {
|
246
|
-
max-width: $modal-xl;
|
247
|
-
}
|
239
|
+
.modal-xl { max-width: $modal-xl; }
|
248
240
|
}
|
@@ -5,7 +5,6 @@
|
|
5
5
|
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
6
6
|
*/
|
7
7
|
|
8
|
-
// @import 'functions';
|
9
8
|
@import 'mixins';
|
10
9
|
@import 'root';
|
11
10
|
@import 'reboot';
|
@@ -27,7 +26,7 @@
|
|
27
26
|
@import 'breadcrumb';
|
28
27
|
@import 'pagination';
|
29
28
|
@import 'badge';
|
30
|
-
@import 'jumbotron';
|
29
|
+
// @import 'jumbotron';
|
31
30
|
@import 'alert';
|
32
31
|
@import 'progress';
|
33
32
|
@import 'media';
|