@pzh-ui/css 0.0.31 → 0.0.34

package/README.md

@@ -4,7 +4,7 @@ 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`
+`yarn add @pzh-ui/css`
 
 After installing the dependency, you can start using the styles as follows:
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@pzh-ui/css",
-    "version": "0.0.31",
+    "version": "0.0.34",
     "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": "7ad20a4be9e43b9ff5af00763b51aef9fc002ddc",
+    "gitHead": "9306f80e6b95736d6ff4655fd840481548d4b865",
     "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;
 }
@@ -940,6 +944,10 @@ select{
   cursor: pointer;
 }
 
+.resize-none{
+  resize: none;
+}
+
 .items-start{
   align-items: flex-start;
 }
@@ -1059,6 +1067,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 +1082,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 +1363,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{
@@ -1518,9 +1533,9 @@ h6,
   border-width: 1px;
   border-color: rgb(22 17 59 / var(--tw-border-opacity));
   --tw-border-opacity: 0.35;
-  padding-top: 15px;
-  padding-bottom: 11px;
-  line-height: 1;
+  padding-top: 10px;
+  padding-bottom: 6px;
+  line-height: 30px;
   --tw-text-opacity: 1;
   color: rgb(22 17 59 / var(--tw-text-opacity));
 }
@@ -1781,6 +1796,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 +1941,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

@@ -62,7 +62,7 @@ h6,
 }
 
 .pzh-form-input {
-    @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;
+    @apply block w-full pt-[10px] pb-[6px] leading-[30px] placeholder-pzh-blue-dark placeholder-opacity-55 text-pzh-blue-dark border border-pzh-blue-dark border-opacity-35 rounded appearance-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,
@@ -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;
+}