@pzh-ui/css 0.0.65 → 0.0.67

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@pzh-ui/css",
-    "version": "0.0.65",
+    "version": "0.0.67",
     "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": "7e48d171c197f059c7a07e43be9ce1d539a364a2",
+    "gitHead": "39b583329c63a8f7dc7cd5bb5b1ed144311cb817",
     "devDependencies": {
         "tailwindcss": "^3.3.2"
     }

package/src/tailwind.css

@@ -1271,8 +1271,8 @@ select {
   border-width: 1px;
   --tw-border-opacity: 1;
   border-color: rgb(138 136 157 / var(--tw-border-opacity));
-  padding-top: 10px;
   padding-bottom: 6px;
+  padding-top: 10px;
   line-height: 30px;
   --tw-text-opacity: 1;
   color: rgb(22 17 59 / var(--tw-text-opacity));
@@ -1338,8 +1338,8 @@ select {
 .pzh-form-radio:checked + span:after,
     .pzh-form-radio:not(:checked) + span:after {
   position: absolute;
-  top: 0.25rem;
   left: 0.25rem;
+  top: 0.25rem;
   height: 14px;
   width: 14px;
   border-radius: 9999px;
@@ -1401,8 +1401,8 @@ select {
 .pzh-form-checkbox:checked + span:after,
     .pzh-form-checkbox:not(:checked) + span:after {
   position: absolute;
-  top: 2px;
   left: 0.25rem;
+  top: 2px;
   height: 14px;
   width: 14px;
   --tw-text-opacity: 1;
@@ -1441,7 +1441,8 @@ select {
   font-family: 'Karbon Regular', sans-serif;
   font-weight: 400;
   font-size: 0.8rem;
-  box-shadow: 0px 18px 60px rgba(0, 0, 0, 0.07),
+  box-shadow:
+            0px 18px 60px rgba(0, 0, 0, 0.07),
             0px 4.02054px 13.4018px rgba(0, 0, 0, 0.0417275),
             0px 1.19702px 3.99006px rgba(0, 0, 0, 0.0282725);
   border-style: none;
@@ -1482,7 +1483,9 @@ select {
 }
 
 .pzh-datepicker
-        .react-datepicker__day--outside-month:not(.react-datepicker__day--selected) {
+        .react-datepicker__day--outside-month:not(
+            .react-datepicker__day--selected
+        ) {
   color: rgb(22 17 59 / var(--tw-text-opacity));
   --tw-text-opacity: 0.35;
 }
@@ -1507,8 +1510,12 @@ select {
   border-radius: 9999px;
 }
 
-.pzh-datepicker .react-datepicker__day--today,
-    .pzh-datepicker .react-datepicker__day--today:hover,
+.pzh-datepicker
+        .react-datepicker__day--today:not(.react-datepicker__day--selected),
+    .pzh-datepicker
+        .react-datepicker__day--today:hover:not(
+            .react-datepicker__day--selected
+        ),
     .pzh-datepicker .react-datepicker__day--keyboard-selected {
   background-color: rgb(22 17 59 / var(--tw-bg-opacity));
   --tw-bg-opacity: 0.1;
@@ -1535,8 +1542,8 @@ select {
   height: 7px;
   width: 7px;
   border-width: 0px;
-  border-top-width: 1px;
   border-right-width: 1px;
+  border-top-width: 1px;
   --tw-border-opacity: 1;
   border-color: rgb(0 0 0 / var(--tw-border-opacity));
 }
@@ -1549,6 +1556,25 @@ select {
   box-shadow: none !important;
 }
 
+.pzh-modal {
+  &[data-entering] {
+    animation: fade 150ms;
+  }
+  &[data-exiting] {
+    animation: fade 150ms reverse ease-in;
+  }
+}
+
+@keyframes fade {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
 .sr-only {
   position: absolute;
   width: 1px;
@@ -1614,6 +1640,10 @@ select {
   right: 0.75rem;
 }
 
+.right-8 {
+  right: 2rem;
+}
+
 .right-\[14px\] {
   right: 14px;
 }
@@ -1622,6 +1652,10 @@ select {
   top: 0px;
 }
 
+.top-4 {
+  top: 1rem;
+}
+
 .top-\[14px\] {
   top: 14px;
 }
@@ -1642,6 +1676,10 @@ select {
   z-index: 50;
 }
 
+.z-\[100\] {
+  z-index: 100;
+}
+
 .col-span-6 {
   grid-column: span 6 / span 6;
 }
@@ -1669,6 +1707,14 @@ select {
   margin-bottom: 0.5rem;
 }
 
+.-mb-0 {
+  margin-bottom: -0px;
+}
+
+.-mb-0\.5 {
+  margin-bottom: -0.125rem;
+}
+
 .-mb-px {
   margin-bottom: -1px;
 }
@@ -1809,6 +1855,10 @@ select {
   height: 2rem;
 }
 
+.h-\[24px\] {
+  height: 24px;
+}
+
 .h-\[28px\] {
   height: 28px;
 }
@@ -1903,6 +1953,10 @@ select {
   max-width: 72rem;
 }
 
+.max-w-\[1200px\] {
+  max-width: 1200px;
+}
+
 .max-w-\[2rem\] {
   max-width: 2rem;
 }
@@ -1915,6 +1969,18 @@ select {
   max-width: 400px;
 }
 
+.max-w-\[600px\] {
+  max-width: 600px;
+}
+
+.max-w-\[812px\] {
+  max-width: 812px;
+}
+
+.max-w-\[980px\] {
+  max-width: 980px;
+}
+
 .max-w-full {
   max-width: 100%;
 }
@@ -1961,6 +2027,10 @@ select {
   animation: spin 1s linear infinite;
 }
 
+.cursor-not-allowed {
+  cursor: not-allowed;
+}
+
 .cursor-pointer {
   cursor: pointer;
 }
@@ -2035,6 +2105,10 @@ select {
   border-radius: 0.25rem;
 }
 
+.rounded-\[40px\] {
+  border-radius: 40px;
+}
+
 .rounded-\[4px\] {
   border-radius: 4px;
 }
@@ -2155,6 +2229,10 @@ select {
   background-color: rgb(51 51 51 / var(--tw-bg-opacity));
 }
 
+.bg-black\/30 {
+  background-color: rgb(0 0 0 / 0.3);
+}
+
 .bg-pzh-blue {
   --tw-bg-opacity: 1;
   background-color: rgb(40 31 107 / var(--tw-bg-opacity));
@@ -2313,10 +2391,6 @@ select {
   padding-bottom: 1.5rem;
 }
 
-.pb-0 {
-  padding-bottom: 0px;
-}
-
 .pb-1 {
   padding-bottom: 0.25rem;
 }
@@ -2483,6 +2557,10 @@ select {
   color: rgb(22 17 59 / var(--tw-text-opacity));
 }
 
+.text-pzh-blue-dark\/35 {
+  color: rgb(22 17 59 / 0.35);
+}
+
 .text-pzh-blue-dark\/50 {
   color: rgb(22 17 59 / 0.5);
 }
@@ -2576,6 +2654,12 @@ select {
   opacity: 0.5;
 }
 
+.shadow-\[0_1\.1970183849334717px_3\.9900612831115723px_0_rgba\(0\2c 0\2c 0\2c 0\.0283\)\2c 0_4\.020535469055176px_13\.401785850524902px_0_rgba\(0\2c 0\2c 0\2c 0\.0417\)\2c 0_18px_60px_0_rgba\(0\2c 0\2c 0\2c 0\.07\)\] {
+  --tw-shadow: 0 1.1970183849334717px 3.9900612831115723px 0 rgba(0,0,0,0.0283),0 4.020535469055176px 13.401785850524902px 0 rgba(0,0,0,0.0417),0 18px 60px 0 rgba(0,0,0,0.07);
+  --tw-shadow-colored: 0 1.1970183849334717px 3.9900612831115723px 0 var(--tw-shadow-color), 0 4.020535469055176px 13.401785850524902px 0 var(--tw-shadow-color), 0 18px 60px 0 var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .shadow-card {
   --tw-shadow: 0px 18px 60px rgba(0, 0, 0, 0.07), 0px 4.02054px 13.4018px rgba(0, 0, 0, 0.0417275), 0px 1.19702px 3.99006px rgba(0, 0, 0, 0.0282725);
   --tw-shadow-colored: 0px 18px 60px var(--tw-shadow-color), 0px 4.02054px 13.4018px var(--tw-shadow-color), 0px 1.19702px 3.99006px var(--tw-shadow-color);
@@ -2784,6 +2868,11 @@ b {
   border-color: rgb(22 17 59 / var(--tw-border-opacity));
 }
 
+.hover\:border-pzh-green-dark:hover {
+  --tw-border-opacity: 1;
+  border-color: rgb(0 77 46 / var(--tw-border-opacity));
+}
+
 .hover\:bg-pzh-blue-dark:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(22 17 59 / var(--tw-bg-opacity));
@@ -2823,6 +2912,11 @@ b {
   color: rgb(0 128 77 / var(--tw-text-opacity));
 }
 
+.hover\:text-pzh-white:hover {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
 .hover\:text-white:hover {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));

package/src/tailwind.src.css

@@ -64,11 +64,11 @@ b {
     */
 
     .pzh-button {
-        @apply inline-block transition duration-200 ease-in rounded focus:outline-none focus:ring focus:ring-pzh-blue-dark ring-offset-2 leading-none disabled:bg-pzh-gray-200 disabled:text-pzh-blue-dark disabled:text-opacity-35 disabled:cursor-not-allowed;
+        @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;
     }
 
     .pzh-form-input {
-        @apply block w-full pt-[10px] pb-[6px] leading-[30px] placeholder-pzh-gray-600 text-pzh-blue-dark border border-pzh-gray-600 rounded appearance-none focus:outline-none hover:border-pzh-blue focus:ring focus:ring-2 focus:ring-pzh-blue focus:outline-none focus:border-pzh-blue disabled:bg-pzh-gray-200;
+        @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 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,
@@ -80,12 +80,12 @@ b {
 
     .pzh-form-radio:checked + span:before,
     .pzh-form-radio:not(:checked) + span:before {
-        @apply absolute left-0 top-0 w-[24px] h-[24px] border-pzh-gray-600 border bg-pzh-gray-200 rounded-full;
+        @apply border-pzh-gray-600 bg-pzh-gray-200 absolute left-0 top-0 h-[24px] w-[24px] rounded-full border;
         content: '';
     }
     .pzh-form-radio:checked + span:after,
     .pzh-form-radio:not(:checked) + span:after {
-        @apply absolute top-1 left-1 w-[14px] h-[14px] rounded-full bg-pzh-green transition duration-200;
+        @apply bg-pzh-green absolute left-1 top-1 h-[14px] w-[14px] rounded-full transition duration-200;
         content: '';
     }
     .pzh-form-radio:not(:checked) + span:after,
@@ -104,7 +104,7 @@ b {
     }
 
     .pzh-form-checkbox + span:before {
-        @apply absolute left-0 top-0 w-[24px] h-[24px] border-pzh-gray-600 border bg-pzh-gray-200 rounded-[4px] transition duration-200;
+        @apply border-pzh-gray-600 bg-pzh-gray-200 absolute left-0 top-0 h-[24px] w-[24px] rounded-[4px] border transition duration-200;
         content: '';
     }
 
@@ -114,7 +114,7 @@ b {
 
     .pzh-form-checkbox:checked + span:after,
     .pzh-form-checkbox:not(:checked) + span:after {
-        @apply absolute top-[2px] left-1 w-[14px] h-[14px] text-white transition duration-200;
+        @apply absolute left-1 top-[2px] h-[14px] w-[14px] 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>");
     }
 
@@ -124,11 +124,11 @@ b {
 
     .pzh-form-radio:focus + span:before,
     .pzh-form-checkbox:focus + span:before {
-        @apply ring ring-2 ring-pzh-blue outline-none border-pzh-blue;
+        @apply ring-pzh-blue border-pzh-blue outline-none ring ring-2;
     }
 
     .form-field-label {
-        @apply block mb-2 text-xs tracking-wide text-gray-700 uppercase;
+        @apply mb-2 block text-xs uppercase tracking-wide text-gray-700;
     }
 
     .form-field-description {
@@ -143,7 +143,8 @@ b {
         font-family: 'Karbon Regular', sans-serif;
         font-weight: 400;
         font-size: 0.8rem;
-        box-shadow: 0px 18px 60px rgba(0, 0, 0, 0.07),
+        box-shadow:
+            0px 18px 60px rgba(0, 0, 0, 0.07),
             0px 4.02054px 13.4018px rgba(0, 0, 0, 0.0417275),
             0px 1.19702px 3.99006px rgba(0, 0, 0, 0.0282725);
         @apply text-pzh-blue-dark border-none;
@@ -154,11 +155,11 @@ b {
     }
 
     .pzh-datepicker .react-datepicker__header {
-        @apply bg-white border-none;
+        @apply border-none bg-white;
     }
 
     .pzh-datepicker .react-datepicker__month {
-        @apply mt-0 mx-0.5;
+        @apply mx-0.5 mt-0;
     }
 
     .pzh-datepicker .react-datepicker__day-names {
@@ -166,7 +167,7 @@ b {
     }
 
     .pzh-datepicker .react-datepicker__day-name {
-        @apply bold leading-[26px] my-0;
+        @apply bold my-0 leading-[26px];
     }
 
     .pzh-datepicker .react-datepicker__current-month {
@@ -174,24 +175,30 @@ b {
     }
 
     .pzh-datepicker
-        .react-datepicker__day--outside-month:not(.react-datepicker__day--selected) {
+        .react-datepicker__day--outside-month:not(
+            .react-datepicker__day--selected
+        ) {
         @apply text-pzh-blue-dark text-opacity-35;
     }
 
     .pzh-datepicker .react-datepicker__day-name,
     .pzh-datepicker .react-datepicker__day,
     .pzh-datepicker .react-datepicker__time-name {
-        @apply w-[26px] h-[26px] leading-[28px] mx-2 my-1;
+        @apply mx-2 my-1 h-[26px] w-[26px] leading-[28px];
     }
 
     .pzh-datepicker .react-datepicker__day {
         @apply rounded-full hover:rounded-full;
     }
 
-    .pzh-datepicker .react-datepicker__day--today,
-    .pzh-datepicker .react-datepicker__day--today:hover,
+    .pzh-datepicker
+        .react-datepicker__day--today:not(.react-datepicker__day--selected),
+    .pzh-datepicker
+        .react-datepicker__day--today:hover:not(
+            .react-datepicker__day--selected
+        ),
     .pzh-datepicker .react-datepicker__day--keyboard-selected {
-        @apply bg-pzh-blue-dark bg-opacity-10 text-pzh-blue-dark;
+        @apply bg-pzh-blue-dark text-pzh-blue-dark bg-opacity-10;
     }
 
     .pzh-datepicker .react-datepicker__day--keyboard-selected:hover {
@@ -207,7 +214,7 @@ b {
     .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 {
-        @apply w-[7px] h-[7px] border border-black border-0 border-t-[1px] border-r-[1px];
+        @apply h-[7px] w-[7px] border border-0 border-r-[1px] border-t-[1px] border-black;
     }
 
     .pzh-datepicker .react-datepicker__navigation-icon {
@@ -225,4 +232,24 @@ b {
         pointer-events: none;
         height: 0;
     }
+
+    .pzh-modal {
+        &[data-entering] {
+            animation: fade 150ms;
+        }
+
+        &[data-exiting] {
+            animation: fade 150ms reverse ease-in;
+        }
+    }
+
+    @keyframes fade {
+        from {
+            opacity: 0;
+        }
+
+        to {
+            opacity: 1;
+        }
+    }
 }