@pzh-ui/css 0.0.56 → 0.0.58

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@pzh-ui/css",
-    "version": "0.0.56",
+    "version": "0.0.58",
     "description": "Contains default styling for projects whitin Provincie Zuid-Holland.",
     "license": "ISC",
     "publishConfig": {
@@ -18,9 +18,10 @@
         "@tailwindcss/forms": "^0.5.0",
         "@tailwindcss/line-clamp": "^0.3.1",
         "@tailwindcss/typography": "^0.5.9",
-        "react-datepicker": "^4.7.0"
+        "react-datepicker": "^4.7.0",
+        "react-toastify": "^9.1.2"
     },
-    "gitHead": "40d24c5b984414a4c0a4070da5aa94fdae9500c0",
+    "gitHead": "4455bde77beb2a0a6d664a090de2b798c3eaed8c",
     "devDependencies": {
         "tailwindcss": "^3.0.23"
     }

package/src/tailwind.css

@@ -1352,6 +1352,10 @@ select {
   margin-bottom: -2px;
 }
 
+.mt-3 {
+  margin-top: 0.75rem;
+}
+
 .mb-2 {
   margin-bottom: 0.5rem;
 }
@@ -1472,6 +1476,10 @@ select {
   width: 1rem;
 }
 
+.w-\[320px\] {
+  width: 320px;
+}
+
 .w-\[8px\] {
   width: 8px;
 }
@@ -1679,6 +1687,11 @@ select {
   border-color: rgb(80 61 144 / var(--tw-border-opacity));
 }
 
+.border-pzh-gray-600 {
+  --tw-border-opacity: 1;
+  border-color: rgb(138 136 157 / var(--tw-border-opacity));
+}
+
 .border-pzh-blue-dark {
   --tw-border-opacity: 1;
   border-color: rgb(22 17 59 / var(--tw-border-opacity));
@@ -1689,23 +1702,10 @@ select {
   border-color: rgb(173 172 186 / var(--tw-border-opacity));
 }
 
-.border-pzh-gray-600 {
-  --tw-border-opacity: 1;
-  border-color: rgb(138 136 157 / var(--tw-border-opacity));
-}
-
 .border-opacity-35 {
   --tw-border-opacity: 0.35;
 }
 
-.border-opacity-10 {
-  --tw-border-opacity: 0.1;
-}
-
-.border-opacity-100 {
-  --tw-border-opacity: 1;
-}
-
 .bg-pzh-blue {
   --tw-bg-opacity: 1;
   background-color: rgb(40 31 107 / var(--tw-bg-opacity));
@@ -1731,9 +1731,9 @@ select {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
-.bg-pzh-cool-gray-light {
+.bg-pzh-gray-300 {
   --tw-bg-opacity: 1;
-  background-color: rgb(191 191 191 / var(--tw-bg-opacity));
+  background-color: rgb(232 231 235 / var(--tw-bg-opacity));
 }
 
 .bg-pzh-cool-gray-dark {
@@ -2033,18 +2033,15 @@ select {
   color: rgb(40 31 107 / var(--tw-text-opacity));
 }
 
-.text-opacity-35 {
-  --tw-text-opacity: 0.35;
+.text-pzh-gray-600 {
+  --tw-text-opacity: 1;
+  color: rgb(138 136 157 / var(--tw-text-opacity));
 }
 
 .text-opacity-50 {
   --tw-text-opacity: 0.5;
 }
 
-.text-opacity-55 {
-  --tw-text-opacity: 0.55;
-}
-
 .underline {
   -webkit-text-decoration-line: underline;
           text-decoration-line: underline;
@@ -2244,8 +2241,8 @@ b {
           appearance: none;
   border-radius: 0.25rem;
   border-width: 1px;
-  border-color: rgb(22 17 59 / var(--tw-border-opacity));
-  --tw-border-opacity: 0.35;
+  --tw-border-opacity: 1;
+  border-color: rgb(138 136 157 / var(--tw-border-opacity));
   padding-top: 10px;
   padding-bottom: 6px;
   line-height: 30px;
@@ -2254,23 +2251,23 @@ b {
 }
 
 .pzh-form-input::-moz-placeholder {
-  color: rgb(22 17 59 / var(--tw-placeholder-opacity));
-  --tw-placeholder-opacity: 0.55;
+  --tw-placeholder-opacity: 1;
+  color: rgb(138 136 157 / var(--tw-placeholder-opacity));
 }
 
 .pzh-form-input:-ms-input-placeholder {
-  color: rgb(22 17 59 / var(--tw-placeholder-opacity));
-  --tw-placeholder-opacity: 0.55;
+  --tw-placeholder-opacity: 1;
+  color: rgb(138 136 157 / var(--tw-placeholder-opacity));
 }
 
 .pzh-form-input::placeholder {
-  color: rgb(22 17 59 / var(--tw-placeholder-opacity));
-  --tw-placeholder-opacity: 0.55;
+  --tw-placeholder-opacity: 1;
+  color: rgb(138 136 157 / var(--tw-placeholder-opacity));
 }
 
 .pzh-form-input:hover {
   --tw-border-opacity: 1;
-  border-color: rgb(160 174 192 / var(--tw-border-opacity));
+  border-color: rgb(22 17 59 / var(--tw-border-opacity));
 }
 
 .pzh-form-input:focus {
@@ -2281,11 +2278,8 @@ b {
 }
 
 .pzh-form-input:disabled {
-  border-color: rgb(22 17 59 / var(--tw-border-opacity));
-  --tw-border-opacity: 0.1;
   --tw-bg-opacity: 1;
   background-color: rgb(235 235 235 / var(--tw-bg-opacity));
-  --tw-text-opacity: 0.55;
 }
 
 .pzh-form-error, .pzh-form-checkbox.pzh-form-error + span:before, .pzh-form-radio:checked.pzh-form-error + span:before, .pzh-form-radio:not(:checked).pzh-form-error + span:before {
@@ -2301,10 +2295,10 @@ b {
   width: 24px;
   border-radius: 9999px;
   border-width: 1px;
-  border-color: rgb(22 17 59 / var(--tw-border-opacity));
-  --tw-border-opacity: 0.35;
+  --tw-border-opacity: 1;
+  border-color: rgb(138 136 157 / var(--tw-border-opacity));
   --tw-bg-opacity: 1;
-  background-color: rgb(244 244 247 / var(--tw-bg-opacity));
+  background-color: rgb(235 235 235 / var(--tw-bg-opacity));
   content: '';
 }
 
@@ -2352,10 +2346,10 @@ b {
   width: 24px;
   border-radius: 4px;
   border-width: 1px;
-  border-color: rgb(22 17 59 / var(--tw-border-opacity));
-  --tw-border-opacity: 0.35;
+  --tw-border-opacity: 1;
+  border-color: rgb(138 136 157 / var(--tw-border-opacity));
   --tw-bg-opacity: 1;
-  background-color: rgb(244 244 247 / var(--tw-bg-opacity));
+  background-color: rgb(235 235 235 / var(--tw-bg-opacity));
   transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -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-text-decoration-color, -webkit-backdrop-filter;
@@ -2636,17 +2630,14 @@ b {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.hover\:border-pzh-blue-dark:hover {
+.hover\:border-pzh-blue:hover {
   --tw-border-opacity: 1;
-  border-color: rgb(22 17 59 / var(--tw-border-opacity));
+  border-color: rgb(40 31 107 / var(--tw-border-opacity));
 }
 
-.hover\:border-opacity-100:hover {
+.hover\:border-pzh-blue-dark:hover {
   --tw-border-opacity: 1;
-}
-
-.hover\:border-opacity-35:hover {
-  --tw-border-opacity: 0.35;
+  border-color: rgb(22 17 59 / var(--tw-border-opacity));
 }
 
 .hover\:bg-white:hover {

package/src/tailwind.src.css

@@ -62,7 +62,7 @@ b {
 }
 
 .pzh-form-input {
-    @apply block w-full pt-[10px] pb-[6px] leading-[30px] placeholder-pzh-blue-dark placeholder-opacity-55 text-pzh-blue-dark border border-pzh-blue-dark border-opacity-35 rounded appearance-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-200 disabled:text-opacity-55;
+    @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-dark focus:border-pzh-blue-light disabled:bg-pzh-gray-200;
 }
 
 .pzh-form-error,
@@ -74,7 +74,7 @@ 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-blue-dark border border-opacity-35 bg-pzh-form rounded-full;
+    @apply absolute left-0 top-0 w-[24px] h-[24px] border-pzh-gray-600 border bg-pzh-gray-200 rounded-full;
     content: '';
 }
 .pzh-form-radio:checked + span:after,
@@ -98,7 +98,7 @@ b {
 }
 
 .pzh-form-checkbox + span:before {
-    @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;
+    @apply absolute left-0 top-0 w-[24px] h-[24px] border-pzh-gray-600 border bg-pzh-gray-200 rounded-[4px] transition duration-200;
     content: '';
 }