@digigov/css 0.8.2 → 0.9.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 +21 -0
- package/CHANGELOG.md +11 -1
- package/dist/base/index.css +2 -2
- package/dist/base.css +2 -2
- 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/components/accordion.css +1 -1
- package/src/components/{breadcrumps.css → breadcrumbs.css} +2 -1
- package/src/components/button.css +13 -14
- package/src/components/filter.css +25 -48
- package/src/components/index.css +3 -2
- package/src/components/modal.css +1 -1
- package/src/components/nav.css +40 -33
- package/src/components/svg-icons.css +44 -0
- package/src/components/typography.css +4 -0
- package/src/pages/admin-filtering-data.js +15 -10
- package/src/pages/index.js +17 -25
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
svg, .govgr-svg-icon {
|
|
2
|
+
@apply h-4 w-4 inline transition-all;
|
|
3
|
+
fill: var(--color-base-content);
|
|
4
|
+
}
|
|
5
|
+
.govgr-svg-icon--dark {
|
|
6
|
+
fill: var(--color-base-content) !important;
|
|
7
|
+
}
|
|
8
|
+
.govgr-svg-icon--light {
|
|
9
|
+
fill: var(--color-white) !important;
|
|
10
|
+
}
|
|
11
|
+
.govgr-svg-icon--gray {
|
|
12
|
+
fill: var(--color-gray-200) !important;
|
|
13
|
+
}
|
|
14
|
+
.govgr-svg-icon--primary {
|
|
15
|
+
fill: var(--color-primary) !important;
|
|
16
|
+
}
|
|
17
|
+
.govgr-svg-icon--success {
|
|
18
|
+
fill: var(--color-success) !important;
|
|
19
|
+
}
|
|
20
|
+
.govgr-svg-icon--warning {
|
|
21
|
+
fill: var(--color-warning) !important;
|
|
22
|
+
}
|
|
23
|
+
.govgr-svg-icon--error {
|
|
24
|
+
fill: var(--color-error) !important;
|
|
25
|
+
}
|
|
26
|
+
.govgr-svg-icon--focus {
|
|
27
|
+
fill: var(--color-focus) !important;
|
|
28
|
+
}
|
|
29
|
+
.govgr-svg-icon--link {
|
|
30
|
+
fill: var(--color-link) !important;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.govgr-svg-icon--s {
|
|
34
|
+
@apply h-3 w-3;
|
|
35
|
+
}
|
|
36
|
+
.govgr-svg-icon--m {
|
|
37
|
+
@apply h-4 w-4;
|
|
38
|
+
}
|
|
39
|
+
.govgr-svg-icon--l {
|
|
40
|
+
@apply h-6 w-6;
|
|
41
|
+
}
|
|
42
|
+
.govgr-svg-icon--xl {
|
|
43
|
+
@apply h-10 w-10;
|
|
44
|
+
}
|
|
@@ -18,11 +18,10 @@ export default function Home() {
|
|
|
18
18
|
<label className="govgr-label"> Αναζήτηση με λέξη-κλειδί </label>
|
|
19
19
|
<div className="govgr-search">
|
|
20
20
|
<input className="govgr-input" type="text" id="business-name" name="business-name" />
|
|
21
|
-
<button className="govgr-btn govgr-input__search-
|
|
22
|
-
<
|
|
23
|
-
<
|
|
24
|
-
|
|
25
|
-
</div>
|
|
21
|
+
<button className="govgr-btn govgr-input__search-btn">
|
|
22
|
+
<svg className="govgr-search-icon" focusable="false" viewBox="0 0 24 24" aria-hidden="true" >
|
|
23
|
+
<path d="M22,19.9l-5.4-5.4c0.9-1.3,1.4-2.8,1.4-4.5c0-4.4-3.6-8-8-8s-8,3.6-8,8s3.6,8,8,8c1.7,0,3.2-0.5,4.5-1.4l5.4,5.4L22,19.9z M10,15c-2.8,0-5-2.2-5-5s2.2-5,5-5s5,2.2,5,5S12.8,15,10,15z"/>
|
|
24
|
+
</svg>
|
|
26
25
|
</button>
|
|
27
26
|
</div>
|
|
28
27
|
</div>
|
|
@@ -32,8 +31,8 @@ export default function Home() {
|
|
|
32
31
|
<div className="govgr-filter__heading">
|
|
33
32
|
<a className="govgr-link govgr-filter__close-link" href="#">
|
|
34
33
|
Κλείσιμο
|
|
35
|
-
<
|
|
36
|
-
|
|
34
|
+
<svg class="govgr-close-icon" focusable="true" viewBox="0 0 24 24" aria-hidden="true" > <polygon points="14.4,11.8 22,4.2 19.7,1.8 12,9.4 4.4,1.8 2,4.2 9.7,11.9 2.1,19.5 4.4,21.9 12.1,14.3 19.7,21.9 22.1,19.5 " /></svg>
|
|
35
|
+
</a>
|
|
37
36
|
<h3 className="govgr-heading-m">Φίλτρα</h3>
|
|
38
37
|
</div>
|
|
39
38
|
<div className="govgr-filter__content">
|
|
@@ -51,9 +50,15 @@ export default function Home() {
|
|
|
51
50
|
</div>
|
|
52
51
|
<h4 className="govgr-chip--heading">Περιοχή</h4>
|
|
53
52
|
<ul className="govgr-chips">
|
|
54
|
-
<li><a className="govgr-chip" href="#">Άλιμος
|
|
55
|
-
|
|
56
|
-
|
|
53
|
+
<li><a className="govgr-chip" href="#">Άλιμος
|
|
54
|
+
<svg className="govgr-close-icon" focusable="true" viewBox="0 0 24 24" aria-hidden="true" > <polygon points="14.4,11.8 22,4.2 19.7,1.8 12,9.4 4.4,1.8 2,4.2 9.7,11.9 2.1,19.5 4.4,21.9 12.1,14.3 19.7,21.9 22.1,19.5 " /></svg>
|
|
55
|
+
</a></li>
|
|
56
|
+
<li><a className="govgr-chip" href="#">Πετρούπολη <div className="govgr-chip--x-icon">
|
|
57
|
+
<svg className="govgr-close-icon" focusable="true" viewBox="0 0 24 24" aria-hidden="true" > <polygon points="14.4,11.8 22,4.2 19.7,1.8 12,9.4 4.4,1.8 2,4.2 9.7,11.9 2.1,19.5 4.4,21.9 12.1,14.3 19.7,21.9 22.1,19.5 " /></svg>
|
|
58
|
+
</div> </a></li>
|
|
59
|
+
<li><a className="govgr-chip" href="#">Δροσιά <div className="govgr-chip--x-icon">
|
|
60
|
+
<svg className="govgr-close-icon" focusable="true" viewBox="0 0 24 24" aria-hidden="true" > <polygon points="14.4,11.8 22,4.2 19.7,1.8 12,9.4 4.4,1.8 2,4.2 9.7,11.9 2.1,19.5 4.4,21.9 12.1,14.3 19.7,21.9 22.1,19.5 " /></svg>
|
|
61
|
+
</div> </a></li>
|
|
57
62
|
</ul>
|
|
58
63
|
</div>
|
|
59
64
|
<div className="govgr-filter__options">
|
package/src/pages/index.js
CHANGED
|
@@ -7,11 +7,9 @@ export default function Home() {
|
|
|
7
7
|
<header className="govgr-header">
|
|
8
8
|
<div className="govgr-header-container">
|
|
9
9
|
<img className="govgr-header-logo" src="https://www.gov.gr/gov_gr_logo.svg" />
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
<div class="govgr-burger-menu__line3"></div>
|
|
14
|
-
</div>
|
|
10
|
+
<svg class="govgr-burger-icon govgr-burger-icon--active" focusable="true" viewBox="0 0 24 24" aria-hidden="true" >
|
|
11
|
+
<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"/>
|
|
12
|
+
</svg>
|
|
15
13
|
</div>
|
|
16
14
|
</header>
|
|
17
15
|
<nav className="govgr-horizontal-nav test-header-nav">
|
|
@@ -26,12 +24,10 @@ export default function Home() {
|
|
|
26
24
|
</nav>
|
|
27
25
|
<header className="govgr-header">
|
|
28
26
|
<div className="govgr-header__container">
|
|
29
|
-
|
|
30
|
-
<
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
<div className="govgr-burger-menu__line3"></div>
|
|
34
|
-
</div>
|
|
27
|
+
<img className="govgr-header-logo" src="https://www.gov.gr/gov_gr_logo.svg" />
|
|
28
|
+
<svg class="govgr-burger-icon" focusable="true" viewBox="0 0 24 24" aria-hidden="true" >
|
|
29
|
+
<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"/>
|
|
30
|
+
</svg>
|
|
35
31
|
</div>
|
|
36
32
|
</header>
|
|
37
33
|
<nav className="govgr-horizontal-nav">
|
|
@@ -43,6 +39,10 @@ export default function Home() {
|
|
|
43
39
|
</div>
|
|
44
40
|
</nav>
|
|
45
41
|
|
|
42
|
+
<svg class="govgr-burger-icon govgr-burger-icon--active" focusable="true" viewBox="0 0 24 24" aria-hidden="true" >
|
|
43
|
+
<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"/>
|
|
44
|
+
</svg>
|
|
45
|
+
|
|
46
46
|
|
|
47
47
|
{/*new className: "govgr-masthead" -->
|
|
48
48
|
new className: "govgr-background-dark" */}
|
|
@@ -66,7 +66,7 @@ export default function Home() {
|
|
|
66
66
|
|
|
67
67
|
<button className="govgr-btn govgr-btn-primary">
|
|
68
68
|
Συνέχεια
|
|
69
|
-
<
|
|
69
|
+
<svg viewBox="0 0 24 24" class="govgr-arrow--right" focusable="false" aria-hidden="true"> <path d="M8.5,2L6.1,4.3l7.6,7.7l-7.6,7.6L8.5,22l10-10L8.5,2z"/> </svg>
|
|
70
70
|
</button>
|
|
71
71
|
<button className="govgr-btn govgr-btn-secondary">Αποθήκευση</button>
|
|
72
72
|
<button className="govgr-btn govgr-btn-warning">Ακύρωση</button>
|
|
@@ -123,23 +123,21 @@ export default function Home() {
|
|
|
123
123
|
|
|
124
124
|
<button className="govgr-btn govgr-btn-primary govgr-btn-cta">
|
|
125
125
|
Είσοδος στην υπηρεσία
|
|
126
|
-
<
|
|
126
|
+
<svg viewBox="0 0 24 24" class="govgr-arrow--right" focusable="false" aria-hidden="true"> <path d="M8.5,2L6.1,4.3l7.6,7.7l-7.6,7.6L8.5,22l10-10L8.5,2z"/> </svg>
|
|
127
127
|
</button>
|
|
128
128
|
<div className="govgr-button-group">
|
|
129
129
|
<button className="govgr-btn govgr-btn-primary">
|
|
130
130
|
Συνέχεια
|
|
131
|
-
{/*<span className="right-arrow"></span> */}
|
|
132
131
|
</button>
|
|
133
132
|
<button className="govgr-btn govgr-btn-secondary">Αποθήκευση</button>
|
|
134
133
|
<button className="govgr-btn govgr-btn-warning">Ακύρωση</button>
|
|
135
134
|
</div>
|
|
136
135
|
|
|
137
136
|
<a href="#" className="govgr-back-link">
|
|
138
|
-
<
|
|
137
|
+
<svg class="govgr-caret--left" viewBox="0 0 24 24" aria-hidden="true"><path d="M18,22V2L6,12L18,22z"/></svg>
|
|
139
138
|
Πίσω
|
|
140
139
|
</a>
|
|
141
140
|
<br />
|
|
142
|
-
{/*<button className="govgr-btn-back"><span className="back-arrow"></span> Πίσω</button> */}
|
|
143
141
|
|
|
144
142
|
<div className="govgr-breadcrumbs">
|
|
145
143
|
<ol className="govgr-breadcrumbs__list">
|
|
@@ -418,18 +416,12 @@ export default function Home() {
|
|
|
418
416
|
<h1 className="govgr-heading-xl">Καταχώρηση φόρμας</h1>
|
|
419
417
|
|
|
420
418
|
<p className="p">Παρακάτω, θα οδηγηθείτε στην σελίδα της καταχώρησης μιας φόρμας. Εμφανίζονται ενδεικτικά παραδείγματα.</p>
|
|
421
|
-
{/* <button className="govgr-btn-primary govgr-btn-cta">
|
|
422
|
-
Συμπληρώστε την φόρμα
|
|
423
|
-
<span className="right-arrow"></span>
|
|
424
|
-
</button> */}
|
|
425
419
|
|
|
426
|
-
<a href="/form" className="govgr-btn govgr-btn-primary govgr-btn-cta"
|
|
427
|
-
|
|
420
|
+
<a href="/form" className="govgr-btn govgr-btn-primary govgr-btn-cta">
|
|
421
|
+
Συμπληρώστε την φόρμα
|
|
422
|
+
<svg viewBox="0 0 24 24" class="govgr-arrow--right" focusable="false" aria-hidden="true"> <path d="M8.5,2L6.1,4.3l7.6,7.7l-7.6,7.6L8.5,22l10-10L8.5,2z"/> </svg>
|
|
428
423
|
</a>
|
|
429
424
|
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
425
|
</div>
|
|
434
426
|
</div>
|
|
435
427
|
</div>
|