@pzh-ui/css 0.0.20 → 0.0.23

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 +24 -20
  3. package/src/tailwind.src.css +19 -15
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pzh-ui/css",
3
- "version": "0.0.20",
3
+ "version": "0.0.23",
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": "debc8d599b0e3c27834eea46e0b22d86f457121b",
22
+ "gitHead": "3e6a9fcdea55c2db338b536dd8ddf06237767d23",
23
23
  "devDependencies": {
24
24
  "tailwindcss": "^3.0.23"
25
25
  }
package/src/tailwind.css CHANGED
@@ -1,5 +1,9 @@
1
1
  @import '~react-datepicker/dist/react-datepicker.css';
2
2
 
3
+ .svg-inline--fa {
4
+ font-size: 14px;
5
+ }
6
+
3
7
  /*
4
8
  ! tailwindcss v3.0.23 | MIT License | https://tailwindcss.com
5
9
  */
@@ -792,6 +796,10 @@ select{
792
796
  margin-left: 1rem;
793
797
  }
794
798
 
799
+ .mt-2{
800
+ margin-top: 0.5rem;
801
+ }
802
+
795
803
  .-mt-8{
796
804
  margin-top: -2rem;
797
805
  }
@@ -808,10 +816,6 @@ select{
808
816
  margin-bottom: 0.5rem;
809
817
  }
810
818
 
811
- .mt-2{
812
- margin-top: 0.5rem;
813
- }
814
-
815
819
  .ml-1{
816
820
  margin-left: 0.25rem;
817
821
  }
@@ -1264,6 +1268,11 @@ select{
1264
1268
  color: rgb(40 31 107 / var(--tw-text-opacity));
1265
1269
  }
1266
1270
 
1271
+ .text-pzh-red{
1272
+ --tw-text-opacity: 1;
1273
+ color: rgb(209 31 61 / var(--tw-text-opacity));
1274
+ }
1275
+
1267
1276
  .text-pzh-blue-dark{
1268
1277
  --tw-text-opacity: 1;
1269
1278
  color: rgb(22 17 59 / var(--tw-text-opacity));
@@ -1274,11 +1283,6 @@ select{
1274
1283
  color: rgb(0 128 77 / var(--tw-text-opacity));
1275
1284
  }
1276
1285
 
1277
- .text-pzh-red{
1278
- --tw-text-opacity: 1;
1279
- color: rgb(209 31 61 / var(--tw-text-opacity));
1280
- }
1281
-
1282
1286
  .text-opacity-35{
1283
1287
  --tw-text-opacity: 0.35;
1284
1288
  }
@@ -1504,7 +1508,7 @@ h6,
1504
1508
  --tw-text-opacity: 0.55;
1505
1509
  }
1506
1510
 
1507
- .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{
1508
1512
  position: absolute;
1509
1513
  left: 0px;
1510
1514
  top: 0px;
@@ -1519,7 +1523,7 @@ h6,
1519
1523
  content: '';
1520
1524
  }
1521
1525
 
1522
- .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{
1523
1527
  position: absolute;
1524
1528
  top: 0.25rem;
1525
1529
  left: 0.25rem;
@@ -1536,26 +1540,26 @@ h6,
1536
1540
  content: '';
1537
1541
  }
1538
1542
 
1539
- .pzh-form-radio:not(:checked) + label:after,
1540
- .pzh-form-checkbox:not(:checked) + label:after {
1543
+ .pzh-form-radio:not(:checked) + span:after,
1544
+ .pzh-form-checkbox:not(:checked) + span:after {
1541
1545
  opacity: 0;
1542
1546
  transform: scale(0);
1543
1547
  }
1544
1548
 
1545
- .pzh-form-radio:checked + label:after,
1546
- .pzh-form-checkbox:checked + label:after {
1549
+ .pzh-form-radio:checked + span:after,
1550
+ .pzh-form-checkbox:checked + span:after {
1547
1551
  opacity: 1;
1548
1552
  transform: scale(1);
1549
1553
  }
1550
1554
 
1551
- .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{
1552
1556
  --tw-border-opacity: 1;
1553
1557
  border-color: rgb(235 235 235 / var(--tw-border-opacity));
1554
1558
  --tw-bg-opacity: 1;
1555
1559
  background-color: rgb(235 235 235 / var(--tw-bg-opacity));
1556
1560
  }
1557
1561
 
1558
- .pzh-form-checkbox + label:before{
1562
+ .pzh-form-checkbox + span:before{
1559
1563
  position: absolute;
1560
1564
  left: 0px;
1561
1565
  top: 0px;
@@ -1575,12 +1579,12 @@ h6,
1575
1579
  content: '';
1576
1580
  }
1577
1581
 
1578
- .pzh-form-checkbox:checked:not(:disabled) + label:before{
1582
+ .pzh-form-checkbox:checked:not(:disabled) + span:before{
1579
1583
  --tw-bg-opacity: 1;
1580
1584
  background-color: rgb(0 128 77 / var(--tw-bg-opacity));
1581
1585
  }
1582
1586
 
1583
- .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{
1584
1588
  position: absolute;
1585
1589
  top: 2px;
1586
1590
  left: 0.25rem;
@@ -1596,7 +1600,7 @@ h6,
1596
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>");
1597
1601
  }
1598
1602
 
1599
- .pzh-form-checkbox:checked:disabled + label:after {
1603
+ .pzh-form-checkbox:checked:disabled + span:after {
1600
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>");
1601
1605
  }
1602
1606
 
package/src/tailwind.src.css CHANGED
@@ -1,5 +1,9 @@
1
1
  @import '~react-datepicker/dist/react-datepicker.css';
2
2
 
3
+ .svg-inline--fa {
4
+ font-size: 14px;
5
+ }
6
+
3
7
  @import 'tailwindcss/base';
4
8
  @import 'tailwindcss/components';
5
9
  @import 'tailwindcss/utilities';
@@ -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