Skip to content

Commit 1cd195a

Browse files
philwarehamphilwareham
committed
Not using range inputs on this site
1 parent 839d1e0 commit 1cd195a

File tree

2 files changed

+0
-244
lines changed

2 files changed

+0
-244
lines changed

‎src/assets/sass/modules/_forms.scss‎

Lines changed: 0 additions & 240 deletions
Original file line numberDiff line numberDiff line change
@@ -301,246 +301,6 @@ textarea {
301301
height: auto;
302302
}
303303

304-
/**
305-
* Styling of range sliders.
306-
*
307-
* 1. Correct background colour in Firefox.
308-
*/
309-
310-
[type="range"] {
311-
width: 100%;
312-
max-width: 16em; // 256px / 16px
313-
background-color: transparent; /* 1 */
314-
vertical-align: baseline;
315-
appearance: none;
316-
317-
&:focus {
318-
outline: 0;
319-
}
320-
}
321-
322-
// WebKit/Blink.
323-
324-
[type="range"]::-webkit-slider-thumb {
325-
width: 1.25em; // 20px / 16px
326-
height: 1.25em; // 20px / 16px
327-
margin-top: -0.3125em; // 5px / 16px
328-
border: 1px solid $color-border;
329-
border-radius: 50%;
330-
background-color: $color-background;
331-
box-shadow: $standard-shadow;
332-
cursor: pointer;
333-
appearance: none;
334-
}
335-
336-
[type="range"]:hover::-webkit-slider-thumb {
337-
border-color: $color-border-extra-dark;
338-
}
339-
340-
[type="range"]:active::-webkit-slider-thumb,
341-
[type="range"]:focus::-webkit-slider-thumb {
342-
border-color: $color-link-focus;
343-
}
344-
345-
[type="range"]::-webkit-slider-runnable-track {
346-
width: 100%;
347-
height: 0.75em; // 12px / 16px
348-
border: 1px solid $color-border;
349-
background-color: $color-gradient-to;
350-
cursor: pointer;
351-
box-sizing: border-box;
352-
}
353-
354-
[type="range"]:hover::-webkit-slider-runnable-track {
355-
border-color: $color-border-extra-dark;
356-
}
357-
358-
[type="range"]:active::-webkit-slider-runnable-track,
359-
[type="range"]:focus::-webkit-slider-runnable-track {
360-
border-color: $color-link-focus;
361-
}
362-
363-
@include dark-mode {
364-
[type="range"]::-webkit-slider-thumb {
365-
@include gradient-linear($color-button-gradient-from, $color-button-gradient-to);
366-
367-
border-color: $dark-color-border;
368-
box-shadow: $dark-standard-shadow;
369-
}
370-
371-
[type="range"]:hover::-webkit-slider-thumb {
372-
@include gradient-linear(lighten($color-button-gradient-from, 4%), lighten($color-button-gradient-to, 4%));
373-
374-
border-color: $dark-color-border-extra-light;
375-
}
376-
377-
[type="range"]:active::-webkit-slider-thumb,
378-
[type="range"]:focus::-webkit-slider-thumb {
379-
border-color: $dark-color-link-focus;
380-
}
381-
382-
[type="range"]::-webkit-slider-runnable-track {
383-
border-color: $dark-color-border-extra-dark;
384-
background-color: $dark-color-background-form;
385-
}
386-
387-
[type="range"]:hover::-webkit-slider-runnable-track {
388-
border-color: $dark-color-border-extra-light;
389-
}
390-
391-
[type="range"]:active::-webkit-slider-runnable-track,
392-
[type="range"]:focus::-webkit-slider-runnable-track {
393-
border-color: $dark-color-link-focus;
394-
}
395-
}
396-
397-
// Gecko/Quantum.
398-
399-
[type="range"]::-moz-range-thumb {
400-
width: 1.25em; // 20px / 16px
401-
height: 1.25em; // 20px / 16px
402-
border: 1px solid $color-border;
403-
border-radius: 50%;
404-
background-color: $color-background;
405-
box-shadow: $standard-shadow;
406-
cursor: pointer;
407-
/* autoprefixer: off */
408-
appearance: none;
409-
}
410-
411-
[type="range"]:hover::-moz-range-thumb {
412-
border-color: $color-border-extra-dark;
413-
}
414-
415-
[type="range"]:focus::-moz-range-thumb {
416-
border-color: $color-link-focus;
417-
}
418-
419-
[type="range"]::-moz-range-track {
420-
width: 100%;
421-
height: 0.75em; // 12px / 16px
422-
border: 1px solid $color-border;
423-
background-color: $color-gradient-to;
424-
cursor: pointer;
425-
box-sizing: border-box;
426-
}
427-
428-
[type="range"]:hover::-moz-range-track {
429-
border-color: $color-border-extra-dark;
430-
}
431-
432-
[type="range"]:focus::-moz-range-track {
433-
border-color: $color-link-focus;
434-
}
435-
436-
[type="range"]::-moz-focus-outer {
437-
border-style: none;
438-
}
439-
440-
@include dark-mode {
441-
[type="range"]::-moz-range-thumb {
442-
@include gradient-linear($color-button-gradient-from, $color-button-gradient-to);
443-
444-
border-color: $dark-color-border;
445-
box-shadow: $dark-standard-shadow;
446-
}
447-
448-
[type="range"]:hover::-moz-range-thumb {
449-
@include gradient-linear(lighten($color-button-gradient-from, 4%), lighten($color-button-gradient-to, 4%));
450-
451-
border-color: $dark-color-border-extra-light;
452-
}
453-
454-
[type="range"]:focus::-moz-range-thumb {
455-
border-color: $dark-color-link-focus;
456-
}
457-
458-
[type="range"]::-moz-range-track {
459-
border-color: $dark-color-border-extra-dark;
460-
background-color: $dark-color-background-form;
461-
}
462-
463-
[type="range"]:hover::-moz-range-track {
464-
border-color: $dark-color-border-extra-light;
465-
}
466-
467-
[type="range"]:focus::-moz-range-track {
468-
border-color: $dark-color-link-focus;
469-
}
470-
}
471-
472-
// EdgeHTML.
473-
474-
[type="range"]::-ms-thumb {
475-
width: 1.25em; // 20px / 16px
476-
height: 1.25em; // 20px / 16px
477-
margin-bottom: -0.3125em; // 5px / 16px
478-
border: 1px solid $color-border;
479-
border-radius: 50%;
480-
background-color: $color-background;
481-
box-shadow: $standard-shadow;
482-
cursor: pointer;
483-
/* autoprefixer: off */
484-
appearance: none;
485-
}
486-
487-
[type="range"]:hover::-ms-thumb {
488-
border-color: $color-border-extra-dark;
489-
}
490-
491-
[type="range"]:focus::-ms-thumb {
492-
border-color: $color-link-focus;
493-
}
494-
495-
[type="range"]::-ms-track {
496-
width: 100%;
497-
height: 0.75em; // 12px / 16px
498-
border: 1px solid $color-border;
499-
background-color: $color-gradient-to;
500-
cursor: pointer;
501-
box-sizing: border-box;
502-
}
503-
504-
[type="range"]:hover::-ms-track {
505-
border-color: $color-border-extra-dark;
506-
}
507-
508-
[type="range"]:focus::-ms-track {
509-
border-color: $color-link-focus;
510-
}
511-
512-
@include dark-mode {
513-
[type="range"]::-ms-thumb {
514-
@include gradient-linear($color-button-gradient-from, $color-button-gradient-to);
515-
516-
border-color: $dark-color-border;
517-
box-shadow: $dark-standard-shadow;
518-
}
519-
520-
[type="range"]:hover::-ms-thumb {
521-
@include gradient-linear(lighten($color-button-gradient-from, 4%), lighten($color-button-gradient-to, 4%));
522-
523-
border-color: $dark-color-border-extra-light;
524-
}
525-
526-
[type="range"]:focus::-ms-thumb {
527-
border-color: $dark-color-link-focus;
528-
}
529-
530-
[type="range"]::-ms-track {
531-
border-color: $dark-color-border-extra-dark;
532-
background-color: $dark-color-background-form;
533-
}
534-
535-
[type="range"]:hover::-ms-track {
536-
border-color: $dark-color-border-extra-light;
537-
}
538-
539-
[type="range"]:focus::-ms-track {
540-
border-color: $dark-color-link-focus;
541-
}
542-
}
543-
544304
/**
545305
* Remove the inner padding in Chrome and Safari on macOS.
546306
*/

‎src/docs/design-patterns.html‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1024,10 +1024,6 @@ <h3>Inputs</h3>
10241024
<label for="password">Password</label><br>
10251025
<input id="password" name="password" type="password">
10261026
</p>
1027-
<p class="layout-3col">
1028-
<label for="range">Range</label><br>
1029-
<input id="range" name="range" type="range">
1030-
</p>
10311027
<p class="layout-3col">
10321028
<label for="search">Search</label><br>
10331029
<input id="search" name="search" type="search">

0 commit comments

Comments
 (0)