-
Notifications
You must be signed in to change notification settings - Fork 200
/
Copy pathindex.css
256 lines (208 loc) · 13.9 KB
/
index.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
/*!
* Copyright 2024 Adobe. All rights reserved.
*
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License. You may obtain a copy
* of the License at <http://www.apache.org/licenses/LICENSE-2.0>
*
* Unless required by applicable law or agreed to in writing, software distributed under
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/
@import "./themes/express.css";
.spectrum-InfieldButton {
/* Medium size is the default */
--spectrum-infield-button-height: var(--spectrum-component-height-100);
--spectrum-infield-button-width: var(--spectrum-component-height-100);
--spectrum-infield-button-stacked-border-radius-reset: var(--spectrum-in-field-button-fill-stacked-inner-border-rounding);
--spectrum-infield-button-edge-to-fill: var(--spectrum-in-field-button-edge-to-fill);
--spectrum-infield-button-inner-edge-to-fill: var(--spectrum-in-field-button-stacked-inner-edge-to-fill);
--spectrum-infield-button-fill-padding: 0px;
--spectrum-infield-button-stacked-fill-padding-inline: var(--spectrum-in-field-button-edge-to-disclosure-icon-stacked-medium);
--spectrum-infield-button-stacked-fill-padding-outer: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium);
--spectrum-infield-button-stacked-fill-padding-inner: var(--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium);
--spectrum-infield-button-icon-color: var(--spectrum-neutral-content-color-default);
--spectrum-infield-button-icon-color-hover: var(--spectrum-neutral-content-color-hover);
--spectrum-infield-button-icon-color-down: var(--spectrum-neutral-content-color-down);
--spectrum-infield-button-icon-color-key-focus: var(--spectrum-neutral-content-color-key-focus);
--spectrum-infield-button-fill-justify-content: center;
&:disabled {
--mod-infield-button-background-color: var(--mod-infield-button-background-color-disabled, var(--spectrum-disabled-background-color));
--mod-infield-button-background-color-hover: var(--mod-infield-button-background-color-hover-disabled, var(--spectrum-disabled-background-color));
--mod-infield-button-background-color-down: var(--mod-infield-button-background-color-down-disabled, var(--spectrum-disabled-background-color));
--mod-infield-button-border-color: var(--mod-infield-button-border-color-disabled, var(--spectrum-disabled-background-color));
--mod-infield-button-icon-color: var(--mod-infield-button-icon-color-disabled, var(--spectrum-disabled-content-color));
--mod-infield-button-icon-color-hover: var(--mod-infield-button-icon-color-hover-disabled, var(--spectrum-disabled-content-color));
--mod-infield-button-icon-color-down: var(--mod-infield-button-icon-color-down-disabled, var(--spectrum-disabled-content-color));
--mod-infield-button-icon-color-key-focus: var(--mod-infield-button-icon-color-key-focus-disabled, var(--spectrum-disabled-content-color));
}
&.spectrum-InfieldButton--sizeS {
--spectrum-infield-button-height: var(--spectrum-component-height-75);
--spectrum-infield-button-width: var(--spectrum-component-height-75);
--spectrum-infield-button-stacked-fill-padding-inline: var(--spectrum-in-field-button-edge-to-disclosure-icon-stacked-small);
--spectrum-infield-button-stacked-fill-padding-outer: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small);
--spectrum-infield-button-stacked-fill-padding-inner: var(--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small);
}
&.spectrum-InfieldButton--sizeL {
--spectrum-infield-button-height: var(--spectrum-component-height-200);
--spectrum-infield-button-width: var(--spectrum-component-height-200);
--spectrum-infield-button-stacked-fill-padding-inline: var(--spectrum-in-field-button-edge-to-disclosure-icon-stacked-large);
--spectrum-infield-button-stacked-fill-padding-outer: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large);
--spectrum-infield-button-stacked-fill-padding-inner: var(--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large);
}
&.spectrum-InfieldButton--sizeXL {
--spectrum-infield-button-height: var(--spectrum-component-height-300);
--spectrum-infield-button-width: var(--spectrum-component-height-300);
--spectrum-infield-button-stacked-fill-padding-inline: var(--spectrum-in-field-button-edge-to-disclosure-icon-stacked-extra-large);
--spectrum-infield-button-stacked-fill-padding-outer: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large);
--spectrum-infield-button-stacked-fill-padding-inner: var(--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large);
}
&.spectrum-InfieldButton--top,
&.spectrum-InfieldButton--bottom {
--mod-infield-button-width: var(--mod-infield-button-width-stacked, var(--spectrum-in-field-button-width-stacked-medium));
&.spectrum-InfieldButton--sizeS {
--mod-infield-button-width: var(--mod-infield-button-width-stacked, var(--spectrum-in-field-button-width-stacked-small));
}
&.spectrum-InfieldButton--sizeL {
--mod-infield-button-width: var(--mod-infield-button-width-stacked, var(--spectrum-in-field-button-width-stacked-large));
}
&.spectrum-InfieldButton--sizeXL {
--mod-infield-button-width: var(--mod-infield-button-width-stacked, var(--spectrum-in-field-button-width-stacked-extra-large));
}
}
&.spectrum-InfieldButton--quiet {
--mod-infield-button-background-color: var(--mod-infield-button-background-color-quiet, transparent);
--mod-infield-button-background-color-hover: var(--mod-infield-button-background-color-hover-quiet, transparent);
--mod-infield-button-background-color-down: var(--mod-infield-button-background-color-down-quiet, transparent);
--mod-infield-button-background-color-key-focus: var(--mod-infield-button-background-color-key-focus-quiet, transparent);
--mod-infield-border-color: var(--mod-infield-border-color-quiet, transparent);
--mod-infield-button-border-width: var(--mod-infield-button-border-width-quiet, 0);
&:disabled {
--mod-infield-button-background-color: var(--mod-infield-button-background-color-quiet-disabled, transparent);
--mod-infield-button-border-color: var(--mod-infield-button-border-color-quiet-disabled, transparent);
}
}
&:hover:not(:disabled),
&:active:not(:disabled),
&:focus-visible:not(:disabled) {
@media (forced-colors: active) {
--highcontrast-infield-button-border-color: Highlight;
}
}
}
.spectrum-InfieldButton {
border-style: none;
background-color: transparent;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
block-size: var(--mod-infield-button-height, var(--spectrum-infield-button-height));
inline-size: var(--mod-infield-button-width, var(--spectrum-infield-button-width));
padding: var(--mod-infield-button-edge-to-fill, var(--spectrum-infield-button-edge-to-fill));
.spectrum-InfieldButton-fill {
block-size: 100%;
inline-size: 100%;
background-color: var(--mod-infield-button-background-color, var(--spectrum-infield-button-background-color));
border-width: var(--mod-infield-button-border-width, var(--spectrum-infield-button-border-width));
border-style: solid;
border-color: var(--highcontrast-infield-button-border-color, var(--mod-infield-button-border-color, var(--spectrum-infield-button-border-color)));
border-end-end-radius: var(--mod-infield-button-border-radius, var(--spectrum-infield-button-border-radius));
border-start-end-radius: var(--mod-infield-button-border-radius, var(--spectrum-infield-button-border-radius));
border-end-start-radius: var(--mod-infield-button-border-radius, var(--spectrum-infield-button-border-radius));
border-start-start-radius: var(--mod-infield-button-border-radius, var(--spectrum-infield-button-border-radius));
padding: var(--mod-infield-button-fill-padding, var(--spectrum-infield-button-fill-padding));
}
.spectrum-InfieldButton-icon {
color: var(--mod-infield-button-icon-color, var(--spectrum-infield-button-icon-color));
}
&.spectrum-InfieldButton--right {
.spectrum-InfieldButton-fill {
border-end-start-radius: var(--mod-infield-button-border-radius-reset, var(--spectrum-infield-button-border-radius-reset));
border-start-start-radius: var(--mod-infield-button-border-radius-reset, var(--spectrum-infield-button-border-radius-reset));
}
}
&.spectrum-InfieldButton--left {
.spectrum-InfieldButton-fill {
border-end-end-radius: var(--mod-infield-button-border-radius-reset, var(--spectrum-infield-button-border-radius-reset));
border-start-end-radius: var(--mod-infield-button-border-radius-reset, var(--spectrum-infield-button-border-radius-reset));
}
}
&:disabled {
cursor: auto;
}
&:hover {
.spectrum-InfieldButton-fill {
background-color: var(--mod-infield-button-background-color-hover, var(--spectrum-infield-button-background-color-hover));
}
.spectrum-InfieldButton-icon {
color: var(--mod-infield-button-icon-color-hover, var(--spectrum-infield-button-icon-color-hover));
}
}
&:active {
.spectrum-InfieldButton-fill {
background-color: var(--mod-infield-button-background-color-down, var(--spectrum-infield-button-background-color-down));
}
.spectrum-InfieldButton-icon {
color: var(--mod-infield-button-icon-color-down, var(--spectrum-infield-button-icon-color-down));
}
}
&:focus-visible {
outline: none;
.spectrum-InfieldButton-fill {
background-color: var(--mod-infield-button-background-color-key-focus, var(--spectrum-infield-button-background-color-key-focus));
}
.spectrum-InfieldButton-icon {
color: var(--mod-infield-button-icon-color-key-focus, var(--spectrum-infield-button-icon-color-key-focus));
}
}
}
.spectrum-InfieldButton-fill {
/* center icon */
display: flex;
align-items: center;
justify-content: var(--mod-infield-button-fill-justify-content, var(--spectrum-infield-button-fill-justify-content));
transition: border-color var(--spectrum-animation-duration-100) ease-in-out;
}
/* Stacked in-field buttons */
/* Not currently in use (stepper uses Action Buttons) but adding the CSS so the option is there */
.spectrum-InfieldButton--top,
.spectrum-InfieldButton--bottom {
block-size: calc(var(--mod-infield-button-height, var(--spectrum-infield-button-height)) / 2);
.spectrum-InfieldButton-fill {
box-sizing: border-box;
padding-inline-start: calc(var(--mod-infield-button-stacked-fill-padding-inline, var(--spectrum-infield-button-stacked-fill-padding-inline)) - var(--mod-infield-button-edge-to-fill, var(--spectrum-infield-button-edge-to-fill)) - var(--mod-infield-button-border-width, var(--spectrum-infield-button-border-width)));
padding-inline-end: calc(var(--mod-infield-button-stacked-fill-padding-inline, var(--spectrum-infield-button-stacked-fill-padding-inline)) - var(--mod-infield-button-edge-to-fill, var(--spectrum-infield-button-edge-to-fill)) - var(--mod-infield-button-border-width, var(--spectrum-infield-button-border-width)));
}
}
.spectrum-InfieldButton--top {
padding-block-end: var(--mod-infield-button-inner-edge-to-fill, var(--spectrum-infield-button-inner-edge-to-fill));
.spectrum-InfieldButton-fill {
padding-block-start: calc(var(--mod-infield-button-stacked-fill-padding-outer, var(--spectrum-infield-button-stacked-fill-padding-outer)) - var(--mod-infield-button-edge-to-fill, var(--spectrum-infield-button-edge-to-fill)) - var(--mod-infield-button-border-width, var(--spectrum-infield-button-border-width)));
padding-block-end: calc(var(--mod-infield-button-stacked-fill-padding-inner, var(--spectrum-infield-button-stacked-fill-padding-inner)) - var(--mod-infield-button-inner-edge-to-fill, var(--spectrum-infield-button-inner-edge-to-fill)));
border-block-end: none;
border-start-start-radius: var(--mod-infield-button-stacked-top-border-radius-start-start, var(--spectrum-infield-button-stacked-top-border-radius-start-start));
border-end-start-radius: var(--mod-infield-button-stacked-border-radius-reset, var(--spectrum-infield-button-stacked-border-radius-reset));
border-end-end-radius: var(--mod-infield-button-stacked-border-radius-reset, var(--spectrum-infield-button-stacked-border-radius-reset));
}
}
.spectrum-InfieldButton--bottom {
padding-block-start: var(--mod-infield-button-inner-edge-to-fill, var(--spectrum-infield-button-inner-edge-to-fill));
.spectrum-InfieldButton-fill {
padding-block-start: calc(var(--mod-infield-button-stacked-fill-padding-inner, var(--spectrum-infield-button-stacked-fill-padding-inner)) - var(--mod-infield-button-edge-to-fill, var(--spectrum-infield-button-edge-to-fill)) - var(--mod-infield-button-border-width, var(--spectrum-infield-button-border-width)));
padding-block-end: calc(var(--mod-infield-button-stacked-fill-padding-outer, var(--spectrum-infield-button-stacked-fill-padding-outer)) - var(--mod-infield-button-inner-edge-to-fill, var(--spectrum-infield-button-inner-edge-to-fill)) - var(--mod-infield-button-border-width, var(--spectrum-infield-button-border-width)));
border-end-start-radius: var(--mod-infield-button-stacked-bottom-border-radius-end-start, var(--spectrum-infield-button-stacked-bottom-border-radius-end-start));
border-start-start-radius: var(--mod-infield-button-stacked-border-radius-reset, var(--spectrum-infield-button-stacked-border-radius-reset));
border-start-end-radius: var(--mod-infield-button-stacked-border-radius-reset, var(--spectrum-infield-button-stacked-border-radius-reset));
border-end-end-radius: var(--mod-infield-button-stacked-bottom-border-radius-end-end, var(--mod-infield-button-border-radius, var(--spectrum-infield-button-border-radius)));
border-block-end-width: var(--mod-infield-button-stacked-bottom-border-block-end-width, var(--mod-infield-button-border-width, var(--spectrum-infield-button-border-width)));
}
}
.spectrum-InfieldButton-icon {
display: initial;
/* don't be small, ever */
flex-shrink: 0;
/* remove margin used for centering */
margin: 0 !important;
}