@pzh-ui/css 0.0.14 → 0.0.15

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.15",
     "description": "Contains default styling for projects whitin Provincie Zuid-Holland.",
     "license": "ISC",
     "publishConfig": {
@@ -16,10 +16,9 @@
         "@rollup/plugin-typescript": "^8.3.1",
         "@tailwindcss/custom-forms": "^0.2.1",
         "@tailwindcss/forms": "^0.5.0",
-        "@tailwindcss/line-clamp": "^0.3.1",
-        "react-datepicker": "^4.7.0"
+        "@tailwindcss/line-clamp": "^0.3.1"
     },
-    "gitHead": "700912b564406368f0e712b8a3fd25e968af82fa",
+    "gitHead": "c26e24a3c13c2acb1c3cbcdee431afac3a58b04e",
     "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;
 }
@@ -816,8 +812,16 @@ select{
   margin-left: 0.25rem;
 }
 
-.mt-\[9px\]{
-  margin-top: 9px;
+.mb-6{
+  margin-bottom: 1.5rem;
+}
+
+.mb-4{
+  margin-bottom: 1rem;
+}
+
+.mt-2{
+  margin-top: 0.5rem;
 }
 
 .block{
@@ -876,10 +880,6 @@ select{
   width: 1rem;
 }
 
-.w-\[48px\]{
-  width: 48px;
-}
-
 .max-w-screen-xl{
   max-width: 1280px;
 }
@@ -923,6 +923,10 @@ select{
   justify-content: center;
 }
 
+.justify-between{
+  justify-content: space-between;
+}
+
 .overflow-hidden{
   overflow: hidden;
 }
@@ -947,6 +951,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 +964,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));
@@ -1059,6 +1071,11 @@ select{
   padding-bottom: 0.25rem;
 }
 
+.py-6{
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
+}
+
 .pr-16{
   padding-right: 4rem;
 }
@@ -1159,6 +1176,14 @@ select{
   font-size: 0.8rem;
 }
 
+.text-\[16px\]{
+  font-size: 16px;
+}
+
+.italic{
+  font-style: italic;
+}
+
 .leading-normal{
   line-height: 1.5;
 }
@@ -1195,6 +1220,11 @@ select{
   color: rgb(209 31 61 / var(--tw-text-opacity));
 }
 
+.text-pzh-green{
+  --tw-text-opacity: 1;
+  color: rgb(0 128 77 / var(--tw-text-opacity));
+}
+
 .text-opacity-35{
   --tw-text-opacity: 0.35;
 }
@@ -1203,6 +1233,15 @@ select{
   --tw-text-opacity: 0.55;
 }
 
+.text-opacity-50{
+  --tw-text-opacity: 0.5;
+}
+
+.underline{
+  -webkit-text-decoration-line: underline;
+          text-decoration-line: underline;
+}
+
 .opacity-0{
   opacity: 0;
 }
@@ -1325,6 +1364,10 @@ h6,
   font-weight: 700;
 }
 
+/*
+ * Form elements
+ */
+
 .pzh-button{
   display: inline-block;
   border-radius: 0.25rem;
@@ -1503,6 +1546,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,7 +1617,7 @@ 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;
@@ -1583,6 +1630,20 @@ h6,
   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,6 +158,7 @@ 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;
 }
@@ -158,3 +167,14 @@ h6,
 .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];
+}