|
1 | | -@use 'sass:math'; |
2 | | -@use '../../compiled/tokens/scss/color'; |
3 | | -@use '../../compiled/tokens/scss/ease'; |
4 | | -@use '../../compiled/tokens/scss/size'; |
5 | | -@use '../../compiled/tokens/scss/transition'; |
6 | | -@use '../../mixins/theme'; |
7 | | - |
8 | | -/** |
9 | | - * Themed properties |
10 | | - */ |
11 | | - |
12 | | -@include theme.props { |
13 | | - --theme-color-background-input-disabled: #{color.$base-gray-light}; |
14 | | - --theme-color-border-input-disabled: #{color.$base-gray}; |
15 | | - --theme-color-border-input-hover: #{color.$brand-primary}; |
16 | | -} |
17 | | - |
18 | | -@include theme.props(dark) { |
19 | | - --theme-color-background-input-disabled: #{color.$brand-primary-lighter}; |
20 | | - --theme-color-border-input-disabled: #{color.$brand-primary-dark}; |
21 | | - --theme-color-border-input-hover: currentColor; |
22 | | -} |
23 | | - |
24 | | -/** |
25 | | - * 1. Browsers apply certain default styles unless appearance is set to `none`. |
26 | | - * Unfortunately Chrome, Safari and Mozilla all still rely on the |
27 | | - * vendor-prefixed version of this property at the time of this writing. |
28 | | - * 2. Input heights vary between different types in certain browsers unless a |
29 | | - * height is explicitly set. |
30 | | - * 3. Non-normal line heights break placeholder text alignment in Safari. |
31 | | - * 4. Safari will not style disabled inputs with readable text unless we set |
32 | | - * this property in addition to `color`. Unfortunately this also resets the |
33 | | - * appearance of `::placeholder`, which we'll style later on. |
34 | | - */ |
| 1 | +@use '../../mixins/input'; |
35 | 2 |
|
36 | 3 | .c-input { |
37 | | - -moz-appearance: none; /* stylelint-disable-line property-no-vendor-prefix */ |
38 | | - -webkit-appearance: none; /* stylelint-disable-line property-no-vendor-prefix */ |
39 | | - appearance: none; /* 1 */ |
40 | | - background-color: color.$text-light; |
41 | | - block-size: size.$height-control-default; /* 2 */ |
42 | | - border: size.$edge-control solid currentColor; |
43 | | - border-radius: size.$border-radius-medium; |
44 | | - color: color.$text-dark; |
45 | | - display: block; |
46 | | - font: inherit; |
47 | | - font-style: normal; |
48 | | - inline-size: 100%; |
49 | | - line-height: normal; /* 3 */ |
50 | | - outline: none; |
51 | | - padding: size.$padding-control-vertical size.$spacing-control-text-inset; |
52 | | - -webkit-text-fill-color: color.$text-dark; /* 4 */ |
53 | | - transition-duration: transition.$quick; |
54 | | - transition-property: background-color, border-color; |
55 | | - transition-timing-function: ease.$out; |
56 | | - vertical-align: middle; |
57 | | - |
58 | | - /** |
59 | | - * For certain single-line input types, using `text-indent` instead of |
60 | | - * `padding-left` gives a more natural and intuitive appearance when text |
61 | | - * content overflows. |
62 | | - * |
63 | | - * We do not apply this for search inputs because Safari gets weird about |
64 | | - * search input padding. |
65 | | - */ |
66 | | - |
67 | | - &[type='email'], |
68 | | - &[type='text'] { |
69 | | - padding-inline-start: 0; |
70 | | - text-indent: size.$spacing-control-text-inset; |
71 | | - } |
72 | | - |
73 | | - /** |
74 | | - * For textareas with rows, overrides static default height |
75 | | - */ |
76 | | - |
77 | | - &[rows] { |
78 | | - block-size: auto; |
79 | | - } |
80 | | - |
81 | | - /** |
82 | | - * Progressively-enhanced styles; `is-elastic` is added by JavaScript |
83 | | - */ |
84 | | - |
85 | | - &.is-elastic { |
86 | | - resize: none; |
87 | | - } |
88 | | - |
89 | | - /** |
90 | | - * Multi-line types should be taller |
91 | | - */ |
92 | | - |
93 | | - @at-root textarea#{&} { |
94 | | - block-size: size.$height-control-multiline; |
95 | | - } |
96 | | - |
97 | | - /** |
98 | | - * Types that disclose additional options should have an icon |
99 | | - * |
100 | | - * 1. Setting the background size to `100%` avoids a strange background shift |
101 | | - * bug on hover in Chrome but has no visible effect in other browsers as |
102 | | - * long as the image is an SVG that does not preserve its aspect ratio. |
103 | | - * 2. Firefox misaligns inner options when padding is applied, but all modern |
104 | | - * browsers seem to align selects predictably even when there is no |
105 | | - * vertical padding. We still keep a small amount of padding because |
106 | | - * Firefox's inner dotted outline looks gross when it runs into the outer |
107 | | - * border, and existing hacks around this visibly degrade text rendering. |
108 | | - * 3. Prevents option text from overlapping icon. |
109 | | - */ |
110 | | - |
111 | | - @at-root select#{&} { |
112 | | - background-image: svg-load('icons/caret-down.svg', fill=color.$text-dark); |
113 | | - background-position: right size.$spacing-control-icon-inset center; |
114 | | - background-repeat: no-repeat; |
115 | | - background-size: size.$square-control-icon 100%; /* 1 */ |
116 | | - padding-block: math.div(size.$padding-control-vertical, 2); /* 2 */ |
117 | | - padding-inline-end: size.$spacing-control-icon-inset + |
118 | | - size.$square-control-icon; /* 3 */ |
119 | | - } |
120 | | - |
121 | | - &:hover:not(:disabled):not([readonly]) { |
122 | | - background-color: color.$text-light-emphasis; |
123 | | - border-color: var(--theme-color-border-input-hover); |
124 | | - } |
125 | | - |
126 | | - /** |
127 | | - * We use plain ol' `focus` rather than `focus-visible` because text inputs |
128 | | - * are almost always in a state of keyboard interaction, making the difference |
129 | | - * (if any) minimal. |
130 | | - */ |
131 | | - |
132 | | - &:focus { |
133 | | - background-color: #fff; |
134 | | - box-shadow: 0 0 0 size.$edge-large color.$brand-primary-lighter; |
135 | | - } |
136 | | - |
137 | | - &[readonly]:not(:disabled) { |
138 | | - background-color: transparent; |
139 | | - border-color: transparent; |
140 | | - color: inherit; |
141 | | - } |
142 | | - |
143 | | - &:disabled { |
144 | | - background-color: var(--theme-color-background-input-disabled); |
145 | | - border-color: var(--theme-color-border-input-disabled); |
146 | | - cursor: not-allowed; |
147 | | - } |
148 | | - |
149 | | - /** |
150 | | - * 1. We set `-webkit-text-fill-color` on the root element so that Safari |
151 | | - * would respect our disabled text color. But that also resets the |
152 | | - * `::placeholder` color, so we have to specify our own so it will be |
153 | | - * distinct from a normal value while maintaining reasonable high color |
154 | | - * contrast. |
155 | | - * 2. Firefox uses `opacity` instead of a lightened text color, appearing |
156 | | - * lighter than other browsers unless we reset it here. |
157 | | - */ |
158 | | - |
159 | | - &::placeholder { |
160 | | - color: color.$text-dark-muted; /* 1 */ |
161 | | - opacity: 1; /* 2 */ |
162 | | - -webkit-text-fill-color: color.$text-dark-muted; /* 1 */ |
163 | | - } |
| 4 | + @include input.default; |
164 | 5 | } |
0 commit comments