@pzh-ui/css 0.0.30 → 0.0.33
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/README.md +18 -0
- package/package.json +2 -2
- package/src/tailwind.css +103 -8
- package/src/tailwind.src.css +78 -0
package/README.md
CHANGED
|
@@ -1,3 +1,21 @@
|
|
|
1
1
|
# `css`
|
|
2
2
|
|
|
3
3
|
This package contains default styling for projects whitin Provincie Zuid-Holland.
|
|
4
|
+
|
|
5
|
+
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.
|
|
6
|
+
|
|
7
|
+
`yarn add @pzh-ui/css`
|
|
8
|
+
|
|
9
|
+
After installing the dependency, you can start using the styles as follows:
|
|
10
|
+
|
|
11
|
+
```jsx
|
|
12
|
+
// tailwind.config.js
|
|
13
|
+
module.exports = {
|
|
14
|
+
presets: [require('@pzh-ui/css/config')],
|
|
15
|
+
content: [
|
|
16
|
+
'./src/**/*.{js,jsx,ts,tsx}',
|
|
17
|
+
'./node_modules/@pzh-ui/components/dist/**/*.{js,jsx,ts,tsx}',
|
|
18
|
+
'./public/index.html',
|
|
19
|
+
],
|
|
20
|
+
}
|
|
21
|
+
```
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pzh-ui/css",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.33",
|
|
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": "
|
|
22
|
+
"gitHead": "ec39eb2c9e6e0d3cd0c97d39b41b9e638317026b",
|
|
23
23
|
"devDependencies": {
|
|
24
24
|
"tailwindcss": "^3.0.23"
|
|
25
25
|
}
|
package/src/tailwind.css
CHANGED
|
@@ -755,6 +755,10 @@ select{
|
|
|
755
755
|
top: 14px;
|
|
756
756
|
}
|
|
757
757
|
|
|
758
|
+
.right-3{
|
|
759
|
+
right: 0.75rem;
|
|
760
|
+
}
|
|
761
|
+
|
|
758
762
|
.z-10{
|
|
759
763
|
z-index: 10;
|
|
760
764
|
}
|
|
@@ -1059,6 +1063,11 @@ select{
|
|
|
1059
1063
|
background-color: rgb(0 128 77 / var(--tw-bg-opacity));
|
|
1060
1064
|
}
|
|
1061
1065
|
|
|
1066
|
+
.bg-white{
|
|
1067
|
+
--tw-bg-opacity: 1;
|
|
1068
|
+
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
|
|
1069
|
+
}
|
|
1070
|
+
|
|
1062
1071
|
.bg-pzh-cool-gray-light{
|
|
1063
1072
|
--tw-bg-opacity: 1;
|
|
1064
1073
|
background-color: rgb(191 191 191 / var(--tw-bg-opacity));
|
|
@@ -1069,11 +1078,6 @@ select{
|
|
|
1069
1078
|
background-color: rgb(92 92 92 / var(--tw-bg-opacity));
|
|
1070
1079
|
}
|
|
1071
1080
|
|
|
1072
|
-
.bg-white{
|
|
1073
|
-
--tw-bg-opacity: 1;
|
|
1074
|
-
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
|
|
1075
|
-
}
|
|
1076
|
-
|
|
1077
1081
|
.bg-pzh-blue-light{
|
|
1078
1082
|
--tw-bg-opacity: 1;
|
|
1079
1083
|
background-color: rgb(123 173 222 / var(--tw-bg-opacity));
|
|
@@ -1355,15 +1359,22 @@ select{
|
|
|
1355
1359
|
opacity: 0.5;
|
|
1356
1360
|
}
|
|
1357
1361
|
|
|
1362
|
+
.shadow-md{
|
|
1363
|
+
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
|
1364
|
+
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
|
|
1365
|
+
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
|
1366
|
+
}
|
|
1367
|
+
|
|
1358
1368
|
.shadow-xl{
|
|
1359
1369
|
--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
|
|
1360
1370
|
--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
|
|
1361
1371
|
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
|
1362
1372
|
}
|
|
1363
1373
|
|
|
1364
|
-
.
|
|
1365
|
-
--tw-
|
|
1366
|
-
|
|
1374
|
+
.shadow-none{
|
|
1375
|
+
--tw-shadow: 0 0 #0000;
|
|
1376
|
+
--tw-shadow-colored: 0 0 #0000;
|
|
1377
|
+
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
|
1367
1378
|
}
|
|
1368
1379
|
|
|
1369
1380
|
.filter{
|
|
@@ -1781,6 +1792,84 @@ h6,
|
|
|
1781
1792
|
line-height: 14px;
|
|
1782
1793
|
}
|
|
1783
1794
|
|
|
1795
|
+
/*
|
|
1796
|
+
* React Quill
|
|
1797
|
+
*/
|
|
1798
|
+
|
|
1799
|
+
.quill .ql-toolbar.ql-snow {
|
|
1800
|
+
padding: 0px;
|
|
1801
|
+
border-top-left-radius: 0.25rem;
|
|
1802
|
+
border-top-right-radius: 0.25rem;
|
|
1803
|
+
background: white;
|
|
1804
|
+
border-color: rgba(203, 213, 224, 1);
|
|
1805
|
+
}
|
|
1806
|
+
|
|
1807
|
+
.quill .ql-toolbar.ql-snow button {
|
|
1808
|
+
height: 2rem;
|
|
1809
|
+
width: 2rem;
|
|
1810
|
+
display: flex;
|
|
1811
|
+
justify-content: center;
|
|
1812
|
+
align-items: center;
|
|
1813
|
+
padding: 0.5rem;
|
|
1814
|
+
}
|
|
1815
|
+
|
|
1816
|
+
.quill .ql-toolbar.ql-snow button svg path,
|
|
1817
|
+
.quill .ql-toolbar.ql-snow button svg line,
|
|
1818
|
+
.quill .ql-toolbar.ql-snow button:hover svg path,
|
|
1819
|
+
.quill .ql-toolbar.ql-snow button:hover svg line {
|
|
1820
|
+
stroke: #16113b;
|
|
1821
|
+
}
|
|
1822
|
+
|
|
1823
|
+
.quill .ql-toolbar.ql-snow button.ql-active svg path,
|
|
1824
|
+
.quill .ql-toolbar.ql-snow button.ql-active svg line {
|
|
1825
|
+
stroke: #00804d;
|
|
1826
|
+
}
|
|
1827
|
+
|
|
1828
|
+
.quill .ql-toolbar.ql-snow,
|
|
1829
|
+
.quill .ql-toolbar.ql-snow .ql-formats {
|
|
1830
|
+
display: flex;
|
|
1831
|
+
}
|
|
1832
|
+
|
|
1833
|
+
.quill .ql-toolbar.ql-snow {
|
|
1834
|
+
padding: 0 5px;
|
|
1835
|
+
}
|
|
1836
|
+
|
|
1837
|
+
.quill .ql-toolbar.ql-snow .ql-formats {
|
|
1838
|
+
margin: 0;
|
|
1839
|
+
border-right: 1px solid rgba(203, 213, 224, 1);
|
|
1840
|
+
}
|
|
1841
|
+
|
|
1842
|
+
.quill .ql-container {
|
|
1843
|
+
padding-bottom: 0.25rem;
|
|
1844
|
+
border-bottom-left-radius: 0.25rem;
|
|
1845
|
+
border-bottom-right-radius: 0.25rem;
|
|
1846
|
+
background: white;
|
|
1847
|
+
border-color: rgba(203, 213, 224, 1);
|
|
1848
|
+
font-family: 'Karbon Regular', sans-serif;
|
|
1849
|
+
font-weight: 400;
|
|
1850
|
+
font-size: 20px;
|
|
1851
|
+
}
|
|
1852
|
+
|
|
1853
|
+
.quill .editor.ql-container.ql-snow .ql-editor {
|
|
1854
|
+
color: #4a5568;
|
|
1855
|
+
line-height: 1.25;
|
|
1856
|
+
font-size: 1rem;
|
|
1857
|
+
}
|
|
1858
|
+
|
|
1859
|
+
.quill .editor.ql-container.ql-snow .ql-editor h2 {
|
|
1860
|
+
font-size: 1.125rem;
|
|
1861
|
+
margin-top: 10px;
|
|
1862
|
+
margin-bottom: 5px;
|
|
1863
|
+
}
|
|
1864
|
+
|
|
1865
|
+
.quill .ql-disabled {
|
|
1866
|
+
background: #ebebeb;
|
|
1867
|
+
}
|
|
1868
|
+
|
|
1869
|
+
.quill .ql-disabled .ql-editor {
|
|
1870
|
+
opacity: 0.55;
|
|
1871
|
+
}
|
|
1872
|
+
|
|
1784
1873
|
.hover\:translate-y-0:hover{
|
|
1785
1874
|
--tw-translate-y: 0px;
|
|
1786
1875
|
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,
|
|
|
1848
1937
|
color: rgb(255 255 255 / var(--tw-text-opacity));
|
|
1849
1938
|
}
|
|
1850
1939
|
|
|
1940
|
+
.focus\:shadow-none:focus{
|
|
1941
|
+
--tw-shadow: 0 0 #0000;
|
|
1942
|
+
--tw-shadow-colored: 0 0 #0000;
|
|
1943
|
+
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
|
1944
|
+
}
|
|
1945
|
+
|
|
1851
1946
|
.focus\:outline-none:focus{
|
|
1852
1947
|
outline: 2px solid transparent;
|
|
1853
1948
|
outline-offset: 2px;
|
package/src/tailwind.src.css
CHANGED
|
@@ -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
|
+
}
|