@pzh-ui/css 0.0.60 → 0.0.62

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@pzh-ui/css",
-    "version": "0.0.60",
+    "version": "0.0.62",
     "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": "56c26efa41e63e7e8dcac7653c9dcd1b9149097e",
+    "gitHead": "c18da5011e7b96535c07571254ba7babc8fbfdaa",
     "devDependencies": {
         "tailwindcss": "^3.0.23"
     }

package/src/tailwind.css

@@ -1498,6 +1498,12 @@ select {
   width: 8px;
 }
 
+.w-fit {
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+}
+
 .w-7 {
   width: 1.75rem;
 }
@@ -1587,6 +1593,14 @@ select {
   grid-template-columns: repeat(6, minmax(0, 1fr));
 }
 
+.flex-col {
+  flex-direction: column;
+}
+
+.\!flex-nowrap {
+  flex-wrap: nowrap !important;
+}
+
 .items-start {
   align-items: flex-start;
 }
@@ -1611,6 +1625,10 @@ select {
   overflow: hidden;
 }
 
+.\!overflow-x-auto {
+  overflow-x: auto !important;
+}
+
 .overflow-y-auto {
   overflow-y: auto;
 }
@@ -1674,6 +1692,10 @@ select {
   border-bottom-width: 3px;
 }
 
+.border-t {
+  border-top-width: 1px;
+}
+
 .border-dashed {
   border-style: dashed;
 }
@@ -1693,6 +1715,11 @@ select {
   border-color: rgb(198 164 16 / var(--tw-border-opacity));
 }
 
+.border-pzh-yellow {
+  --tw-border-opacity: 1;
+  border-color: rgb(239 204 54 / var(--tw-border-opacity));
+}
+
 .border-pzh-red {
   --tw-border-opacity: 1;
   border-color: rgb(209 31 61 / var(--tw-border-opacity));
@@ -1703,9 +1730,9 @@ select {
   border-color: rgb(235 112 133 / var(--tw-border-opacity));
 }
 
-.border-pzh-cool-gray {
+.border-pzh-cool-gray-dark {
   --tw-border-opacity: 1;
-  border-color: rgb(131 131 131 / var(--tw-border-opacity));
+  border-color: rgb(92 92 92 / var(--tw-border-opacity));
 }
 
 .border-pzh-purple {
@@ -1742,14 +1769,14 @@ select {
   --tw-border-opacity: 0.35;
 }
 
-.bg-pzh-blue {
+.bg-pzh-green {
   --tw-bg-opacity: 1;
-  background-color: rgb(40 31 107 / var(--tw-bg-opacity));
+  background-color: rgb(0 128 77 / var(--tw-bg-opacity));
 }
 
-.bg-pzh-red {
+.bg-pzh-green-light {
   --tw-bg-opacity: 1;
-  background-color: rgb(209 31 61 / var(--tw-bg-opacity));
+  background-color: rgb(97 179 117 / var(--tw-bg-opacity));
 }
 
 .bg-pzh-yellow {
@@ -1757,24 +1784,44 @@ select {
   background-color: rgb(239 204 54 / var(--tw-bg-opacity));
 }
 
-.bg-pzh-green {
+.bg-pzh-red {
   --tw-bg-opacity: 1;
-  background-color: rgb(0 128 77 / var(--tw-bg-opacity));
+  background-color: rgb(209 31 61 / var(--tw-bg-opacity));
 }
 
-.bg-white {
+.bg-pzh-red-light {
+  --tw-bg-opacity: 1;
+  background-color: rgb(235 112 133 / var(--tw-bg-opacity));
+}
+
+.bg-pzh-cool-gray-dark {
+  --tw-bg-opacity: 1;
+  background-color: rgb(92 92 92 / var(--tw-bg-opacity));
+}
+
+.bg-pzh-purple {
+  --tw-bg-opacity: 1;
+  background-color: rgb(80 61 144 / var(--tw-bg-opacity));
+}
+
+.bg-pzh-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
-.bg-pzh-gray-300 {
+.bg-pzh-blue {
   --tw-bg-opacity: 1;
-  background-color: rgb(232 231 235 / var(--tw-bg-opacity));
+  background-color: rgb(40 31 107 / var(--tw-bg-opacity));
 }
 
-.bg-pzh-cool-gray-dark {
+.bg-white {
   --tw-bg-opacity: 1;
-  background-color: rgb(92 92 92 / var(--tw-bg-opacity));
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+}
+
+.bg-pzh-gray-300 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(232 231 235 / var(--tw-bg-opacity));
 }
 
 .bg-pzh-blue-light {
@@ -1875,6 +1922,11 @@ select {
   padding-bottom: 1.5rem;
 }
 
+.\!py-0 {
+  padding-top: 0px !important;
+  padding-bottom: 0px !important;
+}
+
 .py-1 {
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
@@ -1940,12 +1992,12 @@ select {
   padding-bottom: 0px;
 }
 
-.pb-1\.5 {
-  padding-bottom: 0.375rem;
+.pt-3 {
+  padding-top: 0.75rem;
 }
 
-.pb-1 {
-  padding-bottom: 0.25rem;
+.pb-2 {
+  padding-bottom: 0.5rem;
 }
 
 .pr-2 {
@@ -1956,6 +2008,10 @@ select {
   padding-left: 34px;
 }
 
+.pb-1 {
+  padding-bottom: 0.25rem;
+}
+
 .text-left {
   text-align: left;
 }
@@ -2004,6 +2060,10 @@ select {
   text-transform: uppercase;
 }
 
+.normal-case {
+  text-transform: none;
+}
+
 .italic {
   font-style: italic;
 }
@@ -2042,11 +2102,21 @@ select {
   color: rgb(0 128 77 / var(--tw-text-opacity));
 }
 
+.text-pzh-white {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
 .text-pzh-green-light {
   --tw-text-opacity: 1;
   color: rgb(97 179 117 / var(--tw-text-opacity));
 }
 
+.text-pzh-blue {
+  --tw-text-opacity: 1;
+  color: rgb(40 31 107 / var(--tw-text-opacity));
+}
+
 .text-pzh-yellow-dark {
   --tw-text-opacity: 1;
   color: rgb(198 164 16 / var(--tw-text-opacity));
@@ -2062,9 +2132,9 @@ select {
   color: rgb(235 112 133 / var(--tw-text-opacity));
 }
 
-.text-pzh-cool-gray {
+.text-pzh-cool-gray-dark {
   --tw-text-opacity: 1;
-  color: rgb(131 131 131 / var(--tw-text-opacity));
+  color: rgb(92 92 92 / var(--tw-text-opacity));
 }
 
 .text-pzh-purple {
@@ -2072,21 +2142,11 @@ select {
   color: rgb(80 61 144 / var(--tw-text-opacity));
 }
 
-.text-pzh-white {
-  --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity));
-}
-
 .text-white {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
-.text-pzh-blue {
-  --tw-text-opacity: 1;
-  color: rgb(40 31 107 / var(--tw-text-opacity));
-}
-
 .text-pzh-blue-light {
   --tw-text-opacity: 1;
   color: rgb(123 173 222 / var(--tw-text-opacity));
@@ -2102,8 +2162,8 @@ select {
   color: rgb(138 136 157 / var(--tw-text-opacity));
 }
 
-.text-opacity-50 {
-  --tw-text-opacity: 0.5;
+.text-pzh-blue-dark\/50 {
+  color: rgb(22 17 59 / 0.5);
 }
 
 .underline {
@@ -2270,7 +2330,6 @@ h6,
 strong,
 b {
   font-family: 'Karbon Medium', sans-serif;
-  font-weight: 700;
 }
 
 .bold {
@@ -2511,7 +2570,7 @@ b {
  * React Datepicker
  */
 
-.react-datepicker {
+.react-datepicker.pzh-datepicker {
   font-family: 'Karbon Regular', sans-serif;
   font-weight: 400;
   font-size: 0.8rem;
@@ -2523,44 +2582,45 @@ b {
   color: rgb(22 17 59 / var(--tw-text-opacity));
 }
 
-.react-datepicker__triangle {
+.pzh-datepicker .react-datepicker__triangle {
   display: none;
 }
 
-.react-datepicker__header {
+.pzh-datepicker .react-datepicker__header {
   border-style: none;
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
-.react-datepicker__month {
+.pzh-datepicker .react-datepicker__month {
   margin-left: 0.125rem;
   margin-right: 0.125rem;
   margin-top: 0px;
 }
 
-.react-datepicker__day-names {
+.pzh-datepicker .react-datepicker__day-names {
   background-color: rgb(22 17 59 / var(--tw-bg-opacity));
   --tw-bg-opacity: 0.1;
 }
 
-.react-datepicker__day-name {
+.pzh-datepicker .react-datepicker__day-name {
   margin-top: 0px;
   margin-bottom: 0px;
   line-height: 26px;
   font-weight: 700;
 }
 
-.react-datepicker__current-month {
+.pzh-datepicker .react-datepicker__current-month {
   margin-bottom: 0.5rem;
 }
 
-.react-datepicker__day--outside-month:not(.react-datepicker__day--selected) {
+.pzh-datepicker
+    .react-datepicker__day--outside-month:not(.react-datepicker__day--selected) {
   color: rgb(22 17 59 / var(--tw-text-opacity));
   --tw-text-opacity: 0.35;
 }
 
-.react-datepicker__day-name, .react-datepicker__day, .react-datepicker__time-name {
+.pzh-datepicker .react-datepicker__day-name, .pzh-datepicker .react-datepicker__day, .pzh-datepicker .react-datepicker__time-name {
   margin-left: 0.5rem;
   margin-right: 0.5rem;
   margin-top: 0.25rem;
@@ -2570,33 +2630,33 @@ b {
   line-height: 28px;
 }
 
-.react-datepicker__day {
+.pzh-datepicker .react-datepicker__day {
   border-radius: 9999px;
 }
 
-.react-datepicker__day:hover {
+.pzh-datepicker .react-datepicker__day:hover {
   border-radius: 9999px;
 }
 
-.react-datepicker__day--today, .react-datepicker__day--today:hover, .react-datepicker__day--keyboard-selected {
+.pzh-datepicker .react-datepicker__day--today, .pzh-datepicker .react-datepicker__day--today:hover, .pzh-datepicker .react-datepicker__day--keyboard-selected {
   background-color: rgb(22 17 59 / var(--tw-bg-opacity));
   --tw-bg-opacity: 0.1;
   --tw-text-opacity: 1;
   color: rgb(22 17 59 / var(--tw-text-opacity));
 }
 
-.react-datepicker__day--keyboard-selected:hover {
+.pzh-datepicker .react-datepicker__day--keyboard-selected:hover {
   background-color: rgb(22 17 59 / var(--tw-bg-opacity));
   --tw-bg-opacity: 0.1;
 }
 
-.react-datepicker__day--selected, .react-datepicker__day--selected:hover {
+.pzh-datepicker .react-datepicker__day--selected, .pzh-datepicker .react-datepicker__day--selected:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(0 128 77 / var(--tw-bg-opacity));
   font-weight: 700;
 }
 
-.react-datepicker__year-read-view--down-arrow, .react-datepicker__month-read-view--down-arrow, .react-datepicker__month-year-read-view--down-arrow, .react-datepicker__navigation-icon::before {
+.pzh-datepicker .react-datepicker__year-read-view--down-arrow, .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 {
   height: 7px;
   width: 7px;
   border-width: 0px;
@@ -2606,7 +2666,7 @@ b {
   border-color: rgb(0 0 0 / var(--tw-border-opacity));
 }
 
-.react-datepicker__navigation-icon {
+.pzh-datepicker .react-datepicker__navigation-icon {
   line-height: 14px;
 }
 
@@ -2861,14 +2921,6 @@ b {
     gap: 2rem;
   }
 
-  .md\:p-4 {
-    padding: 1rem;
-  }
-
-  .md\:pb-4 {
-    padding-bottom: 1rem;
-  }
-
   .md\:text-base {
     font-size: 1rem;
   }

package/src/tailwind.src.css

@@ -42,7 +42,6 @@ h6,
 strong,
 b {
     font-family: 'Karbon Medium', sans-serif;
-    font-weight: 700;
 }
 
 .bold {
@@ -133,7 +132,7 @@ b {
  * React Datepicker
  */
 
-.react-datepicker {
+.react-datepicker.pzh-datepicker {
     font-family: 'Karbon Regular', sans-serif;
     font-weight: 400;
     font-size: 0.8rem;
@@ -143,67 +142,68 @@ b {
     @apply text-pzh-blue-dark border-none;
 }
 
-.react-datepicker__triangle {
+.pzh-datepicker .react-datepicker__triangle {
     display: none;
 }
 
-.react-datepicker__header {
+.pzh-datepicker .react-datepicker__header {
     @apply bg-white border-none;
 }
 
-.react-datepicker__month {
+.pzh-datepicker .react-datepicker__month {
     @apply mt-0 mx-0.5;
 }
 
-.react-datepicker__day-names {
+.pzh-datepicker .react-datepicker__day-names {
     @apply bg-pzh-blue-dark bg-opacity-10;
 }
 
-.react-datepicker__day-name {
+.pzh-datepicker .react-datepicker__day-name {
     @apply bold leading-[26px] my-0;
 }
 
-.react-datepicker__current-month {
+.pzh-datepicker .react-datepicker__current-month {
     @apply mb-2;
 }
 
-.react-datepicker__day--outside-month:not(.react-datepicker__day--selected) {
+.pzh-datepicker
+    .react-datepicker__day--outside-month:not(.react-datepicker__day--selected) {
     @apply text-pzh-blue-dark text-opacity-35;
 }
 
-.react-datepicker__day-name,
-.react-datepicker__day,
-.react-datepicker__time-name {
+.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;
 }
 
-.react-datepicker__day {
+.pzh-datepicker .react-datepicker__day {
     @apply rounded-full hover:rounded-full;
 }
 
-.react-datepicker__day--today,
-.react-datepicker__day--today:hover,
-.react-datepicker__day--keyboard-selected {
+.pzh-datepicker .react-datepicker__day--today,
+.pzh-datepicker .react-datepicker__day--today:hover,
+.pzh-datepicker .react-datepicker__day--keyboard-selected {
     @apply bg-pzh-blue-dark bg-opacity-10 text-pzh-blue-dark;
 }
 
-.react-datepicker__day--keyboard-selected:hover {
+.pzh-datepicker .react-datepicker__day--keyboard-selected:hover {
     @apply bg-pzh-blue-dark bg-opacity-10;
 }
 
-.react-datepicker__day--selected,
-.react-datepicker__day--selected:hover {
+.pzh-datepicker .react-datepicker__day--selected,
+.pzh-datepicker .react-datepicker__day--selected:hover {
     @apply bg-pzh-green bold;
 }
 
-.react-datepicker__year-read-view--down-arrow,
-.react-datepicker__month-read-view--down-arrow,
-.react-datepicker__month-year-read-view--down-arrow,
-.react-datepicker__navigation-icon::before {
+.pzh-datepicker .react-datepicker__year-read-view--down-arrow,
+.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];
 }
 
-.react-datepicker__navigation-icon {
+.pzh-datepicker .react-datepicker__navigation-icon {
     @apply leading-[14px];
 }