@pzh-ui/css 0.0.26 → 0.0.29

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.26",
+    "version": "0.0.29",
     "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": "810ab772ef16e8195e7e5811c283efb7d3adf8f6",
+    "gitHead": "d46f0a0c8b2b65664dd3615ec648108bf6ae0e7f",
     "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;
 }
@@ -852,6 +865,14 @@ select{
   height: 36px;
 }
 
+.h-\[96px\]{
+  height: 96px;
+}
+
+.h-px{
+  height: 1px;
+}
+
 .h-4{
   height: 1rem;
 }
@@ -868,6 +889,10 @@ select{
   width: 1.5rem;
 }
 
+.w-\[96px\]{
+  width: 96px;
+}
+
 .w-full{
   width: 100%;
 }
@@ -1021,6 +1046,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 +1248,10 @@ select{
   font-style: italic;
 }
 
+.leading-\[30px\]{
+  line-height: 30px;
+}
+
 .leading-normal{
   line-height: 1.5;
 }
@@ -1418,8 +1452,13 @@ 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;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 200ms;
+  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
 }
 
 /*
@@ -1604,6 +1643,23 @@ h6,
   content: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><path fill='rgba(22, 17, 59, 0.35)' 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>");
 }
 
+.form-field-label{
+  margin-bottom: 0.5rem;
+  display: block;
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.025em;
+  --tw-text-opacity: 1;
+  color: rgb(74 85 104 / var(--tw-text-opacity));
+}
+
+.form-field-description{
+  margin-bottom: 0.5rem;
+  font-size: 0.875rem;
+  --tw-text-opacity: 1;
+  color: rgb(74 85 104 / var(--tw-text-opacity));
+}
+
 /*
  * React Datepicker
  */

package/src/tailwind.src.css

@@ -49,8 +49,8 @@ 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;
 }
 
 /*
@@ -109,6 +109,14 @@ h6,
     content: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><path fill='rgba(22, 17, 59, 0.35)' 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>");
 }
 
+.form-field-label {
+    @apply block mb-2 text-xs tracking-wide text-gray-700 uppercase;
+}
+
+.form-field-description {
+    @apply mb-2 text-sm text-gray-700;
+}
+
 /*
  * React Datepicker
  */