@pzh-ui/css 0.0.72 → 0.0.73

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@pzh-ui/css",
-    "version": "0.0.72",
+    "version": "0.0.73",
     "description": "Contains default styling for projects whitin Provincie Zuid-Holland.",
     "license": "ISC",
     "publishConfig": {
@@ -21,7 +21,7 @@
         "react-datepicker": "^4.7.0",
         "react-toastify": "^9.1.2"
     },
-    "gitHead": "3b4fa9fa4c4a2f44e9ae19afb41a701b7eb9ab2f",
+    "gitHead": "fb0ef4cadbb900cdce75da185bf203beeac47997",
     "devDependencies": {
         "tailwindcss": "^3.3.2"
     }

package/src/tailwind.css

@@ -1576,6 +1576,34 @@ select {
   }
 }
 
+table {
+  font-size: 1.25rem !important;
+  line-height: 1.875rem !important;
+}
+
+table, table td, table th {
+  border-width: 1px;
+  --tw-border-opacity: 1;
+  border-color: rgb(92 92 92 / var(--tw-border-opacity));
+}
+
+table tr th {
+  --tw-bg-opacity: 1;
+  background-color: rgb(248 248 248 / var(--tw-bg-opacity));
+  font-weight: 700;
+  font-family: 'Karbon Medium', sans-serif;
+}
+
+table tr {
+  border-bottom-width: 1px;
+  --tw-border-opacity: 1;
+  border-color: rgb(92 92 92 / var(--tw-border-opacity));
+}
+
+table td, table th {
+  padding: 0.5rem;
+}
+
 .sr-only {
   position: absolute;
   width: 1px;
@@ -2009,6 +2037,18 @@ select {
   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));
 }
 
+.scale-100 {
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  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));
+}
+
+.scale-90 {
+  --tw-scale-x: .9;
+  --tw-scale-y: .9;
+  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));
+}
+
 .transform {
   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));
 }
@@ -2622,6 +2662,11 @@ select {
   color: rgb(191 191 191 / var(--tw-text-opacity));
 }
 
+.text-pzh-gray-500 {
+  --tw-text-opacity: 1;
+  color: rgb(131 131 131 / var(--tw-text-opacity));
+}
+
 .text-pzh-gray-600 {
   --tw-text-opacity: 1;
   color: rgb(92 92 92 / var(--tw-text-opacity));
@@ -2763,6 +2808,12 @@ select {
   transition-duration: 150ms;
 }
 
+.transition-\[transform\2c opacity\] {
+  transition-property: transform,opacity;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
 .transition-all {
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -2775,6 +2826,10 @@ select {
   transition-duration: 150ms;
 }
 
+.duration-100 {
+  transition-duration: 100ms;
+}
+
 .duration-150 {
   transition-duration: 150ms;
 }

package/src/tailwind.src.css

@@ -267,4 +267,24 @@ ol li ol li ol li {
             opacity: 1;
         }
     }
+
+    table {
+        @apply !text-m;
+    }
+
+    table, table td, table th {
+        @apply border border-pzh-gray-600;
+    }
+
+    table tr th {
+        @apply bg-pzh-gray-100 font-bold;
+    }
+
+    table tr {
+        @apply border-b border-pzh-gray-600;
+    }
+
+    table td, table th {
+        @apply p-2;
+    }
 }