viniBaxter-spa_landing 0.6.0 → 0.9

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