@policystudio/policy-studio-ui-vue 1.2.0-access.22 → 1.2.0-access.23
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.
|
@@ -530,7 +530,7 @@ video {
|
|
|
530
530
|
outline: none;
|
|
531
531
|
}
|
|
532
532
|
.psui-el-chips:focus-visible {
|
|
533
|
-
outline: 2px solid #
|
|
533
|
+
outline: 2px solid #2563eb;
|
|
534
534
|
outline-offset: 2px;
|
|
535
535
|
border-radius: 6px;
|
|
536
536
|
}
|
|
@@ -776,6 +776,106 @@ video {
|
|
|
776
776
|
.psui-el-chips.type-radio .psui-el-chips-wrapper:before {
|
|
777
777
|
content: "radio_button_unchecked";
|
|
778
778
|
}
|
|
779
|
+
.psui-el-chips.layout-filter.type-checkbox .psui-el-chips-wrapper, .psui-el-chips.layout-filter.type-radio .psui-el-chips-wrapper {
|
|
780
|
+
--tw-border-opacity: 1;
|
|
781
|
+
border-color: rgb(162, 172, 183, var(--tw-border-opacity, 1));
|
|
782
|
+
}
|
|
783
|
+
.psui-el-chips.layout-filter.type-checkbox .psui-el-chips-wrapper, .psui-el-chips.layout-filter.type-radio .psui-el-chips-wrapper {
|
|
784
|
+
--tw-bg-opacity: 1;
|
|
785
|
+
background-color: rgb(255, 255, 255, var(--tw-bg-opacity, 1));
|
|
786
|
+
}
|
|
787
|
+
.psui-el-chips.layout-filter.type-checkbox .psui-el-chips-wrapper, .psui-el-chips.layout-filter.type-radio .psui-el-chips-wrapper {
|
|
788
|
+
--tw-text-opacity: 1;
|
|
789
|
+
color: rgb(81, 94, 106, var(--tw-text-opacity, 1));
|
|
790
|
+
}
|
|
791
|
+
.psui-el-chips.layout-filter.type-checkbox .psui-el-chips-wrapper, .psui-el-chips.layout-filter.type-radio .psui-el-chips-wrapper {
|
|
792
|
+
padding: 5px 8px;
|
|
793
|
+
}
|
|
794
|
+
.psui-el-chips.layout-filter.type-checkbox .psui-el-chips-wrapper:hover, .psui-el-chips.layout-filter.type-radio .psui-el-chips-wrapper:hover {
|
|
795
|
+
--tw-border-opacity: 1;
|
|
796
|
+
border-color: rgb(18, 121, 153, var(--tw-border-opacity, 1));
|
|
797
|
+
}
|
|
798
|
+
.psui-el-chips.layout-filter.type-checkbox .psui-el-chips-wrapper:hover, .psui-el-chips.layout-filter.type-radio .psui-el-chips-wrapper:hover {
|
|
799
|
+
--tw-bg-opacity: 1;
|
|
800
|
+
background-color: rgb(255, 255, 255, var(--tw-bg-opacity, 1));
|
|
801
|
+
}
|
|
802
|
+
.psui-el-chips.layout-filter.type-checkbox .psui-el-chips-wrapper:hover, .psui-el-chips.layout-filter.type-radio .psui-el-chips-wrapper:hover {
|
|
803
|
+
--tw-text-opacity: 1;
|
|
804
|
+
color: rgb(18, 121, 153, var(--tw-text-opacity, 1));
|
|
805
|
+
}
|
|
806
|
+
.psui-el-chips.layout-filter.type-checkbox .psui-el-chips-wrapper:hover:before, .psui-el-chips.layout-filter.type-radio .psui-el-chips-wrapper:hover:before {
|
|
807
|
+
--tw-text-opacity: 1;
|
|
808
|
+
color: rgb(18, 121, 153, var(--tw-text-opacity, 1));
|
|
809
|
+
}
|
|
810
|
+
.psui-el-chips.layout-filter.type-checkbox input:checked + .psui-el-chips-wrapper, .psui-el-chips.layout-filter.type-radio input:checked + .psui-el-chips-wrapper {
|
|
811
|
+
--tw-border-opacity: 1;
|
|
812
|
+
border-color: rgb(18, 121, 153, var(--tw-border-opacity, 1));
|
|
813
|
+
}
|
|
814
|
+
.psui-el-chips.layout-filter.type-checkbox input:checked + .psui-el-chips-wrapper, .psui-el-chips.layout-filter.type-radio input:checked + .psui-el-chips-wrapper {
|
|
815
|
+
--tw-bg-opacity: 1;
|
|
816
|
+
background-color: rgb(236, 247, 251, var(--tw-bg-opacity, 1));
|
|
817
|
+
}
|
|
818
|
+
.psui-el-chips.layout-filter.type-checkbox input:checked + .psui-el-chips-wrapper, .psui-el-chips.layout-filter.type-radio input:checked + .psui-el-chips-wrapper {
|
|
819
|
+
font-weight: 700;
|
|
820
|
+
}
|
|
821
|
+
.psui-el-chips.layout-filter.type-checkbox input:checked + .psui-el-chips-wrapper, .psui-el-chips.layout-filter.type-radio input:checked + .psui-el-chips-wrapper {
|
|
822
|
+
--tw-text-opacity: 1;
|
|
823
|
+
color: rgb(0, 42, 58, var(--tw-text-opacity, 1));
|
|
824
|
+
}
|
|
825
|
+
.psui-el-chips.layout-filter.type-checkbox input:checked + .psui-el-chips-wrapper:before, .psui-el-chips.layout-filter.type-radio input:checked + .psui-el-chips-wrapper:before {
|
|
826
|
+
--tw-text-opacity: 1;
|
|
827
|
+
color: rgb(18, 121, 153, var(--tw-text-opacity, 1));
|
|
828
|
+
}
|
|
829
|
+
.psui-el-chips.layout-filter.type-checkbox input:checked + .psui-el-chips-wrapper:hover, .psui-el-chips.layout-filter.type-radio input:checked + .psui-el-chips-wrapper:hover {
|
|
830
|
+
--tw-text-opacity: 1;
|
|
831
|
+
color: rgb(18, 121, 153, var(--tw-text-opacity, 1));
|
|
832
|
+
}
|
|
833
|
+
.psui-el-chips.layout-filter.type-button .psui-el-chips-wrapper {
|
|
834
|
+
--tw-border-opacity: 1;
|
|
835
|
+
border-color: rgb(162, 172, 183, var(--tw-border-opacity, 1));
|
|
836
|
+
}
|
|
837
|
+
.psui-el-chips.layout-filter.type-button .psui-el-chips-wrapper {
|
|
838
|
+
--tw-bg-opacity: 1;
|
|
839
|
+
background-color: rgb(255, 255, 255, var(--tw-bg-opacity, 1));
|
|
840
|
+
}
|
|
841
|
+
.psui-el-chips.layout-filter.type-button .psui-el-chips-wrapper {
|
|
842
|
+
--tw-text-opacity: 1;
|
|
843
|
+
color: rgb(81, 94, 106, var(--tw-text-opacity, 1));
|
|
844
|
+
}
|
|
845
|
+
.psui-el-chips.layout-filter.type-button .psui-el-chips-wrapper {
|
|
846
|
+
padding: 5px 8px;
|
|
847
|
+
}
|
|
848
|
+
.psui-el-chips.layout-filter.type-button .psui-el-chips-wrapper:hover {
|
|
849
|
+
--tw-border-opacity: 1;
|
|
850
|
+
border-color: rgb(18, 121, 153, var(--tw-border-opacity, 1));
|
|
851
|
+
}
|
|
852
|
+
.psui-el-chips.layout-filter.type-button .psui-el-chips-wrapper:hover {
|
|
853
|
+
--tw-bg-opacity: 1;
|
|
854
|
+
background-color: rgb(255, 255, 255, var(--tw-bg-opacity, 1));
|
|
855
|
+
}
|
|
856
|
+
.psui-el-chips.layout-filter.type-button .psui-el-chips-wrapper:hover {
|
|
857
|
+
--tw-text-opacity: 1;
|
|
858
|
+
color: rgb(18, 121, 153, var(--tw-text-opacity, 1));
|
|
859
|
+
}
|
|
860
|
+
.psui-el-chips.layout-filter.type-button .psui-el-chips-wrapper.checked {
|
|
861
|
+
--tw-border-opacity: 1;
|
|
862
|
+
border-color: rgb(18, 121, 153, var(--tw-border-opacity, 1));
|
|
863
|
+
}
|
|
864
|
+
.psui-el-chips.layout-filter.type-button .psui-el-chips-wrapper.checked {
|
|
865
|
+
--tw-bg-opacity: 1;
|
|
866
|
+
background-color: rgb(236, 247, 251, var(--tw-bg-opacity, 1));
|
|
867
|
+
}
|
|
868
|
+
.psui-el-chips.layout-filter.type-button .psui-el-chips-wrapper.checked {
|
|
869
|
+
font-weight: 700;
|
|
870
|
+
}
|
|
871
|
+
.psui-el-chips.layout-filter.type-button .psui-el-chips-wrapper.checked {
|
|
872
|
+
--tw-text-opacity: 1;
|
|
873
|
+
color: rgb(0, 42, 58, var(--tw-text-opacity, 1));
|
|
874
|
+
}
|
|
875
|
+
.psui-el-chips.layout-filter.type-button .psui-el-chips-wrapper.checked:hover {
|
|
876
|
+
--tw-text-opacity: 1;
|
|
877
|
+
color: rgb(18, 121, 153, var(--tw-text-opacity, 1));
|
|
878
|
+
}
|
|
779
879
|
.psui-el-chips.type-button.layout-with-icon .psui-el-chips-wrapper {
|
|
780
880
|
display: flex;
|
|
781
881
|
}
|
|
@@ -1026,7 +1126,7 @@ video {
|
|
|
1026
1126
|
background-color: rgb(230, 236, 242, var(--tw-bg-opacity, 1));
|
|
1027
1127
|
}
|
|
1028
1128
|
.psui-el-tab-header.layout-policy-design button {
|
|
1029
|
-
padding:
|
|
1129
|
+
padding: 9px 2px 10px 0px;
|
|
1030
1130
|
margin-right: 8px;
|
|
1031
1131
|
}
|
|
1032
1132
|
.psui-el-tab-header.layout-policy-design button {
|
|
@@ -1041,9 +1141,6 @@ video {
|
|
|
1041
1141
|
.psui-el-tab-header.layout-policy-design button:not(:first-child) {
|
|
1042
1142
|
margin-left: 8px;
|
|
1043
1143
|
}
|
|
1044
|
-
.psui-el-tab-header.layout-policy-design button:after {
|
|
1045
|
-
content: "";
|
|
1046
|
-
}
|
|
1047
1144
|
.psui-el-tab-header.layout-policy-design button:after {
|
|
1048
1145
|
position: absolute;
|
|
1049
1146
|
}
|
|
@@ -1062,6 +1159,12 @@ video {
|
|
|
1062
1159
|
.psui-el-tab-header.layout-policy-design button:after {
|
|
1063
1160
|
width: 100%;
|
|
1064
1161
|
}
|
|
1162
|
+
.psui-el-tab-header.layout-policy-design button:after {
|
|
1163
|
+
border-top-left-radius: 20px;
|
|
1164
|
+
}
|
|
1165
|
+
.psui-el-tab-header.layout-policy-design button:after {
|
|
1166
|
+
border-top-right-radius: 20px;
|
|
1167
|
+
}
|
|
1065
1168
|
.psui-el-tab-header.layout-policy-design button:after {
|
|
1066
1169
|
--tw-bg-opacity: 1;
|
|
1067
1170
|
background-color: rgb(18, 121, 153, var(--tw-bg-opacity, 1));
|
|
@@ -1074,45 +1177,41 @@ video {
|
|
|
1074
1177
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
1075
1178
|
transition-duration: 150ms;
|
|
1076
1179
|
}
|
|
1077
|
-
.psui-el-tab-header.layout-policy-design button:
|
|
1078
|
-
--tw-
|
|
1079
|
-
|
|
1080
|
-
}
|
|
1081
|
-
.psui-el-tab-header.layout-policy-design button.status-active {
|
|
1082
|
-
--tw-border-opacity: 1;
|
|
1083
|
-
border-color: rgb(18, 121, 153, var(--tw-border-opacity, 1));
|
|
1180
|
+
.psui-el-tab-header.layout-policy-design button:after {
|
|
1181
|
+
--tw-content: "";
|
|
1182
|
+
content: var(--tw-content);
|
|
1084
1183
|
}
|
|
1085
|
-
.psui-el-tab-header.layout-policy-design button
|
|
1086
|
-
|
|
1184
|
+
.psui-el-tab-header.layout-policy-design button:hover > span {
|
|
1185
|
+
font-weight: 600;
|
|
1087
1186
|
}
|
|
1088
|
-
.psui-el-tab-header.layout-policy-design button
|
|
1187
|
+
.psui-el-tab-header.layout-policy-design button:hover > span {
|
|
1089
1188
|
--tw-text-opacity: 1;
|
|
1090
1189
|
color: rgb(18, 121, 153, var(--tw-text-opacity, 1));
|
|
1091
1190
|
}
|
|
1092
|
-
.psui-el-tab-header.layout-policy-design button
|
|
1093
|
-
font-weight: 700;
|
|
1094
|
-
}
|
|
1095
|
-
.psui-el-tab-header.layout-policy-design button.status-active > span {
|
|
1191
|
+
.psui-el-tab-header.layout-policy-design button:hover > div {
|
|
1096
1192
|
--tw-text-opacity: 1;
|
|
1097
|
-
color: rgb(
|
|
1193
|
+
color: rgb(18, 121, 153, var(--tw-text-opacity, 1));
|
|
1194
|
+
}
|
|
1195
|
+
.psui-el-tab-header.layout-policy-design button.status-active:after {
|
|
1196
|
+
opacity: 1;
|
|
1098
1197
|
}
|
|
1099
1198
|
.psui-el-tab-header.layout-policy-design button > div {
|
|
1100
1199
|
margin-right: 0.25rem;
|
|
1101
1200
|
}
|
|
1102
1201
|
.psui-el-tab-header.layout-policy-design button > div {
|
|
1103
1202
|
--tw-text-opacity: 1;
|
|
1104
|
-
color: rgb(
|
|
1203
|
+
color: rgb(18, 121, 153, var(--tw-text-opacity, 1));
|
|
1105
1204
|
}
|
|
1106
1205
|
.psui-el-tab-header.layout-policy-design button > span {
|
|
1107
1206
|
line-height: 120%;
|
|
1108
1207
|
font-size: 14px;
|
|
1109
1208
|
}
|
|
1110
1209
|
.psui-el-tab-header.layout-policy-design button > span {
|
|
1111
|
-
font-weight:
|
|
1210
|
+
font-weight: 600;
|
|
1112
1211
|
}
|
|
1113
1212
|
.psui-el-tab-header.layout-policy-design button > span {
|
|
1114
1213
|
--tw-text-opacity: 1;
|
|
1115
|
-
color: rgb(
|
|
1214
|
+
color: rgb(40, 50, 59, var(--tw-text-opacity, 1));
|
|
1116
1215
|
}
|
|
1117
1216
|
.psui-el-tab-header.layout-standard {
|
|
1118
1217
|
border-radius: 0.375rem;
|
package/package.json
CHANGED
|
@@ -1,17 +1,16 @@
|
|
|
1
1
|
@layer components {
|
|
2
|
-
|
|
3
2
|
.psui-el-chips {
|
|
4
3
|
@apply psui-inline-flex psui-relative;
|
|
5
4
|
|
|
6
5
|
&:focus {
|
|
7
|
-
|
|
8
|
-
|
|
6
|
+
outline: none;
|
|
7
|
+
}
|
|
9
8
|
|
|
10
9
|
&:focus-visible {
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
10
|
+
outline: 2px solid #2563eb;
|
|
11
|
+
outline-offset: 2px;
|
|
12
|
+
border-radius: 6px;
|
|
13
|
+
}
|
|
15
14
|
|
|
16
15
|
&-icon {
|
|
17
16
|
@apply psui-icon;
|
|
@@ -23,7 +22,7 @@
|
|
|
23
22
|
align-items: center;
|
|
24
23
|
justify-content: center;
|
|
25
24
|
position: relative;
|
|
26
|
-
|
|
25
|
+
|
|
27
26
|
&::after {
|
|
28
27
|
content: attr(data-text);
|
|
29
28
|
@apply psui-font-bold psui-h-0 psui-invisible psui-overflow-hidden psui-select-none psui-pointer-events-none psui-whitespace-nowrap;
|
|
@@ -55,7 +54,6 @@
|
|
|
55
54
|
@apply psui-ml-1;
|
|
56
55
|
}
|
|
57
56
|
}
|
|
58
|
-
|
|
59
57
|
}
|
|
60
58
|
|
|
61
59
|
.psui-el-chips-icon {
|
|
@@ -74,15 +72,15 @@
|
|
|
74
72
|
|
|
75
73
|
input {
|
|
76
74
|
@apply psui-absolute psui-pointer-events-none psui-invisible;
|
|
77
|
-
clip: rect(0,0,0,0);
|
|
75
|
+
clip: rect(0, 0, 0, 0);
|
|
78
76
|
|
|
79
77
|
&:checked {
|
|
80
78
|
+ .psui-el-chips-wrapper {
|
|
81
79
|
&.layout-disabled {
|
|
82
|
-
@apply psui-bg-gray-20 psui-text-gray-40 psui-cursor-default;
|
|
80
|
+
@apply psui-bg-gray-20 psui-text-gray-40 psui-cursor-default;
|
|
83
81
|
|
|
84
82
|
&:before {
|
|
85
|
-
@apply psui-text-gray-30 psui-cursor-default;
|
|
83
|
+
@apply psui-text-gray-30 psui-cursor-default;
|
|
86
84
|
}
|
|
87
85
|
}
|
|
88
86
|
|
|
@@ -91,14 +89,13 @@
|
|
|
91
89
|
}
|
|
92
90
|
|
|
93
91
|
&:hover {
|
|
94
|
-
@apply psui-text-gray-60;
|
|
92
|
+
@apply psui-text-gray-60;
|
|
95
93
|
}
|
|
96
94
|
}
|
|
97
95
|
}
|
|
98
96
|
}
|
|
99
97
|
|
|
100
98
|
.psui-el-chips-wrapper {
|
|
101
|
-
|
|
102
99
|
&:before {
|
|
103
100
|
@apply psui-inline-block psui-mr-1 psui-text-gray-50 psui-cursor-pointer psui-transition-all;
|
|
104
101
|
content: '';
|
|
@@ -108,7 +105,6 @@
|
|
|
108
105
|
|
|
109
106
|
&:hover {
|
|
110
107
|
@apply psui-bg-blue-10;
|
|
111
|
-
|
|
112
108
|
}
|
|
113
109
|
}
|
|
114
110
|
}
|
|
@@ -116,16 +112,15 @@
|
|
|
116
112
|
&.type-checkbox {
|
|
117
113
|
input:checked {
|
|
118
114
|
+ .psui-el-chips-wrapper {
|
|
119
|
-
|
|
120
115
|
&:before {
|
|
121
|
-
content:
|
|
116
|
+
content: 'check_box';
|
|
122
117
|
}
|
|
123
118
|
}
|
|
124
119
|
}
|
|
125
|
-
|
|
120
|
+
|
|
126
121
|
.psui-el-chips-wrapper {
|
|
127
122
|
&:before {
|
|
128
|
-
content:
|
|
123
|
+
content: 'check_box_outline_blank';
|
|
129
124
|
}
|
|
130
125
|
}
|
|
131
126
|
}
|
|
@@ -134,25 +129,75 @@
|
|
|
134
129
|
input:checked {
|
|
135
130
|
+ .psui-el-chips-wrapper {
|
|
136
131
|
&:before {
|
|
137
|
-
content:
|
|
132
|
+
content: 'radio_button_checked';
|
|
138
133
|
}
|
|
139
134
|
}
|
|
140
135
|
}
|
|
141
|
-
|
|
136
|
+
|
|
142
137
|
.psui-el-chips-wrapper {
|
|
143
138
|
&:before {
|
|
144
|
-
content:
|
|
139
|
+
content: 'radio_button_unchecked';
|
|
145
140
|
}
|
|
146
141
|
}
|
|
147
142
|
}
|
|
148
143
|
|
|
149
|
-
&.
|
|
144
|
+
&.layout-filter {
|
|
145
|
+
&.type-checkbox,
|
|
146
|
+
&.type-radio {
|
|
147
|
+
.psui-el-chips-wrapper {
|
|
148
|
+
@apply psui-bg-white psui-border-gray-40 psui-text-gray-60;
|
|
149
|
+
padding: 5px 8px;
|
|
150
|
+
|
|
151
|
+
&:hover {
|
|
152
|
+
@apply psui-text-blue-60 psui-border-blue-60 psui-bg-white;
|
|
150
153
|
|
|
154
|
+
&:before {
|
|
155
|
+
@apply psui-text-blue-60;
|
|
156
|
+
}
|
|
157
|
+
}
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
input:checked {
|
|
161
|
+
+ .psui-el-chips-wrapper {
|
|
162
|
+
@apply psui-bg-blue-10 psui-text-blue-80 psui-border-blue-60 psui-font-bold;
|
|
163
|
+
|
|
164
|
+
&:before {
|
|
165
|
+
@apply psui-text-blue-60;
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
&:hover {
|
|
169
|
+
@apply psui-text-blue-60;
|
|
170
|
+
}
|
|
171
|
+
}
|
|
172
|
+
}
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
&.type-button {
|
|
176
|
+
.psui-el-chips-wrapper {
|
|
177
|
+
@apply psui-bg-white psui-border-gray-40 psui-text-gray-60;
|
|
178
|
+
padding: 5px 8px;
|
|
179
|
+
|
|
180
|
+
&:hover {
|
|
181
|
+
@apply psui-text-blue-60 psui-border-blue-60 psui-bg-white;
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
&.checked {
|
|
185
|
+
@apply psui-bg-blue-10 psui-text-blue-80 psui-border-blue-60 psui-font-bold;
|
|
186
|
+
|
|
187
|
+
&:hover {
|
|
188
|
+
@apply psui-text-blue-60;
|
|
189
|
+
}
|
|
190
|
+
}
|
|
191
|
+
}
|
|
192
|
+
}
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
&.type-button {
|
|
151
196
|
&.layout-with-icon {
|
|
152
197
|
.psui-el-chips-wrapper {
|
|
153
198
|
@apply psui-flex psui-items-center psui-justify-center psui-text-gray-50 psui-rounded-full;
|
|
154
199
|
padding: 6px 12px;
|
|
155
|
-
|
|
200
|
+
|
|
156
201
|
&:hover {
|
|
157
202
|
@apply psui-text-blue-60 psui-bg-blue-10;
|
|
158
203
|
}
|
|
@@ -167,9 +212,8 @@
|
|
|
167
212
|
&.layout-rich {
|
|
168
213
|
.psui-el-chips-wrapper {
|
|
169
214
|
@apply psui-rounded-full psui-bg-gray-10 psui-text-gray-40 psui-text-xsmall psui-font-bold psui-pl-1 psui-py-1 psui-pr-2;
|
|
170
|
-
|
|
171
|
-
&:hover {
|
|
172
215
|
|
|
216
|
+
&:hover {
|
|
173
217
|
&,
|
|
174
218
|
.psui-el-chips-close {
|
|
175
219
|
@apply psui-text-gray-50;
|
|
@@ -209,5 +253,4 @@
|
|
|
209
253
|
}
|
|
210
254
|
}
|
|
211
255
|
}
|
|
212
|
-
|
|
213
|
-
}
|
|
256
|
+
}
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
/* Layout Policy Design */
|
|
30
30
|
&.layout-policy-design {
|
|
31
31
|
button {
|
|
32
|
-
padding:
|
|
32
|
+
padding: 9px 2px 10px 0px;
|
|
33
33
|
margin-right: 8px;
|
|
34
34
|
@apply psui-flex psui-items-center psui-relative;
|
|
35
35
|
|
|
@@ -38,40 +38,33 @@
|
|
|
38
38
|
}
|
|
39
39
|
|
|
40
40
|
&:after {
|
|
41
|
-
content
|
|
42
|
-
@apply psui-transition-all psui-h-[3px] psui-block psui-w-full psui-absolute psui-bottom-0 psui-left-0 psui-opacity-0 psui-bg-blue-60;
|
|
41
|
+
@apply psui-content-[''] psui-transition-all psui-h-[3px] psui-block psui-w-full psui-absolute psui-bottom-0 psui-left-0 psui-rounded-tl-[20px] psui-rounded-tr-[20px] psui-bg-blue-60 psui-opacity-0;
|
|
43
42
|
}
|
|
44
43
|
|
|
45
44
|
&:hover {
|
|
45
|
+
> span {
|
|
46
|
+
@apply psui-font-semibold psui-text-blue-60;
|
|
47
|
+
}
|
|
48
|
+
|
|
46
49
|
> div {
|
|
47
|
-
@apply psui-text-
|
|
50
|
+
@apply psui-text-blue-60;
|
|
48
51
|
}
|
|
49
52
|
}
|
|
50
53
|
|
|
51
54
|
&.status-active {
|
|
52
|
-
@apply psui-border-blue-60;
|
|
53
|
-
|
|
54
55
|
&:after {
|
|
55
56
|
@apply psui-opacity-100;
|
|
56
57
|
}
|
|
57
|
-
|
|
58
|
-
> div {
|
|
59
|
-
@apply psui-text-blue-60;
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
> span {
|
|
63
|
-
@apply psui-font-bold psui-text-gray-70;
|
|
64
|
-
}
|
|
65
58
|
}
|
|
66
59
|
|
|
67
60
|
> div {
|
|
68
|
-
@apply psui-text-
|
|
61
|
+
@apply psui-text-blue-60 psui-mr-1;
|
|
69
62
|
}
|
|
70
63
|
|
|
71
64
|
> span {
|
|
72
65
|
line-height: 120%;
|
|
73
66
|
font-size: 14px;
|
|
74
|
-
@apply psui-text-gray-
|
|
67
|
+
@apply psui-text-gray-80 psui-font-semibold;
|
|
75
68
|
}
|
|
76
69
|
}
|
|
77
70
|
}
|
|
@@ -79,12 +79,12 @@ const props = defineProps({
|
|
|
79
79
|
validator: (type) => ['radio', 'checkbox', 'button'].includes(type),
|
|
80
80
|
},
|
|
81
81
|
/**
|
|
82
|
-
* It sets the layout of the chipsbutton. eg: simple, with-icon, rich.
|
|
82
|
+
* It sets the layout of the chipsbutton. eg: simple, with-icon, rich, filter.
|
|
83
83
|
*/
|
|
84
84
|
layout: {
|
|
85
85
|
type: String,
|
|
86
86
|
default: 'simple',
|
|
87
|
-
validator: (value) => ['simple', 'with-icon', 'rich', 'disabled'].includes(value),
|
|
87
|
+
validator: (value) => ['simple', 'with-icon', 'rich', 'disabled', 'filter'].includes(value),
|
|
88
88
|
},
|
|
89
89
|
/**
|
|
90
90
|
* It sets the text key which will retrieve a icon from Google Fonts. Make sure to get the right description of your icon on https://fonts.google.com/.
|