@pzh-ui/css 0.0.31 → 0.0.32

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pzh-ui/css",
3
- "version": "0.0.31",
3
+ "version": "0.0.32",
4
4
  "description": "Contains default styling for projects whitin Provincie Zuid-Holland.",
5
5
  "license": "ISC",
6
6
  "publishConfig": {
@@ -19,7 +19,7 @@
19
19
  "@tailwindcss/line-clamp": "^0.3.1",
20
20
  "react-datepicker": "^4.7.0"
21
21
  },
22
- "gitHead": "7ad20a4be9e43b9ff5af00763b51aef9fc002ddc",
22
+ "gitHead": "8476a78be987b3555e12a6835c0d6562a949da50",
23
23
  "devDependencies": {
24
24
  "tailwindcss": "^3.0.23"
25
25
  }
package/src/tailwind.css CHANGED
@@ -1059,6 +1059,11 @@ select{
1059
1059
  background-color: rgb(0 128 77 / var(--tw-bg-opacity));
1060
1060
  }
1061
1061
 
1062
+ .bg-white{
1063
+ --tw-bg-opacity: 1;
1064
+ background-color: rgb(255 255 255 / var(--tw-bg-opacity));
1065
+ }
1066
+
1062
1067
  .bg-pzh-cool-gray-light{
1063
1068
  --tw-bg-opacity: 1;
1064
1069
  background-color: rgb(191 191 191 / var(--tw-bg-opacity));
@@ -1069,11 +1074,6 @@ select{
1069
1074
  background-color: rgb(92 92 92 / var(--tw-bg-opacity));
1070
1075
  }
1071
1076
 
1072
- .bg-white{
1073
- --tw-bg-opacity: 1;
1074
- background-color: rgb(255 255 255 / var(--tw-bg-opacity));
1075
- }
1076
-
1077
1077
  .bg-pzh-blue-light{
1078
1078
  --tw-bg-opacity: 1;
1079
1079
  background-color: rgb(123 173 222 / var(--tw-bg-opacity));
@@ -1355,15 +1355,22 @@ select{
1355
1355
  opacity: 0.5;
1356
1356
  }
1357
1357
 
1358
+ .shadow-md{
1359
+ --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
1360
+ --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
1361
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1362
+ }
1363
+
1358
1364
  .shadow-xl{
1359
1365
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
1360
1366
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
1361
1367
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1362
1368
  }
1363
1369
 
1364
- .drop-shadow{
1365
- --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));
1366
- 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);
1370
+ .shadow-none{
1371
+ --tw-shadow: 0 0 #0000;
1372
+ --tw-shadow-colored: 0 0 #0000;
1373
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1367
1374
  }
1368
1375
 
1369
1376
  .filter{
@@ -1781,6 +1788,84 @@ h6,
1781
1788
  line-height: 14px;
1782
1789
  }
1783
1790
 
1791
+ /*
1792
+ * React Quill
1793
+ */
1794
+
1795
+ .quill .ql-toolbar.ql-snow {
1796
+ padding: 0px;
1797
+ border-top-left-radius: 0.25rem;
1798
+ border-top-right-radius: 0.25rem;
1799
+ background: white;
1800
+ border-color: rgba(203, 213, 224, 1);
1801
+ }
1802
+
1803
+ .quill .ql-toolbar.ql-snow button {
1804
+ height: 2rem;
1805
+ width: 2rem;
1806
+ display: flex;
1807
+ justify-content: center;
1808
+ align-items: center;
1809
+ padding: 0.5rem;
1810
+ }
1811
+
1812
+ .quill .ql-toolbar.ql-snow button svg path,
1813
+ .quill .ql-toolbar.ql-snow button svg line,
1814
+ .quill .ql-toolbar.ql-snow button:hover svg path,
1815
+ .quill .ql-toolbar.ql-snow button:hover svg line {
1816
+ stroke: #16113b;
1817
+ }
1818
+
1819
+ .quill .ql-toolbar.ql-snow button.ql-active svg path,
1820
+ .quill .ql-toolbar.ql-snow button.ql-active svg line {
1821
+ stroke: #00804d;
1822
+ }
1823
+
1824
+ .quill .ql-toolbar.ql-snow,
1825
+ .quill .ql-toolbar.ql-snow .ql-formats {
1826
+ display: flex;
1827
+ }
1828
+
1829
+ .quill .ql-toolbar.ql-snow {
1830
+ padding: 0 5px;
1831
+ }
1832
+
1833
+ .quill .ql-toolbar.ql-snow .ql-formats {
1834
+ margin: 0;
1835
+ border-right: 1px solid rgba(203, 213, 224, 1);
1836
+ }
1837
+
1838
+ .quill .ql-container {
1839
+ padding-bottom: 0.25rem;
1840
+ border-bottom-left-radius: 0.25rem;
1841
+ border-bottom-right-radius: 0.25rem;
1842
+ background: white;
1843
+ border-color: rgba(203, 213, 224, 1);
1844
+ font-family: 'Karbon Regular', sans-serif;
1845
+ font-weight: 400;
1846
+ font-size: 20px;
1847
+ }
1848
+
1849
+ .quill .editor.ql-container.ql-snow .ql-editor {
1850
+ color: #4a5568;
1851
+ line-height: 1.25;
1852
+ font-size: 1rem;
1853
+ }
1854
+
1855
+ .quill .editor.ql-container.ql-snow .ql-editor h2 {
1856
+ font-size: 1.125rem;
1857
+ margin-top: 10px;
1858
+ margin-bottom: 5px;
1859
+ }
1860
+
1861
+ .quill .ql-disabled {
1862
+ background: #ebebeb;
1863
+ }
1864
+
1865
+ .quill .ql-disabled .ql-editor {
1866
+ opacity: 0.55;
1867
+ }
1868
+
1784
1869
  .hover\:translate-y-0:hover{
1785
1870
  --tw-translate-y: 0px;
1786
1871
  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 +1933,12 @@ h6,
1848
1933
  color: rgb(255 255 255 / var(--tw-text-opacity));
1849
1934
  }
1850
1935
 
1936
+ .focus\:shadow-none:focus{
1937
+ --tw-shadow: 0 0 #0000;
1938
+ --tw-shadow-colored: 0 0 #0000;
1939
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1940
+ }
1941
+
1851
1942
  .focus\:outline-none:focus{
1852
1943
  outline: 2px solid transparent;
1853
1944
  outline-offset: 2px;
@@ -201,3 +201,81 @@ h6,
201
201
  .react-datepicker__navigation-icon {
202
202
  @apply leading-[14px];
203
203
  }
204
+
205
+ /*
206
+ * React Quill
207
+ */
208
+
209
+ .quill .ql-toolbar.ql-snow {
210
+ padding: 0px;
211
+ border-top-left-radius: 0.25rem;
212
+ border-top-right-radius: 0.25rem;
213
+ background: white;
214
+ border-color: rgba(203, 213, 224, 1);
215
+ }
216
+
217
+ .quill .ql-toolbar.ql-snow button {
218
+ height: 2rem;
219
+ width: 2rem;
220
+ display: flex;
221
+ justify-content: center;
222
+ align-items: center;
223
+ padding: 0.5rem;
224
+ }
225
+
226
+ .quill .ql-toolbar.ql-snow button svg path,
227
+ .quill .ql-toolbar.ql-snow button svg line,
228
+ .quill .ql-toolbar.ql-snow button:hover svg path,
229
+ .quill .ql-toolbar.ql-snow button:hover svg line {
230
+ stroke: #16113b;
231
+ }
232
+
233
+ .quill .ql-toolbar.ql-snow button.ql-active svg path,
234
+ .quill .ql-toolbar.ql-snow button.ql-active svg line {
235
+ stroke: #00804d;
236
+ }
237
+
238
+ .quill .ql-toolbar.ql-snow,
239
+ .quill .ql-toolbar.ql-snow .ql-formats {
240
+ display: flex;
241
+ }
242
+
243
+ .quill .ql-toolbar.ql-snow {
244
+ padding: 0 5px;
245
+ }
246
+
247
+ .quill .ql-toolbar.ql-snow .ql-formats {
248
+ margin: 0;
249
+ border-right: 1px solid rgba(203, 213, 224, 1);
250
+ }
251
+
252
+ .quill .ql-container {
253
+ padding-bottom: 0.25rem;
254
+ border-bottom-left-radius: 0.25rem;
255
+ border-bottom-right-radius: 0.25rem;
256
+ background: white;
257
+ border-color: rgba(203, 213, 224, 1);
258
+ font-family: 'Karbon Regular', sans-serif;
259
+ font-weight: 400;
260
+ font-size: 20px;
261
+ }
262
+
263
+ .quill .editor.ql-container.ql-snow .ql-editor {
264
+ color: #4a5568;
265
+ line-height: 1.25;
266
+ font-size: 1rem;
267
+ }
268
+
269
+ .quill .editor.ql-container.ql-snow .ql-editor h2 {
270
+ font-size: 1.125rem;
271
+ margin-top: 10px;
272
+ margin-bottom: 5px;
273
+ }
274
+
275
+ .quill .ql-disabled {
276
+ background: #ebebeb;
277
+ }
278
+
279
+ .quill .ql-disabled .ql-editor {
280
+ opacity: 0.55;
281
+ }