@pzh-ui/css 0.0.32 → 0.0.35

package/README.md

@@ -4,7 +4,7 @@ This package contains default styling for projects whitin Provincie Zuid-Holland
 
 We use the [Tailwind framework](https://tailwindcss.com/) to style the components. In order to apply the correct styles, install [@pzh-ui/css](https://www.npmjs.com/package/@pzh-ui/css) in your project.
 
-`npm install @pzh-ui/css`
+`yarn add @pzh-ui/css`
 
 After installing the dependency, you can start using the styles as follows:
 

package/config/index.js

@@ -197,6 +197,7 @@ module.exports = {
             },
             'pzh-gray': {
                 DEFAULT: '#EBEBEB',
+                light: '#F5F5F5',
             },
             'pzh-cool-gray': {
                 DEFAULT: '#838383',

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@pzh-ui/css",
-    "version": "0.0.32",
+    "version": "0.0.35",
     "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": "8476a78be987b3555e12a6835c0d6562a949da50",
+    "gitHead": "9776a99c5f9dd48d56c9fed1ce7fa52290ac39ac",
     "devDependencies": {
         "tailwindcss": "^3.0.23"
     }

package/src/tailwind.css

@@ -755,6 +755,10 @@ select{
   top: 14px;
 }
 
+.right-3{
+  right: 0.75rem;
+}
+
 .z-10{
   z-index: 10;
 }
@@ -781,14 +785,14 @@ select{
   margin-right: 0.5rem;
 }
 
-.ml-2{
-  margin-left: 0.5rem;
-}
-
 .-mt-\[2px\]{
   margin-top: -2px;
 }
 
+.ml-2{
+  margin-left: 0.5rem;
+}
+
 .-mt-0\.5{
   margin-top: -0.125rem;
 }
@@ -845,6 +849,10 @@ select{
   display: flex;
 }
 
+.table{
+  display: table;
+}
+
 .contents{
   display: contents;
 }
@@ -881,6 +889,10 @@ select{
   height: 1rem;
 }
 
+.h-8{
+  height: 2rem;
+}
+
 .min-h-screen{
   min-height: 100vh;
 }
@@ -940,6 +952,10 @@ select{
   cursor: pointer;
 }
 
+.resize-none{
+  resize: none;
+}
+
 .items-start{
   align-items: flex-start;
 }
@@ -980,6 +996,10 @@ select{
   border-radius: 0.375rem;
 }
 
+.rounded-full{
+  border-radius: 9999px;
+}
+
 .rounded-\[4px\]{
   border-radius: 4px;
 }
@@ -993,6 +1013,10 @@ select{
   border-width: 1px;
 }
 
+.border-b{
+  border-bottom-width: 1px;
+}
+
 .border-dashed{
   border-style: dashed;
 }
@@ -1281,6 +1305,11 @@ select{
   line-height: 1;
 }
 
+.text-pzh-blue-dark{
+  --tw-text-opacity: 1;
+  color: rgb(22 17 59 / var(--tw-text-opacity));
+}
+
 .text-pzh-badge-green{
   --tw-text-opacity: 1;
   color: rgb(80 166 88 / var(--tw-text-opacity));
@@ -1316,11 +1345,6 @@ select{
   color: rgb(209 31 61 / var(--tw-text-opacity));
 }
 
-.text-pzh-blue-dark{
-  --tw-text-opacity: 1;
-  color: rgb(22 17 59 / var(--tw-text-opacity));
-}
-
 .text-pzh-green{
   --tw-text-opacity: 1;
   color: rgb(0 128 77 / var(--tw-text-opacity));
@@ -1525,9 +1549,9 @@ h6,
   border-width: 1px;
   border-color: rgb(22 17 59 / var(--tw-border-opacity));
   --tw-border-opacity: 0.35;
-  padding-top: 15px;
-  padding-bottom: 11px;
-  line-height: 1;
+  padding-top: 10px;
+  padding-bottom: 6px;
+  line-height: 30px;
   --tw-text-opacity: 1;
   color: rgb(22 17 59 / var(--tw-text-opacity));
 }
@@ -1899,6 +1923,11 @@ h6,
   background-color: rgb(0 77 46 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-pzh-gray-light:hover{
+  --tw-bg-opacity: 1;
+  background-color: rgb(245 245 245 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-opacity-10:hover{
   --tw-bg-opacity: 0.1;
 }
@@ -2054,6 +2083,14 @@ h6,
     margin-left: 1rem;
   }
 
+  .md\:flex{
+    display: flex;
+  }
+
+  .md\:hidden{
+    display: none;
+  }
+
   .md\:p-4{
     padding: 1rem;
   }

package/src/tailwind.src.css

@@ -62,7 +62,7 @@ h6,
 }
 
 .pzh-form-input {
-    @apply block w-full pt-[15px] pb-[11px] placeholder-pzh-blue-dark placeholder-opacity-55 text-pzh-blue-dark border border-pzh-blue-dark border-opacity-35 rounded appearance-none leading-none focus:outline-none hover:border-gray-500 focus:border-pzh-blue-light disabled:border-pzh-blue-dark disabled:border-opacity-10 disabled:bg-pzh-gray disabled:text-opacity-55;
+    @apply block w-full pt-[10px] pb-[6px] leading-[30px] placeholder-pzh-blue-dark placeholder-opacity-55 text-pzh-blue-dark border border-pzh-blue-dark border-opacity-35 rounded appearance-none focus:outline-none hover:border-gray-500 focus:border-pzh-blue-light disabled:border-pzh-blue-dark disabled:border-opacity-10 disabled:bg-pzh-gray disabled:text-opacity-55;
 }
 
 .pzh-form-error,