@pzh-ui/css 0.0.58 → 0.0.60

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@pzh-ui/css",
-    "version": "0.0.58",
+    "version": "0.0.60",
     "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": "4455bde77beb2a0a6d664a090de2b798c3eaed8c",
+    "gitHead": "56c26efa41e63e7e8dcac7653c9dcd1b9149097e",
     "devDependencies": {
         "tailwindcss": "^3.0.23"
     }

package/src/tailwind.css

@@ -1304,8 +1304,8 @@ select {
   margin-top: -2px;
 }
 
-.ml-2 {
-  margin-left: 0.5rem;
+.mr-\[8px\] {
+  margin-right: 8px;
 }
 
 .-mt-0\.5 {
@@ -1316,10 +1316,6 @@ select {
   margin-top: -0px;
 }
 
-.mr-\[8px\] {
-  margin-right: 8px;
-}
-
 .ml-4 {
   margin-left: 1rem;
 }
@@ -1332,6 +1328,10 @@ select {
   margin-top: 0.25rem;
 }
 
+.ml-2 {
+  margin-left: 0.5rem;
+}
+
 .mt-\[1px\] {
   margin-top: 1px;
 }
@@ -1352,10 +1352,18 @@ select {
   margin-bottom: -2px;
 }
 
+.mt-4 {
+  margin-top: 1rem;
+}
+
 .mt-3 {
   margin-top: 0.75rem;
 }
 
+.-mt-\[4px\] {
+  margin-top: -4px;
+}
+
 .mb-2 {
   margin-bottom: 0.5rem;
 }
@@ -1444,6 +1452,10 @@ select {
   height: 2rem;
 }
 
+.h-\[4px\] {
+  height: 4px;
+}
+
 .h-\[8px\] {
   height: 8px;
 }
@@ -1476,8 +1488,10 @@ select {
   width: 1rem;
 }
 
-.w-\[320px\] {
-  width: 320px;
+.\!w-max {
+  width: -webkit-max-content !important;
+  width: -moz-max-content !important;
+  width: max-content !important;
 }
 
 .w-\[8px\] {
@@ -1488,6 +1502,10 @@ select {
   width: 1.75rem;
 }
 
+.min-w-\[320px\] {
+  min-width: 320px;
+}
+
 .max-w-screen-xl {
   max-width: 1280px;
 }
@@ -1496,6 +1514,10 @@ select {
   max-width: 72rem;
 }
 
+.max-w-\[400px\] {
+  max-width: 400px;
+}
+
 .max-w-\[300px\] {
   max-width: 300px;
 }
@@ -1508,6 +1530,10 @@ select {
   max-width: 100%;
 }
 
+.origin-left {
+  transform-origin: left;
+}
+
 .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));
@@ -1687,6 +1713,11 @@ select {
   border-color: rgb(80 61 144 / var(--tw-border-opacity));
 }
 
+.border-pzh-white {
+  --tw-border-opacity: 1;
+  border-color: rgb(255 255 255 / var(--tw-border-opacity));
+}
+
 .border-pzh-gray-600 {
   --tw-border-opacity: 1;
   border-color: rgb(138 136 157 / var(--tw-border-opacity));
@@ -1702,6 +1733,11 @@ select {
   border-color: rgb(173 172 186 / var(--tw-border-opacity));
 }
 
+.border-pzh-blue {
+  --tw-border-opacity: 1;
+  border-color: rgb(40 31 107 / var(--tw-border-opacity));
+}
+
 .border-opacity-35 {
   --tw-border-opacity: 0.35;
 }
@@ -1746,9 +1782,14 @@ select {
   background-color: rgb(123 173 222 / var(--tw-bg-opacity));
 }
 
-.bg-black {
+.bg-pzh-orange {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 107 2 / var(--tw-bg-opacity));
+}
+
+.bg-\[\#333333\] {
   --tw-bg-opacity: 1;
-  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+  background-color: rgb(51 51 51 / var(--tw-bg-opacity));
 }
 
 .bg-pzh-gray-100 {
@@ -1769,10 +1810,6 @@ select {
   --tw-bg-opacity: 0.2;
 }
 
-.bg-opacity-80 {
-  --tw-bg-opacity: 0.8;
-}
-
 .p-1 {
   padding: 0.25rem;
 }
@@ -1785,6 +1822,10 @@ select {
   padding: 0.5rem;
 }
 
+.p-3 {
+  padding: 0.75rem;
+}
+
 .p-4 {
   padding: 1rem;
 }
@@ -1907,6 +1948,10 @@ select {
   padding-bottom: 0.25rem;
 }
 
+.pr-2 {
+  padding-right: 0.5rem;
+}
+
 .pl-\[34px\] {
   padding-left: 34px;
 }
@@ -1931,6 +1976,10 @@ select {
   font-size: 0.875rem;
 }
 
+.text-\[18px\] {
+  font-size: 18px;
+}
+
 .text-xs {
   font-size: 0.75rem;
 }
@@ -1967,6 +2016,10 @@ select {
   line-height: 1.5;
 }
 
+.leading-none {
+  line-height: 1;
+}
+
 .leading-5 {
   line-height: 1.25rem;
 }
@@ -1979,10 +2032,6 @@ select {
   line-height: 1.5rem;
 }
 
-.leading-none {
-  line-height: 1;
-}
-
 .text-pzh-blue-dark {
   --tw-text-opacity: 1;
   color: rgb(22 17 59 / var(--tw-text-opacity));
@@ -2023,6 +2072,11 @@ select {
   color: rgb(80 61 144 / var(--tw-text-opacity));
 }
 
+.text-pzh-white {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
 .text-white {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
@@ -2033,6 +2087,16 @@ select {
   color: rgb(40 31 107 / var(--tw-text-opacity));
 }
 
+.text-pzh-blue-light {
+  --tw-text-opacity: 1;
+  color: rgb(123 173 222 / var(--tw-text-opacity));
+}
+
+.text-pzh-orange {
+  --tw-text-opacity: 1;
+  color: rgb(255 107 2 / var(--tw-text-opacity));
+}
+
 .text-pzh-gray-600 {
   --tw-text-opacity: 1;
   color: rgb(138 136 157 / var(--tw-text-opacity));
@@ -2051,6 +2115,10 @@ select {
   text-decoration-thickness: 1px;
 }
 
+.underline-offset-2 {
+  text-underline-offset: 2px;
+}
+
 .opacity-0 {
   opacity: 0;
 }
@@ -2086,6 +2154,23 @@ select {
   outline-offset: 2px;
 }
 
+.ring {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+.ring-2 {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+.ring-pzh-blue {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(40 31 107 / var(--tw-ring-opacity));
+}
+
 .blur {
   --tw-blur: blur(8px);
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
@@ -2209,6 +2294,7 @@ b {
   display: inline-block;
   border-radius: 0.25rem;
   line-height: 1;
+  --tw-ring-offset-width: 2px;
   transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
@@ -2223,6 +2309,8 @@ b {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(22 17 59 / var(--tw-ring-opacity));
 }
 
 .pzh-button:disabled {
@@ -2267,14 +2355,20 @@ b {
 
 .pzh-form-input:hover {
   --tw-border-opacity: 1;
-  border-color: rgb(22 17 59 / var(--tw-border-opacity));
+  border-color: rgb(40 31 107 / var(--tw-border-opacity));
 }
 
 .pzh-form-input:focus {
   --tw-border-opacity: 1;
-  border-color: rgb(123 173 222 / var(--tw-border-opacity));
+  border-color: rgb(40 31 107 / var(--tw-border-opacity));
   outline: 2px solid transparent;
   outline-offset: 2px;
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(40 31 107 / var(--tw-ring-opacity));
 }
 
 .pzh-form-input:disabled {
@@ -2383,6 +2477,19 @@ b {
   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>");
 }
 
+.pzh-form-radio:focus + span:before, .pzh-form-checkbox:focus + span:before {
+  --tw-border-opacity: 1;
+  border-color: rgb(40 31 107 / var(--tw-border-opacity));
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(40 31 107 / var(--tw-ring-opacity));
+}
+
 .form-field-label {
   margin-bottom: 0.5rem;
   display: block;
@@ -2503,106 +2610,6 @@ b {
   line-height: 14px;
 }
 
-/*
- * React Quill
- */
-
-.quill .ql-toolbar.ql-snow {
-  padding: 0px;
-  border-top-left-radius: 0.25rem;
-  border-top-right-radius: 0.25rem;
-  background: white;
-  border-color: rgba(203, 213, 224, 1);
-}
-
-.quill .ql-toolbar.ql-snow button {
-  height: 2rem;
-  width: 2rem;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 0.5rem;
-}
-
-.quill .ql-toolbar.ql-snow button svg path,
-.quill .ql-toolbar.ql-snow button svg line,
-.quill .ql-toolbar.ql-snow button:hover svg path,
-.quill .ql-toolbar.ql-snow button:hover svg line {
-  stroke: #16113b;
-}
-
-.quill .ql-toolbar.ql-snow button.ql-active svg path,
-.quill .ql-toolbar.ql-snow button.ql-active svg line {
-  stroke: #00804d;
-}
-
-.quill .ql-toolbar.ql-snow,
-.quill .ql-toolbar.ql-snow .ql-formats {
-  display: flex;
-}
-
-.quill .ql-toolbar.ql-snow {
-  padding: 0 5px;
-}
-
-.quill .ql-toolbar.ql-snow .ql-formats {
-  margin: 0;
-  border-right: 1px solid rgba(203, 213, 224, 1);
-}
-
-.quill .ql-container {
-  padding-bottom: 0.25rem;
-  border-bottom-left-radius: 0.25rem;
-  border-bottom-right-radius: 0.25rem;
-  background: white;
-  border-color: rgba(203, 213, 224, 1);
-  font-family: 'Karbon Regular', sans-serif;
-  font-weight: 400;
-  font-size: 20px;
-}
-
-.quill .editor.ql-container.ql-snow .ql-editor {
-  color: #4a5568;
-  line-height: 1.25;
-  font-size: 1rem;
-}
-
-.quill .ql-container .ql-editor p,
-.quill .ql-container .ql-editor ul {
-  margin-bottom: 20px;
-}
-
-.quill .ql-container .ql-editor ul {
-  padding-left: 0;
-}
-
-.quill .ql-container .ql-editor strong {
-  font-family: 'Karbon Medium', sans-serif;
-  font-weight: 700;
-}
-
-.quill .ql-container .ql-editor ul li {
-  padding-left: 20px;
-}
-
-.quill .ql-container .ql-editor ul li.ql-indent-1 {
-  padding-left: 40px;
-}
-
-.quill .editor.ql-container.ql-snow .ql-editor h2 {
-  font-size: 1.125rem;
-  margin-top: 10px;
-  margin-bottom: 5px;
-}
-
-.quill .ql-disabled {
-  background: #ebebeb;
-}
-
-.quill .ql-disabled .ql-editor {
-  opacity: 0.55;
-}
-
 .pzh-select-input input {
   box-shadow: none !important;
 }

package/src/tailwind.src.css

@@ -58,11 +58,11 @@ b {
  */
 
 .pzh-button {
-    @apply inline-block transition duration-200 ease-in rounded focus:outline-none focus:ring leading-none disabled:bg-pzh-gray-200 disabled:text-pzh-blue-dark disabled:text-opacity-35 disabled:cursor-not-allowed;
+    @apply inline-block transition duration-200 ease-in rounded focus:outline-none focus:ring focus:ring-pzh-blue-dark ring-offset-2 leading-none disabled:bg-pzh-gray-200 disabled:text-pzh-blue-dark disabled:text-opacity-35 disabled:cursor-not-allowed;
 }
 
 .pzh-form-input {
-    @apply block w-full pt-[10px] pb-[6px] leading-[30px] placeholder-pzh-gray-600 text-pzh-blue-dark border border-pzh-gray-600 rounded appearance-none focus:outline-none hover:border-pzh-blue-dark focus:border-pzh-blue-light disabled:bg-pzh-gray-200;
+    @apply block w-full pt-[10px] pb-[6px] leading-[30px] placeholder-pzh-gray-600 text-pzh-blue-dark border border-pzh-gray-600 rounded appearance-none focus:outline-none hover:border-pzh-blue focus:ring focus:ring-2 focus:ring-pzh-blue focus:outline-none focus:border-pzh-blue disabled:bg-pzh-gray-200;
 }
 
 .pzh-form-error,
@@ -116,6 +116,11 @@ b {
     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>");
 }
 
+.pzh-form-radio:focus + span:before,
+.pzh-form-checkbox:focus + span:before {
+    @apply ring ring-2 ring-pzh-blue outline-none border-pzh-blue;
+}
+
 .form-field-label {
     @apply block mb-2 text-xs tracking-wide text-gray-700 uppercase;
 }
@@ -202,106 +207,6 @@ b {
     @apply leading-[14px];
 }
 
-/*
- * React Quill
- */
-
-.quill .ql-toolbar.ql-snow {
-    padding: 0px;
-    border-top-left-radius: 0.25rem;
-    border-top-right-radius: 0.25rem;
-    background: white;
-    border-color: rgba(203, 213, 224, 1);
-}
-
-.quill .ql-toolbar.ql-snow button {
-    height: 2rem;
-    width: 2rem;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 0.5rem;
-}
-
-.quill .ql-toolbar.ql-snow button svg path,
-.quill .ql-toolbar.ql-snow button svg line,
-.quill .ql-toolbar.ql-snow button:hover svg path,
-.quill .ql-toolbar.ql-snow button:hover svg line {
-    stroke: #16113b;
-}
-
-.quill .ql-toolbar.ql-snow button.ql-active svg path,
-.quill .ql-toolbar.ql-snow button.ql-active svg line {
-    stroke: #00804d;
-}
-
-.quill .ql-toolbar.ql-snow,
-.quill .ql-toolbar.ql-snow .ql-formats {
-    display: flex;
-}
-
-.quill .ql-toolbar.ql-snow {
-    padding: 0 5px;
-}
-
-.quill .ql-toolbar.ql-snow .ql-formats {
-    margin: 0;
-    border-right: 1px solid rgba(203, 213, 224, 1);
-}
-
-.quill .ql-container {
-    padding-bottom: 0.25rem;
-    border-bottom-left-radius: 0.25rem;
-    border-bottom-right-radius: 0.25rem;
-    background: white;
-    border-color: rgba(203, 213, 224, 1);
-    font-family: 'Karbon Regular', sans-serif;
-    font-weight: 400;
-    font-size: 20px;
-}
-
-.quill .editor.ql-container.ql-snow .ql-editor {
-    color: #4a5568;
-    line-height: 1.25;
-    font-size: 1rem;
-}
-
-.quill .ql-container .ql-editor p,
-.quill .ql-container .ql-editor ul {
-    margin-bottom: 20px;
-}
-
-.quill .ql-container .ql-editor ul {
-    padding-left: 0;
-}
-
-.quill .ql-container .ql-editor strong {
-    font-family: 'Karbon Medium', sans-serif;
-    font-weight: 700;
-}
-
-.quill .ql-container .ql-editor ul li {
-    padding-left: 20px;
-}
-
-.quill .ql-container .ql-editor ul li.ql-indent-1 {
-    padding-left: 40px;
-}
-
-.quill .editor.ql-container.ql-snow .ql-editor h2 {
-    font-size: 1.125rem;
-    margin-top: 10px;
-    margin-bottom: 5px;
-}
-
-.quill .ql-disabled {
-    background: #ebebeb;
-}
-
-.quill .ql-disabled .ql-editor {
-    opacity: 0.55;
-}
-
 .pzh-select-input input {
     box-shadow: none !important;
 }