@pzh-ui/css 0.0.18 → 0.0.21

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/config/index.js CHANGED
@@ -208,6 +208,11 @@ module.exports = {
208
208
  light: '#beb1a7',
209
209
  dark: '#584b41',
210
210
  },
211
+ 'pzh-badge': {
212
+ green: '#50A658',
213
+ red: '#CB3B36',
214
+ orange: '#F9B53C',
215
+ },
211
216
  },
212
217
  extend: {
213
218
  opacity: {
package/package.json CHANGED
@@ -1,13 +1,13 @@
1
1
  {
2
2
  "name": "@pzh-ui/css",
3
- "version": "0.0.18",
3
+ "version": "0.0.21",
4
4
  "description": "Contains default styling for projects whitin Provincie Zuid-Holland.",
5
5
  "license": "ISC",
6
6
  "publishConfig": {
7
7
  "access": "public"
8
8
  },
9
9
  "scripts": {
10
- "prerelease": "npm run-script build-tailwind",
10
+ "prepare": "npm run-script build-tailwind",
11
11
  "build-tailwind": "npx tailwindcss -c ./config/custom.js -i src/tailwind.src.css -o src/tailwind.css",
12
12
  "watch-tailwind": "npx tailwindcss -c ./config/custom.js -i src/tailwind.src.css -o src/tailwind.css --watch",
13
13
  "build": "npm run-script build-tailwind"
@@ -19,7 +19,7 @@
19
19
  "@tailwindcss/line-clamp": "^0.3.1",
20
20
  "react-datepicker": "^4.7.0"
21
21
  },
22
- "gitHead": "42e164138d5c6f636e0cd988b6c3f683d73a6f99",
22
+ "gitHead": "b7526b6ebbe8284ee16027d3c5163964faa4328b",
23
23
  "devDependencies": {
24
24
  "tailwindcss": "^3.0.23"
25
25
  }
package/src/tailwind.css CHANGED
@@ -836,6 +836,10 @@ select{
836
836
  display: none;
837
837
  }
838
838
 
839
+ .h-\[28px\]{
840
+ height: 28px;
841
+ }
842
+
839
843
  .h-6{
840
844
  height: 1.5rem;
841
845
  }
@@ -964,6 +968,26 @@ select{
964
968
  border-style: dashed;
965
969
  }
966
970
 
971
+ .border-pzh-badge-green{
972
+ --tw-border-opacity: 1;
973
+ border-color: rgb(80 166 88 / var(--tw-border-opacity));
974
+ }
975
+
976
+ .border-pzh-badge-orange{
977
+ --tw-border-opacity: 1;
978
+ border-color: rgb(249 181 60 / var(--tw-border-opacity));
979
+ }
980
+
981
+ .border-pzh-badge-red{
982
+ --tw-border-opacity: 1;
983
+ border-color: rgb(203 59 54 / var(--tw-border-opacity));
984
+ }
985
+
986
+ .border-pzh-cool-gray{
987
+ --tw-border-opacity: 1;
988
+ border-color: rgb(131 131 131 / var(--tw-border-opacity));
989
+ }
990
+
967
991
  .border-pzh-blue-dark{
968
992
  --tw-border-opacity: 1;
969
993
  border-color: rgb(22 17 59 / var(--tw-border-opacity));
@@ -1037,6 +1061,16 @@ select{
1037
1061
  padding: 0.5rem;
1038
1062
  }
1039
1063
 
1064
+ .px-1\.5{
1065
+ padding-left: 0.375rem;
1066
+ padding-right: 0.375rem;
1067
+ }
1068
+
1069
+ .px-1{
1070
+ padding-left: 0.25rem;
1071
+ padding-right: 0.25rem;
1072
+ }
1073
+
1040
1074
  .px-3{
1041
1075
  padding-left: 0.75rem;
1042
1076
  padding-right: 0.75rem;
@@ -1156,6 +1190,10 @@ select{
1156
1190
  vertical-align: bottom;
1157
1191
  }
1158
1192
 
1193
+ .text-\[16px\]{
1194
+ font-size: 16px;
1195
+ }
1196
+
1159
1197
  .text-sm{
1160
1198
  font-size: 0.875rem;
1161
1199
  }
@@ -1168,14 +1206,14 @@ select{
1168
1206
  font-size: 1rem;
1169
1207
  }
1170
1208
 
1171
- .text-\[16px\]{
1172
- font-size: 16px;
1173
- }
1174
-
1175
1209
  .text-\[0\.8rem\]{
1176
1210
  font-size: 0.8rem;
1177
1211
  }
1178
1212
 
1213
+ .uppercase{
1214
+ text-transform: uppercase;
1215
+ }
1216
+
1179
1217
  .italic{
1180
1218
  font-style: italic;
1181
1219
  }
@@ -1196,6 +1234,26 @@ select{
1196
1234
  line-height: 1;
1197
1235
  }
1198
1236
 
1237
+ .text-pzh-badge-green{
1238
+ --tw-text-opacity: 1;
1239
+ color: rgb(80 166 88 / var(--tw-text-opacity));
1240
+ }
1241
+
1242
+ .text-pzh-badge-orange{
1243
+ --tw-text-opacity: 1;
1244
+ color: rgb(249 181 60 / var(--tw-text-opacity));
1245
+ }
1246
+
1247
+ .text-pzh-badge-red{
1248
+ --tw-text-opacity: 1;
1249
+ color: rgb(203 59 54 / var(--tw-text-opacity));
1250
+ }
1251
+
1252
+ .text-pzh-cool-gray{
1253
+ --tw-text-opacity: 1;
1254
+ color: rgb(131 131 131 / var(--tw-text-opacity));
1255
+ }
1256
+
1199
1257
  .text-white{
1200
1258
  --tw-text-opacity: 1;
1201
1259
  color: rgb(255 255 255 / var(--tw-text-opacity));
@@ -1446,7 +1504,7 @@ h6,
1446
1504
  --tw-text-opacity: 0.55;
1447
1505
  }
1448
1506
 
1449
- .pzh-form-radio:checked + label:before, .pzh-form-radio:not(:checked) + label:before{
1507
+ .pzh-form-radio:checked + span:before, .pzh-form-radio:not(:checked) + span:before{
1450
1508
  position: absolute;
1451
1509
  left: 0px;
1452
1510
  top: 0px;
@@ -1461,7 +1519,7 @@ h6,
1461
1519
  content: '';
1462
1520
  }
1463
1521
 
1464
- .pzh-form-radio:checked + label:after, .pzh-form-radio:not(:checked) + label:after{
1522
+ .pzh-form-radio:checked + span:after, .pzh-form-radio:not(:checked) + span:after{
1465
1523
  position: absolute;
1466
1524
  top: 0.25rem;
1467
1525
  left: 0.25rem;
@@ -1478,26 +1536,26 @@ h6,
1478
1536
  content: '';
1479
1537
  }
1480
1538
 
1481
- .pzh-form-radio:not(:checked) + label:after,
1482
- .pzh-form-checkbox:not(:checked) + label:after {
1539
+ .pzh-form-radio:not(:checked) + span:after,
1540
+ .pzh-form-checkbox:not(:checked) + span:after {
1483
1541
  opacity: 0;
1484
1542
  transform: scale(0);
1485
1543
  }
1486
1544
 
1487
- .pzh-form-radio:checked + label:after,
1488
- .pzh-form-checkbox:checked + label:after {
1545
+ .pzh-form-radio:checked + span:after,
1546
+ .pzh-form-checkbox:checked + span:after {
1489
1547
  opacity: 1;
1490
1548
  transform: scale(1);
1491
1549
  }
1492
1550
 
1493
- .pzh-form-radio:disabled + label:before, .pzh-form-checkbox:disabled + label:before{
1551
+ .pzh-form-radio:disabled + span:before, .pzh-form-checkbox:disabled + span:before{
1494
1552
  --tw-border-opacity: 1;
1495
1553
  border-color: rgb(235 235 235 / var(--tw-border-opacity));
1496
1554
  --tw-bg-opacity: 1;
1497
1555
  background-color: rgb(235 235 235 / var(--tw-bg-opacity));
1498
1556
  }
1499
1557
 
1500
- .pzh-form-checkbox + label:before{
1558
+ .pzh-form-checkbox + span:before{
1501
1559
  position: absolute;
1502
1560
  left: 0px;
1503
1561
  top: 0px;
@@ -1517,12 +1575,12 @@ h6,
1517
1575
  content: '';
1518
1576
  }
1519
1577
 
1520
- .pzh-form-checkbox:checked:not(:disabled) + label:before{
1578
+ .pzh-form-checkbox:checked:not(:disabled) + span:before{
1521
1579
  --tw-bg-opacity: 1;
1522
1580
  background-color: rgb(0 128 77 / var(--tw-bg-opacity));
1523
1581
  }
1524
1582
 
1525
- .pzh-form-checkbox:checked + label:after, .pzh-form-checkbox:not(:checked) + label:after{
1583
+ .pzh-form-checkbox:checked + span:after, .pzh-form-checkbox:not(:checked) + span:after{
1526
1584
  position: absolute;
1527
1585
  top: 2px;
1528
1586
  left: 0.25rem;
@@ -1538,7 +1596,7 @@ h6,
1538
1596
  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>");
1539
1597
  }
1540
1598
 
1541
- .pzh-form-checkbox:checked:disabled + label:after {
1599
+ .pzh-form-checkbox:checked:disabled + span:after {
1542
1600
  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>");
1543
1601
  }
1544
1602
 
@@ -61,47 +61,47 @@ h6,
61
61
  @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;
62
62
  }
63
63
 
64
- .pzh-form-radio:checked + label:before,
65
- .pzh-form-radio:not(:checked) + label:before {
64
+ .pzh-form-radio:checked + span:before,
65
+ .pzh-form-radio:not(:checked) + span:before {
66
66
  @apply absolute left-0 top-0 w-[24px] h-[24px] border-pzh-blue-dark border border-opacity-35 bg-pzh-form rounded-full;
67
67
  content: '';
68
68
  }
69
- .pzh-form-radio:checked + label:after,
70
- .pzh-form-radio:not(:checked) + label:after {
69
+ .pzh-form-radio:checked + span:after,
70
+ .pzh-form-radio:not(:checked) + span:after {
71
71
  @apply absolute top-1 left-1 w-[14px] h-[14px] rounded-full bg-pzh-green transition duration-200;
72
72
  content: '';
73
73
  }
74
- .pzh-form-radio:not(:checked) + label:after,
75
- .pzh-form-checkbox:not(:checked) + label:after {
74
+ .pzh-form-radio:not(:checked) + span:after,
75
+ .pzh-form-checkbox:not(:checked) + span:after {
76
76
  opacity: 0;
77
77
  transform: scale(0);
78
78
  }
79
- .pzh-form-radio:checked + label:after,
80
- .pzh-form-checkbox:checked + label:after {
79
+ .pzh-form-radio:checked + span:after,
80
+ .pzh-form-checkbox:checked + span:after {
81
81
  opacity: 1;
82
82
  transform: scale(1);
83
83
  }
84
- .pzh-form-radio:disabled + label:before,
85
- .pzh-form-checkbox:disabled + label:before {
84
+ .pzh-form-radio:disabled + span:before,
85
+ .pzh-form-checkbox:disabled + span:before {
86
86
  @apply border-pzh-gray bg-pzh-gray;
87
87
  }
88
88
 
89
- .pzh-form-checkbox + label:before {
89
+ .pzh-form-checkbox + span:before {
90
90
  @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;
91
91
  content: '';
92
92
  }
93
93
 
94
- .pzh-form-checkbox:checked:not(:disabled) + label:before {
94
+ .pzh-form-checkbox:checked:not(:disabled) + span:before {
95
95
  @apply bg-pzh-green;
96
96
  }
97
97
 
98
- .pzh-form-checkbox:checked + label:after,
99
- .pzh-form-checkbox:not(:checked) + label:after {
98
+ .pzh-form-checkbox:checked + span:after,
99
+ .pzh-form-checkbox:not(:checked) + span:after {
100
100
  @apply absolute top-[2px] left-1 w-[14px] h-[14px] text-white transition duration-200;
101
101
  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>");
102
102
  }
103
103
 
104
- .pzh-form-checkbox:checked:disabled + label:after {
104
+ .pzh-form-checkbox:checked:disabled + span:after {
105
105
  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>");
106
106
  }
107
107