@vsn-ux/gaia-styles 0.2.0 → 0.2.2
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/dist/all-no-reset-10pt.css +215 -6
- package/dist/all-no-reset.css +215 -6
- package/dist/all.css +215 -6
- package/dist/base.css +1 -1
- package/dist/components/avatar.css +1 -4
- package/dist/components/badge.css +1 -4
- package/dist/components/button.css +1 -4
- package/dist/components/card.css +1 -4
- package/dist/components/checkbox.css +1 -4
- package/dist/components/dropdown.css +111 -0
- package/dist/components/form-field.css +4 -4
- package/dist/components/input.css +1 -4
- package/dist/components/menu.css +1 -4
- package/dist/components/notification.css +1 -4
- package/dist/components/radio.css +4 -4
- package/dist/components/segmented-control.css +1 -4
- package/dist/components/select.css +141 -0
- package/dist/components/text-area.css +1 -4
- package/dist/components/tooltip.css +1 -4
- package/dist/components.css +215 -9
- package/package.json +1 -1
- package/src/styles/components/dropdown.css +51 -0
- package/src/styles/components/form-field.css +4 -0
- package/src/styles/components/radio.css +4 -0
- package/src/styles/components/select.css +59 -0
- package/src/styles/components.css +2 -0
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/*! tailwindcss v4.0.
|
|
1
|
+
/*! tailwindcss v4.0.9 | MIT License | https://tailwindcss.com */
|
|
2
2
|
:root {
|
|
3
3
|
--ga-color-blue-10: #edf4fe;
|
|
4
4
|
--ga-color-blue-40: #93bbf9;
|
|
@@ -479,10 +479,105 @@
|
|
|
479
479
|
}
|
|
480
480
|
}
|
|
481
481
|
}
|
|
482
|
+
.ga-dropdown {
|
|
483
|
+
display: flex;
|
|
484
|
+
min-width: calc(0.4rem * 36);
|
|
485
|
+
flex-direction: column;
|
|
486
|
+
align-items: stretch;
|
|
487
|
+
border-radius: var(--ga-radius);
|
|
488
|
+
border-style: var(--tw-border-style);
|
|
489
|
+
border-width: 1px;
|
|
490
|
+
border-color: var(--ga-color-border-primary);
|
|
491
|
+
background-color: var(--ga-color-surface-primary);
|
|
492
|
+
--tw-outline-style: none;
|
|
493
|
+
outline-style: none;
|
|
494
|
+
.ga-dropdown__item {
|
|
495
|
+
position: relative;
|
|
496
|
+
display: flex;
|
|
497
|
+
height: calc(0.4rem * 9);
|
|
498
|
+
cursor: pointer;
|
|
499
|
+
flex-direction: row;
|
|
500
|
+
align-items: center;
|
|
501
|
+
gap: calc(0.4rem * 2);
|
|
502
|
+
padding-inline: calc(0.4rem * 3);
|
|
503
|
+
padding-block: calc(0.4rem * 2);
|
|
504
|
+
text-align: left;
|
|
505
|
+
font-size: var(--ga-size-font-md);
|
|
506
|
+
line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
|
|
507
|
+
letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * -0.006));
|
|
508
|
+
--tw-leading: 1;
|
|
509
|
+
line-height: 1;
|
|
510
|
+
color: var(--ga-color-text-action);
|
|
511
|
+
&:first-child {
|
|
512
|
+
border-top-left-radius: var(--ga-radius);
|
|
513
|
+
border-top-right-radius: var(--ga-radius);
|
|
514
|
+
}
|
|
515
|
+
&:last-child {
|
|
516
|
+
border-bottom-right-radius: var(--ga-radius);
|
|
517
|
+
border-bottom-left-radius: var(--ga-radius);
|
|
518
|
+
}
|
|
519
|
+
&:focus {
|
|
520
|
+
--tw-outline-style: none;
|
|
521
|
+
outline-style: none;
|
|
522
|
+
}
|
|
523
|
+
&:hover, &:active {
|
|
524
|
+
background-color: var(--ga-color-surface-action-hover-2);
|
|
525
|
+
color: var(--ga-color-text-action-hover);
|
|
526
|
+
}
|
|
527
|
+
&.ga-dropdown__item--disabled {
|
|
528
|
+
cursor: default;
|
|
529
|
+
background-color: var(--ga-color-surface-disabled);
|
|
530
|
+
color: var(--ga-color-text-disable-selected);
|
|
531
|
+
}
|
|
532
|
+
&.ga-dropdown__item--selected {
|
|
533
|
+
background-color: var(--ga-color-surface-success);
|
|
534
|
+
--tw-font-weight: 600;
|
|
535
|
+
font-weight: 600;
|
|
536
|
+
color: var(--ga-color-text-body);
|
|
537
|
+
&.ga-dropdown__item--disabled {
|
|
538
|
+
background-color: var(--ga-color-surface-disable-selected);
|
|
539
|
+
color: var(--ga-color-text-on-action);
|
|
540
|
+
}
|
|
541
|
+
}
|
|
542
|
+
}
|
|
543
|
+
&:not(:focus-within) .ga-dropdown__item.ga-dropdown__item--active, .ga-dropdown__item:focus-visible {
|
|
544
|
+
&::after {
|
|
545
|
+
position: absolute;
|
|
546
|
+
top: 2px;
|
|
547
|
+
left: 2px;
|
|
548
|
+
height: calc(100% - 4px);
|
|
549
|
+
width: calc(100% - 4px);
|
|
550
|
+
border-radius: var(--ga-radius);
|
|
551
|
+
border-style: var(--tw-border-style);
|
|
552
|
+
border-width: 2px;
|
|
553
|
+
border-color: var(--ga-color-border-focus);
|
|
554
|
+
--tw-content: '';
|
|
555
|
+
content: var(--tw-content);
|
|
556
|
+
}
|
|
557
|
+
}
|
|
558
|
+
.ga-dropdown__caption {
|
|
559
|
+
padding-inline: calc(0.4rem * 3);
|
|
560
|
+
padding-top: calc(0.4rem * 3);
|
|
561
|
+
padding-bottom: calc(0.4rem * 2);
|
|
562
|
+
font-size: var(--ga-size-font-sm);
|
|
563
|
+
line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
|
|
564
|
+
letter-spacing: var(--tw-tracking, 0);
|
|
565
|
+
--tw-font-weight: 600;
|
|
566
|
+
font-weight: 600;
|
|
567
|
+
}
|
|
568
|
+
.ga-dropdown__content-spinner {
|
|
569
|
+
margin-inline: auto;
|
|
570
|
+
margin-block: calc(0.4rem * 8);
|
|
571
|
+
display: inline-flex;
|
|
572
|
+
}
|
|
573
|
+
}
|
|
482
574
|
.ga-form-field {
|
|
483
575
|
display: flex;
|
|
484
576
|
flex-direction: column;
|
|
485
577
|
gap: calc(0.4rem * 2);
|
|
578
|
+
> * {
|
|
579
|
+
width: 100%;
|
|
580
|
+
}
|
|
486
581
|
.ga-form-field__label {
|
|
487
582
|
padding-inline: calc(0.4rem * 1);
|
|
488
583
|
font-size: var(--ga-size-font-md);
|
|
@@ -786,6 +881,9 @@
|
|
|
786
881
|
letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * -0.006));
|
|
787
882
|
--tw-leading: calc(0.4rem * 4);
|
|
788
883
|
line-height: calc(0.4rem * 4);
|
|
884
|
+
&:empty {
|
|
885
|
+
display: none;
|
|
886
|
+
}
|
|
789
887
|
}
|
|
790
888
|
}
|
|
791
889
|
.ga-segmented-control {
|
|
@@ -850,6 +948,117 @@
|
|
|
850
948
|
}
|
|
851
949
|
}
|
|
852
950
|
}
|
|
951
|
+
.ga-native-select {
|
|
952
|
+
position: relative;
|
|
953
|
+
select {
|
|
954
|
+
height: calc(0.4rem * 10);
|
|
955
|
+
appearance: none;
|
|
956
|
+
border-radius: var(--ga-radius);
|
|
957
|
+
border-style: var(--tw-border-style);
|
|
958
|
+
border-width: 1px;
|
|
959
|
+
border-color: var(--ga-color-border-primary);
|
|
960
|
+
background-color: var(--ga-color-surface-primary);
|
|
961
|
+
padding-block: calc(0.4rem * 2);
|
|
962
|
+
padding-right: calc(0.4rem * 9);
|
|
963
|
+
padding-left: calc(0.4rem * 3);
|
|
964
|
+
font-size: var(--ga-size-font-md);
|
|
965
|
+
line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
|
|
966
|
+
letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * -0.006));
|
|
967
|
+
--tw-leading: 1;
|
|
968
|
+
line-height: 1;
|
|
969
|
+
}
|
|
970
|
+
.ga-native-select__arrow {
|
|
971
|
+
pointer-events: none;
|
|
972
|
+
position: absolute;
|
|
973
|
+
top: calc(1/2 * 100%);
|
|
974
|
+
right: calc(0.4rem * 2);
|
|
975
|
+
--tw-translate-y: calc(calc(1/2 * 100%) * -1);
|
|
976
|
+
translate: var(--tw-translate-x) var(--tw-translate-y);
|
|
977
|
+
}
|
|
978
|
+
}
|
|
979
|
+
.ga-select {
|
|
980
|
+
display: inline-flex;
|
|
981
|
+
height: calc(0.4rem * 10);
|
|
982
|
+
width: calc(0.4rem * 50);
|
|
983
|
+
cursor: pointer;
|
|
984
|
+
appearance: none;
|
|
985
|
+
align-items: center;
|
|
986
|
+
gap: calc(0.4rem * 2);
|
|
987
|
+
border-radius: var(--ga-radius);
|
|
988
|
+
border-style: var(--tw-border-style);
|
|
989
|
+
border-width: 1px;
|
|
990
|
+
border-color: var(--ga-color-border-primary);
|
|
991
|
+
background-color: var(--ga-color-surface-primary);
|
|
992
|
+
padding-block: calc(0.4rem * 2);
|
|
993
|
+
padding-right: calc(0.4rem * 2);
|
|
994
|
+
padding-left: calc(0.4rem * 3);
|
|
995
|
+
text-align: left;
|
|
996
|
+
font-size: var(--ga-size-font-md);
|
|
997
|
+
line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
|
|
998
|
+
letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * -0.006));
|
|
999
|
+
--tw-leading: 1;
|
|
1000
|
+
line-height: 1;
|
|
1001
|
+
&.ga-select--expanded {
|
|
1002
|
+
border-color: var(--ga-color-border-focus);
|
|
1003
|
+
outline-style: var(--tw-outline-style);
|
|
1004
|
+
outline-width: 1px;
|
|
1005
|
+
outline-color: var(--ga-color-border-focus);
|
|
1006
|
+
}
|
|
1007
|
+
&:hover {
|
|
1008
|
+
border-color: var(--ga-color-border-action-hover);
|
|
1009
|
+
&:not(.ga-select--empty, .ga-select--disabled) {
|
|
1010
|
+
background-color: var(--ga-color-surface-action-hover-2);
|
|
1011
|
+
}
|
|
1012
|
+
}
|
|
1013
|
+
&.ga-select--disabled {
|
|
1014
|
+
cursor: not-allowed;
|
|
1015
|
+
border-color: var(--ga-color-border-primary);
|
|
1016
|
+
background-color: var(--ga-color-surface-disabled);
|
|
1017
|
+
color: var(--ga-color-text-disable-selected);
|
|
1018
|
+
}
|
|
1019
|
+
&:focus-visible {
|
|
1020
|
+
outline-style: var(--tw-outline-style);
|
|
1021
|
+
outline-width: 2px;
|
|
1022
|
+
outline-offset: 2px;
|
|
1023
|
+
outline-color: var(--ga-color-border-focus);
|
|
1024
|
+
}
|
|
1025
|
+
&.ga-select--invalid {
|
|
1026
|
+
border-color: var(--ga-color-border-error);
|
|
1027
|
+
outline-style: var(--tw-outline-style);
|
|
1028
|
+
outline-width: 1px;
|
|
1029
|
+
outline-color: var(--ga-color-border-error);
|
|
1030
|
+
&:not(.ga-select--empty) {
|
|
1031
|
+
background-color: var(--ga-color-surface-error);
|
|
1032
|
+
}
|
|
1033
|
+
}
|
|
1034
|
+
.ga-select__placeholder {
|
|
1035
|
+
min-width: calc(0.4rem * 0);
|
|
1036
|
+
flex: 1;
|
|
1037
|
+
overflow: hidden;
|
|
1038
|
+
text-overflow: ellipsis;
|
|
1039
|
+
white-space: nowrap;
|
|
1040
|
+
color: var(--ga-color-text-disabled);
|
|
1041
|
+
}
|
|
1042
|
+
.ga-select__value {
|
|
1043
|
+
min-width: calc(0.4rem * 0);
|
|
1044
|
+
flex: 1;
|
|
1045
|
+
overflow: hidden;
|
|
1046
|
+
text-overflow: ellipsis;
|
|
1047
|
+
white-space: nowrap;
|
|
1048
|
+
}
|
|
1049
|
+
.ga-select__input {
|
|
1050
|
+
height: calc(0.4rem * 6);
|
|
1051
|
+
min-width: calc(0.4rem * 0);
|
|
1052
|
+
flex: 1;
|
|
1053
|
+
--tw-leading: calc(0.4rem * 6);
|
|
1054
|
+
line-height: calc(0.4rem * 6);
|
|
1055
|
+
--tw-outline-style: none;
|
|
1056
|
+
outline-style: none;
|
|
1057
|
+
&:is(input)::placeholder {
|
|
1058
|
+
color: var(--ga-color-text-disabled);
|
|
1059
|
+
}
|
|
1060
|
+
}
|
|
1061
|
+
}
|
|
853
1062
|
.ga-text-area {
|
|
854
1063
|
display: flex;
|
|
855
1064
|
width: calc(0.4rem * 50);
|
|
@@ -1068,6 +1277,11 @@
|
|
|
1068
1277
|
inherits: false;
|
|
1069
1278
|
initial-value: solid;
|
|
1070
1279
|
}
|
|
1280
|
+
@property --tw-content {
|
|
1281
|
+
syntax: "*";
|
|
1282
|
+
inherits: false;
|
|
1283
|
+
initial-value: "";
|
|
1284
|
+
}
|
|
1071
1285
|
@property --tw-translate-x {
|
|
1072
1286
|
syntax: "*";
|
|
1073
1287
|
inherits: false;
|
|
@@ -1083,8 +1297,3 @@
|
|
|
1083
1297
|
inherits: false;
|
|
1084
1298
|
initial-value: 0;
|
|
1085
1299
|
}
|
|
1086
|
-
@property --tw-content {
|
|
1087
|
-
syntax: "*";
|
|
1088
|
-
inherits: false;
|
|
1089
|
-
initial-value: "";
|
|
1090
|
-
}
|
package/dist/all-no-reset.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/*! tailwindcss v4.0.
|
|
1
|
+
/*! tailwindcss v4.0.9 | MIT License | https://tailwindcss.com */
|
|
2
2
|
:root {
|
|
3
3
|
--ga-color-blue-10: #edf4fe;
|
|
4
4
|
--ga-color-blue-40: #93bbf9;
|
|
@@ -479,10 +479,105 @@
|
|
|
479
479
|
}
|
|
480
480
|
}
|
|
481
481
|
}
|
|
482
|
+
.ga-dropdown {
|
|
483
|
+
display: flex;
|
|
484
|
+
min-width: calc(0.25rem * 36);
|
|
485
|
+
flex-direction: column;
|
|
486
|
+
align-items: stretch;
|
|
487
|
+
border-radius: var(--ga-radius);
|
|
488
|
+
border-style: var(--tw-border-style);
|
|
489
|
+
border-width: 1px;
|
|
490
|
+
border-color: var(--ga-color-border-primary);
|
|
491
|
+
background-color: var(--ga-color-surface-primary);
|
|
492
|
+
--tw-outline-style: none;
|
|
493
|
+
outline-style: none;
|
|
494
|
+
.ga-dropdown__item {
|
|
495
|
+
position: relative;
|
|
496
|
+
display: flex;
|
|
497
|
+
height: calc(0.25rem * 9);
|
|
498
|
+
cursor: pointer;
|
|
499
|
+
flex-direction: row;
|
|
500
|
+
align-items: center;
|
|
501
|
+
gap: calc(0.25rem * 2);
|
|
502
|
+
padding-inline: calc(0.25rem * 3);
|
|
503
|
+
padding-block: calc(0.25rem * 2);
|
|
504
|
+
text-align: left;
|
|
505
|
+
font-size: var(--ga-size-font-md);
|
|
506
|
+
line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
|
|
507
|
+
letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * -0.006));
|
|
508
|
+
--tw-leading: 1;
|
|
509
|
+
line-height: 1;
|
|
510
|
+
color: var(--ga-color-text-action);
|
|
511
|
+
&:first-child {
|
|
512
|
+
border-top-left-radius: var(--ga-radius);
|
|
513
|
+
border-top-right-radius: var(--ga-radius);
|
|
514
|
+
}
|
|
515
|
+
&:last-child {
|
|
516
|
+
border-bottom-right-radius: var(--ga-radius);
|
|
517
|
+
border-bottom-left-radius: var(--ga-radius);
|
|
518
|
+
}
|
|
519
|
+
&:focus {
|
|
520
|
+
--tw-outline-style: none;
|
|
521
|
+
outline-style: none;
|
|
522
|
+
}
|
|
523
|
+
&:hover, &:active {
|
|
524
|
+
background-color: var(--ga-color-surface-action-hover-2);
|
|
525
|
+
color: var(--ga-color-text-action-hover);
|
|
526
|
+
}
|
|
527
|
+
&.ga-dropdown__item--disabled {
|
|
528
|
+
cursor: default;
|
|
529
|
+
background-color: var(--ga-color-surface-disabled);
|
|
530
|
+
color: var(--ga-color-text-disable-selected);
|
|
531
|
+
}
|
|
532
|
+
&.ga-dropdown__item--selected {
|
|
533
|
+
background-color: var(--ga-color-surface-success);
|
|
534
|
+
--tw-font-weight: 600;
|
|
535
|
+
font-weight: 600;
|
|
536
|
+
color: var(--ga-color-text-body);
|
|
537
|
+
&.ga-dropdown__item--disabled {
|
|
538
|
+
background-color: var(--ga-color-surface-disable-selected);
|
|
539
|
+
color: var(--ga-color-text-on-action);
|
|
540
|
+
}
|
|
541
|
+
}
|
|
542
|
+
}
|
|
543
|
+
&:not(:focus-within) .ga-dropdown__item.ga-dropdown__item--active, .ga-dropdown__item:focus-visible {
|
|
544
|
+
&::after {
|
|
545
|
+
position: absolute;
|
|
546
|
+
top: 2px;
|
|
547
|
+
left: 2px;
|
|
548
|
+
height: calc(100% - 4px);
|
|
549
|
+
width: calc(100% - 4px);
|
|
550
|
+
border-radius: var(--ga-radius);
|
|
551
|
+
border-style: var(--tw-border-style);
|
|
552
|
+
border-width: 2px;
|
|
553
|
+
border-color: var(--ga-color-border-focus);
|
|
554
|
+
--tw-content: '';
|
|
555
|
+
content: var(--tw-content);
|
|
556
|
+
}
|
|
557
|
+
}
|
|
558
|
+
.ga-dropdown__caption {
|
|
559
|
+
padding-inline: calc(0.25rem * 3);
|
|
560
|
+
padding-top: calc(0.25rem * 3);
|
|
561
|
+
padding-bottom: calc(0.25rem * 2);
|
|
562
|
+
font-size: var(--ga-size-font-sm);
|
|
563
|
+
line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
|
|
564
|
+
letter-spacing: var(--tw-tracking, 0);
|
|
565
|
+
--tw-font-weight: 600;
|
|
566
|
+
font-weight: 600;
|
|
567
|
+
}
|
|
568
|
+
.ga-dropdown__content-spinner {
|
|
569
|
+
margin-inline: auto;
|
|
570
|
+
margin-block: calc(0.25rem * 8);
|
|
571
|
+
display: inline-flex;
|
|
572
|
+
}
|
|
573
|
+
}
|
|
482
574
|
.ga-form-field {
|
|
483
575
|
display: flex;
|
|
484
576
|
flex-direction: column;
|
|
485
577
|
gap: calc(0.25rem * 2);
|
|
578
|
+
> * {
|
|
579
|
+
width: 100%;
|
|
580
|
+
}
|
|
486
581
|
.ga-form-field__label {
|
|
487
582
|
padding-inline: calc(0.25rem * 1);
|
|
488
583
|
font-size: var(--ga-size-font-md);
|
|
@@ -786,6 +881,9 @@
|
|
|
786
881
|
letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * -0.006));
|
|
787
882
|
--tw-leading: calc(0.25rem * 4);
|
|
788
883
|
line-height: calc(0.25rem * 4);
|
|
884
|
+
&:empty {
|
|
885
|
+
display: none;
|
|
886
|
+
}
|
|
789
887
|
}
|
|
790
888
|
}
|
|
791
889
|
.ga-segmented-control {
|
|
@@ -850,6 +948,117 @@
|
|
|
850
948
|
}
|
|
851
949
|
}
|
|
852
950
|
}
|
|
951
|
+
.ga-native-select {
|
|
952
|
+
position: relative;
|
|
953
|
+
select {
|
|
954
|
+
height: calc(0.25rem * 10);
|
|
955
|
+
appearance: none;
|
|
956
|
+
border-radius: var(--ga-radius);
|
|
957
|
+
border-style: var(--tw-border-style);
|
|
958
|
+
border-width: 1px;
|
|
959
|
+
border-color: var(--ga-color-border-primary);
|
|
960
|
+
background-color: var(--ga-color-surface-primary);
|
|
961
|
+
padding-block: calc(0.25rem * 2);
|
|
962
|
+
padding-right: calc(0.25rem * 9);
|
|
963
|
+
padding-left: calc(0.25rem * 3);
|
|
964
|
+
font-size: var(--ga-size-font-md);
|
|
965
|
+
line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
|
|
966
|
+
letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * -0.006));
|
|
967
|
+
--tw-leading: 1;
|
|
968
|
+
line-height: 1;
|
|
969
|
+
}
|
|
970
|
+
.ga-native-select__arrow {
|
|
971
|
+
pointer-events: none;
|
|
972
|
+
position: absolute;
|
|
973
|
+
top: calc(1/2 * 100%);
|
|
974
|
+
right: calc(0.25rem * 2);
|
|
975
|
+
--tw-translate-y: calc(calc(1/2 * 100%) * -1);
|
|
976
|
+
translate: var(--tw-translate-x) var(--tw-translate-y);
|
|
977
|
+
}
|
|
978
|
+
}
|
|
979
|
+
.ga-select {
|
|
980
|
+
display: inline-flex;
|
|
981
|
+
height: calc(0.25rem * 10);
|
|
982
|
+
width: calc(0.25rem * 50);
|
|
983
|
+
cursor: pointer;
|
|
984
|
+
appearance: none;
|
|
985
|
+
align-items: center;
|
|
986
|
+
gap: calc(0.25rem * 2);
|
|
987
|
+
border-radius: var(--ga-radius);
|
|
988
|
+
border-style: var(--tw-border-style);
|
|
989
|
+
border-width: 1px;
|
|
990
|
+
border-color: var(--ga-color-border-primary);
|
|
991
|
+
background-color: var(--ga-color-surface-primary);
|
|
992
|
+
padding-block: calc(0.25rem * 2);
|
|
993
|
+
padding-right: calc(0.25rem * 2);
|
|
994
|
+
padding-left: calc(0.25rem * 3);
|
|
995
|
+
text-align: left;
|
|
996
|
+
font-size: var(--ga-size-font-md);
|
|
997
|
+
line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
|
|
998
|
+
letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * -0.006));
|
|
999
|
+
--tw-leading: 1;
|
|
1000
|
+
line-height: 1;
|
|
1001
|
+
&.ga-select--expanded {
|
|
1002
|
+
border-color: var(--ga-color-border-focus);
|
|
1003
|
+
outline-style: var(--tw-outline-style);
|
|
1004
|
+
outline-width: 1px;
|
|
1005
|
+
outline-color: var(--ga-color-border-focus);
|
|
1006
|
+
}
|
|
1007
|
+
&:hover {
|
|
1008
|
+
border-color: var(--ga-color-border-action-hover);
|
|
1009
|
+
&:not(.ga-select--empty, .ga-select--disabled) {
|
|
1010
|
+
background-color: var(--ga-color-surface-action-hover-2);
|
|
1011
|
+
}
|
|
1012
|
+
}
|
|
1013
|
+
&.ga-select--disabled {
|
|
1014
|
+
cursor: not-allowed;
|
|
1015
|
+
border-color: var(--ga-color-border-primary);
|
|
1016
|
+
background-color: var(--ga-color-surface-disabled);
|
|
1017
|
+
color: var(--ga-color-text-disable-selected);
|
|
1018
|
+
}
|
|
1019
|
+
&:focus-visible {
|
|
1020
|
+
outline-style: var(--tw-outline-style);
|
|
1021
|
+
outline-width: 2px;
|
|
1022
|
+
outline-offset: 2px;
|
|
1023
|
+
outline-color: var(--ga-color-border-focus);
|
|
1024
|
+
}
|
|
1025
|
+
&.ga-select--invalid {
|
|
1026
|
+
border-color: var(--ga-color-border-error);
|
|
1027
|
+
outline-style: var(--tw-outline-style);
|
|
1028
|
+
outline-width: 1px;
|
|
1029
|
+
outline-color: var(--ga-color-border-error);
|
|
1030
|
+
&:not(.ga-select--empty) {
|
|
1031
|
+
background-color: var(--ga-color-surface-error);
|
|
1032
|
+
}
|
|
1033
|
+
}
|
|
1034
|
+
.ga-select__placeholder {
|
|
1035
|
+
min-width: calc(0.25rem * 0);
|
|
1036
|
+
flex: 1;
|
|
1037
|
+
overflow: hidden;
|
|
1038
|
+
text-overflow: ellipsis;
|
|
1039
|
+
white-space: nowrap;
|
|
1040
|
+
color: var(--ga-color-text-disabled);
|
|
1041
|
+
}
|
|
1042
|
+
.ga-select__value {
|
|
1043
|
+
min-width: calc(0.25rem * 0);
|
|
1044
|
+
flex: 1;
|
|
1045
|
+
overflow: hidden;
|
|
1046
|
+
text-overflow: ellipsis;
|
|
1047
|
+
white-space: nowrap;
|
|
1048
|
+
}
|
|
1049
|
+
.ga-select__input {
|
|
1050
|
+
height: calc(0.25rem * 6);
|
|
1051
|
+
min-width: calc(0.25rem * 0);
|
|
1052
|
+
flex: 1;
|
|
1053
|
+
--tw-leading: calc(0.25rem * 6);
|
|
1054
|
+
line-height: calc(0.25rem * 6);
|
|
1055
|
+
--tw-outline-style: none;
|
|
1056
|
+
outline-style: none;
|
|
1057
|
+
&:is(input)::placeholder {
|
|
1058
|
+
color: var(--ga-color-text-disabled);
|
|
1059
|
+
}
|
|
1060
|
+
}
|
|
1061
|
+
}
|
|
853
1062
|
.ga-text-area {
|
|
854
1063
|
display: flex;
|
|
855
1064
|
width: calc(0.25rem * 50);
|
|
@@ -1068,6 +1277,11 @@
|
|
|
1068
1277
|
inherits: false;
|
|
1069
1278
|
initial-value: solid;
|
|
1070
1279
|
}
|
|
1280
|
+
@property --tw-content {
|
|
1281
|
+
syntax: "*";
|
|
1282
|
+
inherits: false;
|
|
1283
|
+
initial-value: "";
|
|
1284
|
+
}
|
|
1071
1285
|
@property --tw-translate-x {
|
|
1072
1286
|
syntax: "*";
|
|
1073
1287
|
inherits: false;
|
|
@@ -1083,8 +1297,3 @@
|
|
|
1083
1297
|
inherits: false;
|
|
1084
1298
|
initial-value: 0;
|
|
1085
1299
|
}
|
|
1086
|
-
@property --tw-content {
|
|
1087
|
-
syntax: "*";
|
|
1088
|
-
inherits: false;
|
|
1089
|
-
initial-value: "";
|
|
1090
|
-
}
|