Skip to content

Commit 87dfee4

Browse files
asyncLizcopybara-github
asyncLiz
authored and
copybara-github
committed
chore(field): reduce HCM styles and move from textfield/select to field
PiperOrigin-RevId: 578351982
1 parent 1f55d41 commit 87dfee4

13 files changed

+748
-818
lines changed

‎field/internal/_content.scss

Lines changed: 185 additions & 174 deletions
Original file line numberDiff line numberDiff line change
@@ -21,179 +21,190 @@ $_visible-duration: math.round(math.div($_label-duration * 5, 9));
2121
$_enter-delay: $_label-duration - $_visible-duration;
2222

2323
@mixin styles() {
24-
.start,
25-
.middle,
26-
.end {
27-
display: flex;
28-
box-sizing: border-box;
29-
height: 100%;
30-
// Relative position for absolutely positioned labels (to avoid interfering
31-
// with baseline alignment).
32-
position: relative;
33-
}
34-
35-
.start {
36-
color: var(--_leading-content-color);
37-
}
38-
39-
.end {
40-
color: var(--_trailing-content-color);
41-
}
42-
43-
.start,
44-
.end {
45-
align-items: center;
46-
justify-content: center;
47-
}
48-
49-
// TODO(b/239188049): remove when layout tokens are ready
50-
.with-start .start,
51-
.with-end .end {
52-
min-width: 48px;
53-
}
54-
55-
.with-start .start {
56-
margin-inline-end: 4px;
57-
}
58-
59-
.with-end .end {
60-
margin-inline-start: 4px;
61-
}
62-
63-
.middle {
64-
align-items: stretch;
65-
// The container of the field aligns sections by "center". Only the middle
66-
// section opts in to baseline alignment.
67-
//
68-
// Labels are absolutely positioned, which leaves only the content as the
69-
// evaluated baseline for the field.
70-
//
71-
// See https://www.w3.org/TR/css-flexbox-1/#baseline-participation
72-
align-self: baseline;
73-
flex: 1;
74-
}
75-
76-
.content {
77-
color: var(--_content-color);
78-
display: flex;
79-
flex: 1;
80-
opacity: 0;
81-
transition: opacity $_visible-duration
82-
map.get($_md-sys-motion, 'easing-emphasized');
83-
}
84-
85-
.no-label .content,
86-
.focused .content,
87-
.populated .content {
88-
opacity: 1;
89-
transition-delay: $_enter-delay;
90-
}
91-
92-
:is(.disabled, .disable-transitions) .content {
93-
transition: none;
94-
}
95-
96-
.content ::slotted(*) {
97-
all: unset;
98-
// Use `currentColor` to inherit the various state colors that are set
99-
// below.
100-
color: currentColor;
101-
font-family: var(--_content-font);
102-
font-size: var(--_content-size);
103-
line-height: var(--_content-line-height);
104-
font-weight: var(--_content-weight);
105-
width: 100%;
106-
white-space: pre-wrap; // Needed for Firefox textarea with "all: unset"
107-
}
108-
109-
.content ::slotted(:not(textarea)) {
110-
padding-top: var(--_top-space);
111-
padding-bottom: var(--_bottom-space);
112-
}
113-
114-
.content ::slotted(textarea) {
115-
// Use margin for textareas since they will scroll over the label if not.
116-
margin-top: var(--_top-space);
117-
margin-bottom: var(--_bottom-space);
118-
}
119-
120-
:hover .content {
121-
color: var(--_hover-content-color);
122-
}
123-
124-
:hover .start {
125-
color: var(--_hover-leading-content-color);
126-
}
127-
128-
:hover .end {
129-
color: var(--_hover-trailing-content-color);
130-
}
131-
132-
.focused .content {
133-
color: var(--_focus-content-color);
134-
}
135-
136-
.focused .start {
137-
color: var(--_focus-leading-content-color);
138-
}
139-
140-
.focused .end {
141-
color: var(--_focus-trailing-content-color);
142-
}
143-
144-
.disabled .content {
145-
color: var(--_disabled-content-color);
146-
}
147-
148-
.disabled.no-label .content,
149-
.disabled.focused .content,
150-
.disabled.populated .content {
151-
opacity: var(--_disabled-content-opacity);
152-
}
153-
154-
.disabled .start {
155-
color: var(--_disabled-leading-content-color);
156-
opacity: var(--_disabled-leading-content-opacity);
157-
}
158-
159-
.disabled .end {
160-
color: var(--_disabled-trailing-content-color);
161-
opacity: var(--_disabled-trailing-content-opacity);
162-
}
163-
164-
.error .content {
165-
color: var(--_error-content-color);
166-
}
167-
168-
.error .start {
169-
color: var(--_error-leading-content-color);
170-
}
171-
172-
.error .end {
173-
color: var(--_error-trailing-content-color);
174-
}
175-
176-
.error:hover .content {
177-
color: var(--_error-hover-content-color);
178-
}
179-
180-
.error:hover .start {
181-
color: var(--_error-hover-leading-content-color);
182-
}
183-
184-
.error:hover .end {
185-
color: var(--_error-hover-trailing-content-color);
186-
}
187-
188-
.error.focused .content {
189-
color: var(--_error-focus-content-color);
190-
}
191-
192-
.error.focused .start {
193-
color: var(--_error-focus-leading-content-color);
194-
}
195-
196-
.error.focused .end {
197-
color: var(--_error-focus-trailing-content-color);
24+
@layer styles {
25+
.start,
26+
.middle,
27+
.end {
28+
display: flex;
29+
box-sizing: border-box;
30+
height: 100%;
31+
// Relative position for absolutely positioned labels (to avoid interfering
32+
// with baseline alignment).
33+
position: relative;
34+
}
35+
36+
.start {
37+
color: var(--_leading-content-color);
38+
}
39+
40+
.end {
41+
color: var(--_trailing-content-color);
42+
}
43+
44+
.start,
45+
.end {
46+
align-items: center;
47+
justify-content: center;
48+
}
49+
50+
// TODO(b/239188049): remove when layout tokens are ready
51+
.with-start .start,
52+
.with-end .end {
53+
min-width: 48px;
54+
}
55+
56+
.with-start .start {
57+
margin-inline-end: 4px;
58+
}
59+
60+
.with-end .end {
61+
margin-inline-start: 4px;
62+
}
63+
64+
.middle {
65+
align-items: stretch;
66+
// The container of the field aligns sections by "center". Only the middle
67+
// section opts in to baseline alignment.
68+
//
69+
// Labels are absolutely positioned, which leaves only the content as the
70+
// evaluated baseline for the field.
71+
//
72+
// See https://www.w3.org/TR/css-flexbox-1/#baseline-participation
73+
align-self: baseline;
74+
flex: 1;
75+
}
76+
77+
.content {
78+
color: var(--_content-color);
79+
display: flex;
80+
flex: 1;
81+
opacity: 0;
82+
transition: opacity $_visible-duration
83+
map.get($_md-sys-motion, 'easing-emphasized');
84+
}
85+
86+
.no-label .content,
87+
.focused .content,
88+
.populated .content {
89+
opacity: 1;
90+
transition-delay: $_enter-delay;
91+
}
92+
93+
:is(.disabled, .disable-transitions) .content {
94+
transition: none;
95+
}
96+
97+
.content ::slotted(*) {
98+
all: unset;
99+
// Use `currentColor` to inherit the various state colors that are set
100+
// below.
101+
color: currentColor;
102+
font-family: var(--_content-font);
103+
font-size: var(--_content-size);
104+
line-height: var(--_content-line-height);
105+
font-weight: var(--_content-weight);
106+
width: 100%;
107+
white-space: pre-wrap; // Needed for Firefox textarea with "all: unset"
108+
}
109+
110+
.content ::slotted(:not(textarea)) {
111+
padding-top: var(--_top-space);
112+
padding-bottom: var(--_bottom-space);
113+
}
114+
115+
.content ::slotted(textarea) {
116+
// Use margin for textareas since they will scroll over the label if not.
117+
margin-top: var(--_top-space);
118+
margin-bottom: var(--_bottom-space);
119+
}
120+
121+
:hover .content {
122+
color: var(--_hover-content-color);
123+
}
124+
125+
:hover .start {
126+
color: var(--_hover-leading-content-color);
127+
}
128+
129+
:hover .end {
130+
color: var(--_hover-trailing-content-color);
131+
}
132+
133+
.focused .content {
134+
color: var(--_focus-content-color);
135+
}
136+
137+
.focused .start {
138+
color: var(--_focus-leading-content-color);
139+
}
140+
141+
.focused .end {
142+
color: var(--_focus-trailing-content-color);
143+
}
144+
145+
.disabled .content {
146+
color: var(--_disabled-content-color);
147+
}
148+
149+
.disabled.no-label .content,
150+
.disabled.focused .content,
151+
.disabled.populated .content {
152+
opacity: var(--_disabled-content-opacity);
153+
}
154+
155+
.disabled .start {
156+
color: var(--_disabled-leading-content-color);
157+
opacity: var(--_disabled-leading-content-opacity);
158+
}
159+
160+
.disabled .end {
161+
color: var(--_disabled-trailing-content-color);
162+
opacity: var(--_disabled-trailing-content-opacity);
163+
}
164+
165+
.error .content {
166+
color: var(--_error-content-color);
167+
}
168+
169+
.error .start {
170+
color: var(--_error-leading-content-color);
171+
}
172+
173+
.error .end {
174+
color: var(--_error-trailing-content-color);
175+
}
176+
177+
.error:hover .content {
178+
color: var(--_error-hover-content-color);
179+
}
180+
181+
.error:hover .start {
182+
color: var(--_error-hover-leading-content-color);
183+
}
184+
185+
.error:hover .end {
186+
color: var(--_error-hover-trailing-content-color);
187+
}
188+
189+
.error.focused .content {
190+
color: var(--_error-focus-content-color);
191+
}
192+
193+
.error.focused .start {
194+
color: var(--_error-focus-leading-content-color);
195+
}
196+
197+
.error.focused .end {
198+
color: var(--_error-focus-trailing-content-color);
199+
}
200+
}
201+
202+
@layer hcm {
203+
@media (forced-colors: active) {
204+
.disabled :is(.start, .content, .end) {
205+
color: GrayText;
206+
opacity: 1;
207+
}
208+
}
198209
}
199210
}

0 commit comments

Comments
 (0)