@scania/tegel-lite 0.1.0-side-menu-beta.0 → 0.1.0-side-menu-beta.2

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 +43 -5
  2. package/dist/tl-side-menu.css +43 -5
  3. package/package.json +1 -1
package/dist/components.css CHANGED
@@ -6902,6 +6902,7 @@ body {
6902
6902
  }
6903
6903
 
6904
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 {
@@ -6922,12 +6923,14 @@ body {
6922
6923
 
6923
6924
  .tl-side-menu__collapse {
6924
6925
  display: none;
6925
- border-top: var(--side-menu-item-border-thickness) solid var(--side-menu-item-border-bottom-color);
6926
6926
  }
6927
6927
  @media (min-width: 992px) {
6928
6928
  .tl-side-menu--persistent .tl-side-menu__collapse {
6929
6929
  display: flex;
6930
- 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);
6931
6934
  }
6932
6935
  .tl-side-menu--collapsed .tl-side-menu__collapse .tl-side-menu__collapse-text {
6933
6936
  display: none;
@@ -6940,7 +6943,7 @@ body {
6940
6943
 
6941
6944
  .tl-side-menu__aside {
6942
6945
  background-color: var(--side-menu-background);
6943
- width: 100%;
6946
+ width: 80%;
6944
6947
  height: inherit;
6945
6948
  position: relative;
6946
6949
  left: 0;
@@ -7038,7 +7041,7 @@ body {
7038
7041
  min-height: 48px;
7039
7042
  display: flex;
7040
7043
  align-items: center;
7041
- border-bottom: var(--tds-side-menu-border-thickness) solid var(--tds-side-menu-item-border-bottom-color);
7044
+ border-bottom: var(--tds-side-menu-border-thickness) solid var(--tds-side-menu-item-border-color);
7042
7045
  font-family: var(--type-system-title-01-font-family);
7043
7046
  font-size: calc(var(--type-system-title-01-font-size) * 1px);
7044
7047
  line-height: calc(var(--type-system-title-01-line-height) * 1px);
@@ -7069,7 +7072,42 @@ body {
7069
7072
  max-width: 300px;
7070
7073
  flex-direction: column;
7071
7074
  }
7072
- .tl-side-menu--collapsed .tl-side-menu__dropdown-header {
7075
+ .tl-side-menu--collapsed .tl-side-menu__dropdown-menu::-webkit-scrollbar {
7076
+ width: var(--tl-scrollbar-width);
7077
+ }
7078
+ .tl-side-menu--collapsed .tl-side-menu__dropdown-menu::-webkit-scrollbar-track {
7079
+ background: var(--tl-scrollbar-track-color);
7080
+ }
7081
+ .tl-side-menu--collapsed .tl-side-menu__dropdown-menu::-webkit-scrollbar-thumb {
7082
+ border-radius: var(--tl-scrollbar-thumb-border-radius);
7083
+ background: var(--tl-scrollbar-thumb-color);
7084
+ border-width: var(--tl-scrollbar-thumb-border-width);
7085
+ border-style: solid;
7086
+ border-color: transparent;
7087
+ background-clip: padding-box;
7088
+ }
7089
+ .tl-side-menu--collapsed .tl-side-menu__dropdown-menu::-webkit-scrollbar-thumb:hover {
7090
+ border-width: var(--tl-scrollbar-thumb-border-hover-width);
7091
+ border-radius: var(--tl-scrollbar-hover-thumb-border-radius);
7092
+ }
7093
+ .tl-side-menu--collapsed .tl-side-menu__dropdown-menu::-webkit-scrollbar-button {
7094
+ height: 0;
7095
+ width: 0;
7096
+ }
7097
+ @supports not selector(::-webkit-scrollbar) {
7098
+ .tl-side-menu--collapsed .tl-side-menu__dropdown-menu {
7099
+ scrollbar-color: var(--tl-scrollbar-thumb-color) var(--tl-scrollbar-track-color);
7100
+ scrollbar-width: var(--tl-scrollbar-width-standard);
7101
+ }
7102
+ }
7103
+ .tl-side-menu--collapsed .tl-side-menu__dropdown-menu {
7104
+ overflow-y: auto;
7105
+ max-height: 350px;
7106
+ }
7107
+ .tl-side-menu--collapsed .tl-side-menu__dropdown:hover .tl-side-menu__dropdown-menu {
7108
+ display: flex;
7109
+ }
7110
+ .tl-side-menu--collapsed .tl-side-menu__dropdown:hover .tl-side-menu__dropdown-menu .tl-side-menu__dropdown-header {
7073
7111
  display: flex;
7074
7112
  align-items: center;
7075
7113
  padding: 16px 24px 15px;
package/dist/tl-side-menu.css CHANGED
@@ -434,6 +434,7 @@ body {
434
434
  }
435
435
 
436
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 {
@@ -454,12 +455,14 @@ body {
454
455
 
455
456
  .tl-side-menu__collapse {
456
457
  display: none;
457
- border-top: var(--side-menu-item-border-thickness) solid var(--side-menu-item-border-bottom-color);
458
458
  }
459
459
  @media (min-width: 992px) {
460
460
  .tl-side-menu--persistent .tl-side-menu__collapse {
461
461
  display: flex;
462
- 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);
463
466
  }
464
467
  .tl-side-menu--collapsed .tl-side-menu__collapse .tl-side-menu__collapse-text {
465
468
  display: none;
@@ -472,7 +475,7 @@ body {
472
475
 
473
476
  .tl-side-menu__aside {
474
477
  background-color: var(--side-menu-background);
475
- width: 100%;
478
+ width: 80%;
476
479
  height: inherit;
477
480
  position: relative;
478
481
  left: 0;
@@ -570,7 +573,7 @@ body {
570
573
  min-height: 48px;
571
574
  display: flex;
572
575
  align-items: center;
573
- border-bottom: var(--tds-side-menu-border-thickness) solid var(--tds-side-menu-item-border-bottom-color);
576
+ border-bottom: var(--tds-side-menu-border-thickness) solid var(--tds-side-menu-item-border-color);
574
577
  font-family: var(--type-system-title-01-font-family);
575
578
  font-size: calc(var(--type-system-title-01-font-size) * 1px);
576
579
  line-height: calc(var(--type-system-title-01-line-height) * 1px);
@@ -601,7 +604,42 @@ body {
601
604
  max-width: 300px;
602
605
  flex-direction: column;
603
606
  }
604
- .tl-side-menu--collapsed .tl-side-menu__dropdown-header {
607
+ .tl-side-menu--collapsed .tl-side-menu__dropdown-menu::-webkit-scrollbar {
608
+ width: var(--tl-scrollbar-width);
609
+ }
610
+ .tl-side-menu--collapsed .tl-side-menu__dropdown-menu::-webkit-scrollbar-track {
611
+ background: var(--tl-scrollbar-track-color);
612
+ }
613
+ .tl-side-menu--collapsed .tl-side-menu__dropdown-menu::-webkit-scrollbar-thumb {
614
+ border-radius: var(--tl-scrollbar-thumb-border-radius);
615
+ background: var(--tl-scrollbar-thumb-color);
616
+ border-width: var(--tl-scrollbar-thumb-border-width);
617
+ border-style: solid;
618
+ border-color: transparent;
619
+ background-clip: padding-box;
620
+ }
621
+ .tl-side-menu--collapsed .tl-side-menu__dropdown-menu::-webkit-scrollbar-thumb:hover {
622
+ border-width: var(--tl-scrollbar-thumb-border-hover-width);
623
+ border-radius: var(--tl-scrollbar-hover-thumb-border-radius);
624
+ }
625
+ .tl-side-menu--collapsed .tl-side-menu__dropdown-menu::-webkit-scrollbar-button {
626
+ height: 0;
627
+ width: 0;
628
+ }
629
+ @supports not selector(::-webkit-scrollbar) {
630
+ .tl-side-menu--collapsed .tl-side-menu__dropdown-menu {
631
+ scrollbar-color: var(--tl-scrollbar-thumb-color) var(--tl-scrollbar-track-color);
632
+ scrollbar-width: var(--tl-scrollbar-width-standard);
633
+ }
634
+ }
635
+ .tl-side-menu--collapsed .tl-side-menu__dropdown-menu {
636
+ overflow-y: auto;
637
+ max-height: 350px;
638
+ }
639
+ .tl-side-menu--collapsed .tl-side-menu__dropdown:hover .tl-side-menu__dropdown-menu {
640
+ display: flex;
641
+ }
642
+ .tl-side-menu--collapsed .tl-side-menu__dropdown:hover .tl-side-menu__dropdown-menu .tl-side-menu__dropdown-header {
605
643
  display: flex;
606
644
  align-items: center;
607
645
  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.0",
3
+ "version": "0.1.0-side-menu-beta.2",
4
4
  "description": "Styles-only library for Tegel Design System (Beta)",
5
5
  "type": "module",
6
6
  "keywords": [