@policystudio/policy-studio-ui-vue 1.2.0-access.21 → 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.
- package/dist/css/psui_styles_output.css +139 -25
- package/package.json +1 -1
- package/src/assets/scss/components/PsButton.scss +1 -1
- package/src/assets/scss/components/PsChips.scss +71 -28
- package/src/assets/scss/components/PsMiniTag.scss +1 -1
- package/src/assets/scss/components/PsTabHeader.scss +9 -16
- package/src/assets/scss/components/PsToggle.scss +3 -6
- package/src/components/chips/PsChips.vue +2 -2
|
@@ -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;
|
|
@@ -1595,12 +1694,24 @@ video {
|
|
|
1595
1694
|
/* Layout OnlyText (alias: TextOnly) */
|
|
1596
1695
|
/* Layout Caution (alias: Destructive) */
|
|
1597
1696
|
}
|
|
1697
|
+
.psui-el-button span {
|
|
1698
|
+
display: flex;
|
|
1699
|
+
}
|
|
1598
1700
|
.psui-el-button span {
|
|
1599
1701
|
flex-shrink: 0;
|
|
1600
1702
|
}
|
|
1703
|
+
.psui-el-button span {
|
|
1704
|
+
align-items: center;
|
|
1705
|
+
}
|
|
1706
|
+
.psui-el-button span {
|
|
1707
|
+
padding-top: 1px;
|
|
1708
|
+
}
|
|
1601
1709
|
.psui-el-button span {
|
|
1602
1710
|
text-align: right;
|
|
1603
1711
|
}
|
|
1712
|
+
.psui-el-button span {
|
|
1713
|
+
vertical-align: middle;
|
|
1714
|
+
}
|
|
1604
1715
|
.psui-el-button span {
|
|
1605
1716
|
font-family: inherit;
|
|
1606
1717
|
}
|
|
@@ -4869,10 +4980,13 @@ video {
|
|
|
4869
4980
|
padding-right: 4px;
|
|
4870
4981
|
}
|
|
4871
4982
|
.psui-el-mini-tag span {
|
|
4872
|
-
padding-top:
|
|
4983
|
+
padding-top: 2px;
|
|
4873
4984
|
}
|
|
4874
4985
|
.psui-el-mini-tag span {
|
|
4875
|
-
padding-bottom:
|
|
4986
|
+
padding-bottom: 1px;
|
|
4987
|
+
}
|
|
4988
|
+
.psui-el-mini-tag span {
|
|
4989
|
+
vertical-align: middle;
|
|
4876
4990
|
}
|
|
4877
4991
|
.psui-el-mini-tag span {
|
|
4878
4992
|
font-size: 12px;
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
@apply psui-flex psui-items-center psui-content-center psui-font-bold psui-transition-all psui-ease-in-out psui-duration-[130ms] psui-no-underline psui-cursor-pointer;
|
|
4
4
|
|
|
5
5
|
span {
|
|
6
|
-
@apply psui-font-semibold psui-flex-shrink-0 psui-leading-[130%] psui-font-[inherit] psui-text-right;
|
|
6
|
+
@apply psui-flex psui-items-center psui-font-semibold psui-flex-shrink-0 psui-leading-[130%] psui-font-[inherit] psui-text-right psui-pt-[1px] psui-align-middle;
|
|
7
7
|
}
|
|
8
8
|
|
|
9
9
|
&:focus {
|
|
@@ -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
|
+
}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
@apply psui-flex psui-flex-row psui-items-center psui-rounded psui-w-fit;
|
|
4
4
|
|
|
5
5
|
span {
|
|
6
|
-
@apply psui-w-full psui-font-semibold psui-pt-[
|
|
6
|
+
@apply psui-w-full psui-font-semibold psui-pt-[2px] psui-pb-[1px] psui-px-[4px] psui-text-[12px] psui-leading-[16px] psui-align-middle;
|
|
7
7
|
}
|
|
8
8
|
|
|
9
9
|
&-layout {
|
|
@@ -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
|
}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
@layer components{
|
|
2
|
-
|
|
1
|
+
@layer components {
|
|
3
2
|
.psui-el-toggle {
|
|
4
3
|
@apply psui-flex psui-bg-gray-10 psui-items-center;
|
|
5
4
|
padding: 2px;
|
|
@@ -9,7 +8,7 @@
|
|
|
9
8
|
button {
|
|
10
9
|
@apply transition-default psui-inline-flex psui-text-14 psui-bg-gray-10 psui-text-blue-60 psui-outline-none psui-align-middle;
|
|
11
10
|
border-radius: 4px;
|
|
12
|
-
padding:1px 8px;
|
|
11
|
+
padding: 1px 8px;
|
|
13
12
|
|
|
14
13
|
&.status-active {
|
|
15
14
|
@apply psui-bg-blue-60 psui-text-white psui-font-bold psui-shadow-elevation-10;
|
|
@@ -21,7 +20,5 @@
|
|
|
21
20
|
}
|
|
22
21
|
}
|
|
23
22
|
}
|
|
24
|
-
|
|
25
23
|
}
|
|
26
|
-
|
|
27
|
-
}
|
|
24
|
+
}
|
|
@@ -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/.
|