@digigov/css 0.4.0 → 0.6.2
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/CHANGELOG.json +93 -0
- package/CHANGELOG.md +47 -1
- package/colors/color-values.js +3 -0
- package/dist/base/index.css +7 -0
- package/dist/base.css +7 -0
- package/dist/base.js +1 -1
- package/dist/components.css +1 -1
- package/dist/components.js +1 -1
- package/dist/digigov.css +7 -1
- package/dist/utilities/index.css +1 -0
- package/dist/utilities.css +1 -1
- package/dist/utilities.js +1 -1
- package/package.json +14 -9
- package/postcss.config.js +6 -0
- package/src/base/base.css +2 -0
- package/src/base/index.css +6 -0
- package/src/base/postcss.config.js +31 -0
- package/src/base/tailwind.config.js +11 -0
- package/src/components/accordion.css +57 -0
- package/src/components/admin-form.css +5 -0
- package/src/components/admin-header.css +9 -0
- package/src/components/admin-layout.css +56 -0
- package/src/components/breadcrumps.css +36 -0
- package/src/components/button.css +82 -0
- package/src/components/card.css +24 -0
- package/src/components/checkboxes.css +67 -0
- package/src/components/components.css +2 -0
- package/src/components/details.css +22 -0
- package/src/components/filter.css +129 -0
- package/src/components/footer.css +75 -0
- package/src/components/form.css +103 -0
- package/src/components/header.css +56 -0
- package/src/components/index.css +24 -0
- package/src/components/layout.css +61 -0
- package/src/components/misc.css +84 -0
- package/src/components/nav.css +83 -0
- package/src/components/notification-banner.css +44 -0
- package/src/components/panel.css +12 -0
- package/src/components/phase-banner.css +17 -0
- package/src/components/postcss.config.js +20 -0
- package/src/components/radios.css +68 -0
- package/src/components/summary-list.css +45 -0
- package/src/components/table.css +108 -0
- package/src/components/tabs.css +59 -0
- package/src/components/tailwind.config.js +10 -0
- package/src/components/typography.css +171 -0
- package/src/index.css +5 -0
- package/src/pages/_app.js +5 -0
- package/src/pages/admin-filtering-data.js +155 -0
- package/src/pages/admin.js +61 -0
- package/src/pages/form.js +253 -0
- package/src/pages/headings/service-heading.js +20 -0
- package/src/pages/index.js +495 -0
- package/src/pages/table.js +308 -0
- package/src/utilities/index.css +66 -0
- package/src/utilities/postcss.config.js +20 -0
- package/src/utilities/tailwind.config.js +1 -0
- package/src/utilities/utilities.css +72 -0
- package/tailwind.config.js +111 -0
- package/dist/base/base.css +0 -0
- package/dist/utilities/utilities.css +0 -1
|
@@ -0,0 +1,308 @@
|
|
|
1
|
+
export default function Table() {
|
|
2
|
+
return (
|
|
3
|
+
<body className="example">
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
<table className="govgr-table">
|
|
7
|
+
<caption className="govgr-table__caption govgr-table__caption--s">Table caption S</caption>
|
|
8
|
+
<caption className="govgr-table__caption govgr-table__caption--m">Table caption M</caption>
|
|
9
|
+
<caption className="govgr-table__caption govgr-table__caption--l">Table caption L</caption>
|
|
10
|
+
<caption className="govgr-table__caption govgr-table__caption--xl">Table caption XL</caption>
|
|
11
|
+
</table>
|
|
12
|
+
|
|
13
|
+
<table className="govgr-table">
|
|
14
|
+
<caption className="govgr-table__caption govgr-table__caption--m">Simple Table</caption>
|
|
15
|
+
<thead className="govgr-table__head">
|
|
16
|
+
<tr className="govgr-table__row">
|
|
17
|
+
<th scope="col" className="govgr-table__header">Date</th>
|
|
18
|
+
<th scope="col" className="govgr-table__header">Amount</th>
|
|
19
|
+
</tr>
|
|
20
|
+
</thead>
|
|
21
|
+
<tbody className="govgr-table__body">
|
|
22
|
+
<tr className="govgr-table__row">
|
|
23
|
+
<th scope="row" className="govgr-table__header">First 6 weeks</th>
|
|
24
|
+
<td className="govgr-table__cell">€109.80 per week</td>
|
|
25
|
+
</tr>
|
|
26
|
+
<tr className="govgr-table__row">
|
|
27
|
+
<th scope="row" className="govgr-table__header">Next 33 weeks</th>
|
|
28
|
+
<td className="govgr-table__cell">€109.80 per week</td>
|
|
29
|
+
</tr>
|
|
30
|
+
<tr className="govgr-table__row">
|
|
31
|
+
<th scope="row" className="govgr-table__header">Total estimated pay</th>
|
|
32
|
+
<td className="govgr-table__cell">€4,282.20</td>
|
|
33
|
+
</tr>
|
|
34
|
+
</tbody>
|
|
35
|
+
</table>
|
|
36
|
+
|
|
37
|
+
{/* Table with vertical lines */}
|
|
38
|
+
<table className="govgr-table govgr-table--with-vertical-lines">
|
|
39
|
+
<caption className="govgr-table__caption govgr-table__caption--m">Table with vertical lines</caption>
|
|
40
|
+
<thead className="govgr-table__head">
|
|
41
|
+
<tr className="govgr-table__row">
|
|
42
|
+
<th scope="col" className="govgr-table__header">Date</th>
|
|
43
|
+
<th scope="col" className="govgr-table__header">Amount</th>
|
|
44
|
+
<th scope="col" className="govgr-table__header">Amount</th>
|
|
45
|
+
</tr>
|
|
46
|
+
</thead>
|
|
47
|
+
<tbody className="govgr-table__body">
|
|
48
|
+
<tr className="govgr-table__row">
|
|
49
|
+
<th scope="row" className="govgr-table__header">First 6 weeks</th>
|
|
50
|
+
<td className="govgr-table__cell">€109.80 per week</td>
|
|
51
|
+
<td className="govgr-table__cell">€109.80 per week</td>
|
|
52
|
+
</tr>
|
|
53
|
+
<tr className="govgr-table__row">
|
|
54
|
+
<th scope="row" className="govgr-table__header">Next 33 weeks</th>
|
|
55
|
+
<td className="govgr-table__cell">€109.80 per week</td>
|
|
56
|
+
<td className="govgr-table__cell">€109.80 per week</td>
|
|
57
|
+
</tr>
|
|
58
|
+
<tr className="govgr-table__row">
|
|
59
|
+
<th scope="row" className="govgr-table__header">Total estimated pay</th>
|
|
60
|
+
<td className="govgr-table__cell">€4,282.20</td>
|
|
61
|
+
<td className="govgr-table__cell">€4,282.20</td>
|
|
62
|
+
</tr>
|
|
63
|
+
</tbody>
|
|
64
|
+
</table>
|
|
65
|
+
|
|
66
|
+
<table className="govgr-table">
|
|
67
|
+
<caption className="govgr-table__caption govgr-table__caption--m">Table with numbers and custom column widths </caption>
|
|
68
|
+
<thead className="govgr-table__head">
|
|
69
|
+
<tr className="govgr-table__row">
|
|
70
|
+
<th scope="col" className="govgr-table__header govgr-!-width-one-half">Date</th>
|
|
71
|
+
<th scope="col" className="govgr-table__header govgr-!-width-one-quarter govgr-table__header--numeric">Regular</th>
|
|
72
|
+
<th scope="col" className="govgr-table__header govgr-!-width-one-quarter govgr-table__header--numeric">Reduced</th>
|
|
73
|
+
</tr>
|
|
74
|
+
</thead>
|
|
75
|
+
<tbody className="govgr-table__body">
|
|
76
|
+
<tr className="govgr-table__row">
|
|
77
|
+
<th scope="row" className="govgr-table__header govgr-!-width-one-half">First 6 weeks</th>
|
|
78
|
+
<td className="govgr-table__cell govgr-table__cell--numeric">€109.80</td>
|
|
79
|
+
<td className="govgr-table__cell govgr-table__cell--numeric">€69.80</td>
|
|
80
|
+
</tr>
|
|
81
|
+
<tr className="govgr-table__row">
|
|
82
|
+
<th scope="row" className="govgr-table__header govgr-!-width-one-half">Next 33 weeks</th>
|
|
83
|
+
<td className="govgr-table__cell govgr-table__cell--numeric">€109.80</td>
|
|
84
|
+
<td className="govgr-table__cell govgr-table__cell--numeric">€69.80</td>
|
|
85
|
+
</tr>
|
|
86
|
+
</tbody>
|
|
87
|
+
</table>
|
|
88
|
+
|
|
89
|
+
{/* Table with primary color at header */}
|
|
90
|
+
<table className="govgr-table govgr-table--dark govgr-table--with-vertical-lines">
|
|
91
|
+
<caption className="govgr-table__caption govgr-table__caption--m">Table with primary color at header</caption>
|
|
92
|
+
<thead className="govgr-table__head">
|
|
93
|
+
<tr className="govgr-table__row">
|
|
94
|
+
<th scope="col" className="govgr-table__header govgr-table__header--dark">Date</th>
|
|
95
|
+
<th scope="col" className="govgr-table__header govgr-table__header--dark">Amount</th>
|
|
96
|
+
</tr>
|
|
97
|
+
</thead>
|
|
98
|
+
<tbody className="govgr-table__body">
|
|
99
|
+
<tr className="govgr-table__row">
|
|
100
|
+
<th scope="row" className="govgr-table__header">First 6 weeks</th>
|
|
101
|
+
<td className="govgr-table__cell">€109.80 per week</td>
|
|
102
|
+
</tr>
|
|
103
|
+
<tr className="govgr-table__row">
|
|
104
|
+
<th scope="row" className="govgr-table__header">Next 33 weeks</th>
|
|
105
|
+
<td className="govgr-table__cell">€109.80 per week</td>
|
|
106
|
+
</tr>
|
|
107
|
+
<tr className="govgr-table__row">
|
|
108
|
+
<th scope="row" className="govgr-table__header">Total estimated pay</th>
|
|
109
|
+
<td className="govgr-table__cell">€4,282.20</td>
|
|
110
|
+
</tr>
|
|
111
|
+
</tbody>
|
|
112
|
+
</table>
|
|
113
|
+
|
|
114
|
+
{/* Table with gray color at all headers */}
|
|
115
|
+
<table className="govgr-table govgr-table--dark ">
|
|
116
|
+
<caption className="govgr-table__caption govgr-table__caption--m">Table with gray color at header</caption>
|
|
117
|
+
<thead className="govgr-table__head">
|
|
118
|
+
<tr className="govgr-table__row">
|
|
119
|
+
<th scope="col" className="govgr-table__header govgr-table__header--gray">Date</th>
|
|
120
|
+
<th scope="col" className="govgr-table__header govgr-table__header--gray">Amount</th>
|
|
121
|
+
<th scope="col" className="govgr-table__header govgr-table__header--gray">Discount</th>
|
|
122
|
+
</tr>
|
|
123
|
+
</thead>
|
|
124
|
+
<tbody className="govgr-table__body">
|
|
125
|
+
<tr className="govgr-table__row">
|
|
126
|
+
<th scope="row" className="govgr-table__header govgr-table__header--gray">First 6 weeks</th>
|
|
127
|
+
<td className="govgr-table__cell">€109.80 per week</td>
|
|
128
|
+
<td className="govgr-table__cell">€69.80 per week</td>
|
|
129
|
+
</tr>
|
|
130
|
+
<tr className="govgr-table__row">
|
|
131
|
+
<th scope="row" className="govgr-table__header govgr-table__header--gray">Next 33 weeks</th>
|
|
132
|
+
<td className="govgr-table__cell">€109.80 per week</td>
|
|
133
|
+
<td className="govgr-table__cell">€79.80 per week</td>
|
|
134
|
+
</tr>
|
|
135
|
+
</tbody>
|
|
136
|
+
</table>
|
|
137
|
+
|
|
138
|
+
{/* Zebra Table */}
|
|
139
|
+
<table className="govgr-table govgr-table--zebra">
|
|
140
|
+
<caption className="govgr-table__caption govgr-table__caption--m">Zebra Table</caption>
|
|
141
|
+
<thead className="govgr-table__head">
|
|
142
|
+
<tr className="govgr-table__row">
|
|
143
|
+
<th scope="col" className="govgr-table__header">Date</th>
|
|
144
|
+
<th scope="col" className="govgr-table__header">Amount</th>
|
|
145
|
+
</tr>
|
|
146
|
+
</thead>
|
|
147
|
+
<tbody className="govgr-table__body">
|
|
148
|
+
<tr className="govgr-table__row">
|
|
149
|
+
<th scope="row" className="govgr-table__header">First 6 weeks</th>
|
|
150
|
+
<td className="govgr-table__cell">€109.80 per week</td>
|
|
151
|
+
</tr>
|
|
152
|
+
<tr className="govgr-table__row">
|
|
153
|
+
<th scope="row" className="govgr-table__header">First 6 weeks</th>
|
|
154
|
+
<td className="govgr-table__cell">€109.80 per week</td>
|
|
155
|
+
</tr>
|
|
156
|
+
<tr className="govgr-table__row">
|
|
157
|
+
<th scope="row" className="govgr-table__header">Next 33 weeks</th>
|
|
158
|
+
<td className="govgr-table__cell">€109.80 per week</td>
|
|
159
|
+
</tr>
|
|
160
|
+
<tr className="govgr-table__row">
|
|
161
|
+
<th scope="row" className="govgr-table__header">Total estimated pay</th>
|
|
162
|
+
<td className="govgr-table__cell">€4,282.20</td>
|
|
163
|
+
</tr>
|
|
164
|
+
<tr className="govgr-table__row">
|
|
165
|
+
<th scope="row" className="govgr-table__header">Total estimated pay</th>
|
|
166
|
+
<td className="govgr-table__cell">€4,282.20</td>
|
|
167
|
+
</tr>
|
|
168
|
+
</tbody>
|
|
169
|
+
</table>
|
|
170
|
+
|
|
171
|
+
{/* Zebra Table with dark header */}
|
|
172
|
+
<table className="govgr-table govgr-table--dark govgr-table--zebra">
|
|
173
|
+
<caption className="govgr-table__caption govgr-table__caption--m">Zebra Table with dark header</caption>
|
|
174
|
+
<thead className="govgr-table__head">
|
|
175
|
+
<tr className="govgr-table__row">
|
|
176
|
+
<th scope="col" className="govgr-table__header govgr-table__header--dark">Date</th>
|
|
177
|
+
<th scope="col" className="govgr-table__header govgr-table__header--dark">Amount</th>
|
|
178
|
+
</tr>
|
|
179
|
+
</thead>
|
|
180
|
+
<tbody className="govgr-table__body">
|
|
181
|
+
<tr className="govgr-table__row">
|
|
182
|
+
<th scope="row" className="govgr-table__header">First 6 weeks</th>
|
|
183
|
+
<td className="govgr-table__cell">€109.80 per week</td>
|
|
184
|
+
</tr>
|
|
185
|
+
<tr className="govgr-table__row">
|
|
186
|
+
<th scope="row" className="govgr-table__header">First 6 weeks</th>
|
|
187
|
+
<td className="govgr-table__cell">€109.80 per week</td>
|
|
188
|
+
</tr>
|
|
189
|
+
<tr className="govgr-table__row">
|
|
190
|
+
<th scope="row" className="govgr-table__header">Next 33 weeks</th>
|
|
191
|
+
<td className="govgr-table__cell">€109.80 per week</td>
|
|
192
|
+
</tr>
|
|
193
|
+
<tr className="govgr-table__row">
|
|
194
|
+
<th scope="row" className="govgr-table__header">Total estimated pay</th>
|
|
195
|
+
<td className="govgr-table__cell">€4,282.20</td>
|
|
196
|
+
</tr>
|
|
197
|
+
<tr className="govgr-table__row">
|
|
198
|
+
<th scope="row" className="govgr-table__header">Total estimated pay</th>
|
|
199
|
+
<td className="govgr-table__cell">€4,282.20</td>
|
|
200
|
+
</tr>
|
|
201
|
+
</tbody>
|
|
202
|
+
</table>
|
|
203
|
+
|
|
204
|
+
{/* Zebra Table with dark headers */}
|
|
205
|
+
<table className="govgr-table govgr-table--dark govgr-table--zebra">
|
|
206
|
+
<caption className="govgr-table__caption govgr-table__caption--m">Zebra Table with dark header</caption>
|
|
207
|
+
<thead className="govgr-table__head">
|
|
208
|
+
<tr className="govgr-table__row">
|
|
209
|
+
<th scope="col" className="govgr-table__header govgr-table__header--dark">Date</th>
|
|
210
|
+
<th scope="col" className="govgr-table__header govgr-table__header--dark">Amount</th>
|
|
211
|
+
<th scope="col" className="govgr-table__header govgr-table__header--dark">Amount</th>
|
|
212
|
+
<th scope="col" className="govgr-table__header govgr-table__header--dark">Amount</th>
|
|
213
|
+
</tr>
|
|
214
|
+
</thead>
|
|
215
|
+
<tbody className="govgr-table__body">
|
|
216
|
+
<tr className="govgr-table__row">
|
|
217
|
+
<th scope="row" className="govgr-table__header govgr-table__header--dark">First 6 weeks</th>
|
|
218
|
+
<td className="govgr-table__cell">€109.80 per week</td>
|
|
219
|
+
<td className="govgr-table__cell">€109.80 per week</td>
|
|
220
|
+
<td className="govgr-table__cell">€109.80 per week</td>
|
|
221
|
+
</tr>
|
|
222
|
+
<tr className="govgr-table__row">
|
|
223
|
+
<th scope="row" className="govgr-table__header govgr-table__header--dark">First 6 weeks</th>
|
|
224
|
+
<td className="govgr-table__cell">€109.80 per week</td>
|
|
225
|
+
<td className="govgr-table__cell">€109.80 per week</td>
|
|
226
|
+
<td className="govgr-table__cell">€109.80 per week</td>
|
|
227
|
+
</tr>
|
|
228
|
+
<tr className="govgr-table__row">
|
|
229
|
+
<th scope="row" className="govgr-table__header govgr-table__header--dark">Next 33 weeks</th>
|
|
230
|
+
<td className="govgr-table__cell">€109.80 per week</td>
|
|
231
|
+
<td className="govgr-table__cell">€109.80 per week</td>
|
|
232
|
+
<td className="govgr-table__cell">€109.80 per week</td>
|
|
233
|
+
</tr>
|
|
234
|
+
<tr className="govgr-table__row">
|
|
235
|
+
<th scope="row" className="govgr-table__header govgr-table__header--dark">Total estimated pay</th>
|
|
236
|
+
<td className="govgr-table__cell">€4,282.20</td>
|
|
237
|
+
<td className="govgr-table__cell">€4,282.20</td>
|
|
238
|
+
<td className="govgr-table__cell">€4,282.20</td>
|
|
239
|
+
</tr>
|
|
240
|
+
<tr className="govgr-table__row">
|
|
241
|
+
<th scope="row" className="govgr-table__header govgr-table__header--dark">Total estimated pay</th>
|
|
242
|
+
<td className="govgr-table__cell">€4,282.20</td>
|
|
243
|
+
<td className="govgr-table__cell">€4,282.20</td>
|
|
244
|
+
<td className="govgr-table__cell">€4,282.20</td>
|
|
245
|
+
</tr>
|
|
246
|
+
</tbody>
|
|
247
|
+
</table>
|
|
248
|
+
|
|
249
|
+
{/* Densed zebra Table */}
|
|
250
|
+
<table className="govgr-table govgr-table--zebra govgr-table--dense">
|
|
251
|
+
<caption className="govgr-table__caption govgr-table__caption--m">Densed zebra Table</caption>
|
|
252
|
+
<thead className="govgr-table__head">
|
|
253
|
+
<tr className="govgr-table__row">
|
|
254
|
+
<th scope="col" className="govgr-table__header">Date</th>
|
|
255
|
+
<th scope="col" className="govgr-table__header">Amount</th>
|
|
256
|
+
<th scope="col" className="govgr-table__header">Amount</th>
|
|
257
|
+
<th scope="col" className="govgr-table__header">Amount</th>
|
|
258
|
+
<th scope="col" className="govgr-table__header">Amount</th>
|
|
259
|
+
<th scope="col" className="govgr-table__header">Amount</th>
|
|
260
|
+
</tr>
|
|
261
|
+
</thead>
|
|
262
|
+
<tbody className="govgr-table__body">
|
|
263
|
+
<tr className="govgr-table__row">
|
|
264
|
+
<th scope="row" className="govgr-table__header">First 6 weeks</th>
|
|
265
|
+
<td className="govgr-table__cell">€109.80</td>
|
|
266
|
+
<td className="govgr-table__cell">€109.80</td>
|
|
267
|
+
<td className="govgr-table__cell">€109.80</td>
|
|
268
|
+
<td className="govgr-table__cell">€109.80</td>
|
|
269
|
+
<td className="govgr-table__cell">€109.80</td>
|
|
270
|
+
</tr>
|
|
271
|
+
<tr className="govgr-table__row">
|
|
272
|
+
<th scope="row" className="govgr-table__header">First 6 weeks</th>
|
|
273
|
+
<td className="govgr-table__cell">€109.80</td>
|
|
274
|
+
<td className="govgr-table__cell">€109.80</td>
|
|
275
|
+
<td className="govgr-table__cell">€109.80</td>
|
|
276
|
+
<td className="govgr-table__cell">€109.80</td>
|
|
277
|
+
<td className="govgr-table__cell">€109.80</td>
|
|
278
|
+
</tr>
|
|
279
|
+
<tr className="govgr-table__row">
|
|
280
|
+
<th scope="row" className="govgr-table__header">Next 33 weeks</th>
|
|
281
|
+
<td className="govgr-table__cell">€109.80</td>
|
|
282
|
+
<td className="govgr-table__cell">€109.80</td>
|
|
283
|
+
<td className="govgr-table__cell">€109.80</td>
|
|
284
|
+
<td className="govgr-table__cell">€109.80</td>
|
|
285
|
+
<td className="govgr-table__cell">€109.80</td>
|
|
286
|
+
</tr>
|
|
287
|
+
<tr className="govgr-table__row">
|
|
288
|
+
<th scope="row" className="govgr-table__header">Total estimated pay</th>
|
|
289
|
+
<td className="govgr-table__cell">€4,282.20</td>
|
|
290
|
+
<td className="govgr-table__cell">€4,282.20</td>
|
|
291
|
+
<td className="govgr-table__cell">€4,282.20</td>
|
|
292
|
+
<td className="govgr-table__cell">€4,282.20</td>
|
|
293
|
+
<td className="govgr-table__cell">€4,282.20</td>
|
|
294
|
+
</tr>
|
|
295
|
+
<tr className="govgr-table__row">
|
|
296
|
+
<th scope="row" className="govgr-table__header">Total estimated pay</th>
|
|
297
|
+
<td className="govgr-table__cell">€4,282.20</td>
|
|
298
|
+
<td className="govgr-table__cell">€4,282.20</td>
|
|
299
|
+
<td className="govgr-table__cell">€4,282.20</td>
|
|
300
|
+
<td className="govgr-table__cell">€4,282.20</td>
|
|
301
|
+
<td className="govgr-table__cell">€4,282.20</td>
|
|
302
|
+
</tr>
|
|
303
|
+
</tbody>
|
|
304
|
+
</table>
|
|
305
|
+
|
|
306
|
+
</body>
|
|
307
|
+
)
|
|
308
|
+
}
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
.govgr-main-wrapper {
|
|
2
|
+
@apply grid md:grid-cols-3 md:gap-12 grid-cols-1 gap-y-16;
|
|
3
|
+
}
|
|
4
|
+
.govgr-grid-column-two-thirds {
|
|
5
|
+
@apply col-span-2;
|
|
6
|
+
}
|
|
7
|
+
.govgr-grid-column-one-third {
|
|
8
|
+
@apply col-span-1 flex flex-wrap flex-col md:sticky md:top-8 h-fit-content;
|
|
9
|
+
}
|
|
10
|
+
.govgr-grid {
|
|
11
|
+
@apply grid grid-cols-12;
|
|
12
|
+
}
|
|
13
|
+
.govgr-grid-inline {
|
|
14
|
+
@apply inline-grid;
|
|
15
|
+
}
|
|
16
|
+
.govgr-grid__gap-1 {
|
|
17
|
+
@apply gap-1;
|
|
18
|
+
}
|
|
19
|
+
.govgr-grid__gap-2 {
|
|
20
|
+
@apply gap-2;
|
|
21
|
+
}
|
|
22
|
+
.govgr-grid__gap-3 {
|
|
23
|
+
@apply gap-3;
|
|
24
|
+
}
|
|
25
|
+
.govgr-grid__gap-4 {
|
|
26
|
+
@apply gap-4;
|
|
27
|
+
}
|
|
28
|
+
.govgr-grid__col-auto {
|
|
29
|
+
@apply col-auto;
|
|
30
|
+
}
|
|
31
|
+
.govgr-grid__col-span-1 {
|
|
32
|
+
@apply col-span-1;
|
|
33
|
+
}
|
|
34
|
+
.govgr-grid__col-span-2 {
|
|
35
|
+
@apply col-span-2;
|
|
36
|
+
}
|
|
37
|
+
.govgr-grid__col-span-3 {
|
|
38
|
+
@apply col-span-3;
|
|
39
|
+
}
|
|
40
|
+
.govgr-grid__col-span-4 {
|
|
41
|
+
@apply col-span-4;
|
|
42
|
+
}
|
|
43
|
+
.govgr-grid__col-span-5 {
|
|
44
|
+
@apply col-span-5;
|
|
45
|
+
}
|
|
46
|
+
.govgr-grid__col-span-6 {
|
|
47
|
+
@apply col-span-6;
|
|
48
|
+
}
|
|
49
|
+
.govgr-grid__col-span-7 {
|
|
50
|
+
@apply col-span-7;
|
|
51
|
+
}
|
|
52
|
+
.govgr-grid__col-span-8 {
|
|
53
|
+
@apply col-span-8;
|
|
54
|
+
}
|
|
55
|
+
.govgr-grid__col-span-9 {
|
|
56
|
+
@apply col-span-9;
|
|
57
|
+
}
|
|
58
|
+
.govgr-grid__col-span-10 {
|
|
59
|
+
@apply col-span-10;
|
|
60
|
+
}
|
|
61
|
+
.govgr-grid__col-span-11 {
|
|
62
|
+
@apply col-span-11;
|
|
63
|
+
}
|
|
64
|
+
.govgr-grid__col-span-12 {
|
|
65
|
+
@apply col-span-12;
|
|
66
|
+
}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
module.exports = {
|
|
2
|
+
plugins: [
|
|
3
|
+
require('postcss-import'),
|
|
4
|
+
require('tailwindcss')('./src/utilities/tailwind.config.js'),
|
|
5
|
+
require('postcss-nested')({
|
|
6
|
+
"bubble": [
|
|
7
|
+
"screen"
|
|
8
|
+
]
|
|
9
|
+
}),
|
|
10
|
+
require('autoprefixer'),
|
|
11
|
+
require('cssnano')({
|
|
12
|
+
"preset": [
|
|
13
|
+
"default",
|
|
14
|
+
{
|
|
15
|
+
"mergeRules": false
|
|
16
|
+
}
|
|
17
|
+
]
|
|
18
|
+
}),
|
|
19
|
+
]
|
|
20
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
module.exports = require('../../tailwind.config.js');
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
@tailwind utilities;
|
|
2
|
+
@layer utilities {
|
|
3
|
+
.govgr-main-wrapper {
|
|
4
|
+
@apply grid md:grid-cols-3 md:gap-12 grid-cols-1 gap-y-16;
|
|
5
|
+
}
|
|
6
|
+
.govgr-grid-column-two-thirds {
|
|
7
|
+
@apply col-span-2;
|
|
8
|
+
}
|
|
9
|
+
.govgr-grid-column-one-third {
|
|
10
|
+
@apply col-span-1 flex flex-wrap flex-col md:sticky md:top-8 h-fit-content;
|
|
11
|
+
}
|
|
12
|
+
.govgr-grid {
|
|
13
|
+
@apply grid md:grid-cols-12 grid-cols-1;
|
|
14
|
+
}
|
|
15
|
+
.govgr-grid-inline {
|
|
16
|
+
@apply inline-grid;
|
|
17
|
+
}
|
|
18
|
+
.govgr-grid__gap-1 {
|
|
19
|
+
@apply gap-1;
|
|
20
|
+
}
|
|
21
|
+
.govgr-grid__gap-2 {
|
|
22
|
+
@apply gap-2;
|
|
23
|
+
}
|
|
24
|
+
.govgr-grid__gap-3 {
|
|
25
|
+
@apply gap-3;
|
|
26
|
+
}
|
|
27
|
+
.govgr-grid__gap-4 {
|
|
28
|
+
@apply gap-4;
|
|
29
|
+
}
|
|
30
|
+
.govgr-grid__gap-6 {
|
|
31
|
+
@apply gap-6;
|
|
32
|
+
}
|
|
33
|
+
.govgr-grid__col-auto {
|
|
34
|
+
@apply col-auto;
|
|
35
|
+
}
|
|
36
|
+
.govgr-grid__col-span-1 {
|
|
37
|
+
@apply col-span-1;
|
|
38
|
+
}
|
|
39
|
+
.govgr-grid__col-span-2 {
|
|
40
|
+
@apply col-span-2;
|
|
41
|
+
}
|
|
42
|
+
.govgr-grid__col-span-3 {
|
|
43
|
+
@apply col-span-3;
|
|
44
|
+
}
|
|
45
|
+
.govgr-grid__col-span-4 {
|
|
46
|
+
@apply col-span-4;
|
|
47
|
+
}
|
|
48
|
+
.govgr-grid__col-span-5 {
|
|
49
|
+
@apply col-span-5;
|
|
50
|
+
}
|
|
51
|
+
.govgr-grid__col-span-6 {
|
|
52
|
+
@apply col-span-6;
|
|
53
|
+
}
|
|
54
|
+
.govgr-grid__col-span-7 {
|
|
55
|
+
@apply col-span-7;
|
|
56
|
+
}
|
|
57
|
+
.govgr-grid__col-span-8 {
|
|
58
|
+
@apply col-span-8;
|
|
59
|
+
}
|
|
60
|
+
.govgr-grid__col-span-9 {
|
|
61
|
+
@apply col-span-9;
|
|
62
|
+
}
|
|
63
|
+
.govgr-grid__col-span-10 {
|
|
64
|
+
@apply col-span-10;
|
|
65
|
+
}
|
|
66
|
+
.govgr-grid__col-span-11 {
|
|
67
|
+
@apply col-span-11;
|
|
68
|
+
}
|
|
69
|
+
.govgr-grid__col-span-12 {
|
|
70
|
+
@apply col-span-12;
|
|
71
|
+
}
|
|
72
|
+
};
|
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
const defaultTheme = require('tailwindcss/defaultTheme')
|
|
2
|
+
const buildOnly = !process.env['DIGIGOV_CSS_BUILD'] ? {
|
|
3
|
+
mode: 'jit',
|
|
4
|
+
} : {}
|
|
5
|
+
module.exports = {
|
|
6
|
+
...buildOnly,
|
|
7
|
+
theme: {
|
|
8
|
+
colors: require('./colors'),
|
|
9
|
+
container: {
|
|
10
|
+
center: true,
|
|
11
|
+
},
|
|
12
|
+
fontSize: {
|
|
13
|
+
...defaultTheme.fontSize,
|
|
14
|
+
'lg': '1.1875rem',
|
|
15
|
+
},
|
|
16
|
+
screens: {
|
|
17
|
+
xs: '0px',
|
|
18
|
+
sm: '640px',
|
|
19
|
+
md: '768px',
|
|
20
|
+
lg: '1024px',
|
|
21
|
+
xl: '1280px',
|
|
22
|
+
'2xl': '1280px',
|
|
23
|
+
},
|
|
24
|
+
fontFamily: {
|
|
25
|
+
sans: ['Roboto', ...defaultTheme.fontFamily.sans]
|
|
26
|
+
},
|
|
27
|
+
extend: {
|
|
28
|
+
|
|
29
|
+
height: {
|
|
30
|
+
'fit-content': 'fit-content',
|
|
31
|
+
'06rem': '0.6rem'
|
|
32
|
+
},
|
|
33
|
+
width: {
|
|
34
|
+
'06rem': '0.6rem'
|
|
35
|
+
|
|
36
|
+
},
|
|
37
|
+
minWidth: {
|
|
38
|
+
'8': '2rem',
|
|
39
|
+
'10': '2.5rem',
|
|
40
|
+
'12': '3rem',
|
|
41
|
+
'32': '8rem',
|
|
42
|
+
'64': '16rem',
|
|
43
|
+
},
|
|
44
|
+
minHeight: {
|
|
45
|
+
'10': '2.5rem',
|
|
46
|
+
},
|
|
47
|
+
maxWidth: {
|
|
48
|
+
'1/4': '25%',
|
|
49
|
+
'1/2': '50%',
|
|
50
|
+
'1/3': '33.332%',
|
|
51
|
+
'col2': 'calc((2 / 12) * 100)%',
|
|
52
|
+
'col3': '25%',
|
|
53
|
+
'col7': 'calc((7 / 12) * 100)%'
|
|
54
|
+
},
|
|
55
|
+
borderWidth: {
|
|
56
|
+
'2_5': '2.5px',
|
|
57
|
+
'3': '3px',
|
|
58
|
+
'5': '5px',
|
|
59
|
+
'6': '6px',
|
|
60
|
+
},
|
|
61
|
+
flexGrow: {
|
|
62
|
+
'2': '2',
|
|
63
|
+
'3': '3',
|
|
64
|
+
'4': '4',
|
|
65
|
+
'5': '5',
|
|
66
|
+
'6': '6',
|
|
67
|
+
'7': '7',
|
|
68
|
+
'8': '8',
|
|
69
|
+
'9': '9',
|
|
70
|
+
'10': '10',
|
|
71
|
+
'11': '11',
|
|
72
|
+
'12': '12',
|
|
73
|
+
},
|
|
74
|
+
zIndex: {
|
|
75
|
+
'/1': -1,
|
|
76
|
+
},
|
|
77
|
+
textDecoration: {
|
|
78
|
+
'dotted': 'dotted',
|
|
79
|
+
},
|
|
80
|
+
opacity: {
|
|
81
|
+
'85': '0.85',
|
|
82
|
+
}
|
|
83
|
+
},
|
|
84
|
+
|
|
85
|
+
|
|
86
|
+
},
|
|
87
|
+
variants: {
|
|
88
|
+
extend: {
|
|
89
|
+
textDecoration: ['active'],
|
|
90
|
+
backgroundColor: ['active'],
|
|
91
|
+
borderColor: ['active']
|
|
92
|
+
}
|
|
93
|
+
},
|
|
94
|
+
// corePlugins: [
|
|
95
|
+
// 'animation',
|
|
96
|
+
// 'backgroundColor',
|
|
97
|
+
// 'backgroundImage',
|
|
98
|
+
// 'borderColor',
|
|
99
|
+
// 'divideColor',
|
|
100
|
+
// 'gradientColorStops',
|
|
101
|
+
// 'placeholderColor',
|
|
102
|
+
// 'preflight',
|
|
103
|
+
// 'ringColor',
|
|
104
|
+
// 'ringOffsetColor',
|
|
105
|
+
// 'ringOffsetWidth',
|
|
106
|
+
// 'ringOpacity',
|
|
107
|
+
// 'ringWidth',
|
|
108
|
+
// 'textColor',
|
|
109
|
+
// 'transitionProperty',
|
|
110
|
+
// ],
|
|
111
|
+
};
|
package/dist/base/base.css
DELETED
|
File without changes
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
.govgr-main-wrapper{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));row-gap:4rem}@media (min-width:768px){.govgr-main-wrapper{grid-template-columns:repeat(3,minmax(0,1fr));gap:3rem}}.govgr-grid-column-two-thirds{grid-column:span 2/span 2}.govgr-grid-column-one-third{grid-column:span 1/span 1;display:flex;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;flex-direction:column;flex-wrap:wrap}@media (min-width:768px){.govgr-grid-column-one-third{position:-webkit-sticky;position:sticky;top:2rem}}
|