@pzh-ui/css 0.0.14 → 0.0.17

package/config/index.js

@@ -39,6 +39,7 @@ module.exports = {
             '6xl': '4rem',
         },
         colors: {
+            black: '#000000',
             white: '#FFF',
             'pzh-form': '#F4F4F7',
             gray: {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@pzh-ui/css",
-    "version": "0.0.14",
+    "version": "0.0.17",
     "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": "700912b564406368f0e712b8a3fd25e968af82fa",
+    "gitHead": "8dc2a9aa4ea3a425ac7d0b2f384570032f6af27b",
     "devDependencies": {
         "tailwindcss": "^3.0.23"
     }

package/src/tailwind.css

@@ -739,18 +739,14 @@ select{
   left: -9999px;
 }
 
-.top-\[9px\]{
-  top: 9px;
+.right-\[14px\]{
+  right: 14px;
 }
 
 .top-\[14px\]{
   top: 14px;
 }
 
-.right-\[14px\]{
-  right: 14px;
-}
-
 .z-10{
   z-index: 10;
 }
@@ -812,12 +808,12 @@ select{
   margin-bottom: 0.5rem;
 }
 
-.ml-1{
-  margin-left: 0.25rem;
+.mt-2{
+  margin-top: 0.5rem;
 }
 
-.mt-\[9px\]{
-  margin-top: 9px;
+.ml-1{
+  margin-left: 0.25rem;
 }
 
 .block{
@@ -876,10 +872,6 @@ select{
   width: 1rem;
 }
 
-.w-\[48px\]{
-  width: 48px;
-}
-
 .max-w-screen-xl{
   max-width: 1280px;
 }
@@ -888,6 +880,10 @@ select{
   max-width: 72rem;
 }
 
+.max-w-\[2rem\]{
+  max-width: 2rem;
+}
+
 .translate-y-2{
   --tw-translate-y: 0.5rem;
   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));
@@ -923,6 +919,10 @@ select{
   justify-content: center;
 }
 
+.justify-between{
+  justify-content: space-between;
+}
+
 .overflow-hidden{
   overflow: hidden;
 }
@@ -947,6 +947,10 @@ select{
   border-radius: 0.375rem;
 }
 
+.rounded-\[4px\]{
+  border-radius: 4px;
+}
+
 .rounded-t-md{
   border-top-left-radius: 0.375rem;
   border-top-right-radius: 0.375rem;
@@ -956,6 +960,10 @@ select{
   border-width: 1px;
 }
 
+.border-dashed{
+  border-style: dashed;
+}
+
 .border-pzh-blue-dark{
   --tw-border-opacity: 1;
   border-color: rgb(22 17 59 / var(--tw-border-opacity));
@@ -1054,6 +1062,11 @@ select{
   padding-right: 1.5rem;
 }
 
+.py-6{
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
+}
+
 .py-1{
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
@@ -1155,10 +1168,18 @@ select{
   font-size: 1rem;
 }
 
+.text-\[16px\]{
+  font-size: 16px;
+}
+
 .text-\[0\.8rem\]{
   font-size: 0.8rem;
 }
 
+.italic{
+  font-style: italic;
+}
+
 .leading-normal{
   line-height: 1.5;
 }
@@ -1190,6 +1211,11 @@ select{
   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));
+}
+
 .text-pzh-red{
   --tw-text-opacity: 1;
   color: rgb(209 31 61 / var(--tw-text-opacity));
@@ -1199,10 +1225,19 @@ select{
   --tw-text-opacity: 0.35;
 }
 
+.text-opacity-50{
+  --tw-text-opacity: 0.5;
+}
+
 .text-opacity-55{
   --tw-text-opacity: 0.55;
 }
 
+.underline{
+  -webkit-text-decoration-line: underline;
+          text-decoration-line: underline;
+}
+
 .opacity-0{
   opacity: 0;
 }
@@ -1325,6 +1360,10 @@ h6,
   font-weight: 700;
 }
 
+/*
+ * Form elements
+ */
+
 .pzh-button{
   display: inline-block;
   border-radius: 0.25rem;
@@ -1503,6 +1542,10 @@ 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>");
 }
 
+/*
+ * React Datepicker
+ */
+
 .react-datepicker {
   font-family: 'Karbon Regular', sans-serif;
   font-weight: 400;
@@ -1570,19 +1613,38 @@ h6,
   border-radius: 9999px;
 }
 
-.react-datepicker__day--today, .react-datepicker__day--keyboard-selected{
+.react-datepicker__day--today, .react-datepicker__day--today:hover, .react-datepicker__day--keyboard-selected{
   background-color: rgb(22 17 59 / var(--tw-bg-opacity));
   --tw-bg-opacity: 0.1;
   --tw-text-opacity: 1;
   color: rgb(22 17 59 / var(--tw-text-opacity));
 }
 
+.react-datepicker__day--keyboard-selected:hover{
+  background-color: rgb(22 17 59 / var(--tw-bg-opacity));
+  --tw-bg-opacity: 0.1;
+}
+
 .react-datepicker__day--selected, .react-datepicker__day--selected:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(0 128 77 / var(--tw-bg-opacity));
   font-weight: 700;
 }
 
+.react-datepicker__year-read-view--down-arrow, .react-datepicker__month-read-view--down-arrow, .react-datepicker__month-year-read-view--down-arrow, .react-datepicker__navigation-icon::before{
+  height: 7px;
+  width: 7px;
+  border-width: 0px;
+  border-top-width: 1px;
+  border-right-width: 1px;
+  --tw-border-opacity: 1;
+  border-color: rgb(0 0 0 / var(--tw-border-opacity));
+}
+
+.react-datepicker__navigation-icon{
+  line-height: 14px;
+}
+
 .hover\:translate-y-0:hover{
   --tw-translate-y: 0px;
   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));

package/src/tailwind.src.css

@@ -49,6 +49,10 @@ h6,
     font-weight: 700;
 }
 
+/*
+ * Form elements
+ */
+
 .pzh-button {
     @apply inline-block transition duration-200 ease-in rounded focus:outline-none focus:ring font-bold leading-none disabled:bg-pzh-gray disabled:text-pzh-blue-dark disabled:text-opacity-35 disabled:cursor-not-allowed;
 }
@@ -101,6 +105,10 @@ 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>");
 }
 
+/*
+ * React Datepicker
+ */
+
 .react-datepicker {
     font-family: 'Karbon Regular', sans-serif;
     font-weight: 400;
@@ -150,11 +158,27 @@ h6,
 }
 
 .react-datepicker__day--today,
+.react-datepicker__day--today:hover,
 .react-datepicker__day--keyboard-selected {
     @apply bg-pzh-blue-dark bg-opacity-10 text-pzh-blue-dark;
 }
 
+.react-datepicker__day--keyboard-selected:hover {
+    @apply bg-pzh-blue-dark bg-opacity-10;
+}
+
 .react-datepicker__day--selected,
 .react-datepicker__day--selected:hover {
     @apply bg-pzh-green bold;
 }
+
+.react-datepicker__year-read-view--down-arrow,
+.react-datepicker__month-read-view--down-arrow,
+.react-datepicker__month-year-read-view--down-arrow,
+.react-datepicker__navigation-icon::before {
+    @apply w-[7px] h-[7px] border border-black border-0 border-t-[1px] border-r-[1px];
+}
+
+.react-datepicker__navigation-icon {
+    @apply leading-[14px];
+}