@pzh-ui/css 0.0.29 → 0.0.32

package/README.md

@@ -1,3 +1,21 @@
 # `css`
 
 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`
+
+After installing the dependency, you can start using the styles as follows:
+
+```jsx
+// tailwind.config.js
+module.exports = {
+    presets: [require('@pzh-ui/css/config')],
+    content: [
+        './src/**/*.{js,jsx,ts,tsx}',
+        './node_modules/@pzh-ui/components/dist/**/*.{js,jsx,ts,tsx}',
+        './public/index.html',
+    ],
+}
+```

package/package.json

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

package/src/tailwind.css

@@ -805,8 +805,8 @@ select{
   margin-left: 1rem;
 }
 
-.mt-2{
-  margin-top: 0.5rem;
+.mt-1{
+  margin-top: 0.25rem;
 }
 
 .-mt-8{
@@ -825,6 +825,10 @@ select{
   margin-bottom: 0.5rem;
 }
 
+.mt-2{
+  margin-top: 0.5rem;
+}
+
 .ml-1{
   margin-left: 0.25rem;
 }
@@ -1018,6 +1022,11 @@ select{
   border-color: rgb(22 17 59 / var(--tw-border-opacity));
 }
 
+.border-pzh-red{
+  --tw-border-opacity: 1;
+  border-color: rgb(209 31 61 / var(--tw-border-opacity));
+}
+
 .border-opacity-35{
   --tw-border-opacity: 0.35;
 }
@@ -1026,6 +1035,10 @@ select{
   --tw-border-opacity: 0.1;
 }
 
+.border-opacity-100{
+  --tw-border-opacity: 1;
+}
+
 .bg-pzh-blue{
   --tw-bg-opacity: 1;
   background-color: rgb(40 31 107 / var(--tw-bg-opacity));
@@ -1046,6 +1059,11 @@ select{
   background-color: rgb(0 128 77 / var(--tw-bg-opacity));
 }
 
+.bg-white{
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+}
+
 .bg-pzh-cool-gray-light{
   --tw-bg-opacity: 1;
   background-color: rgb(191 191 191 / var(--tw-bg-opacity));
@@ -1056,11 +1074,6 @@ select{
   background-color: rgb(92 92 92 / var(--tw-bg-opacity));
 }
 
-.bg-white{
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
-}
-
 .bg-pzh-blue-light{
   --tw-bg-opacity: 1;
   background-color: rgb(123 173 222 / var(--tw-bg-opacity));
@@ -1342,15 +1355,22 @@ select{
   opacity: 0.5;
 }
 
+.shadow-md{
+  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .shadow-xl{
   --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-.drop-shadow{
-  --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
-  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);
+.shadow-none{
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
 .filter{
@@ -1547,6 +1567,11 @@ h6,
   --tw-text-opacity: 0.55;
 }
 
+.pzh-form-error, .pzh-form-checkbox.pzh-form-error + span:before, .pzh-form-radio:checked.pzh-form-error + span:before, .pzh-form-radio:not(:checked).pzh-form-error + span:before{
+  --tw-border-opacity: 1;
+  border-color: rgb(209 31 61 / var(--tw-border-opacity));
+}
+
 .pzh-form-radio:checked + span:before, .pzh-form-radio:not(:checked) + span:before{
   position: absolute;
   left: 0px;
@@ -1763,6 +1788,84 @@ h6,
   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 .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;
+}
+
 .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));
@@ -1830,6 +1933,12 @@ h6,
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.focus\:shadow-none:focus{
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .focus\:outline-none:focus{
   outline: 2px solid transparent;
   outline-offset: 2px;

package/src/tailwind.src.css

@@ -65,6 +65,13 @@ h6,
     @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;
 }
 
+.pzh-form-error,
+.pzh-form-checkbox.pzh-form-error + span:before,
+.pzh-form-radio:checked.pzh-form-error + span:before,
+.pzh-form-radio:not(:checked).pzh-form-error + span:before {
+    @apply border-pzh-red;
+}
+
 .pzh-form-radio:checked + span:before,
 .pzh-form-radio:not(:checked) + span:before {
     @apply absolute left-0 top-0 w-[24px] h-[24px] border-pzh-blue-dark border border-opacity-35 bg-pzh-form rounded-full;
@@ -194,3 +201,81 @@ h6,
 .react-datepicker__navigation-icon {
     @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 .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;
+}