@pzh-ui/css 0.0.61 → 0.0.62

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 +17 -16
  3. package/src/tailwind.src.css +24 -23
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pzh-ui/css",
3
- "version": "0.0.61",
3
+ "version": "0.0.62",
4
4
  "description": "Contains default styling for projects whitin Provincie Zuid-Holland.",
5
5
  "license": "ISC",
6
6
  "publishConfig": {
@@ -21,7 +21,7 @@
21
21
  "react-datepicker": "^4.7.0",
22
22
  "react-toastify": "^9.1.2"
23
23
  },
24
- "gitHead": "1552d83a02ad9fba1a549f370a34d9547fdd8dbc",
24
+ "gitHead": "c18da5011e7b96535c07571254ba7babc8fbfdaa",
25
25
  "devDependencies": {
26
26
  "tailwindcss": "^3.0.23"
27
27
  }
package/src/tailwind.css CHANGED
@@ -2570,7 +2570,7 @@ b {
2570
2570
  * React Datepicker
2571
2571
  */
2572
2572
 
2573
- .react-datepicker {
2573
+ .react-datepicker.pzh-datepicker {
2574
2574
  font-family: 'Karbon Regular', sans-serif;
2575
2575
  font-weight: 400;
2576
2576
  font-size: 0.8rem;
@@ -2582,44 +2582,45 @@ b {
2582
2582
  color: rgb(22 17 59 / var(--tw-text-opacity));
2583
2583
  }
2584
2584
 
2585
- .react-datepicker__triangle {
2585
+ .pzh-datepicker .react-datepicker__triangle {
2586
2586
  display: none;
2587
2587
  }
2588
2588
 
2589
- .react-datepicker__header {
2589
+ .pzh-datepicker .react-datepicker__header {
2590
2590
  border-style: none;
2591
2591
  --tw-bg-opacity: 1;
2592
2592
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
2593
2593
  }
2594
2594
 
2595
- .react-datepicker__month {
2595
+ .pzh-datepicker .react-datepicker__month {
2596
2596
  margin-left: 0.125rem;
2597
2597
  margin-right: 0.125rem;
2598
2598
  margin-top: 0px;
2599
2599
  }
2600
2600
 
2601
- .react-datepicker__day-names {
2601
+ .pzh-datepicker .react-datepicker__day-names {
2602
2602
  background-color: rgb(22 17 59 / var(--tw-bg-opacity));
2603
2603
  --tw-bg-opacity: 0.1;
2604
2604
  }
2605
2605
 
2606
- .react-datepicker__day-name {
2606
+ .pzh-datepicker .react-datepicker__day-name {
2607
2607
  margin-top: 0px;
2608
2608
  margin-bottom: 0px;
2609
2609
  line-height: 26px;
2610
2610
  font-weight: 700;
2611
2611
  }
2612
2612
 
2613
- .react-datepicker__current-month {
2613
+ .pzh-datepicker .react-datepicker__current-month {
2614
2614
  margin-bottom: 0.5rem;
2615
2615
  }
2616
2616
 
2617
- .react-datepicker__day--outside-month:not(.react-datepicker__day--selected) {
2617
+ .pzh-datepicker
2618
+ .react-datepicker__day--outside-month:not(.react-datepicker__day--selected) {
2618
2619
  color: rgb(22 17 59 / var(--tw-text-opacity));
2619
2620
  --tw-text-opacity: 0.35;
2620
2621
  }
2621
2622
 
2622
- .react-datepicker__day-name, .react-datepicker__day, .react-datepicker__time-name {
2623
+ .pzh-datepicker .react-datepicker__day-name, .pzh-datepicker .react-datepicker__day, .pzh-datepicker .react-datepicker__time-name {
2623
2624
  margin-left: 0.5rem;
2624
2625
  margin-right: 0.5rem;
2625
2626
  margin-top: 0.25rem;
@@ -2629,33 +2630,33 @@ b {
2629
2630
  line-height: 28px;
2630
2631
  }
2631
2632
 
2632
- .react-datepicker__day {
2633
+ .pzh-datepicker .react-datepicker__day {
2633
2634
  border-radius: 9999px;
2634
2635
  }
2635
2636
 
2636
- .react-datepicker__day:hover {
2637
+ .pzh-datepicker .react-datepicker__day:hover {
2637
2638
  border-radius: 9999px;
2638
2639
  }
2639
2640
 
2640
- .react-datepicker__day--today, .react-datepicker__day--today:hover, .react-datepicker__day--keyboard-selected {
2641
+ .pzh-datepicker .react-datepicker__day--today, .pzh-datepicker .react-datepicker__day--today:hover, .pzh-datepicker .react-datepicker__day--keyboard-selected {
2641
2642
  background-color: rgb(22 17 59 / var(--tw-bg-opacity));
2642
2643
  --tw-bg-opacity: 0.1;
2643
2644
  --tw-text-opacity: 1;
2644
2645
  color: rgb(22 17 59 / var(--tw-text-opacity));
2645
2646
  }
2646
2647
 
2647
- .react-datepicker__day--keyboard-selected:hover {
2648
+ .pzh-datepicker .react-datepicker__day--keyboard-selected:hover {
2648
2649
  background-color: rgb(22 17 59 / var(--tw-bg-opacity));
2649
2650
  --tw-bg-opacity: 0.1;
2650
2651
  }
2651
2652
 
2652
- .react-datepicker__day--selected, .react-datepicker__day--selected:hover {
2653
+ .pzh-datepicker .react-datepicker__day--selected, .pzh-datepicker .react-datepicker__day--selected:hover {
2653
2654
  --tw-bg-opacity: 1;
2654
2655
  background-color: rgb(0 128 77 / var(--tw-bg-opacity));
2655
2656
  font-weight: 700;
2656
2657
  }
2657
2658
 
2658
- .react-datepicker__year-read-view--down-arrow, .react-datepicker__month-read-view--down-arrow, .react-datepicker__month-year-read-view--down-arrow, .react-datepicker__navigation-icon::before {
2659
+ .pzh-datepicker .react-datepicker__year-read-view--down-arrow, .pzh-datepicker .react-datepicker__month-read-view--down-arrow, .pzh-datepicker .react-datepicker__month-year-read-view--down-arrow, .pzh-datepicker .react-datepicker__navigation-icon::before {
2659
2660
  height: 7px;
2660
2661
  width: 7px;
2661
2662
  border-width: 0px;
@@ -2665,7 +2666,7 @@ b {
2665
2666
  border-color: rgb(0 0 0 / var(--tw-border-opacity));
2666
2667
  }
2667
2668
 
2668
- .react-datepicker__navigation-icon {
2669
+ .pzh-datepicker .react-datepicker__navigation-icon {
2669
2670
  line-height: 14px;
2670
2671
  }
2671
2672
 
package/src/tailwind.src.css CHANGED
@@ -132,7 +132,7 @@ b {
132
132
  * React Datepicker
133
133
  */
134
134
 
135
- .react-datepicker {
135
+ .react-datepicker.pzh-datepicker {
136
136
  font-family: 'Karbon Regular', sans-serif;
137
137
  font-weight: 400;
138
138
  font-size: 0.8rem;
@@ -142,67 +142,68 @@ b {
142
142
  @apply text-pzh-blue-dark border-none;
143
143
  }
144
144
 
145
- .react-datepicker__triangle {
145
+ .pzh-datepicker .react-datepicker__triangle {
146
146
  display: none;
147
147
  }
148
148
 
149
- .react-datepicker__header {
149
+ .pzh-datepicker .react-datepicker__header {
150
150
  @apply bg-white border-none;
151
151
  }
152
152
 
153
- .react-datepicker__month {
153
+ .pzh-datepicker .react-datepicker__month {
154
154
  @apply mt-0 mx-0.5;
155
155
  }
156
156
 
157
- .react-datepicker__day-names {
157
+ .pzh-datepicker .react-datepicker__day-names {
158
158
  @apply bg-pzh-blue-dark bg-opacity-10;
159
159
  }
160
160
 
161
- .react-datepicker__day-name {
161
+ .pzh-datepicker .react-datepicker__day-name {
162
162
  @apply bold leading-[26px] my-0;
163
163
  }
164
164
 
165
- .react-datepicker__current-month {
165
+ .pzh-datepicker .react-datepicker__current-month {
166
166
  @apply mb-2;
167
167
  }
168
168
 
169
- .react-datepicker__day--outside-month:not(.react-datepicker__day--selected) {
169
+ .pzh-datepicker
170
+ .react-datepicker__day--outside-month:not(.react-datepicker__day--selected) {
170
171
  @apply text-pzh-blue-dark text-opacity-35;
171
172
  }
172
173
 
173
- .react-datepicker__day-name,
174
- .react-datepicker__day,
175
- .react-datepicker__time-name {
174
+ .pzh-datepicker .react-datepicker__day-name,
175
+ .pzh-datepicker .react-datepicker__day,
176
+ .pzh-datepicker .react-datepicker__time-name {
176
177
  @apply w-[26px] h-[26px] leading-[28px] mx-2 my-1;
177
178
  }
178
179
 
179
- .react-datepicker__day {
180
+ .pzh-datepicker .react-datepicker__day {
180
181
  @apply rounded-full hover:rounded-full;
181
182
  }
182
183
 
183
- .react-datepicker__day--today,
184
- .react-datepicker__day--today:hover,
185
- .react-datepicker__day--keyboard-selected {
184
+ .pzh-datepicker .react-datepicker__day--today,
185
+ .pzh-datepicker .react-datepicker__day--today:hover,
186
+ .pzh-datepicker .react-datepicker__day--keyboard-selected {
186
187
  @apply bg-pzh-blue-dark bg-opacity-10 text-pzh-blue-dark;
187
188
  }
188
189
 
189
- .react-datepicker__day--keyboard-selected:hover {
190
+ .pzh-datepicker .react-datepicker__day--keyboard-selected:hover {
190
191
  @apply bg-pzh-blue-dark bg-opacity-10;
191
192
  }
192
193
 
193
- .react-datepicker__day--selected,
194
- .react-datepicker__day--selected:hover {
194
+ .pzh-datepicker .react-datepicker__day--selected,
195
+ .pzh-datepicker .react-datepicker__day--selected:hover {
195
196
  @apply bg-pzh-green bold;
196
197
  }
197
198
 
198
- .react-datepicker__year-read-view--down-arrow,
199
- .react-datepicker__month-read-view--down-arrow,
200
- .react-datepicker__month-year-read-view--down-arrow,
201
- .react-datepicker__navigation-icon::before {
199
+ .pzh-datepicker .react-datepicker__year-read-view--down-arrow,
200
+ .pzh-datepicker .react-datepicker__month-read-view--down-arrow,
201
+ .pzh-datepicker .react-datepicker__month-year-read-view--down-arrow,
202
+ .pzh-datepicker .react-datepicker__navigation-icon::before {
202
203
  @apply w-[7px] h-[7px] border border-black border-0 border-t-[1px] border-r-[1px];
203
204
  }
204
205
 
205
- .react-datepicker__navigation-icon {
206
+ .pzh-datepicker .react-datepicker__navigation-icon {
206
207
  @apply leading-[14px];
207
208
  }
208
209