@pzh-ui/css 0.0.71 → 0.0.73

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@pzh-ui/css",
-    "version": "0.0.71",
+    "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": "a335068588e469ce0060f006d887215bd9af43a7",
+    "gitHead": "fb0ef4cadbb900cdce75da185bf203beeac47997",
     "devDependencies": {
         "tailwindcss": "^3.3.2"
     }

package/src/tailwind.css

@@ -1443,8 +1443,7 @@ select {
   font-family: 'Karbon Regular', sans-serif;
   font-weight: 400;
   font-size: 0.8rem;
-  box-shadow:
-            0px 18px 60px rgba(0, 0, 0, 0.07),
+  box-shadow: 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);
   border-style: none;
@@ -1577,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;
@@ -1752,6 +1779,10 @@ select {
   margin-bottom: 0.5rem;
 }
 
+.mb-8 {
+  margin-bottom: 2rem;
+}
+
 .mb-\[1000px\] {
   margin-bottom: 1000px;
 }
@@ -1860,10 +1891,6 @@ select {
   height: 1.5rem;
 }
 
-.h-7 {
-  height: 1.75rem;
-}
-
 .h-8 {
   height: 2rem;
 }
@@ -2010,10 +2037,32 @@ 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));
 }
 
+@keyframes pulse {
+  50% {
+    opacity: .5;
+  }
+}
+
+.animate-pulse {
+  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
 @keyframes spin {
   to {
     transform: rotate(360deg);
@@ -2032,6 +2081,12 @@ select {
   cursor: pointer;
 }
 
+.select-none {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+
 .resize-none {
   resize: none;
 }
@@ -2135,6 +2190,11 @@ select {
   border-radius: 0.375rem;
 }
 
+.rounded-t {
+  border-top-left-radius: 0.25rem;
+  border-top-right-radius: 0.25rem;
+}
+
 .rounded-t-md {
   border-top-left-radius: 0.375rem;
   border-top-right-radius: 0.375rem;
@@ -2273,6 +2333,10 @@ select {
   background-color: rgb(213 213 213 / var(--tw-bg-opacity));
 }
 
+.bg-pzh-gray-800\/10 {
+  background-color: rgb(34 34 34 / 0.1);
+}
+
 .bg-pzh-green {
   --tw-bg-opacity: 1;
   background-color: rgb(0 128 77 / var(--tw-bg-opacity));
@@ -2355,16 +2419,6 @@ select {
   padding-bottom: 0px !important;
 }
 
-.px-1 {
-  padding-left: 0.25rem;
-  padding-right: 0.25rem;
-}
-
-.px-1\.5 {
-  padding-left: 0.375rem;
-  padding-right: 0.375rem;
-}
-
 .px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
@@ -2472,6 +2526,10 @@ select {
   padding-top: 15px;
 }
 
+.pt-px {
+  padding-top: 1px;
+}
+
 .text-left {
   text-align: left;
 }
@@ -2604,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));
@@ -2745,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);
@@ -2757,6 +2826,10 @@ select {
   transition-duration: 150ms;
 }
 
+.duration-100 {
+  transition-duration: 100ms;
+}
+
 .duration-150 {
   transition-duration: 150ms;
 }
@@ -2829,6 +2902,22 @@ b {
   font-family: 'Karbon Medium', sans-serif;
 }
 
+ul li ul li {
+  list-style-type: circle;
+}
+
+ul li ul li ul li {
+  list-style-type: square;
+}
+
+ol li ol li {
+  list-style-type: lower-alpha;
+}
+
+ol li ol li ol li {
+  list-style-type: lower-roman;
+}
+
 .font-normal {
   font-family: 'Karbon Regular', sans-serif;
 }
@@ -3001,6 +3090,10 @@ b {
   opacity: 1;
 }
 
+.group:hover .group-hover\:opacity-40 {
+  opacity: 0.4;
+}
+
 .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));

package/src/tailwind.src.css

@@ -44,6 +44,22 @@ b {
     font-family: 'Karbon Medium', sans-serif;
 }
 
+ul li ul li {
+    list-style-type: circle;
+}
+
+ul li ul li ul li {
+    list-style-type: square;
+}
+
+ol li ol li {
+    list-style-type: lower-alpha;
+}
+
+ol li ol li ol li {
+    list-style-type: lower-roman;
+}
+
 .font-normal {
     font-family: 'Karbon Regular', sans-serif;
 }
@@ -143,8 +159,7 @@ b {
         font-family: 'Karbon Regular', sans-serif;
         font-weight: 400;
         font-size: 0.8rem;
-        box-shadow:
-            0px 18px 60px rgba(0, 0, 0, 0.07),
+        box-shadow: 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);
         @apply text-pzh-blue-dark border-none;
@@ -252,4 +267,24 @@ b {
             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;
+    }
 }