@pzh-ui/css 0.0.77 → 0.0.79

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@pzh-ui/css",
-    "version": "0.0.77",
+    "version": "0.0.79",
     "description": "Contains default styling for projects whitin Provincie Zuid-Holland.",
     "license": "ISC",
     "publishConfig": {
@@ -21,7 +21,7 @@
         "react-datepicker": "^4.7.0",
         "react-toastify": "^9.1.2"
     },
-    "gitHead": "47638eba752130e2f6ea7120e9da39723d70ae8b",
+    "gitHead": "7a7f7fcef7ce88ccc96619197c50fc5ea1019c3a",
     "devDependencies": {
         "tailwindcss": "^3.3.2"
     }

package/src/tailwind.css

@@ -1250,7 +1250,7 @@ select {
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
   --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(22 17 59 / var(--tw-ring-opacity));
+  --tw-ring-color: rgb(35 96 197 / var(--tw-ring-opacity));
 }
 
 .pzh-button:disabled {
@@ -1297,7 +1297,7 @@ select {
 
 .pzh-form-input:focus {
   --tw-border-opacity: 1;
-  border-color: rgb(40 31 107 / var(--tw-border-opacity));
+  border-color: rgb(35 96 197 / var(--tw-border-opacity));
   outline: 2px solid transparent;
   outline-offset: 2px;
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -1305,7 +1305,7 @@ select {
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
   --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(40 31 107 / var(--tw-ring-opacity));
+  --tw-ring-color: rgb(35 96 197 / var(--tw-ring-opacity));
 }
 
 .pzh-form-input:disabled {
@@ -1325,28 +1325,34 @@ select {
   .pzh-form-radio:not(:checked) + span:before {
   position: absolute;
   left: 0px;
-  top: 0px;
-  height: 1.5rem;
-  width: 1.5rem;
+  top: 0.125rem;
+  height: 1.25rem;
+  width: 1.25rem;
   border-radius: 9999px;
   border-width: 1px;
   --tw-border-opacity: 1;
   border-color: rgb(92 92 92 / var(--tw-border-opacity));
-  --tw-bg-opacity: 1;
-  background-color: rgb(230 230 230 / var(--tw-bg-opacity));
   content: "";
 }
 
+.pzh-form-radio:not(:checked):hover + span:before,
+  .pzh-form-checkbox:not(:checked):hover + span:before {
+  --tw-border-opacity: 1;
+  border-color: rgb(0 128 77 / var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgb(237 250 240 / var(--tw-bg-opacity));
+}
+
 .pzh-form-radio:checked + span:after,
   .pzh-form-radio:not(:checked) + span:after {
   position: absolute;
-  left: 5px;
-  top: 5px;
-  height: 14px;
-  width: 14px;
+  left: 0.375rem;
+  top: 0.5rem;
+  height: 0.5rem;
+  width: 0.5rem;
   border-radius: 9999px;
   --tw-bg-opacity: 1;
-  background-color: rgb(0 128 77 / var(--tw-bg-opacity));
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
@@ -1355,6 +1361,13 @@ select {
   content: "";
 }
 
+.pzh-form-radio:checked + span:before {
+  --tw-border-opacity: 1;
+  border-color: rgb(0 128 77 / var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 128 77 / var(--tw-bg-opacity));
+}
+
 .pzh-form-radio:not(:checked) + span:after,
   .pzh-form-checkbox:not(:checked) + span:after {
   opacity: 0;
@@ -1370,7 +1383,7 @@ select {
 .pzh-form-radio:disabled + span:before,
   .pzh-form-checkbox:disabled + span:before {
   --tw-border-opacity: 1;
-  border-color: rgb(230 230 230 / var(--tw-border-opacity));
+  border-color: rgb(131 131 131 / var(--tw-border-opacity));
   --tw-bg-opacity: 1;
   background-color: rgb(230 230 230 / var(--tw-bg-opacity));
 }
@@ -1378,15 +1391,13 @@ select {
 .pzh-form-checkbox + span:before {
   position: absolute;
   left: 0px;
-  top: 0px;
-  height: 1.5rem;
-  width: 1.5rem;
+  top: 0.125rem;
+  height: 1.25rem;
+  width: 1.25rem;
   border-radius: 0.25rem;
   border-width: 1px;
   --tw-border-opacity: 1;
   border-color: rgb(92 92 92 / var(--tw-border-opacity));
-  --tw-bg-opacity: 1;
-  background-color: rgb(230 230 230 / var(--tw-bg-opacity));
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
@@ -1396,6 +1407,8 @@ select {
 }
 
 .pzh-form-checkbox:checked:not(:disabled) + span:before {
+  --tw-border-opacity: 1;
+  border-color: rgb(0 128 77 / var(--tw-border-opacity));
   --tw-bg-opacity: 1;
   background-color: rgb(0 128 77 / var(--tw-bg-opacity));
 }
@@ -1403,10 +1416,10 @@ select {
 .pzh-form-checkbox:checked + span:after,
   .pzh-form-checkbox:not(:checked) + span:after {
   position: absolute;
-  left: 5px;
-  top: 0.125rem;
-  height: 14px;
-  width: 14px;
+  left: 0.25rem;
+  top: 1px;
+  height: 0.75rem;
+  width: 0.75rem;
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
@@ -1424,7 +1437,7 @@ select {
 .pzh-form-radio:focus + span:before,
   .pzh-form-checkbox:focus + span:before {
   --tw-border-opacity: 1;
-  border-color: rgb(40 31 107 / var(--tw-border-opacity));
+  border-color: rgb(35 96 197 / var(--tw-border-opacity));
   outline: 2px solid transparent;
   outline-offset: 2px;
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -1432,7 +1445,7 @@ select {
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
   --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(40 31 107 / var(--tw-ring-opacity));
+  --tw-ring-color: rgb(35 96 197 / var(--tw-ring-opacity));
 }
 
 /*
@@ -1821,6 +1834,10 @@ select {
   margin-right: 1rem;
 }
 
+.mr-8 {
+  margin-right: 2rem;
+}
+
 .mt-1 {
   margin-top: 0.25rem;
 }
@@ -2543,6 +2560,10 @@ select {
   padding-bottom: 9px;
 }
 
+.pl-7 {
+  padding-left: 1.75rem;
+}
+
 .pl-\[34px\] {
   padding-left: 34px;
 }
@@ -2874,6 +2895,11 @@ select {
   --tw-ring-color: rgb(40 31 107 / var(--tw-ring-opacity));
 }
 
+.ring-pzh-focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(35 96 197 / var(--tw-ring-opacity));
+}
+
 .ring-offset-2 {
   --tw-ring-offset-width: 2px;
 }
@@ -3047,10 +3073,10 @@ ol li ol li ol li {
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
-.before\:ring-pzh-blue::before {
+.before\:ring-pzh-focus::before {
   content: var(--tw-content);
   --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(40 31 107 / var(--tw-ring-opacity));
+  --tw-ring-color: rgb(35 96 197 / var(--tw-ring-opacity));
 }
 
 .after\:absolute::after {
@@ -3233,9 +3259,9 @@ ol li ol li ol li {
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
-.focus\:ring-pzh-blue-dark:focus {
+.focus\:ring-pzh-focus:focus {
   --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(22 17 59 / var(--tw-ring-opacity));
+  --tw-ring-color: rgb(35 96 197 / var(--tw-ring-opacity));
 }
 
 .focus\:ring-offset-2:focus {

package/src/tailwind.src.css

@@ -80,11 +80,11 @@ ol li ol li ol li {
     */
 
   .pzh-button {
-    @apply focus:ring-pzh-blue-dark disabled:bg-pzh-gray-200 disabled:text-pzh-blue-dark disabled:text-opacity-35 inline-block rounded leading-none ring-offset-2 transition duration-200 ease-in focus:outline-none focus:ring disabled:cursor-not-allowed;
+    @apply focus:ring-pzh-focus disabled:bg-pzh-gray-200 disabled:text-pzh-blue-dark disabled:text-opacity-35 inline-block rounded leading-none ring-offset-2 transition duration-200 ease-in focus:outline-none focus:ring disabled:cursor-not-allowed;
   }
 
   .pzh-form-input {
-    @apply placeholder-pzh-gray-600 text-pzh-blue-dark border-pzh-gray-600 hover:border-pzh-blue focus:ring-pzh-blue focus:border-pzh-blue disabled:bg-pzh-gray-200 text-m block w-full appearance-none rounded border pb-[6px] pt-[10px] leading-[30px] focus:outline-none focus:outline-none focus:ring focus:ring-2;
+    @apply placeholder-pzh-gray-600 text-pzh-blue-dark border-pzh-gray-600 hover:border-pzh-blue focus:ring-pzh-focus focus:border-pzh-focus disabled:bg-pzh-gray-200 text-m block w-full appearance-none rounded border pb-[6px] pt-[10px] leading-[30px] focus:outline-none focus:outline-none focus:ring focus:ring-2;
   }
 
   .pzh-form-error,
@@ -96,14 +96,21 @@ ol li ol li ol li {
 
   .pzh-form-radio:checked + span:before,
   .pzh-form-radio:not(:checked) + span:before {
-    @apply border-pzh-gray-600 bg-pzh-gray-200 absolute left-0 top-0 h-6 w-6 rounded-full border;
+    @apply border-pzh-gray-600 absolute left-0 top-0.5 h-5 w-5 rounded-full border;
     content: "";
   }
+  .pzh-form-radio:not(:checked):hover + span:before,
+  .pzh-form-checkbox:not(:checked):hover + span:before {
+    @apply border-pzh-green-500 bg-pzh-green-10;
+  }
   .pzh-form-radio:checked + span:after,
   .pzh-form-radio:not(:checked) + span:after {
-    @apply bg-pzh-green absolute left-[5px] top-[5px] h-[14px] w-[14px] rounded-full transition duration-200;
+    @apply bg-pzh-white absolute left-1.5 top-2 h-2 w-2 rounded-full transition duration-200;
     content: "";
   }
+  .pzh-form-radio:checked + span:before {
+    @apply bg-pzh-green-500 border-pzh-green-500;
+  }
   .pzh-form-radio:not(:checked) + span:after,
   .pzh-form-checkbox:not(:checked) + span:after {
     opacity: 0;
@@ -116,21 +123,21 @@ ol li ol li ol li {
   }
   .pzh-form-radio:disabled + span:before,
   .pzh-form-checkbox:disabled + span:before {
-    @apply border-pzh-gray-200 bg-pzh-gray-200;
+    @apply border-pzh-gray-500 bg-pzh-gray-200;
   }
 
   .pzh-form-checkbox + span:before {
-    @apply border-pzh-gray-600 bg-pzh-gray-200 absolute left-0 top-0 h-6 w-6 rounded border transition duration-200;
+    @apply border-pzh-gray-600 absolute left-0 top-0.5 h-5 w-5 rounded border transition duration-200;
     content: "";
   }
 
   .pzh-form-checkbox:checked:not(:disabled) + span:before {
-    @apply bg-pzh-green;
+    @apply bg-pzh-green-500 border-pzh-green-500;
   }
 
   .pzh-form-checkbox:checked + span:after,
   .pzh-form-checkbox:not(:checked) + span:after {
-    @apply absolute left-[5px] top-0.5 h-[14px] w-[14px] text-white transition duration-200;
+    @apply absolute left-1 top-px h-3 w-3 text-white transition duration-200;
     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>");
   }
 
@@ -140,7 +147,7 @@ ol li ol li ol li {
 
   .pzh-form-radio:focus + span:before,
   .pzh-form-checkbox:focus + span:before {
-    @apply ring-pzh-blue border-pzh-blue outline-none ring ring-2;
+    @apply ring-pzh-focus border-pzh-focus outline-none ring ring-2;
   }
 
   .form-field-label {