@vsn-ux/gaia-styles 0.4.2 → 0.4.3
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.
|
@@ -1154,6 +1154,7 @@
|
|
|
1154
1154
|
vertical-align: middle;
|
|
1155
1155
|
--tw-leading: calc(0.4rem * 1);
|
|
1156
1156
|
line-height: calc(0.4rem * 1);
|
|
1157
|
+
white-space: nowrap;
|
|
1157
1158
|
color: var(--ga-color-text-action);
|
|
1158
1159
|
&.ga-segmented-control__button--selected, &:hover {
|
|
1159
1160
|
border-color: var(--ga-color-border-action);
|
|
@@ -1169,12 +1170,23 @@
|
|
|
1169
1170
|
outline-color: var(--ga-color-border-focus);
|
|
1170
1171
|
}
|
|
1171
1172
|
&.ga-segmented-control__button--icon-only {
|
|
1172
|
-
padding-inline: 0.
|
|
1173
|
+
padding-inline: calc(0.4rem * 2.25);
|
|
1173
1174
|
&:hover {
|
|
1174
1175
|
color: var(--ga-color-icon-action-hover);
|
|
1175
1176
|
}
|
|
1176
1177
|
}
|
|
1177
1178
|
}
|
|
1179
|
+
.ga-segmented-control__button-sr-label {
|
|
1180
|
+
position: absolute;
|
|
1181
|
+
width: 1px;
|
|
1182
|
+
height: 1px;
|
|
1183
|
+
padding: 0;
|
|
1184
|
+
margin: -1px;
|
|
1185
|
+
overflow: hidden;
|
|
1186
|
+
clip: rect(0, 0, 0, 0);
|
|
1187
|
+
white-space: nowrap;
|
|
1188
|
+
border-width: 0;
|
|
1189
|
+
}
|
|
1178
1190
|
}
|
|
1179
1191
|
.ga-native-select {
|
|
1180
1192
|
position: relative;
|
package/dist/all-no-reset.css
CHANGED
|
@@ -1154,6 +1154,7 @@
|
|
|
1154
1154
|
vertical-align: middle;
|
|
1155
1155
|
--tw-leading: calc(0.25rem * 1);
|
|
1156
1156
|
line-height: calc(0.25rem * 1);
|
|
1157
|
+
white-space: nowrap;
|
|
1157
1158
|
color: var(--ga-color-text-action);
|
|
1158
1159
|
&.ga-segmented-control__button--selected, &:hover {
|
|
1159
1160
|
border-color: var(--ga-color-border-action);
|
|
@@ -1169,12 +1170,23 @@
|
|
|
1169
1170
|
outline-color: var(--ga-color-border-focus);
|
|
1170
1171
|
}
|
|
1171
1172
|
&.ga-segmented-control__button--icon-only {
|
|
1172
|
-
padding-inline: 0.
|
|
1173
|
+
padding-inline: calc(0.25rem * 2.25);
|
|
1173
1174
|
&:hover {
|
|
1174
1175
|
color: var(--ga-color-icon-action-hover);
|
|
1175
1176
|
}
|
|
1176
1177
|
}
|
|
1177
1178
|
}
|
|
1179
|
+
.ga-segmented-control__button-sr-label {
|
|
1180
|
+
position: absolute;
|
|
1181
|
+
width: 1px;
|
|
1182
|
+
height: 1px;
|
|
1183
|
+
padding: 0;
|
|
1184
|
+
margin: -1px;
|
|
1185
|
+
overflow: hidden;
|
|
1186
|
+
clip: rect(0, 0, 0, 0);
|
|
1187
|
+
white-space: nowrap;
|
|
1188
|
+
border-width: 0;
|
|
1189
|
+
}
|
|
1178
1190
|
}
|
|
1179
1191
|
.ga-native-select {
|
|
1180
1192
|
position: relative;
|
package/dist/all.css
CHANGED
|
@@ -1300,6 +1300,7 @@
|
|
|
1300
1300
|
vertical-align: middle;
|
|
1301
1301
|
--tw-leading: calc(0.25rem * 1);
|
|
1302
1302
|
line-height: calc(0.25rem * 1);
|
|
1303
|
+
white-space: nowrap;
|
|
1303
1304
|
color: var(--ga-color-text-action);
|
|
1304
1305
|
&.ga-segmented-control__button--selected, &:hover {
|
|
1305
1306
|
border-color: var(--ga-color-border-action);
|
|
@@ -1315,12 +1316,23 @@
|
|
|
1315
1316
|
outline-color: var(--ga-color-border-focus);
|
|
1316
1317
|
}
|
|
1317
1318
|
&.ga-segmented-control__button--icon-only {
|
|
1318
|
-
padding-inline: 0.
|
|
1319
|
+
padding-inline: calc(0.25rem * 2.25);
|
|
1319
1320
|
&:hover {
|
|
1320
1321
|
color: var(--ga-color-icon-action-hover);
|
|
1321
1322
|
}
|
|
1322
1323
|
}
|
|
1323
1324
|
}
|
|
1325
|
+
.ga-segmented-control__button-sr-label {
|
|
1326
|
+
position: absolute;
|
|
1327
|
+
width: 1px;
|
|
1328
|
+
height: 1px;
|
|
1329
|
+
padding: 0;
|
|
1330
|
+
margin: -1px;
|
|
1331
|
+
overflow: hidden;
|
|
1332
|
+
clip: rect(0, 0, 0, 0);
|
|
1333
|
+
white-space: nowrap;
|
|
1334
|
+
border-width: 0;
|
|
1335
|
+
}
|
|
1324
1336
|
}
|
|
1325
1337
|
.ga-native-select {
|
|
1326
1338
|
position: relative;
|
|
@@ -30,6 +30,7 @@
|
|
|
30
30
|
vertical-align: middle;
|
|
31
31
|
--tw-leading: calc(0.25rem * 1);
|
|
32
32
|
line-height: calc(0.25rem * 1);
|
|
33
|
+
white-space: nowrap;
|
|
33
34
|
color: var(--ga-color-text-action);
|
|
34
35
|
&.ga-segmented-control__button--selected, &:hover {
|
|
35
36
|
border-color: var(--ga-color-border-action);
|
|
@@ -45,12 +46,23 @@
|
|
|
45
46
|
outline-color: var(--ga-color-border-focus);
|
|
46
47
|
}
|
|
47
48
|
&.ga-segmented-control__button--icon-only {
|
|
48
|
-
padding-inline: 0.
|
|
49
|
+
padding-inline: calc(0.25rem * 2.25);
|
|
49
50
|
&:hover {
|
|
50
51
|
color: var(--ga-color-icon-action-hover);
|
|
51
52
|
}
|
|
52
53
|
}
|
|
53
54
|
}
|
|
55
|
+
.ga-segmented-control__button-sr-label {
|
|
56
|
+
position: absolute;
|
|
57
|
+
width: 1px;
|
|
58
|
+
height: 1px;
|
|
59
|
+
padding: 0;
|
|
60
|
+
margin: -1px;
|
|
61
|
+
overflow: hidden;
|
|
62
|
+
clip: rect(0, 0, 0, 0);
|
|
63
|
+
white-space: nowrap;
|
|
64
|
+
border-width: 0;
|
|
65
|
+
}
|
|
54
66
|
}
|
|
55
67
|
@property --tw-border-style {
|
|
56
68
|
syntax: "*";
|
package/dist/components.css
CHANGED
|
@@ -920,6 +920,7 @@
|
|
|
920
920
|
vertical-align: middle;
|
|
921
921
|
--tw-leading: calc(0.25rem * 1);
|
|
922
922
|
line-height: calc(0.25rem * 1);
|
|
923
|
+
white-space: nowrap;
|
|
923
924
|
color: var(--ga-color-text-action);
|
|
924
925
|
&.ga-segmented-control__button--selected, &:hover {
|
|
925
926
|
border-color: var(--ga-color-border-action);
|
|
@@ -935,12 +936,23 @@
|
|
|
935
936
|
outline-color: var(--ga-color-border-focus);
|
|
936
937
|
}
|
|
937
938
|
&.ga-segmented-control__button--icon-only {
|
|
938
|
-
padding-inline: 0.
|
|
939
|
+
padding-inline: calc(0.25rem * 2.25);
|
|
939
940
|
&:hover {
|
|
940
941
|
color: var(--ga-color-icon-action-hover);
|
|
941
942
|
}
|
|
942
943
|
}
|
|
943
944
|
}
|
|
945
|
+
.ga-segmented-control__button-sr-label {
|
|
946
|
+
position: absolute;
|
|
947
|
+
width: 1px;
|
|
948
|
+
height: 1px;
|
|
949
|
+
padding: 0;
|
|
950
|
+
margin: -1px;
|
|
951
|
+
overflow: hidden;
|
|
952
|
+
clip: rect(0, 0, 0, 0);
|
|
953
|
+
white-space: nowrap;
|
|
954
|
+
border-width: 0;
|
|
955
|
+
}
|
|
944
956
|
}
|
|
945
957
|
.ga-native-select {
|
|
946
958
|
position: relative;
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
@apply text-md inline-flex items-center justify-center gap-0.5 rounded border border-(--ga-color-border-primary) p-0.5 align-middle;
|
|
3
3
|
|
|
4
4
|
.ga-segmented-control__button {
|
|
5
|
-
@apply inline-flex h-9 cursor-pointer items-center justify-center gap-2 rounded border border-transparent bg-(--ga-color-surface-primary) px-4 align-middle leading-1 text-(--ga-color-text-action);
|
|
5
|
+
@apply inline-flex h-9 cursor-pointer items-center justify-center gap-2 rounded border border-transparent bg-(--ga-color-surface-primary) px-4 align-middle leading-1 whitespace-nowrap text-(--ga-color-text-action);
|
|
6
6
|
|
|
7
7
|
&.ga-segmented-control__button--selected,
|
|
8
8
|
&:hover {
|
|
@@ -18,11 +18,15 @@
|
|
|
18
18
|
}
|
|
19
19
|
|
|
20
20
|
&.ga-segmented-control__button--icon-only {
|
|
21
|
-
@apply px-
|
|
21
|
+
@apply px-2.25;
|
|
22
22
|
|
|
23
23
|
&:hover {
|
|
24
24
|
@apply text-(--ga-color-icon-action-hover);
|
|
25
25
|
}
|
|
26
26
|
}
|
|
27
27
|
}
|
|
28
|
+
|
|
29
|
+
.ga-segmented-control__button-sr-label {
|
|
30
|
+
@apply sr-only;
|
|
31
|
+
}
|
|
28
32
|
}
|