cms-dita-jekyll-theme 0.1.0

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