git.iko.soy/bridge
on df0c310 help sign in
bridge/src/style/form-reset.scss
107 lines 1.9 kB history raw
1$form-padding: 24px; // indigo pv3
2$form-line-height: 1.5rem; // $lh-regular
3$handle-extent: $form-line-height;
5@keyframes autofill {
6 to {
7 color: #000;
8 background: transparent;
9 }
12input,
13button,
14textarea,
15select {
16 padding: 0;
17 margin: 0;
18 border-radius: 0;
19 -webkit-appearance: none;
21 &:focus,
22 &:hover,
23 &:active {
24 outline: 0;
25 }
27 &::-moz-focus-inner {
28 border: 0;
29 }
32input {
33 // enforce border-box
34 box-sizing: border-box;
36 // enforce height & line-height for accessories
37 height: calc(#{$form-line-height} + #{$form-padding});
38 line-height: $form-line-height;
40 // avoid yellow autofill highlight on browsers that respect this attribute
41 &:-webkit-autofill {
42 animation-name: autofill;
43 animation-fill-mode: both;
45 -webkit-animation-name: autofill;
46 -webkit-animation-fill-mode: both;
47 }
51// range slider
52input[type='range'] {
53 overflow: hidden;
54 -webkit-appearance: none;
55 background-color: #e6e6e6;
57 // NOTE: this matches the calc(1.5rem + 25px)
58 height: $form-line-height;
59 margin-top: calc($form-padding / 2);
60 margin-bottom: calc($form-padding / 2);
62 /* Chrome */
63 &::-webkit-slider-runnable-track {
64 height: $handle-extent;
65 -webkit-appearance: none;
66 background-color: #e6e6e6;
67 margin-top: -1px;
68 }
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 }
80 /* FF */
81 &::-moz-range-progress {
82 height: 100%;
83 background-color: #000;
84 }
86 &::-moz-range-track {
87 background-color: #e6e6e6;
88 }
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 }
99 /* IE */
100 &::-ms-fill-lower {
101 background-color: #000;
102 }
104 &::-ms-fill-upper {
105 background-color: #e6e6e6;
106 }