jekyll-theme-warpcore 0.1.0

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