@pzh-ui/css 0.0.27 → 0.0.30

package/config/index.js

@@ -213,6 +213,9 @@ module.exports = {
                 red: '#CB3B36',
                 orange: '#F9B53C',
             },
+            'pzh-white': {
+                DEFAULT: '#FFFFFF',
+            },
         },
         extend: {
             opacity: {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@pzh-ui/css",
-    "version": "0.0.27",
+    "version": "0.0.30",
     "description": "Contains default styling for projects whitin Provincie Zuid-Holland.",
     "license": "ISC",
     "publishConfig": {
@@ -19,7 +19,7 @@
         "@tailwindcss/line-clamp": "^0.3.1",
         "react-datepicker": "^4.7.0"
     },
-    "gitHead": "052db6dfc67cdd9688b77da00fbbe19ac2c096e0",
+    "gitHead": "4df5b747cd27baa9e90c143942a7ff01b8a96962",
     "devDependencies": {
         "tailwindcss": "^3.0.23"
     }

package/src/tailwind.css

@@ -723,6 +723,18 @@ select{
   right: 0px;
 }
 
+.top-0{
+  top: 0px;
+}
+
+.top-\[192px\]{
+  top: 192px;
+}
+
+.top-\[288px\]{
+  top: 288px;
+}
+
 .bottom-0{
   bottom: 0px;
 }
@@ -731,10 +743,6 @@ select{
   left: 0px;
 }
 
-.top-0{
-  top: 0px;
-}
-
 .-left-\[9999px\]{
   left: -9999px;
 }
@@ -764,6 +772,11 @@ select{
   margin-right: auto;
 }
 
+.my-2{
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
 .mr-2{
   margin-right: 0.5rem;
 }
@@ -792,8 +805,8 @@ select{
   margin-left: 1rem;
 }
 
-.mt-2{
-  margin-top: 0.5rem;
+.mt-1{
+  margin-top: 0.25rem;
 }
 
 .-mt-8{
@@ -812,6 +825,10 @@ select{
   margin-bottom: 0.5rem;
 }
 
+.mt-2{
+  margin-top: 0.5rem;
+}
+
 .ml-1{
   margin-left: 0.25rem;
 }
@@ -852,6 +869,14 @@ select{
   height: 36px;
 }
 
+.h-\[96px\]{
+  height: 96px;
+}
+
+.h-px{
+  height: 1px;
+}
+
 .h-4{
   height: 1rem;
 }
@@ -868,6 +893,10 @@ select{
   width: 1.5rem;
 }
 
+.w-\[96px\]{
+  width: 96px;
+}
+
 .w-full{
   width: 100%;
 }
@@ -993,6 +1022,11 @@ select{
   border-color: rgb(22 17 59 / var(--tw-border-opacity));
 }
 
+.border-pzh-red{
+  --tw-border-opacity: 1;
+  border-color: rgb(209 31 61 / var(--tw-border-opacity));
+}
+
 .border-opacity-35{
   --tw-border-opacity: 0.35;
 }
@@ -1001,6 +1035,10 @@ select{
   --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));
@@ -1021,6 +1059,11 @@ select{
   background-color: rgb(0 128 77 / var(--tw-bg-opacity));
 }
 
+.bg-pzh-cool-gray-light{
+  --tw-bg-opacity: 1;
+  background-color: rgb(191 191 191 / var(--tw-bg-opacity));
+}
+
 .bg-pzh-cool-gray-dark{
   --tw-bg-opacity: 1;
   background-color: rgb(92 92 92 / var(--tw-bg-opacity));
@@ -1218,6 +1261,10 @@ select{
   font-style: italic;
 }
 
+.leading-\[30px\]{
+  line-height: 30px;
+}
+
 .leading-normal{
   line-height: 1.5;
 }
@@ -1418,10 +1465,6 @@ h6,
   font-weight: 700;
 }
 
-.svg-inline--fa:not(.text-xs):not(.text-sm):not(.text-base):not(.text-lg):not(.text-2xl):not(.text-3xl):not(.text-4xl):not(.text-5xl):not(.text-6xl) {
-  font-size: 14px;
-}
-
 .pzh-transition-colors{
   transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
@@ -1517,6 +1560,11 @@ h6,
   --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{
+  --tw-border-opacity: 1;
+  border-color: rgb(209 31 61 / var(--tw-border-opacity));
+}
+
 .pzh-form-radio:checked + span:before, .pzh-form-radio:not(:checked) + span:before{
   position: absolute;
   left: 0px;
@@ -1623,10 +1671,6 @@ h6,
   color: rgb(74 85 104 / var(--tw-text-opacity));
 }
 
-.svg-inline--fa:not(.form-field-label):not(.text-sm):not(.text-base):not(.text-lg):not(.text-2xl):not(.text-3xl):not(.text-4xl):not(.text-5xl):not(.text-6xl) {
-  font-size: 14px;
-}
-
 .form-field-description{
   margin-bottom: 0.5rem;
   font-size: 0.875rem;
@@ -1634,10 +1678,6 @@ h6,
   color: rgb(74 85 104 / var(--tw-text-opacity));
 }
 
-.svg-inline--fa:not(.text-xs):not(.form-field-description):not(.text-base):not(.text-lg):not(.text-2xl):not(.text-3xl):not(.text-4xl):not(.text-5xl):not(.text-6xl) {
-  font-size: 14px;
-}
-
 /*
  * React Datepicker
  */

package/src/tailwind.src.css

@@ -49,10 +49,6 @@ h6,
     font-weight: 700;
 }
 
-.svg-inline--fa:not(.text-xs):not(.text-sm):not(.text-base):not(.text-lg):not(.text-2xl):not(.text-3xl):not(.text-4xl):not(.text-5xl):not(.text-6xl) {
-    font-size: 14px;
-}
-
 .pzh-transition-colors {
     @apply transition-colors duration-200 ease-in;
 }
@@ -69,6 +65,13 @@ h6,
     @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;
 }
 
+.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 {
+    @apply border-pzh-red;
+}
+
 .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;