@digigov/css 0.12.0 → 0.14.0
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 +41 -0
- package/CHANGELOG.md +26 -1
- package/colors/color-values.js +2 -0
- package/dist/base/index.css +3 -3
- package/dist/base.css +3 -3
- package/dist/base.js +1 -1
- package/dist/components.css +1 -1
- package/dist/components.js +1 -1
- package/dist/digigov.css +3 -3
- package/package.json +1 -1
- package/src/base/index.css +4 -1
- package/src/components/accordion.css +1 -1
- package/src/components/button.css +31 -35
- package/src/components/dropdown.css +83 -0
- package/src/components/form.css +1 -1
- package/src/components/index.css +1 -0
- package/src/components/layout.css +4 -1
- package/src/components/pagination.css +11 -9
- package/src/components/svg-icons.css +33 -0
- package/src/components/typography.css +2 -1
- package/src/pages/dropdown.js +249 -0
- package/src/pages/pagination.js +20 -19
- package/tailwind.config.js +10 -1
|
@@ -2,6 +2,39 @@
|
|
|
2
2
|
@apply h-4 w-4 inline transition-all;
|
|
3
3
|
fill: var(--color-base-content);
|
|
4
4
|
}
|
|
5
|
+
.govgr-btn-primary, .govgr-btn-warning {
|
|
6
|
+
.govgr-svg-icon {
|
|
7
|
+
fill: var(--color-white);
|
|
8
|
+
}
|
|
9
|
+
.govgr-svg-icon--more-vert {
|
|
10
|
+
@apply h-6 w-6 md:h-8 md:w-8;
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
.govgr-btn-secondary {
|
|
14
|
+
.govgr-svg-icon {
|
|
15
|
+
fill: var(--color-base-content);
|
|
16
|
+
}
|
|
17
|
+
.govgr-svg-icon--more-vert {
|
|
18
|
+
@apply h-6 w-6;
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.govgr-link {
|
|
23
|
+
.govgr-svg-icon {
|
|
24
|
+
fill:var(--color-link);
|
|
25
|
+
}
|
|
26
|
+
&:hover {
|
|
27
|
+
.govgr-svg-icon {
|
|
28
|
+
fill:var(--color-link-hover);
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
&:focus {
|
|
32
|
+
.govgr-svg-icon {
|
|
33
|
+
fill:var(--color-link-active);
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
}
|
|
37
|
+
}
|
|
5
38
|
.govgr-svg-icon--dark {
|
|
6
39
|
fill: var(--color-base-content) !important;
|
|
7
40
|
}
|
|
@@ -92,7 +92,8 @@
|
|
|
92
92
|
}
|
|
93
93
|
|
|
94
94
|
.govgr-link {
|
|
95
|
-
@apply text-link hover:text-link-hover focus:text-link-active underline items-center;
|
|
95
|
+
@apply text-link hover:text-link-hover focus:text-link-active underline items-center cursor-pointer flex gap-2;
|
|
96
|
+
|
|
96
97
|
.right-arrow::after {
|
|
97
98
|
content: "";
|
|
98
99
|
@apply w-06rem h-06rem bg-primary rounded-xl border-white block border-t-2_5 border-r-2_5 ml-3 transform rotate-45;
|
|
@@ -0,0 +1,249 @@
|
|
|
1
|
+
export default function Dropdown() {
|
|
2
|
+
return (
|
|
3
|
+
<div className="example">
|
|
4
|
+
|
|
5
|
+
<h1 className="govgr-heading-xl">Dropdowns</h1>
|
|
6
|
+
|
|
7
|
+
<p className="govgr-body">
|
|
8
|
+
So, let's see some implementations for the dropdown.
|
|
9
|
+
</p>
|
|
10
|
+
<p className="govgr-body">
|
|
11
|
+
First, we can add to the dropdown__button our button or link classes. Also, we can add svg icon after the text of the button.
|
|
12
|
+
Some examples:
|
|
13
|
+
</p>
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
<h3 className="govgr-heading-s">Primary button with arrow icon</h3>
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
<details className="govgr-dropdown">
|
|
20
|
+
<summary className="govgr-dropdown__button govgr-btn govgr-btn-primary">
|
|
21
|
+
Ενέργειες
|
|
22
|
+
<svg aria-hidden="true" className="govgr-svg-icon govgr-arrow--down" focusable="false" viewBox="0 0 24 24">
|
|
23
|
+
<path d="M22,8.2l-2.3-2.4L12,13.4L4.4,5.8L2,8.2l10,10L22,8.2z"/>
|
|
24
|
+
</svg>
|
|
25
|
+
</summary>
|
|
26
|
+
<div className="govgr-dropdown__content">
|
|
27
|
+
<p className="govgr-body">
|
|
28
|
+
Χρειάζεται να γνωρίζουμε τη διεύθυνση κατοικίας σας ώστε να μπορούμε να σας στείλουμε τα έντυπα μέσω ταχυδρομείου. Σε περίπτωση που δεν μπορείτε να παρέχετε μια έγκυρη διεύθυνση κατοικίας, παρακαλούμε επικοινωνήστε μαζί μας.
|
|
29
|
+
</p>
|
|
30
|
+
</div>
|
|
31
|
+
</details>
|
|
32
|
+
|
|
33
|
+
<hr className="govgr-section-break govgr-section-break--m"/>
|
|
34
|
+
<h4 className="govgr-heading-s">Secondary button with more icon and nav</h4>
|
|
35
|
+
|
|
36
|
+
<details className="govgr-dropdown">
|
|
37
|
+
<summary className="govgr-dropdown__button govgr-btn govgr-btn-secondary">
|
|
38
|
+
Ενέργειες
|
|
39
|
+
<svg aria-hidden="true" className="govgr-svg-icon govgr-svg-icon--more-vert" focusable="false" viewBox="0 0 24 24">
|
|
40
|
+
<circle cx="12" cy="5" r="2" />
|
|
41
|
+
<circle cx="12" cy="12" r="2" />
|
|
42
|
+
<circle cx="12" cy="19" r="2" />
|
|
43
|
+
</svg>
|
|
44
|
+
</summary>
|
|
45
|
+
<div className="govgr-dropdown__content">
|
|
46
|
+
<nav className="govgr-vertical-nav">
|
|
47
|
+
<a href="#" className="govgr-link govgr-vertical-nav__item"> Επεξεργασία </a>
|
|
48
|
+
<a href="#" className="govgr-link govgr-vertical-nav__item"> Μετακίνηση </a>
|
|
49
|
+
<a href="#" className="govgr-link govgr-vertical-nav__item"> Οριστική διαγραφή</a>
|
|
50
|
+
</nav>
|
|
51
|
+
</div>
|
|
52
|
+
</details>
|
|
53
|
+
|
|
54
|
+
<hr className="govgr-section-break govgr-section-break--m"/>
|
|
55
|
+
<h3 className="govgr-heading-s">Link with more icon</h3>
|
|
56
|
+
|
|
57
|
+
<details className="govgr-dropdown">
|
|
58
|
+
<summary className="govgr-dropdown__button govgr-link">
|
|
59
|
+
Ενέργειες
|
|
60
|
+
<svg aria-hidden="true" className="govgr-svg-icon govgr-svg-icon--more-vert" focusable="false" viewBox="0 0 24 24">
|
|
61
|
+
<circle cx="12" cy="5" r="2" /><circle cx="12" cy="12" r="2" /><circle cx="12" cy="19" r="2" />
|
|
62
|
+
</svg>
|
|
63
|
+
</summary>
|
|
64
|
+
<div className="govgr-dropdown__content">
|
|
65
|
+
<p className="govgr-body">
|
|
66
|
+
Χρειάζεται να γνωρίζουμε τη διεύθυνση κατοικίας σας ώστε να μπορούμε να σας στείλουμε τα έντυπα μέσω ταχυδρομείου. Σε περίπτωση που δεν μπορείτε να παρέχετε μια έγκυρη διεύθυνση κατοικίας, παρακαλούμε επικοινωνήστε μαζί μας.
|
|
67
|
+
</p>
|
|
68
|
+
</div>
|
|
69
|
+
</details>
|
|
70
|
+
|
|
71
|
+
<hr className="govgr-section-break govgr-section-break--m"/>
|
|
72
|
+
<h3 className="govgr-heading-m">Secondary button, with rotating arrow</h3>
|
|
73
|
+
<p className="govgr-body">
|
|
74
|
+
We can implement a prop at dropdown__button that adds a rotating arrow to the button, like this:
|
|
75
|
+
</p>
|
|
76
|
+
|
|
77
|
+
<details className="govgr-dropdown">
|
|
78
|
+
<summary className="govgr-dropdown__button govgr-btn govgr-btn-secondary govgr-dropdown__button--arrow">
|
|
79
|
+
Ενέργειες
|
|
80
|
+
<svg aria-hidden="true" className="govgr-svg-icon govgr-arrow--down" focusable="false" viewBox="0 0 24 24">
|
|
81
|
+
<path d="M22,8.2l-2.3-2.4L12,13.4L4.4,5.8L2,8.2l10,10L22,8.2z"/>
|
|
82
|
+
</svg>
|
|
83
|
+
</summary>
|
|
84
|
+
<div className="govgr-dropdown__content">
|
|
85
|
+
<div className="govgr-field">
|
|
86
|
+
<label className="govgr-label">
|
|
87
|
+
<span>Όνομα επιχείρησης</span>
|
|
88
|
+
<input className="govgr-input" type="text" name="business-name" />
|
|
89
|
+
</label>
|
|
90
|
+
</div>
|
|
91
|
+
<hr className="govgr-section-break govgr-section-break--s govgr-section-break--visible"/>
|
|
92
|
+
|
|
93
|
+
<nav className="govgr-vertical-nav">
|
|
94
|
+
<a href="#" className="govgr-link govgr-vertical-nav__item"> Επεξεργασία </a>
|
|
95
|
+
<a href="#" className="govgr-link govgr-vertical-nav__item"> Μετακίνηση </a>
|
|
96
|
+
<a href="#" className="govgr-link govgr-vertical-nav__item"> Οριστική διαγραφή</a>
|
|
97
|
+
</nav>
|
|
98
|
+
|
|
99
|
+
<hr className="govgr-section-break govgr-section-break--s"/>
|
|
100
|
+
<hr className="govgr-section-break govgr-section-break--s govgr-section-break--visible"/>
|
|
101
|
+
|
|
102
|
+
<button className="govgr-btn govgr-btn-primary">Αποθήκευση</button>
|
|
103
|
+
|
|
104
|
+
</div>
|
|
105
|
+
</details>
|
|
106
|
+
|
|
107
|
+
<p className="govgr-body">
|
|
108
|
+
Also, the content can be a compination of things: inputs, lists, text, buttons.
|
|
109
|
+
</p>
|
|
110
|
+
<hr className="govgr-section-break govgr-section-break--m"/>
|
|
111
|
+
<h4 className="govgr-heading-m">Primary button without icon, position UP</h4>
|
|
112
|
+
|
|
113
|
+
<details className="govgr-dropdown govgr-dropdown--up">
|
|
114
|
+
<summary className="govgr-dropdown__button govgr-btn govgr-btn-primary">
|
|
115
|
+
Ενέργειες
|
|
116
|
+
</summary>
|
|
117
|
+
<div className="govgr-dropdown__content">
|
|
118
|
+
<p className="govgr-body">
|
|
119
|
+
Χρειάζεται να γνωρίζουμε τη διεύθυνση κατοικίας σας ώστε να μπορούμε να σας στείλουμε τα έντυπα μέσω ταχυδρομείου. Σε περίπτωση που δεν μπορείτε να παρέχετε μια έγκυρη διεύθυνση κατοικίας, παρακαλούμε επικοινωνήστε μαζί μας.
|
|
120
|
+
</p>
|
|
121
|
+
</div>
|
|
122
|
+
</details>
|
|
123
|
+
|
|
124
|
+
<h3 className="govgr-heading-m">Button groups and dropdown combinations</h3>
|
|
125
|
+
|
|
126
|
+
<hr className="govgr-section-break govgr-section-break--m"/>
|
|
127
|
+
<h4 className="govgr-heading-s">Links </h4>
|
|
128
|
+
|
|
129
|
+
<div className="govgr-button-group">
|
|
130
|
+
|
|
131
|
+
<details className="govgr-dropdown govgr-dropdown--up">
|
|
132
|
+
<summary className="govgr-dropdown__button govgr-link">
|
|
133
|
+
Ενέργειες
|
|
134
|
+
<svg aria-hidden="true" className="govgr-svg-icon govgr-arrow--down" focusable="false" viewBox="0 0 24 24">
|
|
135
|
+
<path d="M22,8.2l-2.3-2.4L12,13.4L4.4,5.8L2,8.2l10,10L22,8.2z"/>
|
|
136
|
+
</svg>
|
|
137
|
+
</summary>
|
|
138
|
+
<div className="govgr-dropdown__content">
|
|
139
|
+
<p className="govgr-body">
|
|
140
|
+
Χρειάζεται να γνωρίζουμε τη διεύθυνση κατοικίας σας ώστε να μπορούμε να σας στείλουμε τα έντυπα μέσω ταχυδρομείου. Σε περίπτωση που δεν μπορείτε να παρέχετε μια έγκυρη διεύθυνση κατοικίας, παρακαλούμε επικοινωνήστε μαζί μας.
|
|
141
|
+
</p>
|
|
142
|
+
</div>
|
|
143
|
+
</details>
|
|
144
|
+
|
|
145
|
+
<details className="govgr-dropdown govgr-dropdown--left govgr-dropdown--up">
|
|
146
|
+
<summary className="govgr-dropdown__button govgr-link govgr-dropdown__button--arrow">
|
|
147
|
+
Ενέργειες
|
|
148
|
+
<svg aria-hidden="true" className="govgr-svg-icon govgr-arrow--down" focusable="false" viewBox="0 0 24 24">
|
|
149
|
+
<path d="M22,8.2l-2.3-2.4L12,13.4L4.4,5.8L2,8.2l10,10L22,8.2z"/>
|
|
150
|
+
</svg>
|
|
151
|
+
</summary>
|
|
152
|
+
<div className="govgr-dropdown__content">
|
|
153
|
+
<p className="govgr-body">
|
|
154
|
+
Χρειάζεται να γνωρίζουμε τη διεύθυνση κατοικίας σας ώστε να μπορούμε να σας στείλουμε τα έντυπα μέσω ταχυδρομείου. Σε περίπτωση που δεν μπορείτε να παρέχετε μια έγκυρη διεύθυνση κατοικίας, παρακαλούμε επικοινωνήστε μαζί μας.
|
|
155
|
+
</p>
|
|
156
|
+
</div>
|
|
157
|
+
</details>
|
|
158
|
+
|
|
159
|
+
</div>
|
|
160
|
+
|
|
161
|
+
<hr className="govgr-section-break govgr-section-break--m"/>
|
|
162
|
+
<h3 className="govgr-heading-m">A group of buttons and dropdowns with icons and various directions</h3>
|
|
163
|
+
|
|
164
|
+
<div className="govgr-button-group">
|
|
165
|
+
|
|
166
|
+
<button className="govgr-btn govgr-btn-secondary">Αποθήκευση</button>
|
|
167
|
+
|
|
168
|
+
<details className="govgr-dropdown govgr-dropdown--up">
|
|
169
|
+
<summary className="govgr-dropdown__button govgr-btn govgr-btn-secondary">
|
|
170
|
+
Ενέργειες
|
|
171
|
+
<svg aria-hidden="true" className="govgr-svg-icon govgr-arrow--down" focusable="false" viewBox="0 0 24 24">
|
|
172
|
+
<path d="M22,8.2l-2.3-2.4L12,13.4L4.4,5.8L2,8.2l10,10L22,8.2z"/>
|
|
173
|
+
</svg>
|
|
174
|
+
</summary>
|
|
175
|
+
<div className="govgr-dropdown__content">
|
|
176
|
+
<p className="govgr-body">
|
|
177
|
+
Χρειάζεται να γνωρίζουμε τη διεύθυνση κατοικίας σας ώστε να μπορούμε να σας στείλουμε τα έντυπα μέσω ταχυδρομείου. Σε περίπτωση που δεν μπορείτε να παρέχετε μια έγκυρη διεύθυνση κατοικίας, παρακαλούμε επικοινωνήστε μαζί μας.
|
|
178
|
+
</p>
|
|
179
|
+
</div>
|
|
180
|
+
</details>
|
|
181
|
+
|
|
182
|
+
<details className="govgr-dropdown">
|
|
183
|
+
<summary className="govgr-dropdown__button govgr-btn govgr-btn-secondary">
|
|
184
|
+
<svg aria-hidden="true" className="govgr-svg-icon govgr-svg-icon--more-vert" focusable="false" viewBox="0 0 24 24">
|
|
185
|
+
<circle cx="12" cy="5" r="2" /><circle cx="12" cy="12" r="2" /><circle cx="12" cy="19" r="2" />
|
|
186
|
+
</svg>
|
|
187
|
+
</summary>
|
|
188
|
+
<div className="govgr-dropdown__content">
|
|
189
|
+
<nav className="govgr-vertical-nav">
|
|
190
|
+
<a href="#" className="govgr-link govgr-vertical-nav__item"> Επεξεργασία </a>
|
|
191
|
+
<a href="#" className="govgr-link govgr-vertical-nav__item"> Μετακίνηση </a>
|
|
192
|
+
<a href="#" className="govgr-link govgr-vertical-nav__item"> Οριστική διαγραφή</a>
|
|
193
|
+
</nav>
|
|
194
|
+
</div>
|
|
195
|
+
</details>
|
|
196
|
+
|
|
197
|
+
<details className="govgr-dropdown govgr-dropdown--left ">
|
|
198
|
+
<summary className="govgr-dropdown__button govgr-btn govgr-btn-secondary">
|
|
199
|
+
<svg aria-hidden="true" className="govgr-svg-icon govgr-svg-icon--more-vert" focusable="false" viewBox="0 0 24 24">
|
|
200
|
+
<rect id="govgr-burger-icon__line-1" width="20" height="3.3" /> <rect id="govgr-burger-icon__line-2" width="20" height="3.3" /> <rect id="govgr-burger-icon__line-3" width="20" height="3.3" />
|
|
201
|
+
</svg>
|
|
202
|
+
</summary>
|
|
203
|
+
<div className="govgr-dropdown__content">
|
|
204
|
+
<nav className="govgr-vertical-nav">
|
|
205
|
+
<a href="#" className="govgr-link govgr-vertical-nav__item"> Επεξεργασία </a>
|
|
206
|
+
<a href="#" className="govgr-link govgr-vertical-nav__item"> Μετακίνηση </a>
|
|
207
|
+
<a href="#" className="govgr-link govgr-vertical-nav__item"> Οριστική διαγραφή</a>
|
|
208
|
+
</nav>
|
|
209
|
+
</div>
|
|
210
|
+
</details>
|
|
211
|
+
|
|
212
|
+
<details className="govgr-dropdown govgr-dropdown--left govgr-dropdown--up">
|
|
213
|
+
<summary className="govgr-dropdown__button govgr-btn govgr-btn-secondary">
|
|
214
|
+
<svg aria-hidden="true" className="govgr-svg-icon govgr-svg-icon--caret" focusable="false" viewBox="0 0 24 24">
|
|
215
|
+
<path d="M22,6H2l10,12L22,6z" />
|
|
216
|
+
</svg>
|
|
217
|
+
</summary>
|
|
218
|
+
<div className="govgr-dropdown__content">
|
|
219
|
+
<nav className="govgr-vertical-nav">
|
|
220
|
+
<a href="#" className="govgr-link govgr-vertical-nav__item"> Επεξεργασία </a>
|
|
221
|
+
<a href="#" className="govgr-link govgr-vertical-nav__item"> Μετακίνηση </a>
|
|
222
|
+
<a href="#" className="govgr-link govgr-vertical-nav__item"> Οριστική διαγραφή</a>
|
|
223
|
+
</nav>
|
|
224
|
+
</div>
|
|
225
|
+
</details>
|
|
226
|
+
</div>
|
|
227
|
+
|
|
228
|
+
<hr className="govgr-section-break govgr-section-break--l"/>
|
|
229
|
+
|
|
230
|
+
<footer className="govgr-footer" role="contentinfo">
|
|
231
|
+
<div className="govgr-width-container">
|
|
232
|
+
<div className="govgr-footer__meta">
|
|
233
|
+
<div className="govgr-footer__meta-item govgr-footer__meta-item--grow">
|
|
234
|
+
<div className="govgr-footer__content">
|
|
235
|
+
<p className="govgr-footer__licence-description">
|
|
236
|
+
© Copyright 2021 - Υλοποίηση από το <a href="https://mindigital.gr/" target="_blank" rel="noreferrer noopener" className="govgr-link"> Υπουργείο Ψηφιακής Διακυβέρνησης <span className="govgr-visually-hidden">(ανοίγει σε καινούρια καρτέλα) </span></a>
|
|
237
|
+
</p>
|
|
238
|
+
</div>
|
|
239
|
+
</div>
|
|
240
|
+
<div className="govgr-footer__meta-item">
|
|
241
|
+
<img className="govgr-footer__government-logo" src="/img/government-logo2.svg" />
|
|
242
|
+
</div>
|
|
243
|
+
</div>
|
|
244
|
+
</div>
|
|
245
|
+
</footer>
|
|
246
|
+
|
|
247
|
+
</div>
|
|
248
|
+
)
|
|
249
|
+
}
|
package/src/pages/pagination.js
CHANGED
|
@@ -2,33 +2,35 @@ export default function Pagination() {
|
|
|
2
2
|
return (
|
|
3
3
|
<div class="example">
|
|
4
4
|
<nav class="govgr-pagination" >
|
|
5
|
-
<p class="govgr-
|
|
5
|
+
<p class="govgr-pagination__label">Showing <b>10</b> to <b>20</b> of <b>300000000000</b> pages</p>
|
|
6
6
|
<ul class="govgr-pagination__list">
|
|
7
7
|
<li class="govgr-pagination__item">
|
|
8
8
|
<a class="govgr-link" href="">
|
|
9
9
|
<svg
|
|
10
10
|
aria-hidden="true"
|
|
11
|
-
className="govgr-arrow--left"
|
|
11
|
+
className=" govgr-svg-icon govgr-arrow--left"
|
|
12
12
|
focusable="false"
|
|
13
13
|
viewBox="0 0 24 24"
|
|
14
14
|
>
|
|
15
15
|
<path
|
|
16
16
|
d="M14.8,22l2.4-2.3L9.6,12l7.6-7.6L14.8,2l-10,10L14.8,22z"
|
|
17
17
|
/>
|
|
18
|
-
</svg
|
|
18
|
+
</svg><span class="govgr-visually-hidden"> set of pages</span></a>
|
|
19
19
|
</li>
|
|
20
|
+
|
|
20
21
|
<li class="govgr-pagination__item"><a class="govgr-link" href="/page=1">1</a></li>
|
|
21
|
-
<li class="govgr-pagination__item govgr-pagination__item--
|
|
22
|
+
<li class="govgr-pagination__item govgr-pagination__item--current">2</li>
|
|
22
23
|
<li class="govgr-pagination__item"><a class="govgr-link" href="/page=3">3</a></li>
|
|
23
24
|
<li class="govgr-pagination__item govgr-pagination__item--dots">...</li>
|
|
24
25
|
<li class="govgr-pagination__item"><a class="govgr-link" href="/page=5">5</a></li>
|
|
25
26
|
<li class="govgr-pagination__item"><a class="govgr-link" href="/page=6">6</a></li>
|
|
26
27
|
<li class="govgr-pagination__item"><a class="govgr-link" href="/page=7">7</a></li>
|
|
28
|
+
|
|
27
29
|
<li class="govgr-pagination__item">
|
|
28
|
-
<a class="govgr-link" href=""
|
|
30
|
+
<a class="govgr-link" href=""><span class="govgr-visually-hidden"> set of pages</span>
|
|
29
31
|
<svg
|
|
30
32
|
aria-hidden="true"
|
|
31
|
-
className="govgr-arrow--right"
|
|
33
|
+
className=" govgr-svg-icon govgr-arrow--right"
|
|
32
34
|
focusable="false"
|
|
33
35
|
viewBox="0 0 24 24"
|
|
34
36
|
>
|
|
@@ -38,17 +40,16 @@ export default function Pagination() {
|
|
|
38
40
|
</svg></a>
|
|
39
41
|
</li>
|
|
40
42
|
</ul>
|
|
41
|
-
<p class="govgr-pagination__results">Showing <b>10</b> to <b>20</b> of <b>300000000000</b> pages</p>
|
|
42
43
|
</nav>
|
|
43
44
|
|
|
44
45
|
<nav class="govgr-pagination" >
|
|
45
|
-
<p class="govgr-
|
|
46
|
+
<p class="govgr-pagination__label">Showing <b>10</b> to <b>20</b> of <b>30</b> pages</p>
|
|
46
47
|
<ul class="govgr-pagination__list">
|
|
47
48
|
<li class="govgr-pagination__item govgr-pagination__item--inactive">
|
|
48
49
|
<a class="govgr-link" href="">
|
|
49
50
|
<svg
|
|
50
51
|
aria-hidden="true"
|
|
51
|
-
className="govgr-arrow--left"
|
|
52
|
+
className=" govgr-svg-icon govgr-arrow--left"
|
|
52
53
|
focusable="false"
|
|
53
54
|
viewBox="0 0 24 24"
|
|
54
55
|
>
|
|
@@ -57,7 +58,7 @@ export default function Pagination() {
|
|
|
57
58
|
/>
|
|
58
59
|
</svg>Previous<span class="govgr-visually-hidden"> set of pages</span></a>
|
|
59
60
|
</li>
|
|
60
|
-
<li class="govgr-pagination__item govgr-pagination__item--
|
|
61
|
+
<li class="govgr-pagination__item govgr-pagination__item--current">1</li>
|
|
61
62
|
<li class="govgr-pagination__item"><a class="govgr-link" href="/page=1">2</a></li>
|
|
62
63
|
<li class="govgr-pagination__item"><a class="govgr-link" href="/page=3">3</a></li>
|
|
63
64
|
<li class="govgr-pagination__item govgr-pagination__item--dots">...</li>
|
|
@@ -66,7 +67,7 @@ export default function Pagination() {
|
|
|
66
67
|
<a class="govgr-link" href="">Next<span class="govgr-visually-hidden"> set of pages</span>
|
|
67
68
|
<svg
|
|
68
69
|
aria-hidden="true"
|
|
69
|
-
className="govgr-arrow--right"
|
|
70
|
+
className=" govgr-svg-icon govgr-arrow--right"
|
|
70
71
|
focusable="false"
|
|
71
72
|
viewBox="0 0 24 24"
|
|
72
73
|
>
|
|
@@ -76,17 +77,17 @@ export default function Pagination() {
|
|
|
76
77
|
</svg></a>
|
|
77
78
|
</li>
|
|
78
79
|
</ul>
|
|
79
|
-
|
|
80
|
+
|
|
80
81
|
</nav>
|
|
81
82
|
|
|
82
83
|
<nav class="govgr-pagination" >
|
|
83
|
-
<p class="govgr-
|
|
84
|
+
<p class="govgr-pagination__label">Showing <b>10</b> to <b>20</b> of <b>30</b> pages</p>
|
|
84
85
|
<ul class="govgr-pagination__list">
|
|
85
86
|
<li class="govgr-pagination__item govgr-pagination__item">
|
|
86
87
|
<a class="govgr-link" href="">
|
|
87
88
|
<svg
|
|
88
89
|
aria-hidden="true"
|
|
89
|
-
className="govgr-arrow--left"
|
|
90
|
+
className=" govgr-svg-icon govgr-arrow--left"
|
|
90
91
|
focusable="false"
|
|
91
92
|
viewBox="0 0 24 24"
|
|
92
93
|
>
|
|
@@ -95,18 +96,18 @@ export default function Pagination() {
|
|
|
95
96
|
/>
|
|
96
97
|
</svg>Previous<span class="govgr-visually-hidden"> set of pages</span></a>
|
|
97
98
|
</li>
|
|
98
|
-
<li class="govgr-pagination__item">1</li>
|
|
99
|
-
<li class="govgr-pagination__item"><a class="govgr-link" href="/page=
|
|
99
|
+
<li class="govgr-pagination__item"><a class="govgr-link" href="/page=1">1</a></li>
|
|
100
|
+
<li class="govgr-pagination__item"><a class="govgr-link" href="/page=2">2</a></li>
|
|
100
101
|
<li class="govgr-pagination__item"><a class="govgr-link" href="/page=3">3</a></li>
|
|
101
102
|
<li class="govgr-pagination__item govgr-pagination__item--dots">...</li>
|
|
102
103
|
<li class="govgr-pagination__item"><a class="govgr-link" href="/page=5">5</a></li>
|
|
103
104
|
<li class="govgr-pagination__item"><a class="govgr-link" href="/page=6">6</a></li>
|
|
104
|
-
<li class="govgr-pagination__item govgr-pagination__item--
|
|
105
|
+
<li class="govgr-pagination__item govgr-pagination__item--current">7</li>
|
|
105
106
|
<li class="govgr-pagination__item govgr-pagination__item--inactive">
|
|
106
107
|
<a class="govgr-link" href="">Next<span class="govgr-visually-hidden"> set of pages</span>
|
|
107
108
|
<svg
|
|
108
109
|
aria-hidden="true"
|
|
109
|
-
className="govgr-arrow--right"
|
|
110
|
+
className=" govgr-svg-icon govgr-arrow--right"
|
|
110
111
|
focusable="false"
|
|
111
112
|
viewBox="0 0 24 24"
|
|
112
113
|
>
|
|
@@ -116,7 +117,7 @@ export default function Pagination() {
|
|
|
116
117
|
</svg></a>
|
|
117
118
|
</li>
|
|
118
119
|
</ul>
|
|
119
|
-
|
|
120
|
+
|
|
120
121
|
</nav>
|
|
121
122
|
</div>
|
|
122
123
|
)
|
package/tailwind.config.js
CHANGED
|
@@ -35,7 +35,8 @@ module.exports = {
|
|
|
35
35
|
'06rem': '0.6rem'
|
|
36
36
|
},
|
|
37
37
|
width: {
|
|
38
|
-
'06rem': '0.6rem'
|
|
38
|
+
'06rem': '0.6rem',
|
|
39
|
+
'fit': 'fit-content'
|
|
39
40
|
|
|
40
41
|
},
|
|
41
42
|
minWidth: {
|
|
@@ -46,7 +47,12 @@ module.exports = {
|
|
|
46
47
|
'64': '16rem',
|
|
47
48
|
},
|
|
48
49
|
minHeight: {
|
|
50
|
+
'4': '1rem',
|
|
51
|
+
'6': '1.5rem',
|
|
52
|
+
'8': '2rem',
|
|
49
53
|
'10': '2.5rem',
|
|
54
|
+
'12': '3rem',
|
|
55
|
+
'14': '3.5rem',
|
|
50
56
|
},
|
|
51
57
|
maxWidth: {
|
|
52
58
|
'1/4': '25%',
|
|
@@ -83,6 +89,9 @@ module.exports = {
|
|
|
83
89
|
},
|
|
84
90
|
opacity: {
|
|
85
91
|
'85': '0.85',
|
|
92
|
+
},
|
|
93
|
+
margin: {
|
|
94
|
+
'15': '3.75rem',
|
|
86
95
|
}
|
|
87
96
|
},
|
|
88
97
|
|