@pzh-ui/css 0.0.64 → 0.0.66

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.
Files changed (3) hide show
  1. package/package.json +2 -2
  2. package/src/tailwind.css +572 -574
  3. package/src/tailwind.src.css +173 -169
package/src/tailwind.src.css CHANGED
@@ -52,173 +52,177 @@ b {
52
52
  font-weight: 700;
53
53
  }
54
54
 
55
- .pzh-transition-colors {
56
- @apply transition-colors duration-200 ease-in;
57
- }
58
-
59
- /*
60
- * Form elements
61
- */
62
-
63
- .pzh-button {
64
- @apply inline-block transition duration-200 ease-in rounded focus:outline-none focus:ring focus:ring-pzh-blue-dark ring-offset-2 leading-none disabled:bg-pzh-gray-200 disabled:text-pzh-blue-dark disabled:text-opacity-35 disabled:cursor-not-allowed;
65
- }
66
-
67
- .pzh-form-input {
68
- @apply block w-full pt-[10px] pb-[6px] leading-[30px] placeholder-pzh-gray-600 text-pzh-blue-dark border border-pzh-gray-600 rounded appearance-none focus:outline-none hover:border-pzh-blue focus:ring focus:ring-2 focus:ring-pzh-blue focus:outline-none focus:border-pzh-blue disabled:bg-pzh-gray-200;
69
- }
70
-
71
- .pzh-form-error,
72
- .pzh-form-checkbox.pzh-form-error + span:before,
73
- .pzh-form-radio:checked.pzh-form-error + span:before,
74
- .pzh-form-radio:not(:checked).pzh-form-error + span:before {
75
- @apply border-pzh-red;
76
- }
77
-
78
- .pzh-form-radio:checked + span:before,
79
- .pzh-form-radio:not(:checked) + span:before {
80
- @apply absolute left-0 top-0 w-[24px] h-[24px] border-pzh-gray-600 border bg-pzh-gray-200 rounded-full;
81
- content: '';
82
- }
83
- .pzh-form-radio:checked + span:after,
84
- .pzh-form-radio:not(:checked) + span:after {
85
- @apply absolute top-1 left-1 w-[14px] h-[14px] rounded-full bg-pzh-green transition duration-200;
86
- content: '';
87
- }
88
- .pzh-form-radio:not(:checked) + span:after,
89
- .pzh-form-checkbox:not(:checked) + span:after {
90
- opacity: 0;
91
- transform: scale(0);
92
- }
93
- .pzh-form-radio:checked + span:after,
94
- .pzh-form-checkbox:checked + span:after {
95
- opacity: 1;
96
- transform: scale(1);
97
- }
98
- .pzh-form-radio:disabled + span:before,
99
- .pzh-form-checkbox:disabled + span:before {
100
- @apply border-pzh-gray-200 bg-pzh-gray-200;
101
- }
102
-
103
- .pzh-form-checkbox + span:before {
104
- @apply absolute left-0 top-0 w-[24px] h-[24px] border-pzh-gray-600 border bg-pzh-gray-200 rounded-[4px] transition duration-200;
105
- content: '';
106
- }
107
-
108
- .pzh-form-checkbox:checked:not(:disabled) + span:before {
109
- @apply bg-pzh-green;
110
- }
111
-
112
- .pzh-form-checkbox:checked + span:after,
113
- .pzh-form-checkbox:not(:checked) + span:after {
114
- @apply absolute top-[2px] left-1 w-[14px] h-[14px] text-white transition duration-200;
115
- 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>");
116
- }
117
-
118
- .pzh-form-checkbox:checked:disabled + span:after {
119
- 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>");
120
- }
121
-
122
- .pzh-form-radio:focus + span:before,
123
- .pzh-form-checkbox:focus + span:before {
124
- @apply ring ring-2 ring-pzh-blue outline-none border-pzh-blue;
125
- }
126
-
127
- .form-field-label {
128
- @apply block mb-2 text-xs tracking-wide text-gray-700 uppercase;
129
- }
130
-
131
- .form-field-description {
132
- @apply mb-2 text-sm text-gray-700;
133
- }
134
-
135
- /*
136
- * React Datepicker
137
- */
138
-
139
- .react-datepicker.pzh-datepicker {
140
- font-family: 'Karbon Regular', sans-serif;
141
- font-weight: 400;
142
- font-size: 0.8rem;
143
- box-shadow: 0px 18px 60px rgba(0, 0, 0, 0.07),
144
- 0px 4.02054px 13.4018px rgba(0, 0, 0, 0.0417275),
145
- 0px 1.19702px 3.99006px rgba(0, 0, 0, 0.0282725);
146
- @apply text-pzh-blue-dark border-none;
147
- }
148
-
149
- .pzh-datepicker .react-datepicker__triangle {
150
- display: none;
151
- }
152
-
153
- .pzh-datepicker .react-datepicker__header {
154
- @apply bg-white border-none;
155
- }
156
-
157
- .pzh-datepicker .react-datepicker__month {
158
- @apply mt-0 mx-0.5;
159
- }
160
-
161
- .pzh-datepicker .react-datepicker__day-names {
162
- @apply bg-pzh-blue-dark bg-opacity-10;
163
- }
164
-
165
- .pzh-datepicker .react-datepicker__day-name {
166
- @apply bold leading-[26px] my-0;
167
- }
168
-
169
- .pzh-datepicker .react-datepicker__current-month {
170
- @apply mb-2;
171
- }
172
-
173
- .pzh-datepicker
174
- .react-datepicker__day--outside-month:not(.react-datepicker__day--selected) {
175
- @apply text-pzh-blue-dark text-opacity-35;
176
- }
177
-
178
- .pzh-datepicker .react-datepicker__day-name,
179
- .pzh-datepicker .react-datepicker__day,
180
- .pzh-datepicker .react-datepicker__time-name {
181
- @apply w-[26px] h-[26px] leading-[28px] mx-2 my-1;
182
- }
183
-
184
- .pzh-datepicker .react-datepicker__day {
185
- @apply rounded-full hover:rounded-full;
186
- }
187
-
188
- .pzh-datepicker .react-datepicker__day--today,
189
- .pzh-datepicker .react-datepicker__day--today:hover,
190
- .pzh-datepicker .react-datepicker__day--keyboard-selected {
191
- @apply bg-pzh-blue-dark bg-opacity-10 text-pzh-blue-dark;
192
- }
193
-
194
- .pzh-datepicker .react-datepicker__day--keyboard-selected:hover {
195
- @apply bg-pzh-blue-dark bg-opacity-10;
196
- }
197
-
198
- .pzh-datepicker .react-datepicker__day--selected,
199
- .pzh-datepicker .react-datepicker__day--selected:hover {
200
- @apply bg-pzh-green bold;
201
- }
202
-
203
- .pzh-datepicker .react-datepicker__year-read-view--down-arrow,
204
- .pzh-datepicker .react-datepicker__month-read-view--down-arrow,
205
- .pzh-datepicker .react-datepicker__month-year-read-view--down-arrow,
206
- .pzh-datepicker .react-datepicker__navigation-icon::before {
207
- @apply w-[7px] h-[7px] border border-black border-0 border-t-[1px] border-r-[1px];
208
- }
209
-
210
- .pzh-datepicker .react-datepicker__navigation-icon {
211
- @apply leading-[14px];
212
- }
213
-
214
- .pzh-select-input input {
215
- box-shadow: none !important;
216
- }
217
-
218
- .ProseMirror p.is-editor-empty:first-child::before {
219
- @apply text-pzh-blue-dark/55;
220
- content: attr(data-placeholder);
221
- float: left;
222
- pointer-events: none;
223
- height: 0;
55
+ @layer utilities {
56
+ .pzh-transition-colors {
57
+ @apply transition-colors duration-200 ease-in;
58
+ }
59
+ }
60
+
61
+ @layer components {
62
+ /*
63
+ * Form elements
64
+ */
65
+
66
+ .pzh-button {
67
+ @apply inline-block transition duration-200 ease-in rounded focus:outline-none focus:ring focus:ring-pzh-blue-dark ring-offset-2 leading-none disabled:bg-pzh-gray-200 disabled:text-pzh-blue-dark disabled:text-opacity-35 disabled:cursor-not-allowed;
68
+ }
69
+
70
+ .pzh-form-input {
71
+ @apply block w-full pt-[10px] pb-[6px] leading-[30px] placeholder-pzh-gray-600 text-pzh-blue-dark border border-pzh-gray-600 rounded appearance-none focus:outline-none hover:border-pzh-blue focus:ring focus:ring-2 focus:ring-pzh-blue focus:outline-none focus:border-pzh-blue disabled:bg-pzh-gray-200;
72
+ }
73
+
74
+ .pzh-form-error,
75
+ .pzh-form-checkbox.pzh-form-error + span:before,
76
+ .pzh-form-radio:checked.pzh-form-error + span:before,
77
+ .pzh-form-radio:not(:checked).pzh-form-error + span:before {
78
+ @apply border-pzh-red;
79
+ }
80
+
81
+ .pzh-form-radio:checked + span:before,
82
+ .pzh-form-radio:not(:checked) + span:before {
83
+ @apply absolute left-0 top-0 w-[24px] h-[24px] border-pzh-gray-600 border bg-pzh-gray-200 rounded-full;
84
+ content: '';
85
+ }
86
+ .pzh-form-radio:checked + span:after,
87
+ .pzh-form-radio:not(:checked) + span:after {
88
+ @apply absolute top-1 left-1 w-[14px] h-[14px] rounded-full bg-pzh-green transition duration-200;
89
+ content: '';
90
+ }
91
+ .pzh-form-radio:not(:checked) + span:after,
92
+ .pzh-form-checkbox:not(:checked) + span:after {
93
+ opacity: 0;
94
+ transform: scale(0);
95
+ }
96
+ .pzh-form-radio:checked + span:after,
97
+ .pzh-form-checkbox:checked + span:after {
98
+ opacity: 1;
99
+ transform: scale(1);
100
+ }
101
+ .pzh-form-radio:disabled + span:before,
102
+ .pzh-form-checkbox:disabled + span:before {
103
+ @apply border-pzh-gray-200 bg-pzh-gray-200;
104
+ }
105
+
106
+ .pzh-form-checkbox + span:before {
107
+ @apply absolute left-0 top-0 w-[24px] h-[24px] border-pzh-gray-600 border bg-pzh-gray-200 rounded-[4px] transition duration-200;
108
+ content: '';
109
+ }
110
+
111
+ .pzh-form-checkbox:checked:not(:disabled) + span:before {
112
+ @apply bg-pzh-green;
113
+ }
114
+
115
+ .pzh-form-checkbox:checked + span:after,
116
+ .pzh-form-checkbox:not(:checked) + span:after {
117
+ @apply absolute top-[2px] left-1 w-[14px] h-[14px] text-white transition duration-200;
118
+ 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>");
119
+ }
120
+
121
+ .pzh-form-checkbox:checked:disabled + span:after {
122
+ 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>");
123
+ }
124
+
125
+ .pzh-form-radio:focus + span:before,
126
+ .pzh-form-checkbox:focus + span:before {
127
+ @apply ring ring-2 ring-pzh-blue outline-none border-pzh-blue;
128
+ }
129
+
130
+ .form-field-label {
131
+ @apply block mb-2 text-xs tracking-wide text-gray-700 uppercase;
132
+ }
133
+
134
+ .form-field-description {
135
+ @apply mb-2 text-sm text-gray-700;
136
+ }
137
+
138
+ /*
139
+ * React Datepicker
140
+ */
141
+
142
+ .react-datepicker.pzh-datepicker {
143
+ font-family: 'Karbon Regular', sans-serif;
144
+ font-weight: 400;
145
+ font-size: 0.8rem;
146
+ box-shadow: 0px 18px 60px rgba(0, 0, 0, 0.07),
147
+ 0px 4.02054px 13.4018px rgba(0, 0, 0, 0.0417275),
148
+ 0px 1.19702px 3.99006px rgba(0, 0, 0, 0.0282725);
149
+ @apply text-pzh-blue-dark border-none;
150
+ }
151
+
152
+ .pzh-datepicker .react-datepicker__triangle {
153
+ display: none;
154
+ }
155
+
156
+ .pzh-datepicker .react-datepicker__header {
157
+ @apply bg-white border-none;
158
+ }
159
+
160
+ .pzh-datepicker .react-datepicker__month {
161
+ @apply mt-0 mx-0.5;
162
+ }
163
+
164
+ .pzh-datepicker .react-datepicker__day-names {
165
+ @apply bg-pzh-blue-dark bg-opacity-10;
166
+ }
167
+
168
+ .pzh-datepicker .react-datepicker__day-name {
169
+ @apply bold leading-[26px] my-0;
170
+ }
171
+
172
+ .pzh-datepicker .react-datepicker__current-month {
173
+ @apply mb-2;
174
+ }
175
+
176
+ .pzh-datepicker
177
+ .react-datepicker__day--outside-month:not(.react-datepicker__day--selected) {
178
+ @apply text-pzh-blue-dark text-opacity-35;
179
+ }
180
+
181
+ .pzh-datepicker .react-datepicker__day-name,
182
+ .pzh-datepicker .react-datepicker__day,
183
+ .pzh-datepicker .react-datepicker__time-name {
184
+ @apply w-[26px] h-[26px] leading-[28px] mx-2 my-1;
185
+ }
186
+
187
+ .pzh-datepicker .react-datepicker__day {
188
+ @apply rounded-full hover:rounded-full;
189
+ }
190
+
191
+ .pzh-datepicker .react-datepicker__day--today:not(.react-datepicker__day--selected),
192
+ .pzh-datepicker .react-datepicker__day--today:hover:not(.react-datepicker__day--selected),
193
+ .pzh-datepicker .react-datepicker__day--keyboard-selected {
194
+ @apply bg-pzh-blue-dark bg-opacity-10 text-pzh-blue-dark;
195
+ }
196
+
197
+ .pzh-datepicker .react-datepicker__day--keyboard-selected:hover {
198
+ @apply bg-pzh-blue-dark bg-opacity-10;
199
+ }
200
+
201
+ .pzh-datepicker .react-datepicker__day--selected,
202
+ .pzh-datepicker .react-datepicker__day--selected:hover {
203
+ @apply bg-pzh-green bold;
204
+ }
205
+
206
+ .pzh-datepicker .react-datepicker__year-read-view--down-arrow,
207
+ .pzh-datepicker .react-datepicker__month-read-view--down-arrow,
208
+ .pzh-datepicker .react-datepicker__month-year-read-view--down-arrow,
209
+ .pzh-datepicker .react-datepicker__navigation-icon::before {
210
+ @apply w-[7px] h-[7px] border border-black border-0 border-t-[1px] border-r-[1px];
211
+ }
212
+
213
+ .pzh-datepicker .react-datepicker__navigation-icon {
214
+ @apply leading-[14px];
215
+ }
216
+
217
+ .pzh-select-input input {
218
+ box-shadow: none !important;
219
+ }
220
+
221
+ .ProseMirror p.is-editor-empty:first-child::before {
222
+ @apply text-pzh-blue-dark/55;
223
+ content: attr(data-placeholder);
224
+ float: left;
225
+ pointer-events: none;
226
+ height: 0;
227
+ }
224
228
  }