@pzh-ui/css 0.0.30 → 0.0.33

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.
+
+`yarn add @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.30",
+    "version": "0.0.33",
     "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": "4df5b747cd27baa9e90c143942a7ff01b8a96962",
+    "gitHead": "ec39eb2c9e6e0d3cd0c97d39b41b9e638317026b",
     "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;
 }
@@ -1059,6 +1063,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));
@@ -1069,11 +1078,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));
@@ -1355,15 +1359,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{
@@ -1781,6 +1792,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));
@@ -1848,6 +1937,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

@@ -201,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;
+}