@pzh-ui/css 0.0.24 → 0.0.27

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@pzh-ui/css",
-    "version": "0.0.24",
+    "version": "0.0.27",
     "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": "697f01855f6323928ac54abc11d6eeb3ff114e84",
+    "gitHead": "052db6dfc67cdd9688b77da00fbbe19ac2c096e0",
     "devDependencies": {
         "tailwindcss": "^3.0.23"
     }

package/src/tailwind.css

@@ -1418,10 +1418,19 @@ h6,
   font-weight: 700;
 }
 
-.svg-inline--fa:not([class*='text-']) {
+.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);
+}
+
 /*
  * Form elements
  */
@@ -1604,6 +1613,31 @@ 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));
+}
+
+.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;
+  --tw-text-opacity: 1;
+  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,14 @@ h6,
     font-weight: 700;
 }
 
-.svg-inline--fa:not([class*='text-']) {
+.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;
+}
+
 /*
  * Form elements
  */
@@ -109,6 +113,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
  */