@scania/tegel-lite 0.1.0-side-menu-beta.1 → 0.1.0-side-menu-beta.3

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/components.css +15 -8
  2. package/dist/tl-side-menu.css +15 -8
  3. package/package.json +1 -1
package/dist/components.css CHANGED
@@ -6743,7 +6743,7 @@ body {
6743
6743
  border-right: var(--side-menu-item-border-thickness) solid var(--side-menu-item-border-bottom-color);
6744
6744
  display: flex;
6745
6745
  align-items: center;
6746
- height: var(--side-menu-item-height);
6746
+ height: var(--side-menu-sub-item-height);
6747
6747
  padding: 0 var(--side-menu-item-horizontal-padding);
6748
6748
  width: 100%;
6749
6749
  background-color: var(--side-menu-item-background);
@@ -6765,7 +6765,7 @@ body {
6765
6765
  .tl-side-menu__dropdown-item:active {
6766
6766
  background-color: var(--side-menu-item-background-active);
6767
6767
  }
6768
- .tl-side-menu__dropdown-item:focus {
6768
+ .tl-side-menu__dropdown-item:focus-visible {
6769
6769
  outline: 2px solid var(--component--focus-ring-color-strong);
6770
6770
  box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
6771
6771
  outline-offset: -2px;
@@ -6901,7 +6901,8 @@ body {
6901
6901
  display: none;
6902
6902
  }
6903
6903
 
6904
- .tl-side-menu__end-list .tl-side-menu__item {
6904
+ .tl-side-menu__end-list {
6905
+ margin-top: var(--side-menu-item-height);
6905
6906
  border-top: var(--side-menu-item-border-thickness) solid var(--side-menu-item-border-bottom-color);
6906
6907
  }
6907
6908
  .tl-side-menu__wrapper--empty .tl-side-menu__end-list {
@@ -6926,7 +6927,10 @@ body {
6926
6927
  @media (min-width: 992px) {
6927
6928
  .tl-side-menu--persistent .tl-side-menu__collapse {
6928
6929
  display: flex;
6929
- flex-direction: row;
6930
+ position: sticky;
6931
+ bottom: 0;
6932
+ border-top: var(--side-menu-item-border-thickness) solid var(--side-menu-item-border-bottom-color);
6933
+ padding: var(--side-menu-gap) var(--side-menu-horizontal-padding);
6930
6934
  }
6931
6935
  .tl-side-menu--collapsed .tl-side-menu__collapse .tl-side-menu__collapse-text {
6932
6936
  display: none;
@@ -7032,12 +7036,13 @@ body {
7032
7036
  .tl-side-menu--collapsed .tl-side-menu__dropdown .tl-side-menu__item::after {
7033
7037
  display: none;
7034
7038
  }
7035
- .tl-side-menu--collapsed .tl-side-menu__dropdown:hover .tl-side-menu__dropdown-menu {
7039
+ .tl-side-menu--collapsed .tl-side-menu__dropdown:hover .tl-side-menu__dropdown-menu,
7040
+ .tl-side-menu--collapsed .tl-side-menu__dropdown:focus-within .tl-side-menu__dropdown-menu {
7036
7041
  box-sizing: border-box;
7037
7042
  min-height: 48px;
7038
7043
  display: flex;
7039
7044
  align-items: center;
7040
- border-bottom: var(--tds-side-menu-border-thickness) solid var(--tds-side-menu-item-border-bottom-color);
7045
+ border-bottom: var(--tds-side-menu-border-thickness) solid var(--tds-side-menu-item-border-color);
7041
7046
  font-family: var(--type-system-title-01-font-family);
7042
7047
  font-size: calc(var(--type-system-title-01-font-size) * 1px);
7043
7048
  line-height: calc(var(--type-system-title-01-line-height) * 1px);
@@ -7100,10 +7105,12 @@ body {
7100
7105
  overflow-y: auto;
7101
7106
  max-height: 350px;
7102
7107
  }
7103
- .tl-side-menu--collapsed .tl-side-menu__dropdown:hover .tl-side-menu__dropdown-menu {
7108
+ .tl-side-menu--collapsed .tl-side-menu__dropdown:hover .tl-side-menu__dropdown-menu,
7109
+ .tl-side-menu--collapsed .tl-side-menu__dropdown:focus-within .tl-side-menu__dropdown-menu {
7104
7110
  display: flex;
7105
7111
  }
7106
- .tl-side-menu--collapsed .tl-side-menu__dropdown:hover .tl-side-menu__dropdown-menu .tl-side-menu__dropdown-header {
7112
+ .tl-side-menu--collapsed .tl-side-menu__dropdown:hover .tl-side-menu__dropdown-menu .tl-side-menu__dropdown-header,
7113
+ .tl-side-menu--collapsed .tl-side-menu__dropdown:focus-within .tl-side-menu__dropdown-menu .tl-side-menu__dropdown-header {
7107
7114
  display: flex;
7108
7115
  align-items: center;
7109
7116
  padding: 16px 24px 15px;
package/dist/tl-side-menu.css CHANGED
@@ -275,7 +275,7 @@ body {
275
275
  border-right: var(--side-menu-item-border-thickness) solid var(--side-menu-item-border-bottom-color);
276
276
  display: flex;
277
277
  align-items: center;
278
- height: var(--side-menu-item-height);
278
+ height: var(--side-menu-sub-item-height);
279
279
  padding: 0 var(--side-menu-item-horizontal-padding);
280
280
  width: 100%;
281
281
  background-color: var(--side-menu-item-background);
@@ -297,7 +297,7 @@ body {
297
297
  .tl-side-menu__dropdown-item:active {
298
298
  background-color: var(--side-menu-item-background-active);
299
299
  }
300
- .tl-side-menu__dropdown-item:focus {
300
+ .tl-side-menu__dropdown-item:focus-visible {
301
301
  outline: 2px solid var(--component--focus-ring-color-strong);
302
302
  box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
303
303
  outline-offset: -2px;
@@ -433,7 +433,8 @@ body {
433
433
  display: none;
434
434
  }
435
435
 
436
- .tl-side-menu__end-list .tl-side-menu__item {
436
+ .tl-side-menu__end-list {
437
+ margin-top: var(--side-menu-item-height);
437
438
  border-top: var(--side-menu-item-border-thickness) solid var(--side-menu-item-border-bottom-color);
438
439
  }
439
440
  .tl-side-menu__wrapper--empty .tl-side-menu__end-list {
@@ -458,7 +459,10 @@ body {
458
459
  @media (min-width: 992px) {
459
460
  .tl-side-menu--persistent .tl-side-menu__collapse {
460
461
  display: flex;
461
- flex-direction: row;
462
+ position: sticky;
463
+ bottom: 0;
464
+ border-top: var(--side-menu-item-border-thickness) solid var(--side-menu-item-border-bottom-color);
465
+ padding: var(--side-menu-gap) var(--side-menu-horizontal-padding);
462
466
  }
463
467
  .tl-side-menu--collapsed .tl-side-menu__collapse .tl-side-menu__collapse-text {
464
468
  display: none;
@@ -564,12 +568,13 @@ body {
564
568
  .tl-side-menu--collapsed .tl-side-menu__dropdown .tl-side-menu__item::after {
565
569
  display: none;
566
570
  }
567
- .tl-side-menu--collapsed .tl-side-menu__dropdown:hover .tl-side-menu__dropdown-menu {
571
+ .tl-side-menu--collapsed .tl-side-menu__dropdown:hover .tl-side-menu__dropdown-menu,
572
+ .tl-side-menu--collapsed .tl-side-menu__dropdown:focus-within .tl-side-menu__dropdown-menu {
568
573
  box-sizing: border-box;
569
574
  min-height: 48px;
570
575
  display: flex;
571
576
  align-items: center;
572
- border-bottom: var(--tds-side-menu-border-thickness) solid var(--tds-side-menu-item-border-bottom-color);
577
+ border-bottom: var(--tds-side-menu-border-thickness) solid var(--tds-side-menu-item-border-color);
573
578
  font-family: var(--type-system-title-01-font-family);
574
579
  font-size: calc(var(--type-system-title-01-font-size) * 1px);
575
580
  line-height: calc(var(--type-system-title-01-line-height) * 1px);
@@ -632,10 +637,12 @@ body {
632
637
  overflow-y: auto;
633
638
  max-height: 350px;
634
639
  }
635
- .tl-side-menu--collapsed .tl-side-menu__dropdown:hover .tl-side-menu__dropdown-menu {
640
+ .tl-side-menu--collapsed .tl-side-menu__dropdown:hover .tl-side-menu__dropdown-menu,
641
+ .tl-side-menu--collapsed .tl-side-menu__dropdown:focus-within .tl-side-menu__dropdown-menu {
636
642
  display: flex;
637
643
  }
638
- .tl-side-menu--collapsed .tl-side-menu__dropdown:hover .tl-side-menu__dropdown-menu .tl-side-menu__dropdown-header {
644
+ .tl-side-menu--collapsed .tl-side-menu__dropdown:hover .tl-side-menu__dropdown-menu .tl-side-menu__dropdown-header,
645
+ .tl-side-menu--collapsed .tl-side-menu__dropdown:focus-within .tl-side-menu__dropdown-menu .tl-side-menu__dropdown-header {
639
646
  display: flex;
640
647
  align-items: center;
641
648
  padding: 16px 24px 15px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@scania/tegel-lite",
3
- "version": "0.1.0-side-menu-beta.1",
3
+ "version": "0.1.0-side-menu-beta.3",
4
4
  "description": "Styles-only library for Tegel Design System (Beta)",
5
5
  "type": "module",
6
6
  "keywords": [