@pzh-ui/css 0.0.13 → 0.0.14
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/package.json +4 -3
- package/src/tailwind.css +488 -220
- package/src/tailwind.src.css +108 -4
package/src/tailwind.src.css
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
|
-
@
|
|
2
|
-
|
|
3
|
-
@
|
|
1
|
+
@import '~react-datepicker/dist/react-datepicker.css';
|
|
2
|
+
|
|
3
|
+
@import 'tailwindcss/base';
|
|
4
|
+
@import 'tailwindcss/components';
|
|
5
|
+
@import 'tailwindcss/utilities';
|
|
4
6
|
|
|
5
7
|
@font-face {
|
|
6
8
|
font-family: 'Karbon Regular';
|
|
@@ -52,5 +54,107 @@ h6,
|
|
|
52
54
|
}
|
|
53
55
|
|
|
54
56
|
.pzh-form-input {
|
|
55
|
-
@apply block w-full placeholder-pzh-blue-dark placeholder-opacity-55 text-pzh-blue-dark border border-pzh-blue-dark border-opacity-35 rounded appearance-none leading-none focus:outline-none hover:border-gray-500 focus:border-
|
|
57
|
+
@apply block w-full pt-[15px] pb-[11px] placeholder-pzh-blue-dark placeholder-opacity-55 text-pzh-blue-dark border border-pzh-blue-dark border-opacity-35 rounded appearance-none leading-none focus:outline-none hover:border-gray-500 focus:border-pzh-blue-light disabled:border-pzh-blue-dark disabled:border-opacity-10 disabled:bg-pzh-gray disabled:text-opacity-55;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.pzh-form-radio:checked + label:before,
|
|
61
|
+
.pzh-form-radio:not(:checked) + label:before {
|
|
62
|
+
@apply absolute left-0 top-0 w-[24px] h-[24px] border-pzh-blue-dark border border-opacity-35 bg-pzh-form rounded-full;
|
|
63
|
+
content: '';
|
|
64
|
+
}
|
|
65
|
+
.pzh-form-radio:checked + label:after,
|
|
66
|
+
.pzh-form-radio:not(:checked) + label:after {
|
|
67
|
+
@apply absolute top-1 left-1 w-[14px] h-[14px] rounded-full bg-pzh-green transition duration-200;
|
|
68
|
+
content: '';
|
|
69
|
+
}
|
|
70
|
+
.pzh-form-radio:not(:checked) + label:after,
|
|
71
|
+
.pzh-form-checkbox:not(:checked) + label:after {
|
|
72
|
+
opacity: 0;
|
|
73
|
+
transform: scale(0);
|
|
74
|
+
}
|
|
75
|
+
.pzh-form-radio:checked + label:after,
|
|
76
|
+
.pzh-form-checkbox:checked + label:after {
|
|
77
|
+
opacity: 1;
|
|
78
|
+
transform: scale(1);
|
|
79
|
+
}
|
|
80
|
+
.pzh-form-radio:disabled + label:before,
|
|
81
|
+
.pzh-form-checkbox:disabled + label:before {
|
|
82
|
+
@apply border-pzh-gray bg-pzh-gray;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.pzh-form-checkbox + label:before {
|
|
86
|
+
@apply absolute left-0 top-0 w-[24px] h-[24px] border-pzh-blue-dark border border-opacity-35 bg-pzh-form rounded-[4px] transition duration-200;
|
|
87
|
+
content: '';
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.pzh-form-checkbox:checked:not(:disabled) + label:before {
|
|
91
|
+
@apply bg-pzh-green;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.pzh-form-checkbox:checked + label:after,
|
|
95
|
+
.pzh-form-checkbox:not(:checked) + label:after {
|
|
96
|
+
@apply absolute top-[2px] left-1 w-[14px] h-[14px] text-white transition duration-200;
|
|
97
|
+
content: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><path fill='white' d='M438.6 105.4C451.1 117.9 451.1 138.1 438.6 150.6L182.6 406.6C170.1 419.1 149.9 419.1 137.4 406.6L9.372 278.6C-3.124 266.1-3.124 245.9 9.372 233.4C21.87 220.9 42.13 220.9 54.63 233.4L159.1 338.7L393.4 105.4C405.9 92.88 426.1 92.88 438.6 105.4H438.6z'/></svg>");
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.pzh-form-checkbox:checked:disabled + label:after {
|
|
101
|
+
content: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><path fill='rgba(22, 17, 59, 0.35)' d='M438.6 105.4C451.1 117.9 451.1 138.1 438.6 150.6L182.6 406.6C170.1 419.1 149.9 419.1 137.4 406.6L9.372 278.6C-3.124 266.1-3.124 245.9 9.372 233.4C21.87 220.9 42.13 220.9 54.63 233.4L159.1 338.7L393.4 105.4C405.9 92.88 426.1 92.88 438.6 105.4H438.6z'/></svg>");
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.react-datepicker {
|
|
105
|
+
font-family: 'Karbon Regular', sans-serif;
|
|
106
|
+
font-weight: 400;
|
|
107
|
+
font-size: 0.8rem;
|
|
108
|
+
box-shadow: 0px 18px 60px rgba(0, 0, 0, 0.07),
|
|
109
|
+
0px 4.02054px 13.4018px rgba(0, 0, 0, 0.0417275),
|
|
110
|
+
0px 1.19702px 3.99006px rgba(0, 0, 0, 0.0282725);
|
|
111
|
+
@apply text-pzh-blue-dark border-none;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.react-datepicker__triangle {
|
|
115
|
+
display: none;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
.react-datepicker__header {
|
|
119
|
+
@apply bg-white border-none;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.react-datepicker__month {
|
|
123
|
+
@apply mt-0 mx-0.5;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
.react-datepicker__day-names {
|
|
127
|
+
@apply bg-pzh-blue-dark bg-opacity-10;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
.react-datepicker__day-name {
|
|
131
|
+
@apply bold leading-[26px] my-0;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
.react-datepicker__current-month {
|
|
135
|
+
@apply mb-2;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
.react-datepicker__day--outside-month:not(.react-datepicker__day--selected) {
|
|
139
|
+
@apply text-pzh-blue-dark text-opacity-35;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
.react-datepicker__day-name,
|
|
143
|
+
.react-datepicker__day,
|
|
144
|
+
.react-datepicker__time-name {
|
|
145
|
+
@apply w-[26px] h-[26px] leading-[28px] mx-2 my-1;
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
.react-datepicker__day {
|
|
149
|
+
@apply rounded-full hover:rounded-full;
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
.react-datepicker__day--today,
|
|
153
|
+
.react-datepicker__day--keyboard-selected {
|
|
154
|
+
@apply bg-pzh-blue-dark bg-opacity-10 text-pzh-blue-dark;
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
.react-datepicker__day--selected,
|
|
158
|
+
.react-datepicker__day--selected:hover {
|
|
159
|
+
@apply bg-pzh-green bold;
|
|
56
160
|
}
|