@pzh-ui/css 0.0.19 → 0.0.22

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,6 +1,6 @@
1
1
  {
2
2
  "name": "@pzh-ui/css",
3
- "version": "0.0.19",
3
+ "version": "0.0.22",
4
4
  "description": "Contains default styling for projects whitin Provincie Zuid-Holland.",
5
5
  "license": "ISC",
6
6
  "publishConfig": {
@@ -19,7 +19,7 @@
19
19
  "@tailwindcss/line-clamp": "^0.3.1",
20
20
  "react-datepicker": "^4.7.0"
21
21
  },
22
- "gitHead": "d15c5f52732fbe650c61c2ab9c2bdaa8741cfefb",
22
+ "gitHead": "b56689869df67fc4882e5a924bf252f4bb88ea96",
23
23
  "devDependencies": {
24
24
  "tailwindcss": "^3.0.23"
25
25
  }
package/src/tailwind.css CHANGED
@@ -792,6 +792,10 @@ select{
792
792
  margin-left: 1rem;
793
793
  }
794
794
 
795
+ .mt-2{
796
+ margin-top: 0.5rem;
797
+ }
798
+
795
799
  .-mt-8{
796
800
  margin-top: -2rem;
797
801
  }
@@ -808,10 +812,6 @@ select{
808
812
  margin-bottom: 0.5rem;
809
813
  }
810
814
 
811
- .mt-2{
812
- margin-top: 0.5rem;
813
- }
814
-
815
815
  .ml-1{
816
816
  margin-left: 0.25rem;
817
817
  }
@@ -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));
@@ -1206,6 +1264,11 @@ select{
1206
1264
  color: rgb(40 31 107 / var(--tw-text-opacity));
1207
1265
  }
1208
1266
 
1267
+ .text-pzh-red{
1268
+ --tw-text-opacity: 1;
1269
+ color: rgb(209 31 61 / var(--tw-text-opacity));
1270
+ }
1271
+
1209
1272
  .text-pzh-blue-dark{
1210
1273
  --tw-text-opacity: 1;
1211
1274
  color: rgb(22 17 59 / var(--tw-text-opacity));
@@ -1216,11 +1279,6 @@ select{
1216
1279
  color: rgb(0 128 77 / var(--tw-text-opacity));
1217
1280
  }
1218
1281
 
1219
- .text-pzh-red{
1220
- --tw-text-opacity: 1;
1221
- color: rgb(209 31 61 / var(--tw-text-opacity));
1222
- }
1223
-
1224
1282
  .text-opacity-35{
1225
1283
  --tw-text-opacity: 0.35;
1226
1284
  }
@@ -1360,6 +1418,10 @@ h6,
1360
1418
  font-weight: 700;
1361
1419
  }
1362
1420
 
1421
+ .svg-inline--fa {
1422
+ font-size: 14px;
1423
+ }
1424
+
1363
1425
  /*
1364
1426
  * Form elements
1365
1427
  */
@@ -1446,7 +1508,7 @@ h6,
1446
1508
  --tw-text-opacity: 0.55;
1447
1509
  }
1448
1510
 
1449
- .pzh-form-radio:checked + label:before, .pzh-form-radio:not(:checked) + label:before{
1511
+ .pzh-form-radio:checked + span:before, .pzh-form-radio:not(:checked) + span:before{
1450
1512
  position: absolute;
1451
1513
  left: 0px;
1452
1514
  top: 0px;
@@ -1461,7 +1523,7 @@ h6,
1461
1523
  content: '';
1462
1524
  }
1463
1525
 
1464
- .pzh-form-radio:checked + label:after, .pzh-form-radio:not(:checked) + label:after{
1526
+ .pzh-form-radio:checked + span:after, .pzh-form-radio:not(:checked) + span:after{
1465
1527
  position: absolute;
1466
1528
  top: 0.25rem;
1467
1529
  left: 0.25rem;
@@ -1478,26 +1540,26 @@ h6,
1478
1540
  content: '';
1479
1541
  }
1480
1542
 
1481
- .pzh-form-radio:not(:checked) + label:after,
1482
- .pzh-form-checkbox:not(:checked) + label:after {
1543
+ .pzh-form-radio:not(:checked) + span:after,
1544
+ .pzh-form-checkbox:not(:checked) + span:after {
1483
1545
  opacity: 0;
1484
1546
  transform: scale(0);
1485
1547
  }
1486
1548
 
1487
- .pzh-form-radio:checked + label:after,
1488
- .pzh-form-checkbox:checked + label:after {
1549
+ .pzh-form-radio:checked + span:after,
1550
+ .pzh-form-checkbox:checked + span:after {
1489
1551
  opacity: 1;
1490
1552
  transform: scale(1);
1491
1553
  }
1492
1554
 
1493
- .pzh-form-radio:disabled + label:before, .pzh-form-checkbox:disabled + label:before{
1555
+ .pzh-form-radio:disabled + span:before, .pzh-form-checkbox:disabled + span:before{
1494
1556
  --tw-border-opacity: 1;
1495
1557
  border-color: rgb(235 235 235 / var(--tw-border-opacity));
1496
1558
  --tw-bg-opacity: 1;
1497
1559
  background-color: rgb(235 235 235 / var(--tw-bg-opacity));
1498
1560
  }
1499
1561
 
1500
- .pzh-form-checkbox + label:before{
1562
+ .pzh-form-checkbox + span:before{
1501
1563
  position: absolute;
1502
1564
  left: 0px;
1503
1565
  top: 0px;
@@ -1517,12 +1579,12 @@ h6,
1517
1579
  content: '';
1518
1580
  }
1519
1581
 
1520
- .pzh-form-checkbox:checked:not(:disabled) + label:before{
1582
+ .pzh-form-checkbox:checked:not(:disabled) + span:before{
1521
1583
  --tw-bg-opacity: 1;
1522
1584
  background-color: rgb(0 128 77 / var(--tw-bg-opacity));
1523
1585
  }
1524
1586
 
1525
- .pzh-form-checkbox:checked + label:after, .pzh-form-checkbox:not(:checked) + label:after{
1587
+ .pzh-form-checkbox:checked + span:after, .pzh-form-checkbox:not(:checked) + span:after{
1526
1588
  position: absolute;
1527
1589
  top: 2px;
1528
1590
  left: 0.25rem;
@@ -1538,7 +1600,7 @@ h6,
1538
1600
  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
1601
  }
1540
1602
 
1541
- .pzh-form-checkbox:checked:disabled + label:after {
1603
+ .pzh-form-checkbox:checked:disabled + span:after {
1542
1604
  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
1605
  }
1544
1606
 
@@ -49,6 +49,10 @@ h6,
49
49
  font-weight: 700;
50
50
  }
51
51
 
52
+ .svg-inline--fa {
53
+ font-size: 14px;
54
+ }
55
+
52
56
  /*
53
57
  * Form elements
54
58
  */
@@ -61,47 +65,47 @@ h6,
61
65
  @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
66
  }
63
67
 
64
- .pzh-form-radio:checked + label:before,
65
- .pzh-form-radio:not(:checked) + label:before {
68
+ .pzh-form-radio:checked + span:before,
69
+ .pzh-form-radio:not(:checked) + span:before {
66
70
  @apply absolute left-0 top-0 w-[24px] h-[24px] border-pzh-blue-dark border border-opacity-35 bg-pzh-form rounded-full;
67
71
  content: '';
68
72
  }
69
- .pzh-form-radio:checked + label:after,
70
- .pzh-form-radio:not(:checked) + label:after {
73
+ .pzh-form-radio:checked + span:after,
74
+ .pzh-form-radio:not(:checked) + span:after {
71
75
  @apply absolute top-1 left-1 w-[14px] h-[14px] rounded-full bg-pzh-green transition duration-200;
72
76
  content: '';
73
77
  }
74
- .pzh-form-radio:not(:checked) + label:after,
75
- .pzh-form-checkbox:not(:checked) + label:after {
78
+ .pzh-form-radio:not(:checked) + span:after,
79
+ .pzh-form-checkbox:not(:checked) + span:after {
76
80
  opacity: 0;
77
81
  transform: scale(0);
78
82
  }
79
- .pzh-form-radio:checked + label:after,
80
- .pzh-form-checkbox:checked + label:after {
83
+ .pzh-form-radio:checked + span:after,
84
+ .pzh-form-checkbox:checked + span:after {
81
85
  opacity: 1;
82
86
  transform: scale(1);
83
87
  }
84
- .pzh-form-radio:disabled + label:before,
85
- .pzh-form-checkbox:disabled + label:before {
88
+ .pzh-form-radio:disabled + span:before,
89
+ .pzh-form-checkbox:disabled + span:before {
86
90
  @apply border-pzh-gray bg-pzh-gray;
87
91
  }
88
92
 
89
- .pzh-form-checkbox + label:before {
93
+ .pzh-form-checkbox + span:before {
90
94
  @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
95
  content: '';
92
96
  }
93
97
 
94
- .pzh-form-checkbox:checked:not(:disabled) + label:before {
98
+ .pzh-form-checkbox:checked:not(:disabled) + span:before {
95
99
  @apply bg-pzh-green;
96
100
  }
97
101
 
98
- .pzh-form-checkbox:checked + label:after,
99
- .pzh-form-checkbox:not(:checked) + label:after {
102
+ .pzh-form-checkbox:checked + span:after,
103
+ .pzh-form-checkbox:not(:checked) + span:after {
100
104
  @apply absolute top-[2px] left-1 w-[14px] h-[14px] text-white transition duration-200;
101
105
  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
106
  }
103
107
 
104
- .pzh-form-checkbox:checked:disabled + label:after {
108
+ .pzh-form-checkbox:checked:disabled + span:after {
105
109
  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
110
  }
107
111