materialize-sass 0.97.0 → 1.0.0.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (153) hide show
  1. checksums.yaml +5 -5
  2. data/.gitattributes +1 -0
  3. data/.gitignore +3 -0
  4. data/README.md +48 -10
  5. data/Rakefile +129 -1
  6. data/assets/javascripts/materialize/anime.min.js +417 -0
  7. data/assets/javascripts/materialize/autocomplete.js +504 -0
  8. data/assets/javascripts/materialize/buttons.js +409 -0
  9. data/assets/javascripts/materialize/cards.js +34 -0
  10. data/assets/javascripts/materialize/carousel.js +797 -0
  11. data/assets/javascripts/materialize/cash.js +990 -0
  12. data/assets/javascripts/materialize/characterCounter.js +180 -0
  13. data/assets/javascripts/materialize/chips.js +564 -0
  14. data/assets/javascripts/materialize/collapsible.js +337 -0
  15. data/assets/javascripts/materialize/component.js +57 -0
  16. data/assets/javascripts/materialize/datepicker.js +935 -0
  17. data/assets/javascripts/materialize/dropdown.js +659 -0
  18. data/assets/javascripts/materialize/extras/nouislider.js +2147 -0
  19. data/assets/javascripts/materialize/extras/nouislider.min.js +1 -0
  20. data/assets/javascripts/materialize/forms.js +244 -0
  21. data/assets/javascripts/materialize/global.js +408 -0
  22. data/assets/javascripts/materialize/materialbox.js +513 -0
  23. data/assets/javascripts/materialize/modal.js +449 -0
  24. data/assets/javascripts/materialize/parallax.js +173 -0
  25. data/assets/javascripts/materialize/pushpin.js +179 -0
  26. data/assets/javascripts/materialize/range.js +310 -0
  27. data/assets/javascripts/materialize/scrollspy.js +328 -0
  28. data/assets/javascripts/materialize/select.js +497 -0
  29. data/assets/javascripts/materialize/sidenav.js +655 -0
  30. data/assets/javascripts/materialize/slider.js +424 -0
  31. data/assets/javascripts/materialize/tabs.js +476 -0
  32. data/assets/javascripts/materialize/tapTarget.js +364 -0
  33. data/assets/javascripts/materialize/timepicker.js +647 -0
  34. data/assets/javascripts/materialize/toasts.js +355 -0
  35. data/assets/javascripts/materialize/tooltip.js +351 -0
  36. data/{app/assets → assets}/javascripts/materialize/waves.js +42 -47
  37. data/assets/javascripts/materialize-sprockets.js +29 -0
  38. data/assets/javascripts/materialize.js +12374 -0
  39. data/assets/stylesheets/materialize/components/_badges.scss +55 -0
  40. data/assets/stylesheets/materialize/components/_buttons.scss +322 -0
  41. data/{app/assets → assets}/stylesheets/materialize/components/_cards.scss +72 -29
  42. data/assets/stylesheets/materialize/components/_carousel.scss +90 -0
  43. data/assets/stylesheets/materialize/components/_chips.scss +90 -0
  44. data/{app/assets → assets}/stylesheets/materialize/components/_collapsible.scss +23 -17
  45. data/assets/stylesheets/materialize/components/_color-classes.scss +32 -0
  46. data/{app/assets/stylesheets/materialize/components/_color.scss → assets/stylesheets/materialize/components/_color-variables.scss} +22 -64
  47. data/assets/stylesheets/materialize/components/_datepicker.scss +191 -0
  48. data/assets/stylesheets/materialize/components/_dropdown.scss +85 -0
  49. data/{app/assets → assets}/stylesheets/materialize/components/_global.scss +197 -144
  50. data/{app/assets → assets}/stylesheets/materialize/components/_grid.scss +57 -18
  51. data/assets/stylesheets/materialize/components/_icons-material-design.scss +5 -0
  52. data/{app/assets → assets}/stylesheets/materialize/components/_materialbox.scss +15 -13
  53. data/{app/assets → assets}/stylesheets/materialize/components/_modal.scss +18 -14
  54. data/{app/assets → assets}/stylesheets/materialize/components/_navbar.scss +89 -25
  55. data/assets/stylesheets/materialize/components/_normalize.scss +447 -0
  56. data/{app/assets → assets}/stylesheets/materialize/components/_preloader.scss +5 -3
  57. data/assets/stylesheets/materialize/components/_pulse.scss +34 -0
  58. data/assets/stylesheets/materialize/components/_sidenav.scss +208 -0
  59. data/{app/assets → assets}/stylesheets/materialize/components/_slider.scss +2 -2
  60. data/{app/assets → assets}/stylesheets/materialize/components/_table_of_contents.scss +5 -5
  61. data/assets/stylesheets/materialize/components/_tabs.scss +99 -0
  62. data/assets/stylesheets/materialize/components/_tapTarget.scss +103 -0
  63. data/assets/stylesheets/materialize/components/_timepicker.scss +183 -0
  64. data/{app/assets → assets}/stylesheets/materialize/components/_toast.scss +17 -22
  65. data/assets/stylesheets/materialize/components/_tooltip.scss +32 -0
  66. data/assets/stylesheets/materialize/components/_transitions.scss +13 -0
  67. data/{app/assets → assets}/stylesheets/materialize/components/_typography.scss +11 -9
  68. data/assets/stylesheets/materialize/components/_variables.scss +349 -0
  69. data/assets/stylesheets/materialize/components/_waves.scss +114 -0
  70. data/assets/stylesheets/materialize/components/forms/_checkboxes.scss +200 -0
  71. data/assets/stylesheets/materialize/components/forms/_file-input.scss +44 -0
  72. data/assets/stylesheets/materialize/components/forms/_forms.scss +22 -0
  73. data/assets/stylesheets/materialize/components/forms/_input-fields.scss +354 -0
  74. data/assets/stylesheets/materialize/components/forms/_radio-buttons.scss +115 -0
  75. data/assets/stylesheets/materialize/components/forms/_range.scss +161 -0
  76. data/assets/stylesheets/materialize/components/forms/_select.scss +190 -0
  77. data/assets/stylesheets/materialize/components/forms/_switches.scss +89 -0
  78. data/assets/stylesheets/materialize/extras/nouislider.css +406 -0
  79. data/{app/assets → assets}/stylesheets/materialize.scss +13 -10
  80. data/lib/materialize-sass/engine.rb +11 -6
  81. data/lib/materialize-sass/helpers.rb +38 -0
  82. data/lib/materialize-sass/version.rb +1 -1
  83. data/lib/materialize-sass.rb +13 -28
  84. data/materialize-sass.gemspec +5 -5
  85. metadata +97 -105
  86. data/app/assets/fonts/material-design-icons/LICENSE.txt +0 -428
  87. data/app/assets/fonts/material-design-icons/Material-Design-Icons.eot +0 -0
  88. data/app/assets/fonts/material-design-icons/Material-Design-Icons.svg +0 -769
  89. data/app/assets/fonts/material-design-icons/Material-Design-Icons.ttf +0 -0
  90. data/app/assets/fonts/material-design-icons/Material-Design-Icons.woff +0 -0
  91. data/app/assets/fonts/material-design-icons/Material-Design-Icons.woff2 +0 -0
  92. data/app/assets/fonts/roboto/Roboto-Bold.ttf +0 -0
  93. data/app/assets/fonts/roboto/Roboto-Bold.woff +0 -0
  94. data/app/assets/fonts/roboto/Roboto-Bold.woff2 +0 -0
  95. data/app/assets/fonts/roboto/Roboto-Light.ttf +0 -0
  96. data/app/assets/fonts/roboto/Roboto-Light.woff +0 -0
  97. data/app/assets/fonts/roboto/Roboto-Light.woff2 +0 -0
  98. data/app/assets/fonts/roboto/Roboto-Medium.ttf +0 -0
  99. data/app/assets/fonts/roboto/Roboto-Medium.woff +0 -0
  100. data/app/assets/fonts/roboto/Roboto-Medium.woff2 +0 -0
  101. data/app/assets/fonts/roboto/Roboto-Regular.ttf +0 -0
  102. data/app/assets/fonts/roboto/Roboto-Regular.woff +0 -0
  103. data/app/assets/fonts/roboto/Roboto-Regular.woff2 +0 -0
  104. data/app/assets/fonts/roboto/Roboto-Thin.ttf +0 -0
  105. data/app/assets/fonts/roboto/Roboto-Thin.woff +0 -0
  106. data/app/assets/fonts/roboto/Roboto-Thin.woff2 +0 -0
  107. data/app/assets/javascripts/materialize/animation.js +0 -9
  108. data/app/assets/javascripts/materialize/buttons.js +0 -61
  109. data/app/assets/javascripts/materialize/cards.js +0 -27
  110. data/app/assets/javascripts/materialize/character_counter.js +0 -59
  111. data/app/assets/javascripts/materialize/collapsible.js +0 -139
  112. data/app/assets/javascripts/materialize/date_picker/picker.date.js +0 -1430
  113. data/app/assets/javascripts/materialize/date_picker/picker.js +0 -1123
  114. data/app/assets/javascripts/materialize/dropdown.js +0 -178
  115. data/app/assets/javascripts/materialize/forms.js +0 -456
  116. data/app/assets/javascripts/materialize/global.js +0 -36
  117. data/app/assets/javascripts/materialize/hammer.min.js +0 -1
  118. data/app/assets/javascripts/materialize/init.js +0 -136
  119. data/app/assets/javascripts/materialize/jquery.easing.1.3.js +0 -205
  120. data/app/assets/javascripts/materialize/jquery.hammer.js +0 -33
  121. data/app/assets/javascripts/materialize/jquery.timeago.min.js +0 -1
  122. data/app/assets/javascripts/materialize/leanModal.js +0 -178
  123. data/app/assets/javascripts/materialize/materialbox.js +0 -249
  124. data/app/assets/javascripts/materialize/parallax.js +0 -58
  125. data/app/assets/javascripts/materialize/prism.js +0 -8
  126. data/app/assets/javascripts/materialize/pushpin.js +0 -62
  127. data/app/assets/javascripts/materialize/scrollFire.js +0 -44
  128. data/app/assets/javascripts/materialize/scrollspy.js +0 -284
  129. data/app/assets/javascripts/materialize/sideNav.js +0 -312
  130. data/app/assets/javascripts/materialize/slider.js +0 -301
  131. data/app/assets/javascripts/materialize/tabs.js +0 -136
  132. data/app/assets/javascripts/materialize/toasts.js +0 -125
  133. data/app/assets/javascripts/materialize/tooltip.js +0 -166
  134. data/app/assets/javascripts/materialize/transitions.js +0 -154
  135. data/app/assets/javascripts/materialize/velocity.min.js +0 -4
  136. data/app/assets/javascripts/materialize-sprockets.js +0 -27
  137. data/app/assets/javascripts/materialize.js +0 -6159
  138. data/app/assets/stylesheets/materialize/components/_buttons.scss +0 -157
  139. data/app/assets/stylesheets/materialize/components/_dropdown.scss +0 -40
  140. data/app/assets/stylesheets/materialize/components/_form.scss +0 -886
  141. data/app/assets/stylesheets/materialize/components/_icons-material-design.scss +0 -3257
  142. data/app/assets/stylesheets/materialize/components/_mixins.scss +0 -5
  143. data/app/assets/stylesheets/materialize/components/_normalize.scss +0 -427
  144. data/app/assets/stylesheets/materialize/components/_prefixer.scss +0 -376
  145. data/app/assets/stylesheets/materialize/components/_roboto.scss +0 -38
  146. data/app/assets/stylesheets/materialize/components/_sideNav.scss +0 -111
  147. data/app/assets/stylesheets/materialize/components/_tabs.scss +0 -47
  148. data/app/assets/stylesheets/materialize/components/_tooltip.scss +0 -34
  149. data/app/assets/stylesheets/materialize/components/_variables.scss +0 -152
  150. data/app/assets/stylesheets/materialize/components/_waves.scss +0 -167
  151. data/app/assets/stylesheets/materialize/components/date_picker/_default.date.scss +0 -435
  152. data/app/assets/stylesheets/materialize/components/date_picker/_default.scss +0 -201
  153. data/app/assets/stylesheets/materialize/components/date_picker/_default.time.scss +0 -125
@@ -0,0 +1,22 @@
1
+ // Remove Focus Boxes
2
+ select:focus {
3
+ outline: $select-focus;
4
+ }
5
+
6
+ button:focus {
7
+ outline: none;
8
+ background-color: $button-background-focus;
9
+ }
10
+
11
+ label {
12
+ font-size: $label-font-size;
13
+ color: $input-border-color;
14
+ }
15
+
16
+ @import 'input-fields';
17
+ @import 'radio-buttons';
18
+ @import 'checkboxes';
19
+ @import 'switches';
20
+ @import 'select';
21
+ @import 'file-input';
22
+ @import 'range';
@@ -0,0 +1,354 @@
1
+ /* Text Inputs + Textarea
2
+ ========================================================================== */
3
+
4
+ /* Style Placeholders */
5
+
6
+ ::placeholder {
7
+ color: $placeholder-text-color;
8
+ }
9
+
10
+ /* Text inputs */
11
+
12
+ input:not([type]),
13
+ input[type=text]:not(.browser-default),
14
+ input[type=password]:not(.browser-default),
15
+ input[type=email]:not(.browser-default),
16
+ input[type=url]:not(.browser-default),
17
+ input[type=time]:not(.browser-default),
18
+ input[type=date]:not(.browser-default),
19
+ input[type=datetime]:not(.browser-default),
20
+ input[type=datetime-local]:not(.browser-default),
21
+ input[type=tel]:not(.browser-default),
22
+ input[type=number]:not(.browser-default),
23
+ input[type=search]:not(.browser-default),
24
+ textarea.materialize-textarea {
25
+
26
+ // General Styles
27
+ background-color: transparent;
28
+ border: none;
29
+ border-bottom: $input-border;
30
+ border-radius: 0;
31
+ outline: none;
32
+ height: $input-height;
33
+ width: 100%;
34
+ font-size: $input-font-size;
35
+ margin: $input-margin;
36
+ padding: $input-padding;
37
+ box-shadow: none;
38
+ box-sizing: content-box;
39
+ transition: box-shadow .3s, border .3s;
40
+
41
+ // Disabled input style
42
+ &:disabled,
43
+ &[readonly="readonly"] {
44
+ color: $input-disabled-color;
45
+ border-bottom: $input-disabled-border;
46
+ }
47
+
48
+ // Disabled label style
49
+ &:disabled+label,
50
+ &[readonly="readonly"]+label {
51
+ color: $input-disabled-color;
52
+ }
53
+
54
+ // Focused input style
55
+ &:focus:not([readonly]) {
56
+ border-bottom: 1px solid $input-focus-color;
57
+ box-shadow: 0 1px 0 0 $input-focus-color;
58
+ }
59
+
60
+ // Focused label style
61
+ &:focus:not([readonly])+label {
62
+ color: $input-focus-color;
63
+ }
64
+
65
+ // Hide helper text on data message
66
+ &.valid ~ .helper-text[data-success],
67
+ &:focus.valid ~ .helper-text[data-success],
68
+ &.invalid ~ .helper-text[data-error],
69
+ &:focus.invalid ~ .helper-text[data-error] {
70
+ @extend %hidden-text;
71
+ }
72
+
73
+ // Valid Input Style
74
+ &.valid,
75
+ &:focus.valid {
76
+ @extend %valid-input-style;
77
+ }
78
+
79
+ // Custom Success Message
80
+ &.valid ~ .helper-text:after,
81
+ &:focus.valid ~ .helper-text:after {
82
+ @extend %custom-success-message;
83
+ }
84
+ &:focus.valid ~ label {
85
+ color: $input-success-color;
86
+ }
87
+
88
+ // Invalid Input Style
89
+ &.invalid,
90
+ &:focus.invalid {
91
+ @extend %invalid-input-style;
92
+ }
93
+
94
+ // Custom Error message
95
+ &.invalid ~ .helper-text:after,
96
+ &:focus.invalid ~ .helper-text:after {
97
+ @extend %custom-error-message;
98
+ }
99
+ &:focus.invalid ~ label {
100
+ color: $input-error-color;
101
+ }
102
+
103
+ // Full width label when using validate for error messages
104
+ &.validate + label {
105
+ width: 100%;
106
+ }
107
+
108
+ // Form Message Shared Styles
109
+ & + label:after {
110
+ @extend %input-after-style;
111
+ }
112
+ }
113
+
114
+
115
+ /* Validation Sass Placeholders */
116
+ %valid-input-style {
117
+ border-bottom: 1px solid $input-success-color;
118
+ box-shadow: 0 1px 0 0 $input-success-color;
119
+ }
120
+ %invalid-input-style {
121
+ border-bottom: $input-invalid-border;
122
+ box-shadow: 0 1px 0 0 $input-error-color;
123
+ }
124
+ %hidden-text {
125
+ color: transparent;
126
+ user-select: none;
127
+ pointer-events: none;
128
+ }
129
+ %custom-success-message {
130
+ content: attr(data-success);
131
+ color: $input-success-color;
132
+ }
133
+ %custom-error-message {
134
+ content: attr(data-error);
135
+ color: $input-error-color;
136
+ }
137
+ %input-after-style {
138
+ display: block;
139
+ content: "";
140
+ position: absolute;
141
+ top: 100%;
142
+ left: 0;
143
+ opacity: 0;
144
+ transition: .2s opacity ease-out, .2s color ease-out;
145
+ }
146
+
147
+
148
+ // Styling for input field wrapper
149
+ .input-field {
150
+ // Inline styles
151
+ &.inline {
152
+ display: inline-block;
153
+ vertical-align: middle;
154
+ margin-left: 5px;
155
+
156
+ input,
157
+ .select-dropdown {
158
+ margin-bottom: 1rem;
159
+ }
160
+ }
161
+
162
+ // Gutter spacing
163
+ &.col {
164
+ label {
165
+ left: $gutter-width / 2;
166
+ }
167
+
168
+ .prefix ~ label,
169
+ .prefix ~ .validate ~ label {
170
+ width: calc(100% - 3rem - #{$gutter-width});
171
+ }
172
+ }
173
+
174
+ position: relative;
175
+ margin-top: 1rem;
176
+ margin-bottom: 1rem;
177
+
178
+ & > label {
179
+ color: $input-border-color;
180
+ position: absolute;
181
+ top: 0;
182
+ left: 0;
183
+ font-size: 1rem;
184
+ cursor: text;
185
+ transition: transform .2s ease-out, color .2s ease-out;
186
+ transform-origin: 0% 100%;
187
+ text-align: initial;
188
+ transform: translateY(12px);
189
+
190
+ &:not(.label-icon).active {
191
+ transform: translateY(-14px) scale(.8);
192
+ transform-origin: 0 0;
193
+ }
194
+ }
195
+
196
+ // Autofill + date + time inputs
197
+ & > input[type]:-webkit-autofill:not(.browser-default):not([type="search"]) + label,
198
+ & > input[type=date]:not(.browser-default) + label,
199
+ & > input[type=time]:not(.browser-default) + label {
200
+ transform: translateY(-14px) scale(.8);
201
+ transform-origin: 0 0;
202
+ }
203
+
204
+ .helper-text {
205
+ &::after {
206
+ opacity: 1;
207
+ position: absolute;
208
+ top: 0;
209
+ left: 0;
210
+ }
211
+
212
+ position: relative;
213
+ min-height: 18px;
214
+ display: block;
215
+ font-size: 12px;
216
+ color: rgba(0,0,0,.54);
217
+ }
218
+
219
+ // Prefix Icons
220
+ .prefix {
221
+ position: absolute;
222
+ width: $input-height;
223
+ font-size: $input-icon-size;
224
+ transition: color .2s;
225
+ top: ($input-height - $input-icon-size) / 2;
226
+
227
+ &.active { color: $input-focus-color; }
228
+ }
229
+
230
+ .prefix ~ input,
231
+ .prefix ~ textarea,
232
+ .prefix ~ label,
233
+ .prefix ~ .validate ~ label,
234
+ .prefix ~ .helper-text,
235
+ .prefix ~ .autocomplete-content {
236
+ margin-left: 3rem;
237
+ width: 92%;
238
+ width: calc(100% - 3rem);
239
+ }
240
+
241
+ .prefix ~ label { margin-left: 3rem; }
242
+
243
+ @media #{$medium-and-down} {
244
+ .prefix ~ input {
245
+ width: 86%;
246
+ width: calc(100% - 3rem);
247
+ }
248
+ }
249
+
250
+ @media #{$small-and-down} {
251
+ .prefix ~ input {
252
+ width: 80%;
253
+ width: calc(100% - 3rem);
254
+ }
255
+ }
256
+ }
257
+
258
+
259
+ /* Search Field */
260
+
261
+ .input-field input[type=search] {
262
+ display: block;
263
+ line-height: inherit;
264
+ transition: .3s background-color;
265
+
266
+ .nav-wrapper & {
267
+ height: inherit;
268
+ padding-left: 4rem;
269
+ width: calc(100% - 4rem);
270
+ border: 0;
271
+ box-shadow: none;
272
+ }
273
+
274
+ &:focus:not(.browser-default) {
275
+ background-color: $input-background;
276
+ border: 0;
277
+ box-shadow: none;
278
+ color: #444;
279
+
280
+ & + label i,
281
+ & ~ .mdi-navigation-close,
282
+ & ~ .material-icons {
283
+ color: #444;
284
+ }
285
+ }
286
+
287
+ & + .label-icon {
288
+ transform: none;
289
+ left: 1rem;
290
+ }
291
+
292
+ & ~ .mdi-navigation-close,
293
+ & ~ .material-icons {
294
+ position: absolute;
295
+ top: 0;
296
+ right: 1rem;
297
+ color: transparent;
298
+ cursor: pointer;
299
+ font-size: $input-icon-size;
300
+ transition: .3s color;
301
+ }
302
+ }
303
+
304
+
305
+ /* Textarea */
306
+
307
+ // Default textarea
308
+ textarea {
309
+ width: 100%;
310
+ height: $input-height;
311
+ background-color: transparent;
312
+
313
+ &.materialize-textarea {
314
+ line-height: normal;
315
+ overflow-y: hidden; /* prevents scroll bar flash */
316
+ padding: .8rem 0 .8rem 0; /* prevents text jump on Enter keypress */
317
+ resize: none;
318
+ min-height: $input-height;
319
+ box-sizing: border-box;
320
+ }
321
+ }
322
+
323
+ // For textarea autoresize
324
+ .hiddendiv {
325
+ visibility: hidden;
326
+ white-space: pre-wrap;
327
+ word-wrap: break-word;
328
+ overflow-wrap: break-word; /* future version of deprecated 'word-wrap' */
329
+ padding-top: 1.2rem; /* prevents text jump on Enter keypress */
330
+
331
+ // Reduces repaints
332
+ position: absolute;
333
+ top: 0;
334
+ z-index: -1;
335
+ }
336
+
337
+
338
+ /* Autocomplete */
339
+ .autocomplete-content {
340
+ li {
341
+ .highlight { color: #444; }
342
+
343
+ img {
344
+ height: $dropdown-item-height - 10;
345
+ width: $dropdown-item-height - 10;
346
+ margin: 5px 15px;
347
+ }
348
+ }
349
+ }
350
+
351
+ /* Character Counter */
352
+ .character-counter {
353
+ min-height: 18px;
354
+ }
@@ -0,0 +1,115 @@
1
+ /* Radio Buttons
2
+ ========================================================================== */
3
+
4
+ // Remove default Radio Buttons
5
+ [type="radio"]:not(:checked),
6
+ [type="radio"]:checked {
7
+ position: absolute;
8
+ opacity: 0;
9
+ pointer-events: none;
10
+ }
11
+
12
+ [type="radio"]:not(:checked) + span,
13
+ [type="radio"]:checked + span {
14
+ position: relative;
15
+ padding-left: 35px;
16
+ cursor: pointer;
17
+ display: inline-block;
18
+ height: 25px;
19
+ line-height: 25px;
20
+ font-size: 1rem;
21
+ transition: .28s ease;
22
+ user-select: none;
23
+ }
24
+
25
+ [type="radio"] + span:before,
26
+ [type="radio"] + span:after {
27
+ content: '';
28
+ position: absolute;
29
+ left: 0;
30
+ top: 0;
31
+ margin: 4px;
32
+ width: 16px;
33
+ height: 16px;
34
+ z-index: 0;
35
+ transition: .28s ease;
36
+ }
37
+
38
+ /* Unchecked styles */
39
+ [type="radio"]:not(:checked) + span:before,
40
+ [type="radio"]:not(:checked) + span:after,
41
+ [type="radio"]:checked + span:before,
42
+ [type="radio"]:checked + span:after,
43
+ [type="radio"].with-gap:checked + span:before,
44
+ [type="radio"].with-gap:checked + span:after {
45
+ border-radius: 50%;
46
+ }
47
+
48
+ [type="radio"]:not(:checked) + span:before,
49
+ [type="radio"]:not(:checked) + span:after {
50
+ border: 2px solid $radio-empty-color;
51
+ }
52
+
53
+ [type="radio"]:not(:checked) + span:after {
54
+ transform: scale(0);
55
+ }
56
+
57
+ /* Checked styles */
58
+ [type="radio"]:checked + span:before {
59
+ border: 2px solid transparent;
60
+ }
61
+
62
+ [type="radio"]:checked + span:after,
63
+ [type="radio"].with-gap:checked + span:before,
64
+ [type="radio"].with-gap:checked + span:after {
65
+ border: $radio-border;
66
+ }
67
+
68
+ [type="radio"]:checked + span:after,
69
+ [type="radio"].with-gap:checked + span:after {
70
+ background-color: $radio-fill-color;
71
+ }
72
+
73
+ [type="radio"]:checked + span:after {
74
+ transform: scale(1.02);
75
+ }
76
+
77
+ /* Radio With gap */
78
+ [type="radio"].with-gap:checked + span:after {
79
+ transform: scale(.5);
80
+ }
81
+
82
+ /* Focused styles */
83
+ [type="radio"].tabbed:focus + span:before {
84
+ box-shadow: 0 0 0 10px rgba(0,0,0,.1);
85
+ }
86
+
87
+ /* Disabled Radio With gap */
88
+ [type="radio"].with-gap:disabled:checked + span:before {
89
+ border: 2px solid $input-disabled-color;
90
+ }
91
+
92
+ [type="radio"].with-gap:disabled:checked + span:after {
93
+ border: none;
94
+ background-color: $input-disabled-color;
95
+ }
96
+
97
+ /* Disabled style */
98
+ [type="radio"]:disabled:not(:checked) + span:before,
99
+ [type="radio"]:disabled:checked + span:before {
100
+ background-color: transparent;
101
+ border-color: $input-disabled-color;
102
+ }
103
+
104
+ [type="radio"]:disabled + span {
105
+ color: $input-disabled-color;
106
+ }
107
+
108
+ [type="radio"]:disabled:not(:checked) + span:before {
109
+ border-color: $input-disabled-color;
110
+ }
111
+
112
+ [type="radio"]:disabled:checked + span:after {
113
+ background-color: $input-disabled-color;
114
+ border-color: $input-disabled-solid-color;
115
+ }
@@ -0,0 +1,161 @@
1
+ /* Range
2
+ ========================================================================== */
3
+
4
+ .range-field {
5
+ position: relative;
6
+ }
7
+
8
+ input[type=range],
9
+ input[type=range] + .thumb {
10
+ @extend .no-select;
11
+ cursor: pointer;
12
+ }
13
+
14
+ input[type=range] {
15
+ position: relative;
16
+ background-color: transparent;
17
+ border: none;
18
+ outline: none;
19
+ width: 100%;
20
+ margin: 15px 0;
21
+ padding: 0;
22
+
23
+ &:focus {
24
+ outline: none;
25
+ }
26
+ }
27
+
28
+ input[type=range] + .thumb {
29
+ position: absolute;
30
+ top: 10px;
31
+ left: 0;
32
+ border: none;
33
+ height: 0;
34
+ width: 0;
35
+ border-radius: 50%;
36
+ background-color: $radio-fill-color;
37
+ margin-left: 7px;
38
+
39
+ transform-origin: 50% 50%;
40
+ transform: rotate(-45deg);
41
+
42
+ .value {
43
+ display: block;
44
+ width: 30px;
45
+ text-align: center;
46
+ color: $radio-fill-color;
47
+ font-size: 0;
48
+ transform: rotate(45deg);
49
+ }
50
+
51
+ &.active {
52
+ border-radius: 50% 50% 50% 0;
53
+
54
+ .value {
55
+ color: $input-background;
56
+ margin-left: -1px;
57
+ margin-top: 8px;
58
+ font-size: 10px;
59
+ }
60
+ }
61
+ }
62
+
63
+ // Shared
64
+ @mixin range-track {
65
+ height: $track-height;
66
+ background: #c2c0c2;
67
+ border: none;
68
+ }
69
+
70
+ @mixin range-thumb {
71
+ border: none;
72
+ height: $range-height;
73
+ width: $range-width;
74
+ border-radius: 50%;
75
+ background: $radio-fill-color;
76
+ transition: box-shadow .3s;
77
+ }
78
+
79
+ // WebKit
80
+ input[type=range] {
81
+ -webkit-appearance: none;
82
+ }
83
+
84
+ input[type=range]::-webkit-slider-runnable-track {
85
+ @include range-track;
86
+ }
87
+
88
+ input[type=range]::-webkit-slider-thumb {
89
+ @include range-thumb;
90
+ -webkit-appearance: none;
91
+ background-color: $radio-fill-color;
92
+ transform-origin: 50% 50%;
93
+ margin: -5px 0 0 0;
94
+
95
+ }
96
+
97
+ .keyboard-focused input[type=range]:focus:not(.active)::-webkit-slider-thumb {
98
+ box-shadow: 0 0 0 10px rgba($radio-fill-color, .26);
99
+ }
100
+
101
+ // FireFox
102
+ input[type=range] {
103
+ /* fix for FF unable to apply focus style bug */
104
+ border: 1px solid white;
105
+
106
+ /*required for proper track sizing in FF*/
107
+ }
108
+
109
+ input[type=range]::-moz-range-track {
110
+ @include range-track;
111
+ }
112
+
113
+ input[type=range]::-moz-focus-inner {
114
+ border: 0;
115
+ }
116
+
117
+ input[type=range]::-moz-range-thumb {
118
+ @include range-thumb;
119
+ margin-top: -5px;
120
+ }
121
+
122
+ // hide the outline behind the border
123
+ input[type=range]:-moz-focusring {
124
+ outline: 1px solid #fff;
125
+ outline-offset: -1px;
126
+ }
127
+
128
+ .keyboard-focused input[type=range]:focus:not(.active)::-moz-range-thumb {
129
+ box-shadow: 0 0 0 10px rgba($radio-fill-color, .26);
130
+ }
131
+
132
+ // IE 10+
133
+ input[type=range]::-ms-track {
134
+ height: $track-height;
135
+
136
+ // remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead
137
+ background: transparent;
138
+
139
+ // leave room for the larger thumb to overflow with a transparent border */
140
+ border-color: transparent;
141
+ border-width: 6px 0;
142
+
143
+ /*remove default tick marks*/
144
+ color: transparent;
145
+ }
146
+
147
+ input[type=range]::-ms-fill-lower {
148
+ background: #777;
149
+ }
150
+
151
+ input[type=range]::-ms-fill-upper {
152
+ background: #ddd;
153
+ }
154
+
155
+ input[type=range]::-ms-thumb {
156
+ @include range-thumb;
157
+ }
158
+
159
+ .keyboard-focused input[type=range]:focus:not(.active)::-ms-thumb {
160
+ box-shadow: 0 0 0 10px rgba($radio-fill-color, .26);
161
+ }