tabler-rubygem 0.1.1 → 0.1.2

Sign up to get free protection for your applications and to get access to all the features.
Files changed (95) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +2 -0
  3. data/assets/stylesheets/_tabler.scss +1 -2
  4. data/assets/stylesheets/tabler/_cards.scss +2 -1
  5. data/assets/stylesheets/tabler/_carousel.scss +9 -0
  6. data/assets/stylesheets/tabler/_progress.scss +2 -2
  7. data/assets/stylesheets/tabler/forms/_custom-selectgroup.scss +2 -3
  8. data/lib/tabler/rubygem/version.rb +2 -2
  9. data/tabler.gemspec +0 -3
  10. data/tasks/updater/js.rb +1 -1
  11. data/tasks/updater/scss.rb +1 -22
  12. metadata +3 -119
  13. data/assets/stylesheets/_bootstrap-grid.scss +0 -32
  14. data/assets/stylesheets/_bootstrap-reboot.scss +0 -12
  15. data/assets/stylesheets/_bootstrap.scss +0 -42
  16. data/assets/stylesheets/bootstrap/_alert.scss +0 -51
  17. data/assets/stylesheets/bootstrap/_badge.scss +0 -47
  18. data/assets/stylesheets/bootstrap/_breadcrumb.scss +0 -38
  19. data/assets/stylesheets/bootstrap/_button-group.scss +0 -166
  20. data/assets/stylesheets/bootstrap/_buttons.scss +0 -143
  21. data/assets/stylesheets/bootstrap/_card.scss +0 -299
  22. data/assets/stylesheets/bootstrap/_carousel.scss +0 -235
  23. data/assets/stylesheets/bootstrap/_close.scss +0 -34
  24. data/assets/stylesheets/bootstrap/_code.scss +0 -56
  25. data/assets/stylesheets/bootstrap/_custom-forms.scss +0 -420
  26. data/assets/stylesheets/bootstrap/_dropdown.scss +0 -138
  27. data/assets/stylesheets/bootstrap/_forms.scss +0 -335
  28. data/assets/stylesheets/bootstrap/_functions.scss +0 -86
  29. data/assets/stylesheets/bootstrap/_grid.scss +0 -52
  30. data/assets/stylesheets/bootstrap/_images.scss +0 -42
  31. data/assets/stylesheets/bootstrap/_input-group.scss +0 -159
  32. data/assets/stylesheets/bootstrap/_jumbotron.scss +0 -16
  33. data/assets/stylesheets/bootstrap/_list-group.scss +0 -115
  34. data/assets/stylesheets/bootstrap/_media.scss +0 -8
  35. data/assets/stylesheets/bootstrap/_mixins.scss +0 -42
  36. data/assets/stylesheets/bootstrap/_modal.scss +0 -168
  37. data/assets/stylesheets/bootstrap/_nav.scss +0 -118
  38. data/assets/stylesheets/bootstrap/_navbar.scss +0 -311
  39. data/assets/stylesheets/bootstrap/_pagination.scss +0 -78
  40. data/assets/stylesheets/bootstrap/_popover.scss +0 -183
  41. data/assets/stylesheets/bootstrap/_print.scss +0 -124
  42. data/assets/stylesheets/bootstrap/_progress.scss +0 -34
  43. data/assets/stylesheets/bootstrap/_reboot.scss +0 -482
  44. data/assets/stylesheets/bootstrap/_root.scss +0 -19
  45. data/assets/stylesheets/bootstrap/_tables.scss +0 -188
  46. data/assets/stylesheets/bootstrap/_tooltip.scss +0 -115
  47. data/assets/stylesheets/bootstrap/_transitions.scss +0 -36
  48. data/assets/stylesheets/bootstrap/_type.scss +0 -125
  49. data/assets/stylesheets/bootstrap/_utilities.scss +0 -14
  50. data/assets/stylesheets/bootstrap/_variables.scss +0 -919
  51. data/assets/stylesheets/bootstrap/mixins/_alert.scss +0 -13
  52. data/assets/stylesheets/bootstrap/mixins/_background-variant.scss +0 -21
  53. data/assets/stylesheets/bootstrap/mixins/_badge.scss +0 -12
  54. data/assets/stylesheets/bootstrap/mixins/_border-radius.scss +0 -35
  55. data/assets/stylesheets/bootstrap/mixins/_box-shadow.scss +0 -5
  56. data/assets/stylesheets/bootstrap/mixins/_breakpoints.scss +0 -123
  57. data/assets/stylesheets/bootstrap/mixins/_buttons.scss +0 -109
  58. data/assets/stylesheets/bootstrap/mixins/_caret.scss +0 -65
  59. data/assets/stylesheets/bootstrap/mixins/_clearfix.scss +0 -7
  60. data/assets/stylesheets/bootstrap/mixins/_float.scss +0 -11
  61. data/assets/stylesheets/bootstrap/mixins/_forms.scss +0 -137
  62. data/assets/stylesheets/bootstrap/mixins/_gradients.scss +0 -45
  63. data/assets/stylesheets/bootstrap/mixins/_grid-framework.scss +0 -67
  64. data/assets/stylesheets/bootstrap/mixins/_grid.scss +0 -52
  65. data/assets/stylesheets/bootstrap/mixins/_hover.scss +0 -37
  66. data/assets/stylesheets/bootstrap/mixins/_image.scss +0 -36
  67. data/assets/stylesheets/bootstrap/mixins/_list-group.scss +0 -21
  68. data/assets/stylesheets/bootstrap/mixins/_lists.scss +0 -7
  69. data/assets/stylesheets/bootstrap/mixins/_nav-divider.scss +0 -10
  70. data/assets/stylesheets/bootstrap/mixins/_navbar-align.scss +0 -10
  71. data/assets/stylesheets/bootstrap/mixins/_pagination.scss +0 -22
  72. data/assets/stylesheets/bootstrap/mixins/_reset-text.scss +0 -17
  73. data/assets/stylesheets/bootstrap/mixins/_resize.scss +0 -6
  74. data/assets/stylesheets/bootstrap/mixins/_screen-reader.scss +0 -33
  75. data/assets/stylesheets/bootstrap/mixins/_size.scss +0 -6
  76. data/assets/stylesheets/bootstrap/mixins/_table-row.scss +0 -30
  77. data/assets/stylesheets/bootstrap/mixins/_text-emphasis.scss +0 -14
  78. data/assets/stylesheets/bootstrap/mixins/_text-hide.scss +0 -9
  79. data/assets/stylesheets/bootstrap/mixins/_text-truncate.scss +0 -8
  80. data/assets/stylesheets/bootstrap/mixins/_transition.scss +0 -9
  81. data/assets/stylesheets/bootstrap/mixins/_visibility.scss +0 -7
  82. data/assets/stylesheets/bootstrap/utilities/_align.scss +0 -8
  83. data/assets/stylesheets/bootstrap/utilities/_background.scss +0 -19
  84. data/assets/stylesheets/bootstrap/utilities/_borders.scss +0 -59
  85. data/assets/stylesheets/bootstrap/utilities/_clearfix.scss +0 -3
  86. data/assets/stylesheets/bootstrap/utilities/_display.scss +0 -38
  87. data/assets/stylesheets/bootstrap/utilities/_embed.scss +0 -52
  88. data/assets/stylesheets/bootstrap/utilities/_flex.scss +0 -47
  89. data/assets/stylesheets/bootstrap/utilities/_float.scss +0 -9
  90. data/assets/stylesheets/bootstrap/utilities/_position.scss +0 -37
  91. data/assets/stylesheets/bootstrap/utilities/_screenreaders.scss +0 -11
  92. data/assets/stylesheets/bootstrap/utilities/_sizing.scss +0 -12
  93. data/assets/stylesheets/bootstrap/utilities/_spacing.scss +0 -51
  94. data/assets/stylesheets/bootstrap/utilities/_text.scss +0 -52
  95. data/assets/stylesheets/bootstrap/utilities/_visibility.scss +0 -11
@@ -1,235 +0,0 @@
1
- // Notes on the classes:
2
- //
3
- // 1. The .carousel-item-left and .carousel-item-right is used to indicate where
4
- // the active slide is heading.
5
- // 2. .active.carousel-item is the current slide.
6
- // 3. .active.carousel-item-left and .active.carousel-item-right is the current
7
- // slide in it's in-transition state. Only one of these occur at a time.
8
- // 4. .carousel-item-next.carousel-item-left and .carousel-item-prev.carousel-item-right
9
- // is the upcoming slide in transition.
10
-
11
- .carousel {
12
- position: relative;
13
- }
14
-
15
- .carousel-inner {
16
- position: relative;
17
- width: 100%;
18
- overflow: hidden;
19
- }
20
-
21
- .carousel-item {
22
- position: relative;
23
- display: none;
24
- align-items: center;
25
- width: 100%;
26
- @include transition($carousel-transition);
27
- backface-visibility: hidden;
28
- perspective: 1000px;
29
- }
30
-
31
- .carousel-item.active,
32
- .carousel-item-next,
33
- .carousel-item-prev {
34
- display: block;
35
- }
36
-
37
- .carousel-item-next,
38
- .carousel-item-prev {
39
- position: absolute;
40
- top: 0;
41
- }
42
-
43
- .carousel-item-next.carousel-item-left,
44
- .carousel-item-prev.carousel-item-right {
45
- transform: translateX(0);
46
-
47
- @supports (transform-style: preserve-3d) {
48
- transform: translate3d(0, 0, 0);
49
- }
50
- }
51
-
52
- .carousel-item-next,
53
- .active.carousel-item-right {
54
- transform: translateX(100%);
55
-
56
- @supports (transform-style: preserve-3d) {
57
- transform: translate3d(100%, 0, 0);
58
- }
59
- }
60
-
61
- .carousel-item-prev,
62
- .active.carousel-item-left {
63
- transform: translateX(-100%);
64
-
65
- @supports (transform-style: preserve-3d) {
66
- transform: translate3d(-100%, 0, 0);
67
- }
68
- }
69
-
70
-
71
- //
72
- // Alternate transitions
73
- //
74
-
75
- .carousel-fade {
76
- .carousel-item {
77
- opacity: 0;
78
- transition-duration: .6s;
79
- transition-property: opacity;
80
- }
81
-
82
- .carousel-item.active,
83
- .carousel-item-next.carousel-item-left,
84
- .carousel-item-prev.carousel-item-right {
85
- opacity: 1;
86
- }
87
-
88
- .active.carousel-item-left,
89
- .active.carousel-item-right {
90
- opacity: 0;
91
- }
92
-
93
- .carousel-item-next,
94
- .carousel-item-prev,
95
- .carousel-item.active,
96
- .active.carousel-item-left,
97
- .active.carousel-item-prev {
98
- transform: translateX(0);
99
-
100
- @supports (transform-style: preserve-3d) {
101
- transform: translate3d(0, 0, 0);
102
- }
103
- }
104
- }
105
-
106
-
107
- //
108
- // Left/right controls for nav
109
- //
110
-
111
- .carousel-control-prev,
112
- .carousel-control-next {
113
- position: absolute;
114
- top: 0;
115
- bottom: 0;
116
- // Use flex for alignment (1-3)
117
- display: flex; // 1. allow flex styles
118
- align-items: center; // 2. vertically center contents
119
- justify-content: center; // 3. horizontally center contents
120
- width: $carousel-control-width;
121
- color: $carousel-control-color;
122
- text-align: center;
123
- opacity: $carousel-control-opacity;
124
- // We can't have a transition here because WebKit cancels the carousel
125
- // animation if you trip this while in the middle of another animation.
126
-
127
- // Hover/focus state
128
- @include hover-focus {
129
- color: $carousel-control-color;
130
- text-decoration: none;
131
- outline: 0;
132
- opacity: .9;
133
- }
134
- }
135
- .carousel-control-prev {
136
- left: 0;
137
- @if $enable-gradients {
138
- background: linear-gradient(90deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, .001));
139
- }
140
- }
141
- .carousel-control-next {
142
- right: 0;
143
- @if $enable-gradients {
144
- background: linear-gradient(270deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, .001));
145
- }
146
- }
147
-
148
- // Icons for within
149
- .carousel-control-prev-icon,
150
- .carousel-control-next-icon {
151
- display: inline-block;
152
- width: $carousel-control-icon-width;
153
- height: $carousel-control-icon-width;
154
- background: transparent no-repeat center center;
155
- background-size: 100% 100%;
156
- }
157
- .carousel-control-prev-icon {
158
- background-image: $carousel-control-prev-icon-bg;
159
- }
160
- .carousel-control-next-icon {
161
- background-image: $carousel-control-next-icon-bg;
162
- }
163
-
164
-
165
- // Optional indicator pips
166
- //
167
- // Add an ordered list with the following class and add a list item for each
168
- // slide your carousel holds.
169
-
170
- .carousel-indicators {
171
- position: absolute;
172
- right: 0;
173
- bottom: 10px;
174
- left: 0;
175
- z-index: 15;
176
- display: flex;
177
- justify-content: center;
178
- padding-left: 0; // override <ol> default
179
- // Use the .carousel-control's width as margin so we don't overlay those
180
- margin-right: $carousel-control-width;
181
- margin-left: $carousel-control-width;
182
- list-style: none;
183
-
184
- li {
185
- position: relative;
186
- flex: 0 1 auto;
187
- width: $carousel-indicator-width;
188
- height: $carousel-indicator-height;
189
- margin-right: $carousel-indicator-spacer;
190
- margin-left: $carousel-indicator-spacer;
191
- text-indent: -999px;
192
- background-color: rgba($carousel-indicator-active-bg, .5);
193
-
194
- // Use pseudo classes to increase the hit area by 10px on top and bottom.
195
- &::before {
196
- position: absolute;
197
- top: -10px;
198
- left: 0;
199
- display: inline-block;
200
- width: 100%;
201
- height: 10px;
202
- content: "";
203
- }
204
- &::after {
205
- position: absolute;
206
- bottom: -10px;
207
- left: 0;
208
- display: inline-block;
209
- width: 100%;
210
- height: 10px;
211
- content: "";
212
- }
213
- }
214
-
215
- .active {
216
- background-color: $carousel-indicator-active-bg;
217
- }
218
- }
219
-
220
-
221
- // Optional captions
222
- //
223
- //
224
-
225
- .carousel-caption {
226
- position: absolute;
227
- right: ((100% - $carousel-caption-width) / 2);
228
- bottom: 20px;
229
- left: ((100% - $carousel-caption-width) / 2);
230
- z-index: 10;
231
- padding-top: 20px;
232
- padding-bottom: 20px;
233
- color: $carousel-caption-color;
234
- text-align: center;
235
- }
@@ -1,34 +0,0 @@
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
- @include hover-focus {
11
- color: $close-color;
12
- text-decoration: none;
13
- opacity: .75;
14
- }
15
-
16
- // Opinionated: add "hand" cursor to non-disabled .close elements
17
- &:not(:disabled):not(.disabled) {
18
- cursor: pointer;
19
- }
20
- }
21
-
22
- // Additional properties for button version
23
- // iOS requires the button element instead of an anchor tag.
24
- // If you want the anchor version, it requires `href="#"`.
25
- // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
26
-
27
- // stylelint-disable property-no-vendor-prefix, selector-no-qualifying-type
28
- button.close {
29
- padding: 0;
30
- background-color: transparent;
31
- border: 0;
32
- -webkit-appearance: none;
33
- }
34
- // stylelint-enable
@@ -1,56 +0,0 @@
1
- // Inline and block code styles
2
- code,
3
- kbd,
4
- pre,
5
- samp {
6
- font-family: $font-family-monospace;
7
- }
8
-
9
- // Inline code
10
- code {
11
- font-size: $code-font-size;
12
- color: $code-color;
13
- word-break: break-word;
14
-
15
- // Streamline the style when inside anchors to avoid broken underline and more
16
- a > & {
17
- color: inherit;
18
- }
19
- }
20
-
21
- // User input typically entered via keyboard
22
- kbd {
23
- padding: $kbd-padding-y $kbd-padding-x;
24
- font-size: $kbd-font-size;
25
- color: $kbd-color;
26
- background-color: $kbd-bg;
27
- @include border-radius($border-radius-sm);
28
- @include box-shadow($kbd-box-shadow);
29
-
30
- kbd {
31
- padding: 0;
32
- font-size: 100%;
33
- font-weight: $nested-kbd-font-weight;
34
- @include box-shadow(none);
35
- }
36
- }
37
-
38
- // Blocks of code
39
- pre {
40
- display: block;
41
- font-size: $code-font-size;
42
- color: $pre-color;
43
-
44
- // Account for some code outputs that place code tags in pre tags
45
- code {
46
- font-size: inherit;
47
- color: inherit;
48
- word-break: normal;
49
- }
50
- }
51
-
52
- // Enable scrollable blocks of code
53
- .pre-scrollable {
54
- max-height: $pre-scrollable-max-height;
55
- overflow-y: scroll;
56
- }
@@ -1,420 +0,0 @@
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: (1rem * $line-height-base);
14
- padding-left: $custom-control-gutter;
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
- @include gradient-bg($custom-control-indicator-checked-bg);
30
- @include box-shadow($custom-control-indicator-checked-box-shadow);
31
- }
32
-
33
- &:focus ~ .custom-control-label::before {
34
- // the mixin is not used here to make sure there is feedback
35
- box-shadow: $custom-control-indicator-focus-box-shadow;
36
- }
37
-
38
- &:active ~ .custom-control-label::before {
39
- color: $custom-control-indicator-active-color;
40
- background-color: $custom-control-indicator-active-bg;
41
- @include box-shadow($custom-control-indicator-active-box-shadow);
42
- }
43
-
44
- &:disabled {
45
- ~ .custom-control-label {
46
- color: $custom-control-label-disabled-color;
47
-
48
- &::before {
49
- background-color: $custom-control-indicator-disabled-bg;
50
- }
51
- }
52
- }
53
- }
54
-
55
- // Custom control indicators
56
- //
57
- // Build the custom controls out of psuedo-elements.
58
-
59
- .custom-control-label {
60
- margin-bottom: 0;
61
-
62
- // Background-color and (when enabled) gradient
63
- &::before {
64
- position: absolute;
65
- top: (($line-height-base - $custom-control-indicator-size) / 2);
66
- left: 0;
67
- display: block;
68
- width: $custom-control-indicator-size;
69
- height: $custom-control-indicator-size;
70
- pointer-events: none;
71
- content: "";
72
- user-select: none;
73
- background-color: $custom-control-indicator-bg;
74
- @include box-shadow($custom-control-indicator-box-shadow);
75
- }
76
-
77
- // Foreground (icon)
78
- &::after {
79
- position: absolute;
80
- top: (($line-height-base - $custom-control-indicator-size) / 2);
81
- left: 0;
82
- display: block;
83
- width: $custom-control-indicator-size;
84
- height: $custom-control-indicator-size;
85
- content: "";
86
- background-repeat: no-repeat;
87
- background-position: center center;
88
- background-size: $custom-control-indicator-bg-size;
89
- }
90
- }
91
-
92
-
93
- // Checkboxes
94
- //
95
- // Tweak just a few things for checkboxes.
96
-
97
- .custom-checkbox {
98
- .custom-control-label::before {
99
- @include border-radius($custom-checkbox-indicator-border-radius);
100
- }
101
-
102
- .custom-control-input:checked ~ .custom-control-label {
103
- &::before {
104
- @include gradient-bg($custom-control-indicator-checked-bg);
105
- }
106
- &::after {
107
- background-image: $custom-checkbox-indicator-icon-checked;
108
- }
109
- }
110
-
111
- .custom-control-input:indeterminate ~ .custom-control-label {
112
- &::before {
113
- @include gradient-bg($custom-checkbox-indicator-indeterminate-bg);
114
- @include box-shadow($custom-checkbox-indicator-indeterminate-box-shadow);
115
- }
116
- &::after {
117
- background-image: $custom-checkbox-indicator-icon-indeterminate;
118
- }
119
- }
120
-
121
- .custom-control-input:disabled {
122
- &:checked ~ .custom-control-label::before {
123
- background-color: $custom-control-indicator-checked-disabled-bg;
124
- }
125
- &:indeterminate ~ .custom-control-label::before {
126
- background-color: $custom-control-indicator-checked-disabled-bg;
127
- }
128
- }
129
- }
130
-
131
- // Radios
132
- //
133
- // Tweak just a few things for radios.
134
-
135
- .custom-radio {
136
- .custom-control-label::before {
137
- border-radius: $custom-radio-indicator-border-radius;
138
- }
139
-
140
- .custom-control-input:checked ~ .custom-control-label {
141
- &::before {
142
- @include gradient-bg($custom-control-indicator-checked-bg);
143
- }
144
- &::after {
145
- background-image: $custom-radio-indicator-icon-checked;
146
- }
147
- }
148
-
149
- .custom-control-input:disabled {
150
- &:checked ~ .custom-control-label::before {
151
- background-color: $custom-control-indicator-checked-disabled-bg;
152
- }
153
- }
154
- }
155
-
156
-
157
- // Select
158
- //
159
- // Replaces the browser default select with a custom one, mostly pulled from
160
- // http://primercss.io.
161
- //
162
-
163
- .custom-select {
164
- display: inline-block;
165
- width: 100%;
166
- height: $custom-select-height;
167
- padding: $custom-select-padding-y ($custom-select-padding-x + $custom-select-indicator-padding) $custom-select-padding-y $custom-select-padding-x;
168
- line-height: $custom-select-line-height;
169
- color: $custom-select-color;
170
- vertical-align: middle;
171
- background: $custom-select-bg $custom-select-indicator no-repeat right $custom-select-padding-x center;
172
- background-size: $custom-select-bg-size;
173
- border: $custom-select-border-width solid $custom-select-border-color;
174
- @if $enable-rounded {
175
- border-radius: $custom-select-border-radius;
176
- } @else {
177
- border-radius: 0;
178
- }
179
- appearance: none;
180
-
181
- &:focus {
182
- border-color: $custom-select-focus-border-color;
183
- outline: 0;
184
- box-shadow: $custom-select-focus-box-shadow;
185
-
186
- &::-ms-value {
187
- // For visual consistency with other platforms/browsers,
188
- // suppress the default white text on blue background highlight given to
189
- // the selected option text when the (still closed) <select> receives focus
190
- // in IE and (under certain conditions) Edge.
191
- // See https://github.com/twbs/bootstrap/issues/19398.
192
- color: $input-color;
193
- background-color: $input-bg;
194
- }
195
- }
196
-
197
- &[multiple],
198
- &[size]:not([size="1"]) {
199
- height: auto;
200
- padding-right: $custom-select-padding-x;
201
- background-image: none;
202
- }
203
-
204
- &:disabled {
205
- color: $custom-select-disabled-color;
206
- background-color: $custom-select-disabled-bg;
207
- }
208
-
209
- // Hides the default caret in IE11
210
- &::-ms-expand {
211
- opacity: 0;
212
- }
213
- }
214
-
215
- .custom-select-sm {
216
- height: $custom-select-height-sm;
217
- padding-top: $custom-select-padding-y;
218
- padding-bottom: $custom-select-padding-y;
219
- font-size: $custom-select-font-size-sm;
220
- }
221
-
222
- .custom-select-lg {
223
- height: $custom-select-height-lg;
224
- padding-top: $custom-select-padding-y;
225
- padding-bottom: $custom-select-padding-y;
226
- font-size: $custom-select-font-size-lg;
227
- }
228
-
229
-
230
- // File
231
- //
232
- // Custom file input.
233
-
234
- .custom-file {
235
- position: relative;
236
- display: inline-block;
237
- width: 100%;
238
- height: $custom-file-height;
239
- margin-bottom: 0;
240
- }
241
-
242
- .custom-file-input {
243
- position: relative;
244
- z-index: 2;
245
- width: 100%;
246
- height: $custom-file-height;
247
- margin: 0;
248
- opacity: 0;
249
-
250
- &:focus ~ .custom-file-control {
251
- border-color: $custom-file-focus-border-color;
252
- box-shadow: $custom-file-focus-box-shadow;
253
-
254
- &::before {
255
- border-color: $custom-file-focus-border-color;
256
- }
257
- }
258
-
259
- @each $lang, $value in $custom-file-text {
260
- &:lang(#{$lang}) ~ .custom-file-label::after {
261
- content: $value;
262
- }
263
- }
264
- }
265
-
266
- .custom-file-label {
267
- position: absolute;
268
- top: 0;
269
- right: 0;
270
- left: 0;
271
- z-index: 1;
272
- height: $custom-file-height;
273
- padding: $custom-file-padding-y $custom-file-padding-x;
274
- line-height: $custom-file-line-height;
275
- color: $custom-file-color;
276
- background-color: $custom-file-bg;
277
- border: $custom-file-border-width solid $custom-file-border-color;
278
- @include border-radius($custom-file-border-radius);
279
- @include box-shadow($custom-file-box-shadow);
280
-
281
- &::after {
282
- position: absolute;
283
- top: 0;
284
- right: 0;
285
- bottom: 0;
286
- z-index: 3;
287
- display: block;
288
- height: calc(#{$custom-file-height} - #{$custom-file-border-width} * 2);
289
- padding: $custom-file-padding-y $custom-file-padding-x;
290
- line-height: $custom-file-line-height;
291
- color: $custom-file-button-color;
292
- content: "Browse";
293
- @include gradient-bg($custom-file-button-bg);
294
- border-left: $custom-file-border-width solid $custom-file-border-color;
295
- @include border-radius(0 $custom-file-border-radius $custom-file-border-radius 0);
296
- }
297
- }
298
-
299
- // Range
300
- //
301
- // Style range inputs the same across browsers. Vendor-specific rules for psuedo
302
- // elements cannot be mixed. As such, there are no shared styles for focus or
303
- // active states on prefixed selectors.
304
-
305
- .custom-range {
306
- width: 100%;
307
- padding-left: 0; // Firefox specific
308
- background-color: transparent;
309
- appearance: none;
310
-
311
- &:focus {
312
- outline: none;
313
- }
314
-
315
- &::-moz-focus-outer {
316
- border: 0;
317
- }
318
-
319
- &::-webkit-slider-thumb {
320
- width: $custom-range-thumb-width;
321
- height: $custom-range-thumb-height;
322
- margin-top: -($custom-range-thumb-width * .25); // Webkit specific?
323
- @include gradient-bg($custom-range-thumb-bg);
324
- border: $custom-range-thumb-border;
325
- @include border-radius($custom-range-thumb-border-radius);
326
- @include box-shadow($custom-range-thumb-box-shadow);
327
- appearance: none;
328
-
329
- &:focus {
330
- outline: none;
331
- box-shadow: $custom-range-thumb-focus-box-shadow; // No mixin for focus accessibility
332
- }
333
-
334
- &:active {
335
- @include gradient-bg($custom-range-thumb-active-bg);
336
- }
337
- }
338
-
339
- &::-webkit-slider-runnable-track {
340
- width: $custom-range-track-width;
341
- height: $custom-range-track-height;
342
- color: transparent; // Why?
343
- cursor: $custom-range-track-cursor;
344
- background-color: $custom-range-track-bg;
345
- border-color: transparent;
346
- @include border-radius($custom-range-track-border-radius);
347
- @include box-shadow($custom-range-track-box-shadow);
348
- }
349
-
350
- &::-moz-range-thumb {
351
- width: $custom-range-thumb-width;
352
- height: $custom-range-thumb-height;
353
- @include gradient-bg($custom-range-thumb-bg);
354
- border: $custom-range-thumb-border;
355
- @include border-radius($custom-range-thumb-border-radius);
356
- @include box-shadow($custom-range-thumb-box-shadow);
357
- appearance: none;
358
-
359
- &:focus {
360
- outline: none;
361
- box-shadow: $custom-range-thumb-focus-box-shadow; // No mixin for focus accessibility
362
- }
363
-
364
- &:active {
365
- @include gradient-bg($custom-range-thumb-active-bg);
366
- }
367
- }
368
-
369
- &::-moz-range-track {
370
- width: $custom-range-track-width;
371
- height: $custom-range-track-height;
372
- color: transparent;
373
- cursor: $custom-range-track-cursor;
374
- background-color: $custom-range-track-bg;
375
- border-color: transparent; // Firefox specific?
376
- @include border-radius($custom-range-track-border-radius);
377
- @include box-shadow($custom-range-track-box-shadow);
378
- }
379
-
380
- &::-ms-thumb {
381
- width: $custom-range-thumb-width;
382
- height: $custom-range-thumb-height;
383
- @include gradient-bg($custom-range-thumb-bg);
384
- border: $custom-range-thumb-border;
385
- @include border-radius($custom-range-thumb-border-radius);
386
- @include box-shadow($custom-range-thumb-box-shadow);
387
- appearance: none;
388
-
389
- &:focus {
390
- outline: none;
391
- box-shadow: $custom-range-thumb-focus-box-shadow; // No mixin for focus accessibility
392
- }
393
-
394
- &:active {
395
- @include gradient-bg($custom-range-thumb-active-bg);
396
- }
397
- }
398
-
399
- &::-ms-track {
400
- width: $custom-range-track-width;
401
- height: $custom-range-track-height;
402
- color: transparent;
403
- cursor: $custom-range-track-cursor;
404
- background-color: transparent;
405
- border-color: transparent;
406
- border-width: ($custom-range-thumb-height * .5);
407
- @include box-shadow($custom-range-track-box-shadow);
408
- }
409
-
410
- &::-ms-fill-lower {
411
- background-color: $custom-range-track-bg;
412
- @include border-radius($custom-range-track-border-radius);
413
- }
414
-
415
- &::-ms-fill-upper {
416
- margin-right: 15px; // arbitrary?
417
- background-color: $custom-range-track-bg;
418
- @include border-radius($custom-range-track-border-radius);
419
- }
420
- }