@odx/ui 4.3.3 → 4.3.4

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 (4) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/core-theme.css +16 -12
  3. package/package.json +1 -1
  4. package/scss/components/main-menu.component.scss +19 -15
package/CHANGELOG.md CHANGED
@@ -1,5 +1,12 @@
1
1
  # @odx/ui
2
2
 
3
+ ## 4.3.4
4
+
5
+ ### Patch Changes
6
+
7
+ - 20ab0c2: main menu overlapping is fixed, main menu is popover based element
8
+ - 88191e2: box shadow for main menu fixed
9
+
3
10
  ## 4.3.3
4
11
 
5
12
  ### Patch Changes
package/core-theme.css CHANGED
@@ -5105,32 +5105,36 @@ html body .odx-fs-italic {
5105
5105
  .odx-main-menu {
5106
5106
  --odx-area-header-title-color: var(--odx-main-menu-text-color);
5107
5107
  --odx-area-header-subtitle-color: var(--odx-main-menu-text-color);
5108
- z-index: var(--odx-v-layer-6);
5109
5108
  }
5110
5109
  .odx-main-menu__inner {
5110
+ transition-delay: 0ms;
5111
+ transition-duration: var(--odx-v-transition-duration);
5112
+ transition-property: transform;
5113
+ transition-timing-function: var(--odx-v-transition-easing-fn);
5111
5114
  background-color: var(--odx-main-menu-background-color);
5115
+ box-shadow: var(--odx-v-box-shadow-layer-1);
5112
5116
  color: var(--odx-main-menu-text-color);
5113
5117
  display: grid;
5114
5118
  grid-template-rows: auto auto 1fr auto auto;
5115
5119
  height: 100%;
5116
- left: 0;
5117
5120
  max-height: 100dvh;
5118
5121
  max-width: var(--odx-main-menu-max-width);
5119
- position: fixed;
5120
- top: 0;
5122
+ transform: translateX(-100%);
5123
+ transition-behavior: allow-discrete;
5121
5124
  width: 100%;
5122
- z-index: var(--odx-v-layer-6);
5123
5125
  }
5124
- .odx-main-menu__overlay {
5126
+ .odx-main-menu__inner::backdrop {
5125
5127
  -webkit-backdrop-filter: blur(var(--odx-v-backdrop-blur));
5126
5128
  backdrop-filter: blur(var(--odx-v-backdrop-blur));
5127
5129
  background-color: var(--odx-c-backdrop);
5128
- height: 100%;
5129
- left: 0;
5130
- position: fixed;
5131
- top: 0;
5132
- width: 100%;
5133
- z-index: calc(var(--odx-v-layer-6) - 1);
5130
+ }
5131
+ .odx-main-menu__inner:popover-open {
5132
+ transform: translateX(0);
5133
+ }
5134
+ @starting-style {
5135
+ .odx-main-menu__inner:popover-open {
5136
+ transform: translateX(-100%);
5137
+ }
5134
5138
  }
5135
5139
  .odx-main-menu__actions {
5136
5140
  margin-top: calc(var(--odx-vertical-rythm-base-size) * 0);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@odx/ui",
3
- "version": "4.3.3",
3
+ "version": "4.3.4",
4
4
  "author": "Drägerwerk AG & Co.KGaA",
5
5
  "license": "SEE LICENSE IN LICENSE",
6
6
  "peerDependencies": {
package/scss/components/main-menu.component.scss CHANGED
@@ -3,6 +3,7 @@
3
3
  @use '../abstract/dimensions';
4
4
  @use '../abstract/utils';
5
5
  @use '../abstract/typography';
6
+ @use '../abstract/motion';
6
7
  @use 'button.component';
7
8
  @use 'main-menu-button.component';
8
9
  @use 'main-menu-item.component';
@@ -28,32 +29,35 @@
28
29
  --odx-area-header-title-color: var(--odx-main-menu-text-color);
29
30
  --odx-area-header-subtitle-color: var(--odx-main-menu-text-color);
30
31
 
31
- z-index: var(--odx-v-layer-6);
32
-
33
32
  &__inner {
33
+ @include motion.transition(transform);
34
+
34
35
  background-color: var(--odx-main-menu-background-color);
36
+ box-shadow: var(--odx-v-box-shadow-layer-1);
35
37
  color: var(--odx-main-menu-text-color);
36
38
  display: grid;
37
39
  grid-template-rows: auto auto 1fr auto auto;
38
40
  height: 100%;
39
- left: 0;
40
41
  max-height: 100dvh;
41
42
  max-width: var(--odx-main-menu-max-width);
42
- position: fixed;
43
- top: 0;
43
+ transform: translateX(-100%);
44
+ transition-behavior: allow-discrete;
44
45
  width: 100%;
45
- z-index: var(--odx-v-layer-6);
46
+
47
+ &::backdrop {
48
+ backdrop-filter: blur(var(--odx-v-backdrop-blur));
49
+ background-color: var(--odx-c-backdrop);
50
+ }
51
+
52
+ &:popover-open {
53
+ transform: translateX(0);
54
+ }
46
55
  }
47
56
 
48
- &__overlay {
49
- backdrop-filter: blur(var(--odx-v-backdrop-blur));
50
- background-color: var(--odx-c-backdrop);
51
- height: 100%;
52
- left: 0;
53
- position: fixed;
54
- top: 0;
55
- width: 100%;
56
- z-index: calc(var(--odx-v-layer-6) - 1);
57
+ @starting-style {
58
+ &__inner:popover-open {
59
+ transform: translateX(-100%);
60
+ }
57
61
  }
58
62
 
59
63
  &__actions {