tabler-rubygem 0.1.1 → 0.1.2

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 (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
- }