@pzh-ui/css 0.0.61 → 0.0.63

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