git.iko.soy/bridge
on master help sign in
Merge pull request #250 from urbit/fix/range-css

fix: wonky range slider css

commitf6fba1d0e510aa18eefbdb54be07bcd0ab41eacd authorMatt Condon <mattgcondon@gmail.com> dateTue 27 Aug 2019, 13:38 (7 years ago) parent3d8d2c780882f1
2 files changed+60−58
compare with master
unifiedsplit
src/style/bridge.scss−58 src/style/form-reset.scss+60
src/style/bridge.scss−58
@@ -1,5 +1,3 @@
1−$handle-extent: 24px; // $lh-regular
2−
31// min-height the top elements so footer behavior works correctly
42html {
53 height: 100%;
@@ -13,62 +11,6 @@ body {
1311 min-height: 100vh;
1412}
1513
16−// range slider
17−
18−input[type='range'] {
19− overflow: hidden;
20− -webkit-appearance: none;
21− background-color: #e6e6e6;
22−
23− /* Chrome */
24− &::-webkit-slider-runnable-track {
25− height: $handle-extent;
26− -webkit-appearance: none;
27− background-color: #e6e6e6;
28− margin-top: -1px;
29− }
30−
31− &::-webkit-slider-thumb {
32− -webkit-appearance: none;
33− width: $handle-extent;
34− height: 100%;
35− background-color: #000;
36− border: none;
37− border-radius: 0;
38− cursor: ew-resize;
39− }
40−
41− /* FF */
42− &::-moz-range-progress {
43− height: 100%;
44− background-color: #000;
45− }
46−
47− &::-moz-range-track {
48− background-color: #e6e6e6;
49− }
50−
51− &::-moz-range-thumb {
52− width: $handle-extent;
53− height: 100%;
54− background-color: #000;
55− border: none;
56− border-radius: 0;
57− cursor: ew-resize;
58− }
59−
60− /* IE */
61− &::-ms-fill-lower {
62− background-color: #000;
63− }
64−
65− &::-ms-fill-upper {
66− background-color: #e6e6e6;
67− }
68−}
69−
70−// animated width
71−
7214.animated-width {
7315 transition: width 500ms ease-out;
7416}
src/style/form-reset.scss+60
@@ -1,5 +1,6 @@
11$form-padding: 24px; // indigo pv3
22$form-line-height: 1.5rem; // $lh-regular
3+$handle-extent: $form-line-height;
34
45@keyframes autofill {
56 to {
@@ -45,3 +46,62 @@ input {
4546 -webkit-animation-fill-mode: both;
4647 }
4748}
49+
50+
51+// range slider
52+input[type='range'] {
53+ overflow: hidden;
54+ -webkit-appearance: none;
55+ background-color: #e6e6e6;
56+
57+ // NOTE: this matches the calc(1.5rem + 25px)
58+ height: $form-line-height;
59+ margin-top: $form-padding / 2;
60+ margin-bottom: $form-padding / 2;
61+
62+ /* Chrome */
63+ &::-webkit-slider-runnable-track {
64+ height: $handle-extent;
65+ -webkit-appearance: none;
66+ background-color: #e6e6e6;
67+ margin-top: -1px;
68+ }
69+
70+ &::-webkit-slider-thumb {
71+ -webkit-appearance: none;
72+ width: $handle-extent;
73+ height: 100%;
74+ background-color: #000;
75+ border: none;
76+ border-radius: 0;
77+ cursor: ew-resize;
78+ }
79+
80+ /* FF */
81+ &::-moz-range-progress {
82+ height: 100%;
83+ background-color: #000;
84+ }
85+
86+ &::-moz-range-track {
87+ background-color: #e6e6e6;
88+ }
89+
90+ &::-moz-range-thumb {
91+ width: $handle-extent;
92+ height: 100%;
93+ background-color: #000;
94+ border: none;
95+ border-radius: 0;
96+ cursor: ew-resize;
97+ }
98+
99+ /* IE */
100+ &::-ms-fill-lower {
101+ background-color: #000;
102+ }
103+
104+ &::-ms-fill-upper {
105+ background-color: #e6e6e6;
106+ }
107+}