@vsn-ux/gaia-styles 0.4.6 → 0.4.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +63 -15
- package/dist/all-no-reset-10pt.css +145 -20
- package/dist/all-no-reset.css +145 -20
- package/dist/all.css +142 -21
- package/dist/base.css +1 -1
- package/dist/components/avatar.css +1 -1
- package/dist/components/badge.css +1 -1
- package/dist/components/button.css +6 -7
- package/dist/components/card.css +1 -1
- package/dist/components/checkbox.css +1 -1
- package/dist/components/dropdown.css +1 -8
- package/dist/components/form-field.css +1 -1
- package/dist/components/input.css +1 -1
- package/dist/components/link.css +1 -1
- package/dist/components/menu.css +1 -1
- package/dist/components/modal.css +152 -0
- package/dist/components/notification.css +1 -1
- package/dist/components/radio.css +1 -1
- package/dist/components/segmented-control.css +1 -1
- package/dist/components/select.css +1 -1
- package/dist/components/switch.css +1 -1
- package/dist/components/tag.css +2 -2
- package/dist/components/text-area.css +1 -1
- package/dist/components/tooltip.css +1 -1
- package/dist/components.css +140 -10
- package/dist/design-tokens.css +1 -13
- package/dist/design-tokens.js +3 -3
- package/package.json +1 -1
- package/src/design-tokens/dtcg-tokens.json +5 -5
- package/src/font/InterVariable-Italic.woff2 +0 -0
- package/src/font/InterVariable.woff2 +0 -0
- package/src/font/inter.css +4 -46
- package/src/styles/components/button.css +5 -5
- package/src/styles/components/dropdown.css +1 -1
- package/src/styles/components/modal.css +89 -0
- package/src/styles/components/tag.css +1 -1
- package/src/styles/components.css +1 -0
package/README.md
CHANGED
|
@@ -90,25 +90,73 @@ Want to import just the base styles?
|
|
|
90
90
|
/* ... */
|
|
91
91
|
```
|
|
92
92
|
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
It is highly recommended to preload the font files in your HTML to avoid
|
|
96
|
-
This should be implemented according to your framework specifics, typically in the `<head>` section of your `index.html`.
|
|
93
|
+
## Inter font
|
|
94
|
+
|
|
95
|
+
It is highly recommended to preload the font files in your HTML to avoid FOUT (Flash of Unstyled Text).\
|
|
96
|
+
This should be implemented according to your framework specifics, typically in the `<head>` section of your `index.html`. e.g.
|
|
97
|
+
|
|
98
|
+
```html
|
|
99
|
+
<head>
|
|
100
|
+
<!-- ... -->
|
|
101
|
+
<link
|
|
102
|
+
rel="preload"
|
|
103
|
+
href="<path-to-your-assets-or-cdn>/InterVariable.woff2?v=4.1"
|
|
104
|
+
as="font"
|
|
105
|
+
type="font/woff2"
|
|
106
|
+
crossorigin="anonymous"
|
|
107
|
+
/>
|
|
108
|
+
<link
|
|
109
|
+
rel="preload"
|
|
110
|
+
href="<path-to-your-assets-or-cdn>/InterVariable-Italic.woff2?v=4.1"
|
|
111
|
+
as="font"
|
|
112
|
+
type="font/woff2"
|
|
113
|
+
crossorigin="anonymous"
|
|
114
|
+
/>
|
|
115
|
+
</head>
|
|
116
|
+
```
|
|
97
117
|
|
|
98
|
-
|
|
118
|
+
Since the deployed path to the font files may vary depending on your project's structure or hosting setup, you will need to handle the font loading and declaration yourself:
|
|
99
119
|
|
|
120
|
+
```css
|
|
121
|
+
@font-face {
|
|
122
|
+
font-family: 'Inter';
|
|
123
|
+
font-style: normal;
|
|
124
|
+
font-weight: 400 700;
|
|
125
|
+
font-display: swap;
|
|
126
|
+
src: url('<path-to-your-assets-or-cdn>/InterVariable.woff2') format('woff2');
|
|
127
|
+
}
|
|
128
|
+
@font-face {
|
|
129
|
+
font-family: 'Inter';
|
|
130
|
+
font-style: italic;
|
|
131
|
+
font-weight: 400 700;
|
|
132
|
+
font-display: swap;
|
|
133
|
+
src: url('<path-to-your-assets-or-cdn>/InterVariable-Italic.woff2')
|
|
134
|
+
format('woff2');
|
|
135
|
+
}
|
|
100
136
|
```
|
|
101
|
-
@vsn-ux/gaia-styles/font/Inter-Bold.woff2
|
|
102
|
-
@vsn-ux/gaia-styles/font/Inter-BoldItalic.woff2
|
|
103
|
-
@vsn-ux/gaia-styles/font/Inter-Italic.woff2
|
|
104
|
-
@vsn-ux/gaia-styles/font/Inter-Medium.woff2
|
|
105
|
-
@vsn-ux/gaia-styles/font/Inter-MediumItalic.woff2
|
|
106
|
-
@vsn-ux/gaia-styles/font/Inter-Regular.woff2
|
|
107
|
-
@vsn-ux/gaia-styles/font/Inter-SemiBold.woff2
|
|
108
|
-
@vsn-ux/gaia-styles/font/Inter-SemiBoldItalic.woff2
|
|
109
|
-
```
|
|
110
137
|
|
|
111
|
-
|
|
138
|
+
Available font files in the package to copy to your assets folder or CDN:
|
|
139
|
+
|
|
140
|
+
- **Variable font files (recommended):**
|
|
141
|
+
|
|
142
|
+
- `@vsn-ux/gaia-styles/font/InterVariable.woff2`
|
|
143
|
+
- `@vsn-ux/gaia-styles/font/InterVariable-Italic.woff2`
|
|
144
|
+
|
|
145
|
+
- **Static font files:**
|
|
146
|
+
- `@vsn-ux/gaia-styles/font/Inter-Bold.woff2`
|
|
147
|
+
- `@vsn-ux/gaia-styles/font/Inter-BoldItalic.woff2`
|
|
148
|
+
- `@vsn-ux/gaia-styles/font/Inter-Italic.woff2`
|
|
149
|
+
- `@vsn-ux/gaia-styles/font/Inter-Medium.woff2`
|
|
150
|
+
- `@vsn-ux/gaia-styles/font/Inter-MediumItalic.woff2`
|
|
151
|
+
- `@vsn-ux/gaia-styles/font/Inter-Regular.woff2`
|
|
152
|
+
- `@vsn-ux/gaia-styles/font/Inter-SemiBold.woff2`
|
|
153
|
+
- `@vsn-ux/gaia-styles/font/Inter-SemiBoldItalic.woff2`
|
|
154
|
+
|
|
155
|
+
### Quick setup
|
|
156
|
+
|
|
157
|
+
> Note: This quick setup is recommended only if your application is not sensitive to Flash of Unstyled Text (FOUT), such as when your initial load already takes some time or FOUT is not a concern for your users.
|
|
158
|
+
|
|
159
|
+
The package also provides CSS file with `@font-face` declarations for the variable font files that handles everything for you.
|
|
112
160
|
|
|
113
161
|
```css
|
|
114
162
|
@import '@vsn-ux/gaia-styles/font/inter.css';
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/*! tailwindcss v4.1.
|
|
1
|
+
/*! tailwindcss v4.1.6 | MIT License | https://tailwindcss.com */
|
|
2
2
|
@layer properties;
|
|
3
3
|
:root {
|
|
4
4
|
--ga-color-black: #000000;
|
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
--ga-color-information-light: var(--ga-color-utility-blue-light);
|
|
49
49
|
--ga-color-lime-10: #edf6dd;
|
|
50
50
|
--ga-color-lime-40: #a5c656;
|
|
51
|
-
--ga-color-miscellaneous-overlay: #
|
|
51
|
+
--ga-color-miscellaneous-overlay: #70778891;
|
|
52
52
|
--ga-color-miscellaneous-skeleton-element: var(--ga-color-neutral-10);
|
|
53
53
|
--ga-color-miscellaneous-skeleton-highlight: var(--ga-color-neutral-20);
|
|
54
54
|
--ga-color-neutral: var(--ga-color-neutral-30);
|
|
@@ -210,17 +210,12 @@
|
|
|
210
210
|
--ga-text-xs-line-height: 1rem;
|
|
211
211
|
--ga-text-xs-tracking: 0.005rem;
|
|
212
212
|
}
|
|
213
|
-
@
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
}
|
|
218
|
-
@media (color-gamut: rec2020) {
|
|
219
|
-
:root {
|
|
220
|
-
--ga-color-miscellaneous-overlay: #3e00ff91;
|
|
213
|
+
@layer theme, base, components, utilities;
|
|
214
|
+
@layer theme {
|
|
215
|
+
:root, :host {
|
|
216
|
+
--spacing: 0.4rem;
|
|
221
217
|
}
|
|
222
218
|
}
|
|
223
|
-
@layer theme, base, components, utilities;
|
|
224
219
|
@layer base {
|
|
225
220
|
body {
|
|
226
221
|
font-family: Inter, ui-sans-serif, system-ui, sans-serif;
|
|
@@ -350,8 +345,8 @@
|
|
|
350
345
|
));
|
|
351
346
|
--tw-leading: calc(0.4rem * 1);
|
|
352
347
|
line-height: calc(0.4rem * 1);
|
|
353
|
-
--tw-font-weight:
|
|
354
|
-
font-weight:
|
|
348
|
+
--tw-font-weight: 500;
|
|
349
|
+
font-weight: 500;
|
|
355
350
|
white-space: nowrap;
|
|
356
351
|
&:focus-visible {
|
|
357
352
|
outline-style: var(--tw-outline-style);
|
|
@@ -373,7 +368,7 @@
|
|
|
373
368
|
}
|
|
374
369
|
&:disabled {
|
|
375
370
|
background-color: var(--ga-color-surface-disabled);
|
|
376
|
-
color: var(--ga-color-text-
|
|
371
|
+
color: var(--ga-color-text-disable-selected);
|
|
377
372
|
}
|
|
378
373
|
}
|
|
379
374
|
&.ga-button--secondary {
|
|
@@ -398,13 +393,12 @@
|
|
|
398
393
|
background-color: transparent;
|
|
399
394
|
color: var(--ga-color-text-action);
|
|
400
395
|
&:hover {
|
|
401
|
-
|
|
396
|
+
color: var(--ga-color-text-action-hover);
|
|
402
397
|
}
|
|
403
398
|
&:active {
|
|
404
|
-
|
|
399
|
+
color: var(--ga-color-text-action);
|
|
405
400
|
}
|
|
406
401
|
&:disabled {
|
|
407
|
-
background-color: transparent;
|
|
408
402
|
color: var(--ga-color-text-disabled);
|
|
409
403
|
}
|
|
410
404
|
}
|
|
@@ -607,8 +601,6 @@
|
|
|
607
601
|
letter-spacing: var(--tw-tracking, calc(
|
|
608
602
|
var(--ga-text-md-tracking) * var(--ga-base-scaling-factor, 1)
|
|
609
603
|
));
|
|
610
|
-
--tw-leading: 1;
|
|
611
|
-
line-height: 1;
|
|
612
604
|
color: var(--ga-color-text-action);
|
|
613
605
|
&:first-child {
|
|
614
606
|
border-top-left-radius: var(--ga-radius);
|
|
@@ -1122,6 +1114,139 @@
|
|
|
1122
1114
|
font-weight: 600;
|
|
1123
1115
|
}
|
|
1124
1116
|
}
|
|
1117
|
+
.ga-modal__backdrop {
|
|
1118
|
+
position: fixed;
|
|
1119
|
+
inset: calc(0.4rem * 0);
|
|
1120
|
+
z-index: 50;
|
|
1121
|
+
background-color: var(--ga-color-miscellaneous-overlay);
|
|
1122
|
+
}
|
|
1123
|
+
.ga-modal__container {
|
|
1124
|
+
position: fixed;
|
|
1125
|
+
inset: calc(0.4rem * 0);
|
|
1126
|
+
z-index: 50;
|
|
1127
|
+
display: flex;
|
|
1128
|
+
align-items: flex-start;
|
|
1129
|
+
justify-content: center;
|
|
1130
|
+
.ga-modal {
|
|
1131
|
+
margin-top: calc(0.4rem * 16);
|
|
1132
|
+
}
|
|
1133
|
+
}
|
|
1134
|
+
.ga-modal {
|
|
1135
|
+
display: inline-flex;
|
|
1136
|
+
max-height: calc(100vh - var(--spacing) * 16 * 2);
|
|
1137
|
+
width: 100%;
|
|
1138
|
+
max-width: calc(100vw - var(--spacing) * 8 * 2);
|
|
1139
|
+
flex-direction: column;
|
|
1140
|
+
overflow-y: auto;
|
|
1141
|
+
border-radius: var(--ga-radius);
|
|
1142
|
+
border-style: var(--tw-border-style);
|
|
1143
|
+
border-width: 1px;
|
|
1144
|
+
border-color: var(--ga-color-border-focus);
|
|
1145
|
+
background-color: #fff;
|
|
1146
|
+
padding-inline: calc(0.4rem * 2);
|
|
1147
|
+
padding-block: calc(0.4rem * 4);
|
|
1148
|
+
font-size: calc(
|
|
1149
|
+
var(--ga-text-md-font-size) * var(--ga-base-scaling-factor, 1)
|
|
1150
|
+
);
|
|
1151
|
+
line-height: var(--tw-leading, calc(
|
|
1152
|
+
var(--ga-text-md-line-height) * var(--ga-base-scaling-factor, 1)
|
|
1153
|
+
));
|
|
1154
|
+
letter-spacing: var(--tw-tracking, calc(
|
|
1155
|
+
var(--ga-text-md-tracking) * var(--ga-base-scaling-factor, 1)
|
|
1156
|
+
));
|
|
1157
|
+
scrollbar-width: thin;
|
|
1158
|
+
&.ga-modal--small {
|
|
1159
|
+
width: calc(0.4rem * 85);
|
|
1160
|
+
}
|
|
1161
|
+
&.ga-modal--medium {
|
|
1162
|
+
width: calc(0.4rem * 174);
|
|
1163
|
+
}
|
|
1164
|
+
&.ga-modal--large {
|
|
1165
|
+
width: calc(0.4rem * 307.5);
|
|
1166
|
+
}
|
|
1167
|
+
&.ga-modal--danger .ga-modal__icon {
|
|
1168
|
+
color: var(--ga-color-icon-error);
|
|
1169
|
+
}
|
|
1170
|
+
&.ga-modal--warning .ga-modal__icon {
|
|
1171
|
+
color: var(--ga-color-icon-warning);
|
|
1172
|
+
}
|
|
1173
|
+
&.ga-modal--success .ga-modal__icon {
|
|
1174
|
+
color: var(--ga-color-icon-success);
|
|
1175
|
+
}
|
|
1176
|
+
&.ga-modal--information .ga-modal__icon {
|
|
1177
|
+
color: var(--ga-color-icon-information);
|
|
1178
|
+
}
|
|
1179
|
+
.ga-modal__top-section {
|
|
1180
|
+
display: flex;
|
|
1181
|
+
min-height: calc(0.4rem * 16);
|
|
1182
|
+
flex-shrink: 0;
|
|
1183
|
+
align-items: flex-start;
|
|
1184
|
+
gap: calc(0.4rem * 4);
|
|
1185
|
+
padding-inline: calc(0.4rem * 2);
|
|
1186
|
+
padding-bottom: calc(0.4rem * 2);
|
|
1187
|
+
&.ga-modal__top-section--scrollable {
|
|
1188
|
+
flex-shrink: 1;
|
|
1189
|
+
}
|
|
1190
|
+
}
|
|
1191
|
+
.ga-modal__heading {
|
|
1192
|
+
display: flex;
|
|
1193
|
+
min-height: calc(0.4rem * 0);
|
|
1194
|
+
flex: 1;
|
|
1195
|
+
flex-direction: column;
|
|
1196
|
+
align-self: stretch;
|
|
1197
|
+
}
|
|
1198
|
+
.ga-modal__icon {
|
|
1199
|
+
padding: calc(0.4rem * 2);
|
|
1200
|
+
}
|
|
1201
|
+
.ga-modal__label {
|
|
1202
|
+
margin-bottom: calc(0.4rem * 1);
|
|
1203
|
+
display: flex;
|
|
1204
|
+
min-height: calc(0.4rem * 6);
|
|
1205
|
+
align-items: center;
|
|
1206
|
+
}
|
|
1207
|
+
.ga-modal__title {
|
|
1208
|
+
font-size: calc(
|
|
1209
|
+
var(--ga-text-xl-font-size) * var(--ga-base-scaling-factor, 1)
|
|
1210
|
+
);
|
|
1211
|
+
line-height: var(--tw-leading, calc(
|
|
1212
|
+
var(--ga-text-xl-line-height) * var(--ga-base-scaling-factor, 1)
|
|
1213
|
+
));
|
|
1214
|
+
letter-spacing: var(--tw-tracking, calc(
|
|
1215
|
+
var(--ga-text-xl-tracking) * var(--ga-base-scaling-factor, 1)
|
|
1216
|
+
));
|
|
1217
|
+
--tw-font-weight: 600;
|
|
1218
|
+
font-weight: 600;
|
|
1219
|
+
}
|
|
1220
|
+
.ga-modal__content {
|
|
1221
|
+
margin-top: calc(0.4rem * 4);
|
|
1222
|
+
min-height: calc(0.4rem * 0);
|
|
1223
|
+
overflow-y: auto;
|
|
1224
|
+
padding: calc(0.4rem * 2);
|
|
1225
|
+
&:empty {
|
|
1226
|
+
margin-top: calc(0.4rem * 0);
|
|
1227
|
+
}
|
|
1228
|
+
scrollbar-width: thin;
|
|
1229
|
+
}
|
|
1230
|
+
.ga-modal__description {
|
|
1231
|
+
margin-top: calc(0.4rem * 4);
|
|
1232
|
+
min-height: calc(0.4rem * 0);
|
|
1233
|
+
overflow-y: auto;
|
|
1234
|
+
scrollbar-width: thin;
|
|
1235
|
+
}
|
|
1236
|
+
.ga-modal__actions {
|
|
1237
|
+
margin-top: calc(0.4rem * 6);
|
|
1238
|
+
display: flex;
|
|
1239
|
+
flex-wrap: wrap;
|
|
1240
|
+
align-items: center;
|
|
1241
|
+
justify-content: flex-end;
|
|
1242
|
+
gap: calc(0.4rem * 2);
|
|
1243
|
+
padding-right: calc(0.4rem * 2);
|
|
1244
|
+
}
|
|
1245
|
+
.ga-modal__close-icon {
|
|
1246
|
+
margin-top: calc(0.4rem * -2);
|
|
1247
|
+
margin-right: calc(0.4rem * -2);
|
|
1248
|
+
}
|
|
1249
|
+
}
|
|
1125
1250
|
.ga-radio-group {
|
|
1126
1251
|
display: inline-flex;
|
|
1127
1252
|
flex-direction: column;
|
|
@@ -1707,7 +1832,7 @@
|
|
|
1707
1832
|
.ga-tag__separator {
|
|
1708
1833
|
height: calc(0.4rem * 5);
|
|
1709
1834
|
width: 1px;
|
|
1710
|
-
background-color: var(--ga-color-border-
|
|
1835
|
+
background-color: var(--ga-color-border-disabled);
|
|
1711
1836
|
}
|
|
1712
1837
|
}
|
|
1713
1838
|
.ga-text-area {
|
package/dist/all-no-reset.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/*! tailwindcss v4.1.
|
|
1
|
+
/*! tailwindcss v4.1.6 | MIT License | https://tailwindcss.com */
|
|
2
2
|
@layer properties;
|
|
3
3
|
:root {
|
|
4
4
|
--ga-color-black: #000000;
|
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
--ga-color-information-light: var(--ga-color-utility-blue-light);
|
|
49
49
|
--ga-color-lime-10: #edf6dd;
|
|
50
50
|
--ga-color-lime-40: #a5c656;
|
|
51
|
-
--ga-color-miscellaneous-overlay: #
|
|
51
|
+
--ga-color-miscellaneous-overlay: #70778891;
|
|
52
52
|
--ga-color-miscellaneous-skeleton-element: var(--ga-color-neutral-10);
|
|
53
53
|
--ga-color-miscellaneous-skeleton-highlight: var(--ga-color-neutral-20);
|
|
54
54
|
--ga-color-neutral: var(--ga-color-neutral-30);
|
|
@@ -210,17 +210,12 @@
|
|
|
210
210
|
--ga-text-xs-line-height: 1rem;
|
|
211
211
|
--ga-text-xs-tracking: 0.005rem;
|
|
212
212
|
}
|
|
213
|
-
@
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
}
|
|
218
|
-
@media (color-gamut: rec2020) {
|
|
219
|
-
:root {
|
|
220
|
-
--ga-color-miscellaneous-overlay: #3e00ff91;
|
|
213
|
+
@layer theme, base, components, utilities;
|
|
214
|
+
@layer theme {
|
|
215
|
+
:root, :host {
|
|
216
|
+
--spacing: 0.25rem;
|
|
221
217
|
}
|
|
222
218
|
}
|
|
223
|
-
@layer theme, base, components, utilities;
|
|
224
219
|
@layer base {
|
|
225
220
|
body {
|
|
226
221
|
font-family: Inter, ui-sans-serif, system-ui, sans-serif;
|
|
@@ -350,8 +345,8 @@
|
|
|
350
345
|
));
|
|
351
346
|
--tw-leading: calc(0.25rem * 1);
|
|
352
347
|
line-height: calc(0.25rem * 1);
|
|
353
|
-
--tw-font-weight:
|
|
354
|
-
font-weight:
|
|
348
|
+
--tw-font-weight: 500;
|
|
349
|
+
font-weight: 500;
|
|
355
350
|
white-space: nowrap;
|
|
356
351
|
&:focus-visible {
|
|
357
352
|
outline-style: var(--tw-outline-style);
|
|
@@ -373,7 +368,7 @@
|
|
|
373
368
|
}
|
|
374
369
|
&:disabled {
|
|
375
370
|
background-color: var(--ga-color-surface-disabled);
|
|
376
|
-
color: var(--ga-color-text-
|
|
371
|
+
color: var(--ga-color-text-disable-selected);
|
|
377
372
|
}
|
|
378
373
|
}
|
|
379
374
|
&.ga-button--secondary {
|
|
@@ -398,13 +393,12 @@
|
|
|
398
393
|
background-color: transparent;
|
|
399
394
|
color: var(--ga-color-text-action);
|
|
400
395
|
&:hover {
|
|
401
|
-
|
|
396
|
+
color: var(--ga-color-text-action-hover);
|
|
402
397
|
}
|
|
403
398
|
&:active {
|
|
404
|
-
|
|
399
|
+
color: var(--ga-color-text-action);
|
|
405
400
|
}
|
|
406
401
|
&:disabled {
|
|
407
|
-
background-color: transparent;
|
|
408
402
|
color: var(--ga-color-text-disabled);
|
|
409
403
|
}
|
|
410
404
|
}
|
|
@@ -607,8 +601,6 @@
|
|
|
607
601
|
letter-spacing: var(--tw-tracking, calc(
|
|
608
602
|
var(--ga-text-md-tracking) * var(--ga-base-scaling-factor, 1)
|
|
609
603
|
));
|
|
610
|
-
--tw-leading: 1;
|
|
611
|
-
line-height: 1;
|
|
612
604
|
color: var(--ga-color-text-action);
|
|
613
605
|
&:first-child {
|
|
614
606
|
border-top-left-radius: var(--ga-radius);
|
|
@@ -1122,6 +1114,139 @@
|
|
|
1122
1114
|
font-weight: 600;
|
|
1123
1115
|
}
|
|
1124
1116
|
}
|
|
1117
|
+
.ga-modal__backdrop {
|
|
1118
|
+
position: fixed;
|
|
1119
|
+
inset: calc(0.25rem * 0);
|
|
1120
|
+
z-index: 50;
|
|
1121
|
+
background-color: var(--ga-color-miscellaneous-overlay);
|
|
1122
|
+
}
|
|
1123
|
+
.ga-modal__container {
|
|
1124
|
+
position: fixed;
|
|
1125
|
+
inset: calc(0.25rem * 0);
|
|
1126
|
+
z-index: 50;
|
|
1127
|
+
display: flex;
|
|
1128
|
+
align-items: flex-start;
|
|
1129
|
+
justify-content: center;
|
|
1130
|
+
.ga-modal {
|
|
1131
|
+
margin-top: calc(0.25rem * 16);
|
|
1132
|
+
}
|
|
1133
|
+
}
|
|
1134
|
+
.ga-modal {
|
|
1135
|
+
display: inline-flex;
|
|
1136
|
+
max-height: calc(100vh - var(--spacing) * 16 * 2);
|
|
1137
|
+
width: 100%;
|
|
1138
|
+
max-width: calc(100vw - var(--spacing) * 8 * 2);
|
|
1139
|
+
flex-direction: column;
|
|
1140
|
+
overflow-y: auto;
|
|
1141
|
+
border-radius: var(--ga-radius);
|
|
1142
|
+
border-style: var(--tw-border-style);
|
|
1143
|
+
border-width: 1px;
|
|
1144
|
+
border-color: var(--ga-color-border-focus);
|
|
1145
|
+
background-color: #fff;
|
|
1146
|
+
padding-inline: calc(0.25rem * 2);
|
|
1147
|
+
padding-block: calc(0.25rem * 4);
|
|
1148
|
+
font-size: calc(
|
|
1149
|
+
var(--ga-text-md-font-size) * var(--ga-base-scaling-factor, 1)
|
|
1150
|
+
);
|
|
1151
|
+
line-height: var(--tw-leading, calc(
|
|
1152
|
+
var(--ga-text-md-line-height) * var(--ga-base-scaling-factor, 1)
|
|
1153
|
+
));
|
|
1154
|
+
letter-spacing: var(--tw-tracking, calc(
|
|
1155
|
+
var(--ga-text-md-tracking) * var(--ga-base-scaling-factor, 1)
|
|
1156
|
+
));
|
|
1157
|
+
scrollbar-width: thin;
|
|
1158
|
+
&.ga-modal--small {
|
|
1159
|
+
width: calc(0.25rem * 85);
|
|
1160
|
+
}
|
|
1161
|
+
&.ga-modal--medium {
|
|
1162
|
+
width: calc(0.25rem * 174);
|
|
1163
|
+
}
|
|
1164
|
+
&.ga-modal--large {
|
|
1165
|
+
width: calc(0.25rem * 307.5);
|
|
1166
|
+
}
|
|
1167
|
+
&.ga-modal--danger .ga-modal__icon {
|
|
1168
|
+
color: var(--ga-color-icon-error);
|
|
1169
|
+
}
|
|
1170
|
+
&.ga-modal--warning .ga-modal__icon {
|
|
1171
|
+
color: var(--ga-color-icon-warning);
|
|
1172
|
+
}
|
|
1173
|
+
&.ga-modal--success .ga-modal__icon {
|
|
1174
|
+
color: var(--ga-color-icon-success);
|
|
1175
|
+
}
|
|
1176
|
+
&.ga-modal--information .ga-modal__icon {
|
|
1177
|
+
color: var(--ga-color-icon-information);
|
|
1178
|
+
}
|
|
1179
|
+
.ga-modal__top-section {
|
|
1180
|
+
display: flex;
|
|
1181
|
+
min-height: calc(0.25rem * 16);
|
|
1182
|
+
flex-shrink: 0;
|
|
1183
|
+
align-items: flex-start;
|
|
1184
|
+
gap: calc(0.25rem * 4);
|
|
1185
|
+
padding-inline: calc(0.25rem * 2);
|
|
1186
|
+
padding-bottom: calc(0.25rem * 2);
|
|
1187
|
+
&.ga-modal__top-section--scrollable {
|
|
1188
|
+
flex-shrink: 1;
|
|
1189
|
+
}
|
|
1190
|
+
}
|
|
1191
|
+
.ga-modal__heading {
|
|
1192
|
+
display: flex;
|
|
1193
|
+
min-height: calc(0.25rem * 0);
|
|
1194
|
+
flex: 1;
|
|
1195
|
+
flex-direction: column;
|
|
1196
|
+
align-self: stretch;
|
|
1197
|
+
}
|
|
1198
|
+
.ga-modal__icon {
|
|
1199
|
+
padding: calc(0.25rem * 2);
|
|
1200
|
+
}
|
|
1201
|
+
.ga-modal__label {
|
|
1202
|
+
margin-bottom: calc(0.25rem * 1);
|
|
1203
|
+
display: flex;
|
|
1204
|
+
min-height: calc(0.25rem * 6);
|
|
1205
|
+
align-items: center;
|
|
1206
|
+
}
|
|
1207
|
+
.ga-modal__title {
|
|
1208
|
+
font-size: calc(
|
|
1209
|
+
var(--ga-text-xl-font-size) * var(--ga-base-scaling-factor, 1)
|
|
1210
|
+
);
|
|
1211
|
+
line-height: var(--tw-leading, calc(
|
|
1212
|
+
var(--ga-text-xl-line-height) * var(--ga-base-scaling-factor, 1)
|
|
1213
|
+
));
|
|
1214
|
+
letter-spacing: var(--tw-tracking, calc(
|
|
1215
|
+
var(--ga-text-xl-tracking) * var(--ga-base-scaling-factor, 1)
|
|
1216
|
+
));
|
|
1217
|
+
--tw-font-weight: 600;
|
|
1218
|
+
font-weight: 600;
|
|
1219
|
+
}
|
|
1220
|
+
.ga-modal__content {
|
|
1221
|
+
margin-top: calc(0.25rem * 4);
|
|
1222
|
+
min-height: calc(0.25rem * 0);
|
|
1223
|
+
overflow-y: auto;
|
|
1224
|
+
padding: calc(0.25rem * 2);
|
|
1225
|
+
&:empty {
|
|
1226
|
+
margin-top: calc(0.25rem * 0);
|
|
1227
|
+
}
|
|
1228
|
+
scrollbar-width: thin;
|
|
1229
|
+
}
|
|
1230
|
+
.ga-modal__description {
|
|
1231
|
+
margin-top: calc(0.25rem * 4);
|
|
1232
|
+
min-height: calc(0.25rem * 0);
|
|
1233
|
+
overflow-y: auto;
|
|
1234
|
+
scrollbar-width: thin;
|
|
1235
|
+
}
|
|
1236
|
+
.ga-modal__actions {
|
|
1237
|
+
margin-top: calc(0.25rem * 6);
|
|
1238
|
+
display: flex;
|
|
1239
|
+
flex-wrap: wrap;
|
|
1240
|
+
align-items: center;
|
|
1241
|
+
justify-content: flex-end;
|
|
1242
|
+
gap: calc(0.25rem * 2);
|
|
1243
|
+
padding-right: calc(0.25rem * 2);
|
|
1244
|
+
}
|
|
1245
|
+
.ga-modal__close-icon {
|
|
1246
|
+
margin-top: calc(0.25rem * -2);
|
|
1247
|
+
margin-right: calc(0.25rem * -2);
|
|
1248
|
+
}
|
|
1249
|
+
}
|
|
1125
1250
|
.ga-radio-group {
|
|
1126
1251
|
display: inline-flex;
|
|
1127
1252
|
flex-direction: column;
|
|
@@ -1707,7 +1832,7 @@
|
|
|
1707
1832
|
.ga-tag__separator {
|
|
1708
1833
|
height: calc(0.25rem * 5);
|
|
1709
1834
|
width: 1px;
|
|
1710
|
-
background-color: var(--ga-color-border-
|
|
1835
|
+
background-color: var(--ga-color-border-disabled);
|
|
1711
1836
|
}
|
|
1712
1837
|
}
|
|
1713
1838
|
.ga-text-area {
|