jekyll-theme-clean-blog 4.0.11 → 4.0.12

Sign up to get free protection for your applications and to get access to all the features.
Files changed (93) hide show
  1. checksums.yaml +4 -4
  2. data/assets/vendor/bootstrap/scss/_alert.scss +52 -0
  3. data/assets/vendor/bootstrap/scss/_badge.scss +54 -0
  4. data/assets/vendor/bootstrap/scss/_breadcrumb.scss +42 -0
  5. data/assets/vendor/bootstrap/scss/_button-group.scss +163 -0
  6. data/assets/vendor/bootstrap/scss/_buttons.scss +142 -0
  7. data/assets/vendor/bootstrap/scss/_card.scss +286 -0
  8. data/assets/vendor/bootstrap/scss/_carousel.scss +197 -0
  9. data/assets/vendor/bootstrap/scss/_close.scss +40 -0
  10. data/assets/vendor/bootstrap/scss/_code.scss +48 -0
  11. data/assets/vendor/bootstrap/scss/_custom-forms.scss +526 -0
  12. data/assets/vendor/bootstrap/scss/_dropdown.scss +192 -0
  13. data/assets/vendor/bootstrap/scss/_forms.scss +347 -0
  14. data/assets/vendor/bootstrap/scss/_functions.scss +144 -0
  15. data/assets/vendor/bootstrap/scss/_grid.scss +73 -0
  16. data/assets/vendor/bootstrap/scss/_images.scss +42 -0
  17. data/assets/vendor/bootstrap/scss/_input-group.scss +208 -0
  18. data/assets/vendor/bootstrap/scss/_jumbotron.scss +17 -0
  19. data/assets/vendor/bootstrap/scss/_list-group.scss +154 -0
  20. data/assets/vendor/bootstrap/scss/_media.scss +8 -0
  21. data/assets/vendor/bootstrap/scss/_mixins.scss +47 -0
  22. data/assets/vendor/bootstrap/scss/_modal.scss +240 -0
  23. data/assets/vendor/bootstrap/scss/_nav.scss +120 -0
  24. data/assets/vendor/bootstrap/scss/_navbar.scss +332 -0
  25. data/assets/vendor/bootstrap/scss/_pagination.scss +74 -0
  26. data/assets/vendor/bootstrap/scss/_popover.scss +170 -0
  27. data/assets/vendor/bootstrap/scss/_print.scss +141 -0
  28. data/assets/vendor/bootstrap/scss/_progress.scss +47 -0
  29. data/assets/vendor/bootstrap/scss/_reboot.scss +484 -0
  30. data/assets/vendor/bootstrap/scss/_root.scss +19 -0
  31. data/assets/vendor/bootstrap/scss/_spinners.scss +65 -0
  32. data/assets/vendor/bootstrap/scss/_tables.scss +185 -0
  33. data/assets/vendor/bootstrap/scss/_toasts.scss +46 -0
  34. data/assets/vendor/bootstrap/scss/_tooltip.scss +115 -0
  35. data/assets/vendor/bootstrap/scss/_transitions.scss +20 -0
  36. data/assets/vendor/bootstrap/scss/_type.scss +125 -0
  37. data/assets/vendor/bootstrap/scss/_utilities.scss +18 -0
  38. data/assets/vendor/bootstrap/scss/_variables.scss +1146 -0
  39. data/assets/vendor/bootstrap/scss/bootstrap-grid.scss +30 -0
  40. data/assets/vendor/bootstrap/scss/bootstrap-reboot.scss +12 -0
  41. data/assets/vendor/bootstrap/scss/bootstrap.scss +44 -0
  42. data/assets/vendor/bootstrap/scss/mixins/_alert.scss +13 -0
  43. data/assets/vendor/bootstrap/scss/mixins/_background-variant.scss +23 -0
  44. data/assets/vendor/bootstrap/scss/mixins/_badge.scss +17 -0
  45. data/assets/vendor/bootstrap/scss/mixins/_border-radius.scss +76 -0
  46. data/assets/vendor/bootstrap/scss/mixins/_box-shadow.scss +20 -0
  47. data/assets/vendor/bootstrap/scss/mixins/_breakpoints.scss +123 -0
  48. data/assets/vendor/bootstrap/scss/mixins/_buttons.scss +110 -0
  49. data/assets/vendor/bootstrap/scss/mixins/_caret.scss +62 -0
  50. data/assets/vendor/bootstrap/scss/mixins/_clearfix.scss +7 -0
  51. data/assets/vendor/bootstrap/scss/mixins/_deprecate.scss +10 -0
  52. data/assets/vendor/bootstrap/scss/mixins/_float.scss +14 -0
  53. data/assets/vendor/bootstrap/scss/mixins/_forms.scss +185 -0
  54. data/assets/vendor/bootstrap/scss/mixins/_gradients.scss +45 -0
  55. data/assets/vendor/bootstrap/scss/mixins/_grid-framework.scss +80 -0
  56. data/assets/vendor/bootstrap/scss/mixins/_grid.scss +69 -0
  57. data/assets/vendor/bootstrap/scss/mixins/_hover.scss +37 -0
  58. data/assets/vendor/bootstrap/scss/mixins/_image.scss +36 -0
  59. data/assets/vendor/bootstrap/scss/mixins/_list-group.scss +21 -0
  60. data/assets/vendor/bootstrap/scss/mixins/_lists.scss +7 -0
  61. data/assets/vendor/bootstrap/scss/mixins/_nav-divider.scss +11 -0
  62. data/assets/vendor/bootstrap/scss/mixins/_pagination.scss +22 -0
  63. data/assets/vendor/bootstrap/scss/mixins/_reset-text.scss +17 -0
  64. data/assets/vendor/bootstrap/scss/mixins/_resize.scss +6 -0
  65. data/assets/vendor/bootstrap/scss/mixins/_screen-reader.scss +34 -0
  66. data/assets/vendor/bootstrap/scss/mixins/_size.scss +7 -0
  67. data/assets/vendor/bootstrap/scss/mixins/_table-row.scss +39 -0
  68. data/assets/vendor/bootstrap/scss/mixins/_text-emphasis.scss +17 -0
  69. data/assets/vendor/bootstrap/scss/mixins/_text-hide.scss +11 -0
  70. data/assets/vendor/bootstrap/scss/mixins/_text-truncate.scss +8 -0
  71. data/assets/vendor/bootstrap/scss/mixins/_transition.scss +26 -0
  72. data/assets/vendor/bootstrap/scss/mixins/_visibility.scss +8 -0
  73. data/assets/vendor/bootstrap/scss/utilities/_align.scss +8 -0
  74. data/assets/vendor/bootstrap/scss/utilities/_background.scss +19 -0
  75. data/assets/vendor/bootstrap/scss/utilities/_borders.scss +75 -0
  76. data/assets/vendor/bootstrap/scss/utilities/_clearfix.scss +3 -0
  77. data/assets/vendor/bootstrap/scss/utilities/_display.scss +26 -0
  78. data/assets/vendor/bootstrap/scss/utilities/_embed.scss +39 -0
  79. data/assets/vendor/bootstrap/scss/utilities/_flex.scss +51 -0
  80. data/assets/vendor/bootstrap/scss/utilities/_float.scss +11 -0
  81. data/assets/vendor/bootstrap/scss/utilities/_interactions.scss +5 -0
  82. data/assets/vendor/bootstrap/scss/utilities/_overflow.scss +5 -0
  83. data/assets/vendor/bootstrap/scss/utilities/_position.scss +32 -0
  84. data/assets/vendor/bootstrap/scss/utilities/_screenreaders.scss +11 -0
  85. data/assets/vendor/bootstrap/scss/utilities/_shadows.scss +6 -0
  86. data/assets/vendor/bootstrap/scss/utilities/_sizing.scss +20 -0
  87. data/assets/vendor/bootstrap/scss/utilities/_spacing.scss +73 -0
  88. data/assets/vendor/bootstrap/scss/utilities/_stretched-link.scss +19 -0
  89. data/assets/vendor/bootstrap/scss/utilities/_text.scss +72 -0
  90. data/assets/vendor/bootstrap/scss/utilities/_visibility.scss +13 -0
  91. data/assets/vendor/bootstrap/scss/vendor/_rfs.scss +204 -0
  92. data/assets/vendor/startbootstrap-clean-blog/scss/styles.scss +1 -1
  93. metadata +92 -2
@@ -0,0 +1,40 @@
1
+ .close {
2
+ float: right;
3
+ @include font-size($close-font-size);
4
+ font-weight: $close-font-weight;
5
+ line-height: 1;
6
+ color: $close-color;
7
+ text-shadow: $close-text-shadow;
8
+ opacity: .5;
9
+
10
+ // Override <a>'s hover style
11
+ @include hover() {
12
+ color: $close-color;
13
+ text-decoration: none;
14
+ }
15
+
16
+ &:not(:disabled):not(.disabled) {
17
+ @include hover-focus() {
18
+ opacity: .75;
19
+ }
20
+ }
21
+ }
22
+
23
+ // Additional properties for button version
24
+ // iOS requires the button element instead of an anchor tag.
25
+ // If you want the anchor version, it requires `href="#"`.
26
+ // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
27
+
28
+ // stylelint-disable-next-line selector-no-qualifying-type
29
+ button.close {
30
+ padding: 0;
31
+ background-color: transparent;
32
+ border: 0;
33
+ }
34
+
35
+ // Future-proof disabling of clicks on `<a>` elements
36
+
37
+ // stylelint-disable-next-line selector-no-qualifying-type
38
+ a.close.disabled {
39
+ pointer-events: none;
40
+ }
@@ -0,0 +1,48 @@
1
+ // Inline code
2
+ code {
3
+ @include font-size($code-font-size);
4
+ color: $code-color;
5
+ word-wrap: break-word;
6
+
7
+ // Streamline the style when inside anchors to avoid broken underline and more
8
+ a > & {
9
+ color: inherit;
10
+ }
11
+ }
12
+
13
+ // User input typically entered via keyboard
14
+ kbd {
15
+ padding: $kbd-padding-y $kbd-padding-x;
16
+ @include font-size($kbd-font-size);
17
+ color: $kbd-color;
18
+ background-color: $kbd-bg;
19
+ @include border-radius($border-radius-sm);
20
+ @include box-shadow($kbd-box-shadow);
21
+
22
+ kbd {
23
+ padding: 0;
24
+ @include font-size(100%);
25
+ font-weight: $nested-kbd-font-weight;
26
+ @include box-shadow(none);
27
+ }
28
+ }
29
+
30
+ // Blocks of code
31
+ pre {
32
+ display: block;
33
+ @include font-size($code-font-size);
34
+ color: $pre-color;
35
+
36
+ // Account for some code outputs that place code tags in pre tags
37
+ code {
38
+ @include font-size(inherit);
39
+ color: inherit;
40
+ word-break: normal;
41
+ }
42
+ }
43
+
44
+ // Enable scrollable blocks of code
45
+ .pre-scrollable {
46
+ max-height: $pre-scrollable-max-height;
47
+ overflow-y: scroll;
48
+ }
@@ -0,0 +1,526 @@
1
+ // Embedded icons from Open Iconic.
2
+ // Released under MIT and copyright 2014 Waybury.
3
+ // https://useiconic.com/open
4
+
5
+
6
+ // Checkboxes and radios
7
+ //
8
+ // Base class takes care of all the key behavioral aspects.
9
+
10
+ .custom-control {
11
+ position: relative;
12
+ z-index: 1;
13
+ display: block;
14
+ min-height: $font-size-base * $line-height-base;
15
+ padding-left: $custom-control-gutter + $custom-control-indicator-size;
16
+ color-adjust: exact; // Keep themed appearance for print
17
+ }
18
+
19
+ .custom-control-inline {
20
+ display: inline-flex;
21
+ margin-right: $custom-control-spacer-x;
22
+ }
23
+
24
+ .custom-control-input {
25
+ position: absolute;
26
+ left: 0;
27
+ z-index: -1; // Put the input behind the label so it doesn't overlay text
28
+ width: $custom-control-indicator-size;
29
+ height: ($font-size-base * $line-height-base + $custom-control-indicator-size) / 2;
30
+ opacity: 0;
31
+
32
+ &:checked ~ .custom-control-label::before {
33
+ color: $custom-control-indicator-checked-color;
34
+ border-color: $custom-control-indicator-checked-border-color;
35
+ @include gradient-bg($custom-control-indicator-checked-bg);
36
+ @include box-shadow($custom-control-indicator-checked-box-shadow);
37
+ }
38
+
39
+ &:focus ~ .custom-control-label::before {
40
+ // the mixin is not used here to make sure there is feedback
41
+ @if $enable-shadows {
42
+ box-shadow: $input-box-shadow, $custom-control-indicator-focus-box-shadow;
43
+ } @else {
44
+ box-shadow: $custom-control-indicator-focus-box-shadow;
45
+ }
46
+ }
47
+
48
+ &:focus:not(:checked) ~ .custom-control-label::before {
49
+ border-color: $custom-control-indicator-focus-border-color;
50
+ }
51
+
52
+ &:not(:disabled):active ~ .custom-control-label::before {
53
+ color: $custom-control-indicator-active-color;
54
+ background-color: $custom-control-indicator-active-bg;
55
+ border-color: $custom-control-indicator-active-border-color;
56
+ @include box-shadow($custom-control-indicator-active-box-shadow);
57
+ }
58
+
59
+ // Use [disabled] and :disabled to work around https://github.com/twbs/bootstrap/issues/28247
60
+ &[disabled],
61
+ &:disabled {
62
+ ~ .custom-control-label {
63
+ color: $custom-control-label-disabled-color;
64
+
65
+ &::before {
66
+ background-color: $custom-control-indicator-disabled-bg;
67
+ }
68
+ }
69
+ }
70
+ }
71
+
72
+ // Custom control indicators
73
+ //
74
+ // Build the custom controls out of pseudo-elements.
75
+
76
+ .custom-control-label {
77
+ position: relative;
78
+ margin-bottom: 0;
79
+ color: $custom-control-label-color;
80
+ vertical-align: top;
81
+ cursor: $custom-control-cursor;
82
+
83
+ // Background-color and (when enabled) gradient
84
+ &::before {
85
+ position: absolute;
86
+ top: ($font-size-base * $line-height-base - $custom-control-indicator-size) / 2;
87
+ left: -($custom-control-gutter + $custom-control-indicator-size);
88
+ display: block;
89
+ width: $custom-control-indicator-size;
90
+ height: $custom-control-indicator-size;
91
+ pointer-events: none;
92
+ content: "";
93
+ background-color: $custom-control-indicator-bg;
94
+ border: $custom-control-indicator-border-color solid $custom-control-indicator-border-width;
95
+ @include box-shadow($custom-control-indicator-box-shadow);
96
+ }
97
+
98
+ // Foreground (icon)
99
+ &::after {
100
+ position: absolute;
101
+ top: ($font-size-base * $line-height-base - $custom-control-indicator-size) / 2;
102
+ left: -($custom-control-gutter + $custom-control-indicator-size);
103
+ display: block;
104
+ width: $custom-control-indicator-size;
105
+ height: $custom-control-indicator-size;
106
+ content: "";
107
+ background: 50% / #{$custom-control-indicator-bg-size} no-repeat;
108
+ }
109
+ }
110
+
111
+
112
+ // Checkboxes
113
+ //
114
+ // Tweak just a few things for checkboxes.
115
+
116
+ .custom-checkbox {
117
+ .custom-control-label::before {
118
+ @include border-radius($custom-checkbox-indicator-border-radius);
119
+ }
120
+
121
+ .custom-control-input:checked ~ .custom-control-label {
122
+ &::after {
123
+ background-image: escape-svg($custom-checkbox-indicator-icon-checked);
124
+ }
125
+ }
126
+
127
+ .custom-control-input:indeterminate ~ .custom-control-label {
128
+ &::before {
129
+ border-color: $custom-checkbox-indicator-indeterminate-border-color;
130
+ @include gradient-bg($custom-checkbox-indicator-indeterminate-bg);
131
+ @include box-shadow($custom-checkbox-indicator-indeterminate-box-shadow);
132
+ }
133
+ &::after {
134
+ background-image: escape-svg($custom-checkbox-indicator-icon-indeterminate);
135
+ }
136
+ }
137
+
138
+ .custom-control-input:disabled {
139
+ &:checked ~ .custom-control-label::before {
140
+ @include gradient-bg($custom-control-indicator-checked-disabled-bg);
141
+ }
142
+ &:indeterminate ~ .custom-control-label::before {
143
+ @include gradient-bg($custom-control-indicator-checked-disabled-bg);
144
+ }
145
+ }
146
+ }
147
+
148
+ // Radios
149
+ //
150
+ // Tweak just a few things for radios.
151
+
152
+ .custom-radio {
153
+ .custom-control-label::before {
154
+ // stylelint-disable-next-line property-disallowed-list
155
+ border-radius: $custom-radio-indicator-border-radius;
156
+ }
157
+
158
+ .custom-control-input:checked ~ .custom-control-label {
159
+ &::after {
160
+ background-image: escape-svg($custom-radio-indicator-icon-checked);
161
+ }
162
+ }
163
+
164
+ .custom-control-input:disabled {
165
+ &:checked ~ .custom-control-label::before {
166
+ @include gradient-bg($custom-control-indicator-checked-disabled-bg);
167
+ }
168
+ }
169
+ }
170
+
171
+
172
+ // switches
173
+ //
174
+ // Tweak a few things for switches
175
+
176
+ .custom-switch {
177
+ padding-left: $custom-switch-width + $custom-control-gutter;
178
+
179
+ .custom-control-label {
180
+ &::before {
181
+ left: -($custom-switch-width + $custom-control-gutter);
182
+ width: $custom-switch-width;
183
+ pointer-events: all;
184
+ // stylelint-disable-next-line property-disallowed-list
185
+ border-radius: $custom-switch-indicator-border-radius;
186
+ }
187
+
188
+ &::after {
189
+ top: add(($font-size-base * $line-height-base - $custom-control-indicator-size) / 2, $custom-control-indicator-border-width * 2);
190
+ left: add(-($custom-switch-width + $custom-control-gutter), $custom-control-indicator-border-width * 2);
191
+ width: $custom-switch-indicator-size;
192
+ height: $custom-switch-indicator-size;
193
+ background-color: $custom-control-indicator-border-color;
194
+ // stylelint-disable-next-line property-disallowed-list
195
+ border-radius: $custom-switch-indicator-border-radius;
196
+ @include transition(transform .15s ease-in-out, $custom-forms-transition);
197
+ }
198
+ }
199
+
200
+ .custom-control-input:checked ~ .custom-control-label {
201
+ &::after {
202
+ background-color: $custom-control-indicator-bg;
203
+ transform: translateX($custom-switch-width - $custom-control-indicator-size);
204
+ }
205
+ }
206
+
207
+ .custom-control-input:disabled {
208
+ &:checked ~ .custom-control-label::before {
209
+ @include gradient-bg($custom-control-indicator-checked-disabled-bg);
210
+ }
211
+ }
212
+ }
213
+
214
+
215
+ // Select
216
+ //
217
+ // Replaces the browser default select with a custom one, mostly pulled from
218
+ // https://primer.github.io/.
219
+ //
220
+
221
+ .custom-select {
222
+ display: inline-block;
223
+ width: 100%;
224
+ height: $custom-select-height;
225
+ padding: $custom-select-padding-y ($custom-select-padding-x + $custom-select-indicator-padding) $custom-select-padding-y $custom-select-padding-x;
226
+ font-family: $custom-select-font-family;
227
+ @include font-size($custom-select-font-size);
228
+ font-weight: $custom-select-font-weight;
229
+ line-height: $custom-select-line-height;
230
+ color: $custom-select-color;
231
+ vertical-align: middle;
232
+ background: $custom-select-bg $custom-select-background;
233
+ border: $custom-select-border-width solid $custom-select-border-color;
234
+ @include border-radius($custom-select-border-radius, 0);
235
+ @include box-shadow($custom-select-box-shadow);
236
+ appearance: none;
237
+
238
+ &:focus {
239
+ border-color: $custom-select-focus-border-color;
240
+ outline: 0;
241
+ @if $enable-shadows {
242
+ @include box-shadow($custom-select-box-shadow, $custom-select-focus-box-shadow);
243
+ } @else {
244
+ // Avoid using mixin so we can pass custom focus shadow properly
245
+ box-shadow: $custom-select-focus-box-shadow;
246
+ }
247
+
248
+ &::-ms-value {
249
+ // For visual consistency with other platforms/browsers,
250
+ // suppress the default white text on blue background highlight given to
251
+ // the selected option text when the (still closed) <select> receives focus
252
+ // in IE and (under certain conditions) Edge.
253
+ // See https://github.com/twbs/bootstrap/issues/19398.
254
+ color: $input-color;
255
+ background-color: $input-bg;
256
+ }
257
+ }
258
+
259
+ &[multiple],
260
+ &[size]:not([size="1"]) {
261
+ height: auto;
262
+ padding-right: $custom-select-padding-x;
263
+ background-image: none;
264
+ }
265
+
266
+ &:disabled {
267
+ color: $custom-select-disabled-color;
268
+ background-color: $custom-select-disabled-bg;
269
+ }
270
+
271
+ // Hides the default caret in IE11
272
+ &::-ms-expand {
273
+ display: none;
274
+ }
275
+
276
+ // Remove outline from select box in FF
277
+ &:-moz-focusring {
278
+ color: transparent;
279
+ text-shadow: 0 0 0 $custom-select-color;
280
+ }
281
+ }
282
+
283
+ .custom-select-sm {
284
+ height: $custom-select-height-sm;
285
+ padding-top: $custom-select-padding-y-sm;
286
+ padding-bottom: $custom-select-padding-y-sm;
287
+ padding-left: $custom-select-padding-x-sm;
288
+ @include font-size($custom-select-font-size-sm);
289
+ }
290
+
291
+ .custom-select-lg {
292
+ height: $custom-select-height-lg;
293
+ padding-top: $custom-select-padding-y-lg;
294
+ padding-bottom: $custom-select-padding-y-lg;
295
+ padding-left: $custom-select-padding-x-lg;
296
+ @include font-size($custom-select-font-size-lg);
297
+ }
298
+
299
+
300
+ // File
301
+ //
302
+ // Custom file input.
303
+
304
+ .custom-file {
305
+ position: relative;
306
+ display: inline-block;
307
+ width: 100%;
308
+ height: $custom-file-height;
309
+ margin-bottom: 0;
310
+ }
311
+
312
+ .custom-file-input {
313
+ position: relative;
314
+ z-index: 2;
315
+ width: 100%;
316
+ height: $custom-file-height;
317
+ margin: 0;
318
+ overflow: hidden;
319
+ opacity: 0;
320
+
321
+ &:focus ~ .custom-file-label {
322
+ border-color: $custom-file-focus-border-color;
323
+ box-shadow: $custom-file-focus-box-shadow;
324
+ }
325
+
326
+ // Use [disabled] and :disabled to work around https://github.com/twbs/bootstrap/issues/28247
327
+ &[disabled] ~ .custom-file-label,
328
+ &:disabled ~ .custom-file-label {
329
+ background-color: $custom-file-disabled-bg;
330
+ }
331
+
332
+ @each $lang, $value in $custom-file-text {
333
+ &:lang(#{$lang}) ~ .custom-file-label::after {
334
+ content: $value;
335
+ }
336
+ }
337
+
338
+ ~ .custom-file-label[data-browse]::after {
339
+ content: attr(data-browse);
340
+ }
341
+ }
342
+
343
+ .custom-file-label {
344
+ position: absolute;
345
+ top: 0;
346
+ right: 0;
347
+ left: 0;
348
+ z-index: 1;
349
+ height: $custom-file-height;
350
+ padding: $custom-file-padding-y $custom-file-padding-x;
351
+ overflow: hidden;
352
+ font-family: $custom-file-font-family;
353
+ font-weight: $custom-file-font-weight;
354
+ line-height: $custom-file-line-height;
355
+ color: $custom-file-color;
356
+ background-color: $custom-file-bg;
357
+ border: $custom-file-border-width solid $custom-file-border-color;
358
+ @include border-radius($custom-file-border-radius);
359
+ @include box-shadow($custom-file-box-shadow);
360
+
361
+ &::after {
362
+ position: absolute;
363
+ top: 0;
364
+ right: 0;
365
+ bottom: 0;
366
+ z-index: 3;
367
+ display: block;
368
+ height: $custom-file-height-inner;
369
+ padding: $custom-file-padding-y $custom-file-padding-x;
370
+ line-height: $custom-file-line-height;
371
+ color: $custom-file-button-color;
372
+ content: "Browse";
373
+ @include gradient-bg($custom-file-button-bg);
374
+ border-left: inherit;
375
+ @include border-radius(0 $custom-file-border-radius $custom-file-border-radius 0);
376
+ }
377
+ }
378
+
379
+ // Range
380
+ //
381
+ // Style range inputs the same across browsers. Vendor-specific rules for pseudo
382
+ // elements cannot be mixed. As such, there are no shared styles for focus or
383
+ // active states on prefixed selectors.
384
+
385
+ .custom-range {
386
+ width: 100%;
387
+ height: add($custom-range-thumb-height, $custom-range-thumb-focus-box-shadow-width * 2);
388
+ padding: 0; // Need to reset padding
389
+ background-color: transparent;
390
+ appearance: none;
391
+
392
+ &:focus {
393
+ outline: 0;
394
+
395
+ // Pseudo-elements must be split across multiple rulesets to have an effect.
396
+ // No box-shadow() mixin for focus accessibility.
397
+ &::-webkit-slider-thumb { box-shadow: $custom-range-thumb-focus-box-shadow; }
398
+ &::-moz-range-thumb { box-shadow: $custom-range-thumb-focus-box-shadow; }
399
+ &::-ms-thumb { box-shadow: $custom-range-thumb-focus-box-shadow; }
400
+ }
401
+
402
+ &::-moz-focus-outer {
403
+ border: 0;
404
+ }
405
+
406
+ &::-webkit-slider-thumb {
407
+ width: $custom-range-thumb-width;
408
+ height: $custom-range-thumb-height;
409
+ margin-top: ($custom-range-track-height - $custom-range-thumb-height) / 2; // Webkit specific
410
+ @include gradient-bg($custom-range-thumb-bg);
411
+ border: $custom-range-thumb-border;
412
+ @include border-radius($custom-range-thumb-border-radius);
413
+ @include box-shadow($custom-range-thumb-box-shadow);
414
+ @include transition($custom-forms-transition);
415
+ appearance: none;
416
+
417
+ &:active {
418
+ @include gradient-bg($custom-range-thumb-active-bg);
419
+ }
420
+ }
421
+
422
+ &::-webkit-slider-runnable-track {
423
+ width: $custom-range-track-width;
424
+ height: $custom-range-track-height;
425
+ color: transparent; // Why?
426
+ cursor: $custom-range-track-cursor;
427
+ background-color: $custom-range-track-bg;
428
+ border-color: transparent;
429
+ @include border-radius($custom-range-track-border-radius);
430
+ @include box-shadow($custom-range-track-box-shadow);
431
+ }
432
+
433
+ &::-moz-range-thumb {
434
+ width: $custom-range-thumb-width;
435
+ height: $custom-range-thumb-height;
436
+ @include gradient-bg($custom-range-thumb-bg);
437
+ border: $custom-range-thumb-border;
438
+ @include border-radius($custom-range-thumb-border-radius);
439
+ @include box-shadow($custom-range-thumb-box-shadow);
440
+ @include transition($custom-forms-transition);
441
+ appearance: none;
442
+
443
+ &:active {
444
+ @include gradient-bg($custom-range-thumb-active-bg);
445
+ }
446
+ }
447
+
448
+ &::-moz-range-track {
449
+ width: $custom-range-track-width;
450
+ height: $custom-range-track-height;
451
+ color: transparent;
452
+ cursor: $custom-range-track-cursor;
453
+ background-color: $custom-range-track-bg;
454
+ border-color: transparent; // Firefox specific?
455
+ @include border-radius($custom-range-track-border-radius);
456
+ @include box-shadow($custom-range-track-box-shadow);
457
+ }
458
+
459
+ &::-ms-thumb {
460
+ width: $custom-range-thumb-width;
461
+ height: $custom-range-thumb-height;
462
+ margin-top: 0; // Edge specific
463
+ margin-right: $custom-range-thumb-focus-box-shadow-width; // Workaround that overflowed box-shadow is hidden.
464
+ margin-left: $custom-range-thumb-focus-box-shadow-width; // Workaround that overflowed box-shadow is hidden.
465
+ @include gradient-bg($custom-range-thumb-bg);
466
+ border: $custom-range-thumb-border;
467
+ @include border-radius($custom-range-thumb-border-radius);
468
+ @include box-shadow($custom-range-thumb-box-shadow);
469
+ @include transition($custom-forms-transition);
470
+ appearance: none;
471
+
472
+ &:active {
473
+ @include gradient-bg($custom-range-thumb-active-bg);
474
+ }
475
+ }
476
+
477
+ &::-ms-track {
478
+ width: $custom-range-track-width;
479
+ height: $custom-range-track-height;
480
+ color: transparent;
481
+ cursor: $custom-range-track-cursor;
482
+ background-color: transparent;
483
+ border-color: transparent;
484
+ border-width: $custom-range-thumb-height / 2;
485
+ @include box-shadow($custom-range-track-box-shadow);
486
+ }
487
+
488
+ &::-ms-fill-lower {
489
+ background-color: $custom-range-track-bg;
490
+ @include border-radius($custom-range-track-border-radius);
491
+ }
492
+
493
+ &::-ms-fill-upper {
494
+ margin-right: 15px; // arbitrary?
495
+ background-color: $custom-range-track-bg;
496
+ @include border-radius($custom-range-track-border-radius);
497
+ }
498
+
499
+ &:disabled {
500
+ &::-webkit-slider-thumb {
501
+ background-color: $custom-range-thumb-disabled-bg;
502
+ }
503
+
504
+ &::-webkit-slider-runnable-track {
505
+ cursor: default;
506
+ }
507
+
508
+ &::-moz-range-thumb {
509
+ background-color: $custom-range-thumb-disabled-bg;
510
+ }
511
+
512
+ &::-moz-range-track {
513
+ cursor: default;
514
+ }
515
+
516
+ &::-ms-thumb {
517
+ background-color: $custom-range-thumb-disabled-bg;
518
+ }
519
+ }
520
+ }
521
+
522
+ .custom-control-label::before,
523
+ .custom-file-label,
524
+ .custom-select {
525
+ @include transition($custom-forms-transition);
526
+ }