jekyll-theme-portfolio 1.0.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (114) hide show
  1. checksums.yaml +7 -0
  2. data/LICENSE.md +21 -0
  3. data/README.md +19 -0
  4. data/_includes/footer.html +57 -0
  5. data/_includes/head.html +12 -0
  6. data/_includes/header.html +43 -0
  7. data/_layouts/default.html +20 -0
  8. data/_layouts/home.html +41 -0
  9. data/_layouts/page.html +13 -0
  10. data/_layouts/portfolio.html +66 -0
  11. data/_layouts/post.html +23 -0
  12. data/_sass/_bootstrap_customization.scss +332 -0
  13. data/_sass/_syntax-highlighting.scss +74 -0
  14. data/_sass/_variables.scss +106 -0
  15. data/_sass/bootstrap-4-jekyll/_bootstrap-4-jekyll.scss +8 -0
  16. data/_sass/bootstrap/__DO_NOT_MODIFY +0 -0
  17. data/_sass/bootstrap/_alert.scss +51 -0
  18. data/_sass/bootstrap/_badge.scss +54 -0
  19. data/_sass/bootstrap/_breadcrumb.scss +41 -0
  20. data/_sass/bootstrap/_button-group.scss +163 -0
  21. data/_sass/bootstrap/_buttons.scss +137 -0
  22. data/_sass/bootstrap/_card.scss +289 -0
  23. data/_sass/bootstrap/_carousel.scss +197 -0
  24. data/_sass/bootstrap/_close.scss +41 -0
  25. data/_sass/bootstrap/_code.scss +48 -0
  26. data/_sass/bootstrap/_custom-forms.scss +507 -0
  27. data/_sass/bootstrap/_dropdown.scss +191 -0
  28. data/_sass/bootstrap/_forms.scss +330 -0
  29. data/_sass/bootstrap/_functions.scss +86 -0
  30. data/_sass/bootstrap/_grid.scss +52 -0
  31. data/_sass/bootstrap/_images.scss +42 -0
  32. data/_sass/bootstrap/_input-group.scss +193 -0
  33. data/_sass/bootstrap/_jumbotron.scss +17 -0
  34. data/_sass/bootstrap/_list-group.scss +149 -0
  35. data/_sass/bootstrap/_media.scss +8 -0
  36. data/_sass/bootstrap/_mixins.scss +47 -0
  37. data/_sass/bootstrap/_modal.scss +229 -0
  38. data/_sass/bootstrap/_nav.scss +120 -0
  39. data/_sass/bootstrap/_navbar.scss +294 -0
  40. data/_sass/bootstrap/_pagination.scss +73 -0
  41. data/_sass/bootstrap/_popover.scss +171 -0
  42. data/_sass/bootstrap/_print.scss +141 -0
  43. data/_sass/bootstrap/_progress.scss +43 -0
  44. data/_sass/bootstrap/_reboot.scss +483 -0
  45. data/_sass/bootstrap/_root.scss +19 -0
  46. data/_sass/bootstrap/_spinners.scss +55 -0
  47. data/_sass/bootstrap/_tables.scss +185 -0
  48. data/_sass/bootstrap/_toasts.scss +44 -0
  49. data/_sass/bootstrap/_tooltip.scss +115 -0
  50. data/_sass/bootstrap/_transitions.scss +20 -0
  51. data/_sass/bootstrap/_type.scss +125 -0
  52. data/_sass/bootstrap/_utilities.scss +17 -0
  53. data/_sass/bootstrap/_variables.scss +1123 -0
  54. data/_sass/bootstrap/bootstrap-grid.scss +29 -0
  55. data/_sass/bootstrap/bootstrap-reboot.scss +12 -0
  56. data/_sass/bootstrap/bootstrap.scss +44 -0
  57. data/_sass/bootstrap/mixins/_alert.scss +13 -0
  58. data/_sass/bootstrap/mixins/_background-variant.scss +21 -0
  59. data/_sass/bootstrap/mixins/_badge.scss +17 -0
  60. data/_sass/bootstrap/mixins/_border-radius.scss +63 -0
  61. data/_sass/bootstrap/mixins/_box-shadow.scss +20 -0
  62. data/_sass/bootstrap/mixins/_breakpoints.scss +123 -0
  63. data/_sass/bootstrap/mixins/_buttons.scss +107 -0
  64. data/_sass/bootstrap/mixins/_caret.scss +62 -0
  65. data/_sass/bootstrap/mixins/_clearfix.scss +7 -0
  66. data/_sass/bootstrap/mixins/_deprecate.scss +10 -0
  67. data/_sass/bootstrap/mixins/_float.scss +14 -0
  68. data/_sass/bootstrap/mixins/_forms.scss +192 -0
  69. data/_sass/bootstrap/mixins/_gradients.scss +45 -0
  70. data/_sass/bootstrap/mixins/_grid-framework.scss +66 -0
  71. data/_sass/bootstrap/mixins/_grid.scss +51 -0
  72. data/_sass/bootstrap/mixins/_hover.scss +37 -0
  73. data/_sass/bootstrap/mixins/_image.scss +36 -0
  74. data/_sass/bootstrap/mixins/_list-group.scss +21 -0
  75. data/_sass/bootstrap/mixins/_lists.scss +7 -0
  76. data/_sass/bootstrap/mixins/_nav-divider.scss +10 -0
  77. data/_sass/bootstrap/mixins/_pagination.scss +22 -0
  78. data/_sass/bootstrap/mixins/_reset-text.scss +17 -0
  79. data/_sass/bootstrap/mixins/_resize.scss +6 -0
  80. data/_sass/bootstrap/mixins/_screen-reader.scss +33 -0
  81. data/_sass/bootstrap/mixins/_size.scss +7 -0
  82. data/_sass/bootstrap/mixins/_table-row.scss +39 -0
  83. data/_sass/bootstrap/mixins/_text-emphasis.scss +16 -0
  84. data/_sass/bootstrap/mixins/_text-hide.scss +11 -0
  85. data/_sass/bootstrap/mixins/_text-truncate.scss +8 -0
  86. data/_sass/bootstrap/mixins/_transition.scss +16 -0
  87. data/_sass/bootstrap/mixins/_visibility.scss +8 -0
  88. data/_sass/bootstrap/utilities/_align.scss +8 -0
  89. data/_sass/bootstrap/utilities/_background.scss +19 -0
  90. data/_sass/bootstrap/utilities/_borders.scss +75 -0
  91. data/_sass/bootstrap/utilities/_clearfix.scss +3 -0
  92. data/_sass/bootstrap/utilities/_display.scss +26 -0
  93. data/_sass/bootstrap/utilities/_embed.scss +39 -0
  94. data/_sass/bootstrap/utilities/_flex.scss +51 -0
  95. data/_sass/bootstrap/utilities/_float.scss +11 -0
  96. data/_sass/bootstrap/utilities/_overflow.scss +5 -0
  97. data/_sass/bootstrap/utilities/_position.scss +32 -0
  98. data/_sass/bootstrap/utilities/_screenreaders.scss +11 -0
  99. data/_sass/bootstrap/utilities/_shadows.scss +6 -0
  100. data/_sass/bootstrap/utilities/_sizing.scss +20 -0
  101. data/_sass/bootstrap/utilities/_spacing.scss +73 -0
  102. data/_sass/bootstrap/utilities/_stretched-link.scss +19 -0
  103. data/_sass/bootstrap/utilities/_text.scss +72 -0
  104. data/_sass/bootstrap/utilities/_visibility.scss +13 -0
  105. data/_sass/bootstrap/vendor/_rfs.scss +204 -0
  106. data/assets/images/projects/nativescript.png +0 -0
  107. data/assets/images/projects/puppet.png +0 -0
  108. data/assets/javascript/bootstrap/__DO_NOT_MODIFY +0 -0
  109. data/assets/javascript/bootstrap/bootstrap.bundle.min.js +7 -0
  110. data/assets/javascript/bootstrap/bootstrap.bundle.min.js.map +1 -0
  111. data/assets/javascript/bootstrap/jquery.min.js +2 -0
  112. data/assets/javascript/bootstrap/jquery.min.map +1 -0
  113. data/assets/main.scss +9 -0
  114. metadata +219 -0
@@ -0,0 +1,41 @@
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
+ appearance: none;
34
+ }
35
+
36
+ // Future-proof disabling of clicks on `<a>` elements
37
+
38
+ // stylelint-disable-next-line selector-no-qualifying-type
39
+ a.close.disabled {
40
+ pointer-events: none;
41
+ }
@@ -0,0 +1,48 @@
1
+ // Inline code
2
+ code {
3
+ @include 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
+ @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,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: no-repeat 50% / #{$custom-control-indicator-bg-size};
99
+ }
100
+ }
101
+
102
+
103
+ // Checkboxes
104
+ //
105
+ // Tweak just a few things for checkboxes.
106
+
107
+ .custom-checkbox {
108
+ .custom-control-label::before {
109
+ @include border-radius($custom-checkbox-indicator-border-radius);
110
+ }
111
+
112
+ .custom-control-input:checked ~ .custom-control-label {
113
+ &::after {
114
+ background-image: $custom-checkbox-indicator-icon-checked;
115
+ }
116
+ }
117
+
118
+ .custom-control-input:indeterminate ~ .custom-control-label {
119
+ &::before {
120
+ border-color: $custom-checkbox-indicator-indeterminate-border-color;
121
+ @include gradient-bg($custom-checkbox-indicator-indeterminate-bg);
122
+ @include box-shadow($custom-checkbox-indicator-indeterminate-box-shadow);
123
+ }
124
+ &::after {
125
+ background-image: $custom-checkbox-indicator-icon-indeterminate;
126
+ }
127
+ }
128
+
129
+ .custom-control-input:disabled {
130
+ &:checked ~ .custom-control-label::before {
131
+ background-color: $custom-control-indicator-checked-disabled-bg;
132
+ }
133
+ &:indeterminate ~ .custom-control-label::before {
134
+ background-color: $custom-control-indicator-checked-disabled-bg;
135
+ }
136
+ }
137
+ }
138
+
139
+ // Radios
140
+ //
141
+ // Tweak just a few things for radios.
142
+
143
+ .custom-radio {
144
+ .custom-control-label::before {
145
+ // stylelint-disable-next-line property-blacklist
146
+ border-radius: $custom-radio-indicator-border-radius;
147
+ }
148
+
149
+ .custom-control-input:checked ~ .custom-control-label {
150
+ &::after {
151
+ background-image: $custom-radio-indicator-icon-checked;
152
+ }
153
+ }
154
+
155
+ .custom-control-input:disabled {
156
+ &:checked ~ .custom-control-label::before {
157
+ background-color: $custom-control-indicator-checked-disabled-bg;
158
+ }
159
+ }
160
+ }
161
+
162
+
163
+ // switches
164
+ //
165
+ // Tweak a few things for switches
166
+
167
+ .custom-switch {
168
+ padding-left: $custom-switch-width + $custom-control-gutter;
169
+
170
+ .custom-control-label {
171
+ &::before {
172
+ left: -($custom-switch-width + $custom-control-gutter);
173
+ width: $custom-switch-width;
174
+ pointer-events: all;
175
+ // stylelint-disable-next-line property-blacklist
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
+ // stylelint-disable-next-line property-blacklist
186
+ border-radius: $custom-switch-indicator-border-radius;
187
+ @include transition(transform .15s ease-in-out, $custom-forms-transition);
188
+ }
189
+ }
190
+
191
+ .custom-control-input:checked ~ .custom-control-label {
192
+ &::after {
193
+ background-color: $custom-control-indicator-bg;
194
+ transform: translateX($custom-switch-width - $custom-control-indicator-size);
195
+ }
196
+ }
197
+
198
+ .custom-control-input:disabled {
199
+ &:checked ~ .custom-control-label::before {
200
+ background-color: $custom-control-indicator-checked-disabled-bg;
201
+ }
202
+ }
203
+ }
204
+
205
+
206
+ // Select
207
+ //
208
+ // Replaces the browser default select with a custom one, mostly pulled from
209
+ // https://primer.github.io/.
210
+ //
211
+
212
+ .custom-select {
213
+ display: inline-block;
214
+ width: 100%;
215
+ height: $custom-select-height;
216
+ padding: $custom-select-padding-y ($custom-select-padding-x + $custom-select-indicator-padding) $custom-select-padding-y $custom-select-padding-x;
217
+ font-family: $custom-select-font-family;
218
+ @include font-size($custom-select-font-size);
219
+ font-weight: $custom-select-font-weight;
220
+ line-height: $custom-select-line-height;
221
+ color: $custom-select-color;
222
+ vertical-align: middle;
223
+ background: $custom-select-background;
224
+ background-color: $custom-select-bg;
225
+ border: $custom-select-border-width solid $custom-select-border-color;
226
+ @include border-radius($custom-select-border-radius, 0);
227
+ @include box-shadow($custom-select-box-shadow);
228
+ appearance: none;
229
+
230
+ &:focus {
231
+ border-color: $custom-select-focus-border-color;
232
+ outline: 0;
233
+ @if $enable-shadows {
234
+ box-shadow: $custom-select-box-shadow, $custom-select-focus-box-shadow;
235
+ } @else {
236
+ box-shadow: $custom-select-focus-box-shadow;
237
+ }
238
+
239
+ &::-ms-value {
240
+ // For visual consistency with other platforms/browsers,
241
+ // suppress the default white text on blue background highlight given to
242
+ // the selected option text when the (still closed) <select> receives focus
243
+ // in IE and (under certain conditions) Edge.
244
+ // See https://github.com/twbs/bootstrap/issues/19398.
245
+ color: $input-color;
246
+ background-color: $input-bg;
247
+ }
248
+ }
249
+
250
+ &[multiple],
251
+ &[size]:not([size="1"]) {
252
+ height: auto;
253
+ padding-right: $custom-select-padding-x;
254
+ background-image: none;
255
+ }
256
+
257
+ &:disabled {
258
+ color: $custom-select-disabled-color;
259
+ background-color: $custom-select-disabled-bg;
260
+ }
261
+
262
+ // Hides the default caret in IE11
263
+ &::-ms-expand {
264
+ display: none;
265
+ }
266
+ }
267
+
268
+ .custom-select-sm {
269
+ height: $custom-select-height-sm;
270
+ padding-top: $custom-select-padding-y-sm;
271
+ padding-bottom: $custom-select-padding-y-sm;
272
+ padding-left: $custom-select-padding-x-sm;
273
+ @include font-size($custom-select-font-size-sm);
274
+ }
275
+
276
+ .custom-select-lg {
277
+ height: $custom-select-height-lg;
278
+ padding-top: $custom-select-padding-y-lg;
279
+ padding-bottom: $custom-select-padding-y-lg;
280
+ padding-left: $custom-select-padding-x-lg;
281
+ @include font-size($custom-select-font-size-lg);
282
+ }
283
+
284
+
285
+ // File
286
+ //
287
+ // Custom file input.
288
+
289
+ .custom-file {
290
+ position: relative;
291
+ display: inline-block;
292
+ width: 100%;
293
+ height: $custom-file-height;
294
+ margin-bottom: 0;
295
+ }
296
+
297
+ .custom-file-input {
298
+ position: relative;
299
+ z-index: 2;
300
+ width: 100%;
301
+ height: $custom-file-height;
302
+ margin: 0;
303
+ opacity: 0;
304
+
305
+ &:focus ~ .custom-file-label {
306
+ border-color: $custom-file-focus-border-color;
307
+ box-shadow: $custom-file-focus-box-shadow;
308
+ }
309
+
310
+ &:disabled ~ .custom-file-label {
311
+ background-color: $custom-file-disabled-bg;
312
+ }
313
+
314
+ @each $lang, $value in $custom-file-text {
315
+ &:lang(#{$lang}) ~ .custom-file-label::after {
316
+ content: $value;
317
+ }
318
+ }
319
+
320
+ ~ .custom-file-label[data-browse]::after {
321
+ content: attr(data-browse);
322
+ }
323
+ }
324
+
325
+ .custom-file-label {
326
+ position: absolute;
327
+ top: 0;
328
+ right: 0;
329
+ left: 0;
330
+ z-index: 1;
331
+ height: $custom-file-height;
332
+ padding: $custom-file-padding-y $custom-file-padding-x;
333
+ font-family: $custom-file-font-family;
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
+ }