@sb1/ffe-header 100.6.0 → 100.7.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 (3) hide show
  1. package/css/ffe-header.css +35 -84
  2. package/less/ffe-header.less +1 -1
  3. package/package.json +9 -6
package/css/ffe-header.css CHANGED
@@ -40,8 +40,7 @@
40
40
  .ffe-header *,
41
41
  .ffe-header *::before,
42
42
  .ffe-header *::after {
43
- -webkit-box-sizing: border-box;
44
- box-sizing: border-box;
43
+ box-sizing: border-box;
45
44
  }
46
45
  .ffe-header {
47
46
  color: var(--ffe-color-foreground-default);font-family: var(--ffe-g-font);font-variant-numeric: tabular-nums;line-height: 1.5rem;font-size: var(--ffe-fontsize-body-text);
@@ -119,22 +118,18 @@
119
118
  z-index: 999;
120
119
  }
121
120
  .ffe-header__user-chevron--expanded {
122
- -webkit-transform: rotate(180deg);
123
- transform: rotate(180deg);
121
+ transform: rotate(180deg);
124
122
  }
125
123
  .ffe-header__border:first-child {
126
124
  position: relative;
127
125
  }
128
126
  .ffe-header__wrapper {
129
- display: -webkit-box;
130
127
  display: -ms-flexbox;
131
128
  display: flex;
132
- -webkit-box-pack: justify;
133
- -ms-flex-pack: justify;
134
- justify-content: space-between;
135
- -webkit-box-align: center;
136
- -ms-flex-align: center;
137
- align-items: center;
129
+ -ms-flex-pack: justify;
130
+ justify-content: space-between;
131
+ -ms-flex-align: center;
132
+ align-items: center;
138
133
  position: relative;
139
134
  margin: 0 auto;
140
135
  padding: 0 var(--ffe-spacing-sm);
@@ -144,13 +139,10 @@
144
139
  border-bottom: 1px solid var(--ffe-color-border-primary-default);
145
140
  }
146
141
  .ffe-header__border .ffe-header__wrapper {
147
- -webkit-box-pack: center;
148
- -ms-flex-pack: center;
149
- justify-content: center;
142
+ -ms-flex-pack: center;
143
+ justify-content: center;
150
144
  }
151
145
  .ffe-header__link {
152
- -webkit-transition: color var(--ffe-transition-duration) var(--ffe-ease), background-color var(--ffe-transition-duration) var(--ffe-ease);
153
- -o-transition: color var(--ffe-transition-duration) var(--ffe-ease), background-color var(--ffe-transition-duration) var(--ffe-ease);
154
146
  transition: color var(--ffe-transition-duration) var(--ffe-ease), background-color var(--ffe-transition-duration) var(--ffe-ease);
155
147
  border: 2px solid transparent;
156
148
  }
@@ -183,13 +175,12 @@
183
175
  bottom: -2px;
184
176
  left: 0;
185
177
  }
186
- .ffe-header__link--active:focus::after {
178
+ .ffe-header__link--active:focus-visible::after {
187
179
  border-bottom: 0;
188
180
  }
189
181
  .ffe-header__link:focus {
190
182
  border-radius: 1rem;
191
- -webkit-box-shadow: 0 0 0 2px var(--ffe-color-border-interactive-focus);
192
- box-shadow: 0 0 0 2px var(--ffe-color-border-interactive-focus);
183
+ box-shadow: 0 0 0 2px var(--ffe-color-border-interactive-focus);
193
184
  outline: none;
194
185
  }
195
186
  .ffe-header__user-nav .ffe-header__link:focus {
@@ -198,8 +189,7 @@
198
189
  }
199
190
  .ffe-header__link:focus:not(:focus-visible) {
200
191
  background-color: transparent;
201
- -webkit-box-shadow: none;
202
- box-shadow: none;
192
+ box-shadow: none;
203
193
  color: var(--ffe-color-foreground-emphasis);
204
194
  }
205
195
  .ffe-header__link--disabled {
@@ -216,8 +206,7 @@
216
206
  margin: var(--ffe-spacing-xs) 0;
217
207
  }
218
208
  .ffe-header__logo a:focus {
219
- -webkit-box-shadow: 0 0 0 2px var(--ffe-color-border-interactive-focus);
220
- box-shadow: 0 0 0 2px var(--ffe-color-border-interactive-focus);
209
+ box-shadow: 0 0 0 2px var(--ffe-color-border-interactive-focus);
221
210
  border-radius: 1rem;
222
211
  padding: var(--ffe-spacing-xs);
223
212
  }
@@ -237,13 +226,14 @@
237
226
  }
238
227
  .ffe-header__logout-button:active,
239
228
  .ffe-header__icon-button:active {
240
- -webkit-transform: scale(0.97);
241
- transform: scale(0.97);
229
+ transform: scale(0.97);
242
230
  }
243
231
  .ffe-header__icon-button {
244
232
  color: var(--ffe-color-foreground-default);
233
+ display: -ms-inline-grid;
245
234
  display: inline-grid;
246
- grid-template-columns: auto 1fr;
235
+ -ms-grid-columns: auto 1fr;
236
+ grid-template-columns: auto 1fr;
247
237
  }
248
238
  .ffe-header__icon-button:focus-visible {
249
239
  outline: 2px solid var(--ffe-color-foreground-default);
@@ -251,9 +241,9 @@
251
241
  }
252
242
  .ffe-header__icon-button .ffe-header__notification-bubble {
253
243
  -ms-flex-item-align: end;
244
+ -ms-grid-row-align: end;
254
245
  align-self: end;
255
- -webkit-transform: translate(-1.25rem, -5px);
256
- transform: translate(-1.25rem, -5px);
246
+ transform: translate(-1.25rem, -5px);
257
247
  }
258
248
  .ffe-header__logout-button {
259
249
  --color: var(--ffe-color-foreground-interactive-link);
@@ -292,36 +282,25 @@
292
282
  .ffe-header__user-chevron-icon {
293
283
  vertical-align: middle;
294
284
  margin-left: var(--ffe-spacing-xs);
295
- -webkit-transition: -webkit-transform var(--ffe-transition-duration) var(--ffe-ease-in-out-back);
296
- transition: -webkit-transform var(--ffe-transition-duration) var(--ffe-ease-in-out-back);
297
- -o-transition: transform var(--ffe-transition-duration) var(--ffe-ease-in-out-back);
298
285
  transition: transform var(--ffe-transition-duration) var(--ffe-ease-in-out-back);
299
- transition: transform var(--ffe-transition-duration) var(--ffe-ease-in-out-back), -webkit-transform var(--ffe-transition-duration) var(--ffe-ease-in-out-back);
300
286
  color: var(--ffe-color-foreground-default);
301
287
  }
302
288
  .ffe-header__user-chevron--expanded .ffe-header__user-chevron-icon {
303
- -webkit-transform: rotate(180deg);
304
- transform: rotate(180deg);
289
+ transform: rotate(180deg);
305
290
  }
306
291
  .ffe-header__user-nav {
307
- -webkit-transition: opacity 0.1s, -webkit-transform var(--ffe-transition-duration) var(--ffe-ease);
308
- transition: opacity 0.1s, -webkit-transform var(--ffe-transition-duration) var(--ffe-ease);
309
- -o-transition: transform var(--ffe-transition-duration) var(--ffe-ease), opacity 0.1s;
310
292
  transition: transform var(--ffe-transition-duration) var(--ffe-ease), opacity 0.1s;
311
- transition: transform var(--ffe-transition-duration) var(--ffe-ease), opacity 0.1s, -webkit-transform var(--ffe-transition-duration) var(--ffe-ease);
312
293
  overflow: hidden;
313
294
  }
314
295
  .ffe-header__user-nav:not(.ffe-header__user-nav--visible) {
315
296
  visibility: hidden;
316
297
  height: 1px;
317
298
  overflow: hidden;
318
- -webkit-transform: translateY(-25px);
319
- transform: translateY(-25px);
299
+ transform: translateY(-25px);
320
300
  opacity: 0;
321
301
  }
322
302
  .ffe-header__user-nav .ffe-header__link,
323
303
  .ffe-header__site-nav .ffe-header__link {
324
- display: -webkit-box;
325
304
  display: -ms-flexbox;
326
305
  display: flex;
327
306
  gap: var(--ffe-spacing-sm);
@@ -347,11 +326,7 @@
347
326
  position: absolute;
348
327
  left: 0;
349
328
  bottom: 10px;
350
- -webkit-transition: width var(--ffe-transition-duration) var(--ffe-ease-in-out-back), -webkit-transform var(--ffe-transition-duration) var(--ffe-ease-in-out-back);
351
- transition: width var(--ffe-transition-duration) var(--ffe-ease-in-out-back), -webkit-transform var(--ffe-transition-duration) var(--ffe-ease-in-out-back);
352
- -o-transition: transform var(--ffe-transition-duration) var(--ffe-ease-in-out-back), width var(--ffe-transition-duration) var(--ffe-ease-in-out-back);
353
329
  transition: transform var(--ffe-transition-duration) var(--ffe-ease-in-out-back), width var(--ffe-transition-duration) var(--ffe-ease-in-out-back);
354
- transition: transform var(--ffe-transition-duration) var(--ffe-ease-in-out-back), width var(--ffe-transition-duration) var(--ffe-ease-in-out-back), -webkit-transform var(--ffe-transition-duration) var(--ffe-ease-in-out-back);
355
330
  }
356
331
  .ffe-header__site-nav-hamburger::before {
357
332
  position: absolute;
@@ -367,24 +342,17 @@
367
342
  }
368
343
  .ffe-header__site-nav-hamburger::before,
369
344
  .ffe-header__site-nav-hamburger::after {
370
- -webkit-transition: -webkit-transform var(--ffe-transition-duration) var(--ffe-ease-in-out-back);
371
- transition: -webkit-transform var(--ffe-transition-duration) var(--ffe-ease-in-out-back);
372
- -o-transition: transform var(--ffe-transition-duration) var(--ffe-ease-in-out-back);
373
345
  transition: transform var(--ffe-transition-duration) var(--ffe-ease-in-out-back);
374
- transition: transform var(--ffe-transition-duration) var(--ffe-ease-in-out-back), -webkit-transform var(--ffe-transition-duration) var(--ffe-ease-in-out-back);
375
346
  }
376
347
  .ffe-header__site-nav-hamburger--expanded .ffe-header__site-nav-hamburger-bar {
377
348
  width: 0;
378
- -webkit-transform: translate(12px);
379
- transform: translate(12px);
349
+ transform: translate(12px);
380
350
  }
381
351
  .ffe-header__site-nav-hamburger--expanded::before {
382
- -webkit-transform: translateY(8px) rotate(45deg);
383
- transform: translateY(8px) rotate(45deg);
352
+ transform: translateY(8px) rotate(45deg);
384
353
  }
385
354
  .ffe-header__site-nav-hamburger--expanded::after {
386
- -webkit-transform: translateY(-8px) rotate(-45deg);
387
- transform: translateY(-8px) rotate(-45deg);
355
+ transform: translateY(-8px) rotate(-45deg);
388
356
  }
389
357
  .ffe-header__secondary-nav {
390
358
  display: none;
@@ -395,6 +363,7 @@
395
363
  font-weight: normal;
396
364
  font-size: 0.9rem;
397
365
  line-height: 1;
366
+ display: -ms-inline-grid;
398
367
  display: inline-grid;
399
368
  place-items: center;
400
369
  width: 1.5rem;
@@ -409,9 +378,9 @@
409
378
  display: none;
410
379
  }
411
380
  .ffe-header__icon-button .ffe-header__notification-bubble {
412
- -webkit-transform: unset;
413
- transform: unset;
381
+ transform: unset;
414
382
  -ms-flex-item-align: start;
383
+ -ms-grid-row-align: start;
415
384
  align-self: start;
416
385
  }
417
386
  .ffe-header__icon-button--user-nav .ffe-header__notification-bubble {
@@ -422,11 +391,7 @@
422
391
  display: inline-block;
423
392
  height: 60px;
424
393
  line-height: 3.75rem;
425
- -webkit-transition: -webkit-box-shadow var(--ffe-transition-duration) var(--ffe-ease);
426
- transition: -webkit-box-shadow var(--ffe-transition-duration) var(--ffe-ease);
427
- -o-transition: box-shadow var(--ffe-transition-duration) var(--ffe-ease);
428
394
  transition: box-shadow var(--ffe-transition-duration) var(--ffe-ease);
429
- transition: box-shadow var(--ffe-transition-duration) var(--ffe-ease), -webkit-box-shadow var(--ffe-transition-duration) var(--ffe-ease);
430
395
  }
431
396
  .ffe-header__logo a:focus {
432
397
  border-radius: 1rem;
@@ -454,9 +419,8 @@
454
419
  }
455
420
  .ffe-header__secondary-nav {
456
421
  display: block;
457
- -webkit-box-flex: 1;
458
- -ms-flex: 1;
459
- flex: 1;
422
+ -ms-flex: 1;
423
+ flex: 1;
460
424
  }
461
425
  .ffe-header__secondary-nav .ffe-header__list-item {
462
426
  display: inline-block;
@@ -464,9 +428,8 @@
464
428
  }
465
429
  .ffe-header__user-nav-toggle {
466
430
  text-align: right;
467
- -webkit-box-flex: 1;
468
- -ms-flex: 1;
469
- flex: 1;
431
+ -ms-flex: 1;
432
+ flex: 1;
470
433
  }
471
434
  .ffe-header__user-nav {
472
435
  position: absolute;
@@ -475,8 +438,7 @@
475
438
  min-width: 225px;
476
439
  background: var(--ffe-color-background-default);
477
440
  border-radius: 24px;
478
- -webkit-box-shadow: var(--ffe-shadow-md);
479
- box-shadow: var(--ffe-shadow-md);
441
+ box-shadow: var(--ffe-shadow-md);
480
442
  border: 2px solid var(--ffe-color-border-primary-default);
481
443
  padding: var(--ffe-spacing-md) 0;
482
444
  }
@@ -495,9 +457,8 @@
495
457
  margin-right: var(--ffe-spacing-sm);
496
458
  }
497
459
  .ffe-header__user-nav-toggle {
498
- -webkit-box-ordinal-group: 0;
499
- -ms-flex-order: -1;
500
- order: -1;
460
+ -ms-flex-order: -1;
461
+ order: -1;
501
462
  }
502
463
  .ffe-header__user-nav,
503
464
  .ffe-header__site-nav-list {
@@ -509,21 +470,15 @@
509
470
  top: 1px;
510
471
  padding: var(--ffe-spacing-sm) 0;
511
472
  border-bottom: 1px solid var(--ffe-color-border-primary-default);
512
- -webkit-transform: translateY(-25px);
513
- transform: translateY(-25px);
514
- -webkit-transition: -webkit-transform var(--ffe-transition-duration) var(--ffe-ease);
515
- transition: -webkit-transform var(--ffe-transition-duration) var(--ffe-ease);
516
- -o-transition: transform var(--ffe-transition-duration) var(--ffe-ease);
473
+ transform: translateY(-25px);
517
474
  transition: transform var(--ffe-transition-duration) var(--ffe-ease);
518
- transition: transform var(--ffe-transition-duration) var(--ffe-ease), -webkit-transform var(--ffe-transition-duration) var(--ffe-ease);
519
475
  }
520
476
  .ffe-header__user-nav--visible,
521
477
  .ffe-header__site-nav-list--visible {
522
478
  visibility: visible;
523
479
  height: auto;
524
480
  width: 100%;
525
- -webkit-transform: translateY(0);
526
- transform: translateY(0);
481
+ transform: translateY(0);
527
482
  background-color: var(--ffe-color-background-default);
528
483
  }
529
484
  .ffe-header__list-item--logout {
@@ -542,22 +497,18 @@
542
497
  content: '';
543
498
  }
544
499
  .ffe-header--enable-link-to-profile .ffe-header__user-nav-toggle {
545
- display: -webkit-inline-box;
546
500
  display: -ms-inline-flexbox;
547
501
  display: inline-flex;
548
502
  }
549
503
  .ffe-header--enable-link-to-profile .ffe-header__user-nav-toggle .ffe-header__svg-icon {
550
- display: -webkit-inline-box;
551
504
  display: -ms-inline-flexbox;
552
505
  display: inline-flex;
553
506
  }
554
507
  .ffe-header--enable-link-to-profile .ffe-header__site-nav-toggle {
555
- display: -webkit-inline-box;
556
508
  display: -ms-inline-flexbox;
557
509
  display: inline-flex;
558
510
  }
559
511
  .ffe-header--enable-link-to-profile .ffe-header__site-nav-toggle .ffe-header__svg-icon {
560
- display: -webkit-inline-box;
561
512
  display: -ms-inline-flexbox;
562
513
  display: inline-flex;
563
514
  }
package/less/ffe-header.less CHANGED
@@ -74,7 +74,7 @@
74
74
  left: 0;
75
75
  }
76
76
 
77
- &--active:focus::after {
77
+ &--active:focus-visible::after {
78
78
  border-bottom: 0;
79
79
  }
80
80
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sb1/ffe-header",
3
- "version": "100.6.0",
3
+ "version": "100.7.0",
4
4
  "description": "Felles header for SpareBank 1",
5
5
  "license": "MIT",
6
6
  "author": "SpareBank 1",
@@ -21,14 +21,17 @@
21
21
  "test": "npm run lint"
22
22
  },
23
23
  "devDependencies": {
24
- "@sb1/ffe-buildtool": "^100.6.0",
25
- "@sb1/ffe-core": "^100.6.0",
26
- "@sb1/ffe-webfonts": "^100.6.0",
24
+ "@sb1/ffe-buildtool": "^100.7.0",
25
+ "@sb1/ffe-core": "^100.7.0",
26
+ "@sb1/ffe-webfonts": "^100.7.0",
27
27
  "less": "^4.1.2",
28
- "less-plugin-autoprefix": "^2.0.0"
28
+ "less-plugin-autoprefix": "^1.4.1"
29
29
  },
30
30
  "publishConfig": {
31
31
  "access": "public"
32
32
  },
33
- "gitHead": "2fb5ef0325f4cc6fb7e3e5ca177e34486828838d"
33
+ "dependencies": {
34
+ "parcel": "^2.16.3"
35
+ },
36
+ "gitHead": "206ebc01a87406a446cd81ee712e2e192ab3f193"
34
37
  }