@pzh-ui/css 0.0.95 → 0.0.97

package/config/index.js

@@ -180,6 +180,20 @@ module.exports = {
       boxShadow: {
         card: "0px 18px 60px rgba(0, 0, 0, 0.07), 0px 4.02054px 13.4018px rgba(0, 0, 0, 0.0417275), 0px 1.19702px 3.99006px rgba(0, 0, 0, 0.0282725)",
       },
+      keyframes: {
+        "accordion-down": {
+          from: { height: "0" },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: "0" },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+      },
       typography: {
         DEFAULT: {
           css: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pzh-ui/css",
-  "version": "0.0.95",
+  "version": "0.0.97",
   "description": "Contains default styling for projects within Provincie Zuid-Holland.",
   "license": "ISC",
   "publishConfig": {
@@ -21,9 +21,8 @@
     "react-datepicker": "^4.7.0",
     "react-toastify": "^9.1.2"
   },
-  "gitHead": "7e8361c07ed64e45bf99e1badc23c3f88889a526",
+  "gitHead": "e26cfb94f6abbbcc8ccc5bc6852b27fa9100f5d8",
   "devDependencies": {
-    "@types/react-datepicker": "^6.2.0",
     "tailwindcss": "^3.3.2"
   }
 }

package/src/tailwind.css

@@ -1874,10 +1874,6 @@ select {
   display: grid;
 }
 
-.contents {
-  display: contents;
-}
-
 .hidden {
   display: none;
 }
@@ -1934,6 +1930,10 @@ select {
   min-height: 48px;
 }
 
+.min-h-\[calc\(2lh\+2\*10px\)\] {
+  min-height: calc(2lh + 2 * 10px);
+}
+
 .\!w-max {
   width: -moz-max-content !important;
   width: max-content !important;
@@ -2020,6 +2020,14 @@ select {
   max-width: 1280px;
 }
 
+.flex-1 {
+  flex: 1 1 0%;
+}
+
+.shrink-0 {
+  flex-shrink: 0;
+}
+
 .origin-left {
   transform-origin: left;
 }
@@ -2225,6 +2233,11 @@ select {
   border-color: rgb(92 92 92 / var(--tw-border-opacity));
 }
 
+.border-pzh-gray-200 {
+  --tw-border-opacity: 1;
+  border-color: rgb(230 230 230 / var(--tw-border-opacity));
+}
+
 .border-pzh-gray-300 {
   --tw-border-opacity: 1;
   border-color: rgb(213 213 213 / var(--tw-border-opacity));
@@ -2485,6 +2498,10 @@ select {
   padding-bottom: 0.75rem;
 }
 
+.pb-4 {
+  padding-bottom: 1rem;
+}
+
 .pb-\[7px\] {
   padding-bottom: 7px;
 }
@@ -2831,6 +2848,18 @@ select {
   transition-duration: 150ms;
 }
 
+.transition-all {
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.transition-transform {
+  transition-property: transform;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
 .duration-100 {
   transition-duration: 100ms;
 }
@@ -3138,6 +3167,38 @@ ol li ol li ol li {
   opacity: 0.4;
 }
 
+.group:focus .group-focus\:opacity-40 {
+  opacity: 0.4;
+}
+
+@keyframes accordion-up {
+  from {
+    height: var(--radix-accordion-content-height);
+  }
+
+  to {
+    height: 0;
+  }
+}
+
+.data-\[state\=closed\]\:animate-accordion-up[data-state=closed] {
+  animation: accordion-up 0.2s ease-out;
+}
+
+@keyframes accordion-down {
+  from {
+    height: 0;
+  }
+
+  to {
+    height: var(--radix-accordion-content-height);
+  }
+}
+
+.data-\[state\=open\]\:animate-accordion-down[data-state=open] {
+  animation: accordion-down 0.2s ease-out;
+}
+
 .prose-a\:text-pzh-green :is(:where(a):not(:where([class~="not-prose"] *))) {
   --tw-text-opacity: 1;
   color: rgb(0 128 77 / var(--tw-text-opacity));
@@ -3205,3 +3266,8 @@ ol li ol li ol li {
     padding-right: 2rem;
   }
 }
+
+.\[\&\[data-state\=open\]\>svg\]\:rotate-180[data-state=open]>svg {
+  --tw-rotate: 180deg;
+  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));
+}