@arbeidstilsynet/design-css 0.4.0 → 0.4.1

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 (3) hide show
  1. package/dist/src/header.css +60 -37
  2. package/dist/src/index.css +58 -37
  3. package/package.json +1 -1
package/dist/src/header.css CHANGED
@@ -5,13 +5,19 @@
5
5
  align-items: center;
6
6
  width: 100%;
7
7
  container-type: inline-size; /* Enable container queries */
8
- padding-left: var(--ds-size-15);
8
+ margin: var(--ds-size-2) var(--ds-size-4);
9
9
  }
10
10
 
11
11
  .at-header .ds-search {
12
12
  align-self: self-start;
13
13
  }
14
14
 
15
+ /* disable visited color in both the navigation and dropdown menu */
16
+
17
+ .at-header .ds-link {
18
+ --dsc-link-color--visited: var(--dsc-link-color);
19
+ }
20
+
15
21
  .at-header__title-background {
16
22
  width: 100%;
17
23
  }
@@ -41,75 +47,92 @@
41
47
  flex: 1;
42
48
  }
43
49
 
44
- .at-header__title-link:not(:hover):not(:focus-visible) {
50
+ .at-header__title-right {
51
+ justify-content: flex-end;
52
+ margin-right: var(--ds-size-15);
53
+ }
54
+
55
+ .at-header__title-link:not(:hover):not(:focus-visible),
56
+ .at-header__title-dropdown-controls .ds-link:not(:hover):not(:focus-visible) {
45
57
  text-decoration-line: none;
46
58
  }
47
59
 
48
- .at-header__title-right {
49
- justify-content: flex-end;
60
+ /* add padding except for hr (Divider) that are either from the consumer controls prop
61
+ or provided by us below links for mobile version */
62
+
63
+ .at-header__title-dropdown-controls:not(:has(> hr:only-child)) {
64
+ padding: var(--ds-size-2) var(--ds-size-4);
50
65
  }
51
66
 
52
- .at-header__title-dropdown-mobile {
67
+ .at-header__title-dropdown-item-mobile {
53
68
  display: none;
54
69
  }
55
70
 
56
- .at-header__title-dropdown-desktop {
57
- display: inline-flex;
71
+ .at-header__title-dropdown-close-mobile {
72
+ display: none;
58
73
  }
59
74
 
60
- .at-header__title-dropdown-controls {
61
- padding: var(--ds-size-2) var(--ds-size-4);
75
+ .at-header__title-dropdown-backdrop {
76
+ display: none;
62
77
  }
63
78
 
64
79
  /* Responsive adjustments */
65
80
 
66
- @media (max-width: 30rem) {
67
- .at-header {
68
- padding-left: var(--ds-size-4);
69
- }
70
-
81
+ @media (max-width: 48rem) {
71
82
  .at-header .ds-search {
72
83
  max-width: 100%;
73
84
  }
74
85
  }
75
86
 
76
- @container (max-width: 30rem) {
87
+ @container (max-width: 48rem) {
77
88
  .at-header__title {
78
- display: grid;
79
- grid-template-areas:
80
- "left right"
81
- "center center";
82
- grid-template-columns: 1fr auto;
83
- row-gap: var(--ds-size-2);
84
- -moz-column-gap: var(--ds-size-2);
85
- column-gap: var(--ds-size-2);
86
- align-items: center;
89
+ align-items: flex-end;
90
+ justify-content: space-between;
87
91
  }
88
92
 
89
93
  .at-header__title-left {
90
- grid-area: left;
94
+ margin-right: 0;
91
95
  }
92
96
 
93
- .at-header__title-right {
94
- grid-area: right;
95
- justify-content: flex-end;
97
+ .at-header__title-center {
98
+ display: none;
96
99
  }
97
100
 
98
- .at-header__title-center {
99
- grid-area: center;
100
- display: flex;
101
- flex-wrap: wrap;
102
- gap: var(--ds-size-4);
101
+ .at-header__title-right {
102
+ justify-self: flex-end;
103
+ margin-right: unset;
104
+ margin-right: var(--ds-size-4);
103
105
  }
104
106
 
105
107
  .at-header__title-logo {
106
108
  display: none;
107
109
  }
108
110
 
109
- .at-header__title-dropdown-mobile {
110
- display: inline-flex;
111
+ .at-header__title-dropdown-item-mobile {
112
+ display: block;
111
113
  }
112
- .at-header__title-dropdown-desktop {
113
- display: none;
114
+
115
+ /* Full-width dropdown overlay for mobile */
116
+ .at-header .ds-dropdown.at-header__title-dropdown-content {
117
+ width: 100%;
118
+ max-width: 100%;
119
+ }
120
+
121
+ .at-header__title-dropdown-close-mobile {
122
+ display: block;
123
+ margin: var(--ds-size-4);
124
+ margin-bottom: var(--ds-size-2);
125
+ }
126
+
127
+ .at-header__title-dropdown-close-mobile .ds-button {
128
+ justify-content: center;
129
+ }
130
+
131
+ .at-header__title-dropdown-backdrop {
132
+ display: block;
133
+ position: fixed;
134
+ inset: 0;
135
+ background-color: rgb(0 0 0 / calc(100% - var(--ds-opacity-disabled)));
136
+ pointer-events: none;
114
137
  }
115
138
  }
package/dist/src/index.css CHANGED
@@ -198,13 +198,18 @@
198
198
  align-items: center;
199
199
  width: 100%;
200
200
  container-type: inline-size; /* Enable container queries */
201
- padding-left: var(--ds-size-15);
201
+ margin: var(--ds-size-2) var(--ds-size-4);
202
202
  }
203
203
 
204
204
  .at-header .ds-search {
205
205
  align-self: self-start;
206
206
  }
207
207
 
208
+ /* disable visited color in both the navigation and dropdown menu */
209
+ .at-header .ds-link {
210
+ --dsc-link-color--visited: var(--dsc-link-color);
211
+ }
212
+
208
213
  .at-header__title-background {
209
214
  width: 100%;
210
215
  }
@@ -234,75 +239,91 @@
234
239
  flex: 1;
235
240
  }
236
241
 
237
- .at-header__title-link:not(:hover):not(:focus-visible) {
242
+ .at-header__title-right {
243
+ justify-content: flex-end;
244
+ margin-right: var(--ds-size-15);
245
+ }
246
+
247
+ .at-header__title-link:not(:hover):not(:focus-visible),
248
+ .at-header__title-dropdown-controls .ds-link:not(:hover):not(:focus-visible) {
238
249
  text-decoration-line: none;
239
250
  }
240
251
 
241
- .at-header__title-right {
242
- justify-content: flex-end;
252
+ /* add padding except for hr (Divider) that are either from the consumer controls prop
253
+ or provided by us below links for mobile version */
254
+ .at-header__title-dropdown-controls:not(:has(> hr:only-child)) {
255
+ padding: var(--ds-size-2) var(--ds-size-4);
243
256
  }
244
257
 
245
- .at-header__title-dropdown-mobile {
258
+ .at-header__title-dropdown-item-mobile {
246
259
  display: none;
247
260
  }
248
261
 
249
- .at-header__title-dropdown-desktop {
250
- display: inline-flex;
262
+ .at-header__title-dropdown-close-mobile {
263
+ display: none;
251
264
  }
252
265
 
253
- .at-header__title-dropdown-controls {
254
- padding: var(--ds-size-2) var(--ds-size-4);
266
+ .at-header__title-dropdown-backdrop {
267
+ display: none;
255
268
  }
256
269
 
257
270
  /* Responsive adjustments */
258
- @media (max-width: 30rem) {
259
- .at-header {
260
- padding-left: var(--ds-size-4);
261
- }
262
-
271
+ @media (max-width: 48rem) {
263
272
  .at-header .ds-search {
264
273
  max-width: 100%;
265
274
  }
266
275
  }
267
276
 
268
- @container (max-width: 30rem) {
277
+ @container (max-width: 48rem) {
269
278
  .at-header__title {
270
- display: grid;
271
- grid-template-areas:
272
- "left right"
273
- "center center";
274
- grid-template-columns: 1fr auto;
275
- row-gap: var(--ds-size-2);
276
- -moz-column-gap: var(--ds-size-2);
277
- column-gap: var(--ds-size-2);
278
- align-items: center;
279
+ align-items: flex-end;
280
+ justify-content: space-between;
279
281
  }
280
282
 
281
283
  .at-header__title-left {
282
- grid-area: left;
284
+ margin-right: 0;
283
285
  }
284
286
 
285
- .at-header__title-right {
286
- grid-area: right;
287
- justify-content: flex-end;
287
+ .at-header__title-center {
288
+ display: none;
288
289
  }
289
290
 
290
- .at-header__title-center {
291
- grid-area: center;
292
- display: flex;
293
- flex-wrap: wrap;
294
- gap: var(--ds-size-4);
291
+ .at-header__title-right {
292
+ justify-self: flex-end;
293
+ margin-right: unset;
294
+ margin-right: var(--ds-size-4);
295
295
  }
296
296
 
297
297
  .at-header__title-logo {
298
298
  display: none;
299
299
  }
300
300
 
301
- .at-header__title-dropdown-mobile {
302
- display: inline-flex;
301
+ .at-header__title-dropdown-item-mobile {
302
+ display: block;
303
303
  }
304
- .at-header__title-dropdown-desktop {
305
- display: none;
304
+
305
+ /* Full-width dropdown overlay for mobile */
306
+ .at-header .ds-dropdown.at-header__title-dropdown-content {
307
+ width: 100%;
308
+ max-width: 100%;
309
+ }
310
+
311
+ .at-header__title-dropdown-close-mobile {
312
+ display: block;
313
+ margin: var(--ds-size-4);
314
+ margin-bottom: var(--ds-size-2);
315
+ }
316
+
317
+ .at-header__title-dropdown-close-mobile .ds-button {
318
+ justify-content: center;
319
+ }
320
+
321
+ .at-header__title-dropdown-backdrop {
322
+ display: block;
323
+ position: fixed;
324
+ inset: 0;
325
+ background-color: rgb(0 0 0 / calc(100% - var(--ds-opacity-disabled)));
326
+ pointer-events: none;
306
327
  }
307
328
  }}
308
329
  @layer at.components{
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@arbeidstilsynet/design-css",
3
- "version": "0.4.0",
3
+ "version": "0.4.1",
4
4
  "description": "CSS for Designsystemet",
5
5
  "author": "Arbeidstilsynet",
6
6
  "repository": {