@digigov/css 0.33.0 → 0.34.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.
Files changed (24) hide show
  1. package/defaultTheme/button.json +9 -3
  2. package/defaultTheme/footer.json +8 -0
  3. package/defaultTheme/form.json +15 -0
  4. package/defaultTheme/globals.json +71 -0
  5. package/defaultTheme/index.js +3 -7
  6. package/defaultTheme/misc.json +40 -0
  7. package/defaultTheme/typography.json +76 -21
  8. package/dist/base/index.css +3 -3
  9. package/dist/base.js +1 -1
  10. package/dist/components.js +1 -1
  11. package/dist/digigov.css +4 -4
  12. package/package.json +1 -1
  13. package/src/components/accessibility-menu.css +74 -0
  14. package/src/components/button.css +4 -3
  15. package/src/components/details.css +9 -2
  16. package/src/components/drawer.css +1 -1
  17. package/src/components/dropdown.css +6 -3
  18. package/src/components/filter.css +55 -21
  19. package/src/components/footer.css +4 -0
  20. package/src/components/form.css +13 -5
  21. package/src/components/index.css +1 -0
  22. package/src/components/nav.css +87 -71
  23. package/src/components/svg-icons.css +7 -4
  24. package/src/components/typography.css +31 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@digigov/css",
3
- "version": "0.33.0",
3
+ "version": "0.34.0",
4
4
  "description": "Digigov CSS - Tailwind CSS Components",
5
5
  "author": "GRNET Devs <devs@lists.grnet.gr>",
6
6
  "license": "BSD-2-Clause",
package/src/components/accessibility-menu.css ADDED
@@ -0,0 +1,74 @@
1
+ .govgr-accessibility-menu--left {
2
+ .govgr-accessibility-menu__btn {
3
+ @apply left-4;
4
+ }
5
+ .govgr-accessibility-menu__content {
6
+ @apply left-0;
7
+ }
8
+ }
9
+ .govgr-accessibility-menu--right {
10
+ .govgr-accessibility-menu__btn {
11
+ @apply right-4;
12
+ }
13
+ .govgr-accessibility-menu__content {
14
+ @apply right-0;
15
+ }
16
+ }
17
+ .govgr-accessibility-menu__btn {
18
+ @apply absolute bottom-4 bg-gray100;
19
+ @apply p-4 rounded-full !important;
20
+ box-shadow: 0px 2px 5px var(--color-shadow200);
21
+ &:hover {
22
+ @apply bg-gray200;
23
+ }
24
+ }
25
+ .govgr-accessibility-menu__content {
26
+ @apply bg-gray50 absolute top-0 bottom-0 p-4 flex flex-col max-w-md;
27
+ }
28
+
29
+ .govgr-accessibility-menu__header {
30
+ @apply inline-flex justify-between items-center mb-6 gap-2;
31
+ }
32
+ .govgr-accessibility-content__header__btn {
33
+ @apply flex flex-nowrap;
34
+ }
35
+ .govgr-accessibility-menu__body {
36
+ @apply overflow-y-scroll p-3 flex-grow;
37
+ }
38
+
39
+ .govgr-accessibility-menu__list {
40
+ @apply grid grid-cols-1 sm:grid-cols-2 gap-5;
41
+ }
42
+ .govgr-accessibility-menu__list-item {
43
+ @apply col-span-1;
44
+ }
45
+
46
+ .govgr-accessibility-menu__option-btn {
47
+ @apply flex flex-col gap-2 ;
48
+ @apply bg-white border-white border-2;
49
+ @apply w-full sm:w-fit leading-tight m-0 !important;
50
+ padding: calc(1rem + 2px) !important;
51
+ &:hover {
52
+ @apply border-base-content;
53
+ }
54
+ }
55
+ .govgr-accessibility-menu__option-btn--selected {
56
+ @apply border-success border-4 text-success p-4 !important;
57
+ .govgr-svg-icon {
58
+ fill: var(--color-success) !important;
59
+ }
60
+ .govgr-accessibility-menu__steps {
61
+ @apply opacity-100;
62
+ }
63
+
64
+ }
65
+
66
+ .govgr-accessibility-menu__steps {
67
+ @apply flex flex-nowrap w-full gap-2 h-1 mt-2 opacity-0;
68
+ }
69
+ .govgr-accessibility-menu__step {
70
+ @apply bg-gray100 w-full;
71
+ }
72
+ .govgr-accessibility-menu__step--active {
73
+ @apply bg-success;
74
+ }
package/src/components/button.css CHANGED
@@ -1,5 +1,5 @@
1
1
  .govgr-btn {
2
- @apply leading-relaxed font-medium cursor-pointer
2
+ @apply font-medium cursor-pointer
3
3
  m-0 mb-8 w-max min-h-10 md:min-h-12
4
4
  flex gap-x-3 items-center;
5
5
  border-radius: var(--btn-border-radius);
@@ -49,8 +49,9 @@
49
49
  background-color: var(--btn-primary-background-color-active);
50
50
  }
51
51
  }
52
- .govgr-btn.govgr-btn-cta {
53
- @apply text-xl py-4 print:pr-2;
52
+ .govgr-btn-cta {
53
+ @apply py-4 print:pr-2;
54
+ font-size: var(--btn-cta-font-size);
54
55
  .govgr-arrow--right {
55
56
  @apply w-5 h-5 inline-block ml-2 mr-2 transition-all;
56
57
  }
package/src/components/details.css CHANGED
@@ -1,6 +1,8 @@
1
1
  .govgr-details {
2
- @apply md:text-lg text-base;
3
- @apply md:mb-8 mb-4
2
+ @apply md:text-lg;
3
+ @apply md:mb-8 mb-4;
4
+ font-size: var(--details-font-size);
5
+ line-height: var(--details-line-height);
4
6
  }
5
7
  .govgr-details__summary {
6
8
  width: fit-content;
@@ -17,6 +19,11 @@
17
19
  @apply outline-none;
18
20
  }
19
21
  }
22
+ .govgr-details__summary--l {
23
+ @apply font-semibold;
24
+ font-size: var(--details__summary--l-font-size);
25
+ line-height: var(--details__summary--l-line-height);
26
+ }
20
27
  .govgr-details__summary-text {
21
28
  @apply border-l-2 border-gray300 py-2 px-4 mt-4;
22
29
  >*:last-child {
package/src/components/drawer.css CHANGED
@@ -35,7 +35,7 @@
35
35
  }
36
36
  }
37
37
  .govgr-drawer__heading {
38
- @apply p-0 flex justify-between align-baseline;
38
+ @apply p-0 mb-4 flex justify-between align-baseline;
39
39
  .govgr--drawer__close-icon, .govgr-heading-s, .govgr-heading-m, .govgr-heading-l, .govgr-heading-xl {
40
40
  @apply m-0;
41
41
  }
package/src/components/dropdown.css CHANGED
@@ -8,13 +8,16 @@
8
8
  }
9
9
  .govgr-dropdown__button {
10
10
  &.govgr-btn-primary {
11
- @apply bg-success-hover;
11
+ background-color: var(--btn-primary-background-color-hover);
12
+ color: var(--btn-primary-color-hover);
12
13
  }
13
14
  &.govgr-btn-secondary {
14
- @apply bg-gray200;
15
+ background-color: var(--btn-secondary-background-color-hover);
16
+ color: var(--btn-secondary-color-hover);
15
17
  }
16
18
  &.govgr-btn-warning {
17
- @apply bg-error-hover;
19
+ background-color: var(--btn-warning-background-color-hover);
20
+ color: var(--btn-warning-color-hover);
18
21
  }
19
22
  }
20
23
  }
package/src/components/filter.css CHANGED
@@ -1,31 +1,60 @@
1
1
  .govgr-filter {
2
- @apply border border-gray100 md:block bg-white;
3
- @apply fixed top-0 right-0 bottom-0 overflow-y-scroll z-40 w-4/5;
2
+ @apply bg-white fixed top-0 right-0 bottom-0 overflow-y-scroll z-40 w-4/5;
4
3
  box-shadow: 0 0 30px var(--color-shadow600);
5
- @apply md:relative md:overflow-auto md:w-full md:shadow-none md:z-0;
6
4
  .govgr-select {
7
5
  @apply w-full;
8
6
  }
9
7
  }
10
- .govgr-filter--horizontal {
11
- @apply border border-gray100 md:block bg-white
12
- fixed top-0 right-0 bottom-0 overflow-y-scroll z-40 w-4/5
13
- md:relative md:overflow-auto md:w-full ;
14
- box-shadow: 0 0 30px var(--color-shadow600);
15
- @apply md:relative md:overflow-auto md:w-full md:shadow-none md:z-0;
8
+ .govgr-filter {
9
+ &.govgr-filter--position-relative-always {
10
+ @apply block relative overflow-visible w-full shadow-none z-0 !important;
11
+ &.govgr-filter--closed {
12
+ @apply block !important;
13
+ }
14
+ }
15
+ &.govgr-filter--position-relative-sm {
16
+ @apply sm:block sm:relative sm:overflow-visible sm:w-full sm:shadow-none sm:z-0 ;
17
+ &.govgr-filter--closed {
18
+ @apply sm:block;
19
+ }
20
+ }
21
+ &.govgr-filter--position-relative-md {
22
+ @apply md:block md:relative md:overflow-visible md:w-full md:shadow-none md:z-0 ;
23
+ &.govgr-filter--closed {
24
+ @apply md:block;
25
+ }
26
+ }
27
+ &.govgr-filter--position-relative-lg {
28
+ @apply lg:block lg:relative lg:overflow-visible lg:w-full lg:shadow-none lg:z-0 ;
29
+ &.govgr-filter--closed {
30
+ @apply lg:block;
31
+ }
32
+ }
33
+ }
34
+ .govgr-filter--border {
35
+ @apply border border-gray100 p-4;
36
+ }
37
+ .govgr-filter--closed {
38
+ @apply hidden;
39
+ }
40
+ .govgr-filter__content {
41
+ @apply flex flex-col gap-8 p-0;
16
42
  }
17
43
  .govgr-filter__options--horizontal {
18
- @apply md:flex md:flex-row md:flex-wrap;
19
- align-items: flex-end;
44
+ @apply flex gap-4 flex-col;
45
+ align-items: stretch;
46
+ @apply md:flex-row md:flex-wrap;
20
47
  .govgr-field {
21
- @apply mb-0 md:mr-4;
48
+ @apply mb-0;
22
49
  }
23
50
  .govgr-label, .govgr-btn {
24
- @apply mb-0 mt-4;
51
+ @apply mb-0;
25
52
  }
26
53
  }
27
- .govgr-filter--closed {
28
- @apply hidden md:block;
54
+ @media (min-width: 768px) {
55
+ .govgr-filter__options--horizontal {
56
+ align-items: flex-end;
57
+ }
29
58
  }
30
59
  .govgr-filter__close-link {
31
60
  @apply flex flex-nowrap md:hidden text-right w-max float-right;
@@ -45,16 +74,17 @@
45
74
  }
46
75
  }
47
76
  }
48
- .govgr-filter__heading, .govgr-filter__selected, .govgr-filter__options {
49
- @apply p-4;
50
- }
77
+ .govgr-filter__heading, .govgr-filter__selected, .govgr-filter__options {
78
+ @apply p-0;
79
+ }
51
80
  .govgr-filter__heading {
81
+ @apply mb-4;
52
82
  .govgr-filter__close-link, .govgr-heading-s, .govgr-heading-m, .govgr-heading-l, .govgr-heading-xl {
53
83
  @apply m-0;
54
84
  }
55
85
  }
56
86
  .govgr-filter__selected {
57
- @apply bg-gray50 p-4 m-2 mt-0 rounded;
87
+ @apply bg-gray50 p-4 m-0 rounded;
58
88
  }
59
89
  .govgr-filter__selected--indicator {
60
90
  @apply md:hidden;
@@ -72,13 +102,13 @@
72
102
  @apply md:flex md:flex-row md:flex-wrap;
73
103
  }
74
104
  .govgr-chips {
75
- @apply flex flex-wrap;
105
+ @apply flex flex-wrap list-none;
76
106
  }
77
107
  .govgr-chip {
78
108
  @apply bg-white text-base-content lg:text-base text-sm border-2 border-base-content
79
109
  inline-flex items-center px-2 py-1 mr-2 mb-2 rounded shadow;
80
110
  .govgr-close-icon {
81
- @apply w-4 h-4 ml-2;
111
+ @apply w-4 h-4 ml-3;
82
112
  }
83
113
  &:hover {
84
114
  @apply shadow-lg text-base-content-invert bg-gray800 border-gray800 transition;
@@ -93,6 +123,10 @@
93
123
  box-shadow: inset 0 0 0 2px;
94
124
  }
95
125
  }
126
+ .govgr-chip__key-value {
127
+ @apply font-bold mr-2;
128
+ }
129
+
96
130
  .govgr-input__search-btn {
97
131
  @apply
98
132
  bg-success border-b-2 border-base-content rounded-none
package/src/components/footer.css CHANGED
@@ -40,6 +40,10 @@
40
40
  }
41
41
  .govgr-footer__licence-description {
42
42
  @apply mt-6 print:mt-4;
43
+ font-size: var(--footer__licence-description-font-size);
44
+ .govgr-link {
45
+ font-size: inherit;
46
+ }
43
47
  }
44
48
  .govgr-footer__inline-list {
45
49
  @apply mt-0 mb-4 p-0 print:hidden;
package/src/components/form.css CHANGED
@@ -38,8 +38,10 @@
38
38
  @apply mb-4 !important;
39
39
  }
40
40
  .govgr-label {
41
- @apply md:text-lg text-base mb-0
42
- flex gap-y-3 flex-col;
41
+ @apply mb-0 flex gap-y-3 flex-col;
42
+ font-size: var(--label-font-size);
43
+ line-height: var(--label-line-height);
44
+ letter-spacing: var(--label-letter-spacing);
43
45
  .govgr-heading-s, .govgr-heading-m, .govgr-heading-l, .govgr-heading-xl, .govgr-hint, .govgr-error-message {
44
46
  @apply mb-0;
45
47
  }
@@ -152,7 +154,7 @@
152
154
  .govgr-radios__input:disabled,
153
155
  .govgr-radios__input:disabled::before,
154
156
  .govgr-radios__input:disabled:checked:before {
155
- @apply bg-gray50 cursor-not-allowed;
157
+ @apply bg-gray100 cursor-not-allowed;
156
158
  }
157
159
  .govgr-input:disabled,
158
160
  .govgr-textarea:disabled,
@@ -160,6 +162,12 @@
160
162
  .govgr-radios__input:disabled::before {
161
163
  @apply border-gray500 text-gray600;
162
164
  }
163
- .govgr-checkboxes__input:disabled:checked:after, .govgr-radios__input:disabled:checked:after {
164
- @apply opacity-70;
165
+ .govgr-checkboxes__input:disabled:checked:after,
166
+ .govgr-radios__input:disabled:checked:after {
167
+ @apply opacity-40;
168
+ }
169
+
170
+ .govgr-radios__label--disabled,
171
+ .govgr-checkboxes__label--disabled {
172
+ @apply opacity-40;
165
173
  }
package/src/components/index.css CHANGED
@@ -1,3 +1,4 @@
1
+ @import "./accessibility-menu.css";
1
2
  @import "./accordion.css";
2
3
  @import "./autocomplete.css";
3
4
  @import "./button.css";
package/src/components/nav.css CHANGED
@@ -1,61 +1,67 @@
1
1
  .govgr-header {
2
2
  @apply relative;
3
3
  .govgr-burger-icon {
4
- fill: var(--color-header-content) ;
4
+ fill: var(--color-header-content);
5
5
  }
6
- .govgr-drawer__close-icon{
7
- @apply sm:hidden;
8
- .govgr-close-icon {
6
+ .govgr-drawer__close-icon {
7
+ @apply sm:hidden;
8
+ .govgr-close-icon {
9
9
  fill: var(--color-link) !important;
10
10
  }
11
11
  }
12
- .govgr-horizontal-nav__list{
12
+ .govgr-horizontal-nav {
13
+ @apply fixed;
14
+ }
15
+ .govgr-horizontal-nav__list {
13
16
  @apply sm:flex !important;
14
17
  @apply sm:w-min xs:hidden;
15
18
  }
16
- .govgr-horizontal-nav__list-item {
17
- @apply sm:mr-auto sm:ml-auto sm:text-center sm:underline mr-0 xs:px-2;
19
+ .govgr-horizontal-nav__list-item {
20
+ @apply sm:mr-auto sm:ml-auto sm:text-center sm:underline mr-0 xs:px-2;
21
+ .govgr-svg-icon {
22
+ fill: var(--color-white) !important;
23
+ }
24
+ }
25
+ .govgr-horizontal-nav__list-item-link,
26
+ .govgr-horizontal-nav__list-item-btn {
27
+ @apply underline xs:text-white text-lg sm:flex !important;
28
+ @apply xs:hidden items-center xs:gap-1;
29
+ &:focus {
30
+ @apply sm:bg-focus sm:text-link-active !important;
18
31
  .govgr-svg-icon {
19
- fill: var(--color-white) !important;
32
+ fill: var(--color-link-active) !important;
20
33
  }
21
34
  }
22
- .govgr-horizontal-nav__list-item-link, .govgr-horizontal-nav__list-item-btn{
23
- @apply underline xs:text-white text-lg sm:flex !important;
24
- @apply xs:hidden items-center xs:gap-1;
25
- &:focus {
26
- @apply sm:bg-focus sm:text-link-active !important;
27
- .govgr-svg-icon {
28
- fill: var(--color-link-active) !important;
29
- }
30
- }
31
- }
32
- .govgr-horizontal-nav__list--active{
35
+ }
36
+ .govgr-horizontal-nav__list--active {
33
37
  @apply sm:bg-secondary600 !important;
34
38
  }
35
39
  }
36
40
  .govgr-burger-icon {
37
41
  @apply cursor-pointer;
38
- }
42
+ }
39
43
  .govgr-burger-icon {
40
- fill: var(--color-base-content) ;
44
+ fill: var(--color-base-content);
41
45
  @apply w-8 h-8 float-right cursor-pointer transition-all
42
46
  focus:bg-focus;
43
- #govgr-burger-icon__line-1, #govgr-burger-icon__line-2, #govgr-burger-icon__line-3 {
47
+ #govgr-burger-icon__line-1,
48
+ #govgr-burger-icon__line-2,
49
+ #govgr-burger-icon__line-3 {
44
50
  @apply transition-all;
45
51
  }
46
52
  }
47
53
  #govgr-burger-icon__line-1 {
48
- x:2px;
49
- y:3px;
54
+ x: 2px;
55
+ y: 3px;
50
56
  }
51
57
  #govgr-burger-icon__line-2 {
52
- x:2px;
53
- y:10.3px;
58
+ x: 2px;
59
+ y: 10.3px;
54
60
  }
55
61
  #govgr-burger-icon__line-3 {
56
62
  @apply origin-top-left;
57
- x:2px;
58
- y:17.7px;
63
+ x: 2px;
64
+ y: 17.7px;
59
65
  }
60
66
  .govgr-burger-icon--active {
61
67
  #govgr-burger-icon__line-1 {
@@ -67,43 +73,54 @@
67
73
  }
68
74
  #govgr-burger-icon__line-3 {
69
75
  transform: rotate(-45deg);
70
- transform-origin: 3px 16px
76
+ transform-origin: 3px 16px;
71
77
  }
72
78
  }
73
79
  /* --- HORIZONTAL NAV --- */
74
80
  .govgr-horizontal-nav {
75
81
  @apply sm:block !important;
76
- @apply xs:hidden fixed sm:relative w-3/4 sm:w-full h-full bg-white
82
+ @apply xs:hidden w-3/4 sm:w-full h-full bg-white
77
83
  sm:h-auto sm:bg-white xs:text-content
78
84
  z-30 sm:z-auto
79
85
  opacity-100 right-0 top-0 sm:top-auto overflow-x-scroll sm:overflow-visible;
80
- .govgr-horizontal-nav{
86
+ .govgr-horizontal-nav {
81
87
  @apply sm:mt-2 sm:border-b-0 static w-full z-1;
82
- @apply block overflow-x-visible !important;
88
+ @apply block overflow-x-visible;
83
89
  .govgr-nav-horizontal__container {
84
- @apply sm:border-b-0;
85
- }
90
+ @apply sm:border-b-0;
91
+ }
86
92
  .govgr-horizontal-nav__list {
87
93
  @apply sm:px-0 sm:pb-0 sm:ml-6 !important;
88
94
  }
89
- }
95
+ }
96
+ .govgr-horizontal-nav--order {
97
+ @apply sm:order-1;
98
+ }
90
99
  .govgr-drawer__close-icon {
91
100
  @apply sm:hidden mt-3;
92
101
  }
93
- .govgr-heading-m{
102
+ .govgr-heading-m {
94
103
  @apply mb-0;
95
104
  }
96
105
  }
97
- .govgr-nav-horizontal--border{
98
- @apply sm:border-b sm:border-base150;
106
+ .govgr-nav-horizontal--fixed {
107
+ @apply fixed sm:relative;
108
+ }
109
+ .govgr-nav-horizontal--border {
110
+ @apply sm:border-b sm:border-base150;
99
111
  }
100
- .govgr-nav-horizontal__container{
112
+ .govgr-nav-horizontal__container {
101
113
  @apply sm:border-b border-base150;
102
114
  }
103
115
  .govgr-horizontal-nav--open {
104
116
  @apply xs:block;
105
117
  }
106
- .govgr-horizontal-nav__list,.govgr-main-wrapper {
118
+ .govgr-horizontal-nav--hidden {
119
+ @apply hidden !important;
120
+ }
121
+
122
+ .govgr-horizontal-nav__list,
123
+ .govgr-main-wrapper {
107
124
  .govgr-drawer__heading {
108
125
  @apply flex-row-reverse;
109
126
  }
@@ -111,36 +128,36 @@
111
128
  .govgr-horizontal-nav__list {
112
129
  @apply w-full m-0 max-w-5xl sm:mx-auto sm:gap-x-6 static sm:py-1 xs:px-3 sm:px-0
113
130
  flex flex-wrap flex-col sm:flex-row;
114
- .govgr-section-break{
115
- margin-top:41px !important;
131
+ .govgr-section-break {
132
+ margin-top: 41px !important;
116
133
  @apply sm:flex !important;
117
134
  @apply xs:hidden sm:p-0 absolute left-0 right-0;
118
135
  }
119
136
  }
120
- .govgr-horizontal-nav__list-item {
137
+ .govgr-horizontal-nav__list-item {
121
138
  @apply text-base-content xs:py-1 sm:gap-x-6;
122
139
  }
123
- .govgr-horizontal-nav__list-item-link:focus {
124
- @apply bg-focus text-base-content outline-none;
125
- box-shadow: 0 -2px var(--color-focus), 0 4px var(--color-base-content);
126
- }
127
- .govgr-horizontal-nav__list-item-btn{
128
- .govgr-svg-icon{
140
+ .govgr-horizontal-nav__list-item-link,
141
+ .govgr-horizontal-nav__list-item-btn {
142
+ @apply md:no-underline !important;
143
+ .govgr-svg-icon {
129
144
  @apply ml-0.5;
130
145
  }
131
- &:focus{
132
- @apply bg-focus text-base-content outline-none;
133
- box-shadow: 0 -2px var(--color-focus), 0 4px var(--color-base-content);
146
+ &:focus {
147
+ @apply bg-focus text-base-content outline-none;
148
+ box-shadow: 0 -2px var(--color-focus), 0 4px var(--color-base-content);
149
+ }
150
+ &:hover:not(:focus) {
151
+ @apply underline !important;
134
152
  }
135
153
  }
136
- .govgr-horizontal-nav__list-item-link, .govgr-horizontal-nav__list-item-btn{
137
- @apply md:no-underline hover:underline !important;
138
- }
139
- .govgr-horizontal-nav__list-item-link--active,.govgr-horizontal-nav__list-item-btn--active {
140
- @apply text-base-content !important;
141
- >.govgr-svg-icon {
142
- fill: var(--color-base-content) !important;
143
- }
154
+ .govgr-horizontal-nav__list-item-link--active,
155
+ .govgr-horizontal-nav__list-item-btn--active {
156
+ @apply text-base-content !important;
157
+ @apply font-semibold;
158
+ > .govgr-svg-icon {
159
+ fill: var(--color-base-content) !important;
160
+ }
144
161
  }
145
162
 
146
163
  /* --- VERTICAL NAV --- */
@@ -148,20 +165,20 @@
148
165
  @apply w-full m-0 max-w-5xl static xs:px-3
149
166
  flex flex-wrap flex-col;
150
167
  }
151
- .govgr-vertical-nav__list-item {
168
+ .govgr-vertical-nav__list-item {
152
169
  @apply text-base-content
153
170
  xs:py-1;
154
171
  }
155
- .govgr-vertical-nav-list__menu{
172
+ .govgr-vertical-nav-list__menu {
156
173
  @apply flex z-1 w-full;
157
174
  }
158
- .govgr-vertical-nav-list__content-list{
159
- @apply p-0 grid-flow-row xs:grid-cols-1 xs:grid-rows-6;
175
+ .govgr-vertical-nav-list__content-list {
176
+ @apply p-0 grid-flow-row xs:grid-cols-1 xs:grid-rows-6;
160
177
  }
161
- .govgr-vertical-nav-list__container-title{
178
+ .govgr-vertical-nav-list__container-title {
162
179
  @apply mt-3;
163
180
  }
164
- .govgr-vertical-nav-list__container-title-heading{
181
+ .govgr-vertical-nav-list__container-title-heading {
165
182
  @apply hidden;
166
183
  }
167
184
 
@@ -177,7 +194,7 @@
177
194
  }
178
195
  /* ---------- --- */
179
196
 
180
- .govgr-nav-list__menu{
197
+ .govgr-nav-list__menu {
181
198
  @apply flex sm:order-2 sm:left-0 sm:right-0 sm:relative sm:mt-3 sm:bg-white z-1 w-full;
182
199
  .govgr-main-wrapper {
183
200
  @apply xs:gap-y-2;
@@ -186,11 +203,10 @@
186
203
  .govgr-nav-list__menu-hidden {
187
204
  @apply hidden;
188
205
  }
189
- .govgr-nav-list__content-list{
206
+ .govgr-nav-list__content-list {
190
207
  @apply sm:grid-cols-2 sm:grid-rows-1 !important;
191
- @apply p-0 sm:grid grid-flow-row xs:grid-cols-1 xs:grid-rows-6;
192
-
208
+ @apply p-0 sm:grid grid-flow-row xs:grid-cols-1 xs:grid-rows-6;
193
209
  }
194
210
  .govgr-nav-list__content-list-item {
195
- @apply relative pt-0 pb-5 pr-3 pl-0 box-border;
211
+ @apply relative pt-0 pb-5 pr-3 pl-0 box-border;
196
212
  }
package/src/components/svg-icons.css CHANGED
@@ -85,14 +85,17 @@
85
85
  fill: var(--color-link) !important;
86
86
  }
87
87
  .govgr-svg-icon--s {
88
- @apply h-3 w-3;
88
+ @apply h-3 w-3 !important;
89
89
  }
90
90
  .govgr-svg-icon--m {
91
- @apply h-4 w-4;
91
+ @apply h-4 w-4 !important;
92
92
  }
93
93
  .govgr-svg-icon--l {
94
- @apply h-6 w-6;
94
+ @apply h-6 w-6 !important;
95
95
  }
96
96
  .govgr-svg-icon--xl {
97
- @apply h-10 w-10;
97
+ @apply h-8 w-8 !important;
98
+ }
99
+ .govgr-svg-icon--xxl {
100
+ @apply h-10 w-10 !important;
98
101
  }