git.iko.soy/bridge
on master help sign in
Merge pull request #250 from urbit/fix/range-css
f6fba1dMatt Condon
src/style/bridge.scss−58
compare with master
unifiedsplit
@@ -1,5 +1,3 @@
1−$handle-extent: 24px; // $lh-regular
2−
3// min-height the top elements so footer behavior works correctly
1// min-height the top elements so footer behavior works correctly
4html {
2html {
5 height: 100%;
3 height: 100%;
@@ -13,62 +11,6 @@ body {
13 min-height: 100vh;
11 min-height: 100vh;
14}
12}
15
13
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−
72.animated-width {
14.animated-width {
73 transition: width 500ms ease-out;
15 transition: width 500ms ease-out;
74}
16}
src/style/form-reset.scss+60
@@ -1,5 +1,6 @@
1$form-padding: 24px; // indigo pv3
1$form-padding: 24px; // indigo pv3
2$form-line-height: 1.5rem; // $lh-regular
2$form-line-height: 1.5rem; // $lh-regular
3+$handle-extent: $form-line-height;
3
4
4@keyframes autofill {
5@keyframes autofill {
5 to {
6 to {
@@ -45,3 +46,62 @@ input {
45 -webkit-animation-fill-mode: both;
46 -webkit-animation-fill-mode: both;
46 }
47 }
47}
48}
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+}