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