@db-ux/core-components 3.0.2-shell3-f02f005 → 3.0.2-shell4-bdb351c

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 (13) hide show
  1. package/build/components/control-panel-flat-icon-navigation/control-panel-flat-icon-navigation.css +30 -0
  2. package/build/components/control-panel-flat-icon-navigation/control-panel-flat-icon-navigation.scss +11 -0
  3. package/build/components/control-panel-mobile/control-panel-mobile.css +1 -1
  4. package/build/components/drawer/drawer.css +1 -1
  5. package/build/components/drawer/drawer.scss +1 -1
  6. package/build/components/shell/shell-mobile.css +1 -1
  7. package/build/components/shell/shell.css +1 -1
  8. package/build/styles/absolute.css +2 -2
  9. package/build/styles/index.css +2 -2
  10. package/build/styles/relative.css +2 -2
  11. package/build/styles/rollup.css +2 -2
  12. package/build/styles/webpack.css +2 -2
  13. package/package.json +2 -2
package/build/components/control-panel-flat-icon-navigation/control-panel-flat-icon-navigation.css CHANGED
@@ -136,6 +136,19 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
136
136
  * @mixin screen-min-max
137
137
  * @param $data an object like (min:"sm", max:"lg") or (min: "sm")
138
138
  */
139
+ /* Sub components for shell */
140
+ .db-control-panel-flat-icon-navigation .db-navigation > menu .db-navigation-item a::after {
141
+ content: "";
142
+ position: absolute;
143
+ border-radius: var(--db-border-radius-xs);
144
+ background: linear-gradient(135deg, var(--db-pride-red, var(--db-brand-on-bg-basic-emphasis-70-default)) 16.7%, var(--db-pride-orange, var(--db-brand-on-bg-basic-emphasis-70-default)) 0, var(--db-pride-orange, var(--db-brand-on-bg-basic-emphasis-70-default)) 33.4%, var(--db-pride-yellow, var(--db-brand-on-bg-basic-emphasis-70-default)) 0, var(--db-pride-yellow, var(--db-brand-on-bg-basic-emphasis-70-default)) 50.1%, var(--db-pride-green, var(--db-brand-on-bg-basic-emphasis-70-default)) 0, var(--db-pride-green, var(--db-brand-on-bg-basic-emphasis-70-default)) 66.8%, var(--db-pride-blue, var(--db-brand-on-bg-basic-emphasis-70-default)) 0, var(--db-pride-blue, var(--db-brand-on-bg-basic-emphasis-70-default)) 83.5%, var(--db-pride-violet, var(--db-brand-on-bg-basic-emphasis-70-default)) 0);
145
+ }
146
+ @media screen and (prefers-reduced-motion: no-preference) {
147
+ .db-control-panel-flat-icon-navigation .db-navigation > menu .db-navigation-item a::after {
148
+ transition: height var(--db-transition-duration-fast) var(--db-transition-timing-emotional), width var(--db-transition-duration-fast) var(--db-transition-timing-emotional);
149
+ }
150
+ }
151
+
139
152
  .db-control-panel-flat-icon-navigation {
140
153
  display: none;
141
154
  }
@@ -160,6 +173,22 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
160
173
  min-block-size: var(--db-sizing-md);
161
174
  min-inline-size: var(--db-sizing-md);
162
175
  }
176
+ .db-control-panel-flat-icon-navigation .db-navigation > menu .db-navigation-item a::after {
177
+ block-size: var(--db-border-width-xs);
178
+ inline-size: 0;
179
+ transform: translate(-50%, 0);
180
+ inset-inline-start: 50%;
181
+ inset-block: auto calc(-1 * var(--db-spacing-fixed-xs));
182
+ }
183
+ .db-control-panel-flat-icon-navigation .db-navigation > menu .db-navigation-item a:has([aria-current=page])::after, .db-control-panel-flat-icon-navigation .db-navigation > menu .db-navigation-item a:has([data-active=true])::after, .db-control-panel-flat-icon-navigation .db-navigation > menu .db-navigation-item a[aria-current=page]::after, .db-control-panel-flat-icon-navigation .db-navigation > menu .db-navigation-item a[data-active=true]::after {
184
+ block-size: var(--db-border-width-xs);
185
+ inline-size: 100%;
186
+ }
187
+ @media (forced-colors: active) {
188
+ .db-control-panel-flat-icon-navigation .db-navigation > menu .db-navigation-item a:has([aria-current=page])::after, .db-control-panel-flat-icon-navigation .db-navigation > menu .db-navigation-item a:has([data-active=true])::after, .db-control-panel-flat-icon-navigation .db-navigation > menu .db-navigation-item a[aria-current=page]::after, .db-control-panel-flat-icon-navigation .db-navigation > menu .db-navigation-item a[data-active=true]::after {
189
+ border: calc(var(--db-border-width-xs) - 1px) solid var(--db-adaptive-on-bg-basic-emphasis-100-default);
190
+ }
191
+ }
163
192
  .db-control-panel-flat-icon-navigation .db-navigation .db-navigation-item:not([data-icon]),
164
193
  .db-control-panel-flat-icon-navigation .db-navigation .db-navigation-item-group {
165
194
  display: none;
@@ -189,4 +218,5 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
189
218
  padding-block: var(--nav-icon-size) 0;
190
219
  padding-inline-end: var(--db-spacing-fixed-3xs);
191
220
  inline-size: fit-content;
221
+ justify-content: center;
192
222
  }
package/build/components/control-panel-flat-icon-navigation/control-panel-flat-icon-navigation.scss CHANGED
@@ -2,6 +2,8 @@
2
2
  @use "@db-ux/core-foundations/build/styles/variables";
3
3
  @use "@db-ux/core-foundations/build/styles/fonts";
4
4
  @use "../../styles/internal/form-components";
5
+ @use "../../styles/internal/navigation-item";
6
+ @use "../../styles/internal/indicator";
5
7
 
6
8
  .db-control-panel-flat-icon-navigation {
7
9
  display: none;
@@ -24,8 +26,16 @@
24
26
  align-items: center;
25
27
 
26
28
  a {
29
+ @extend %indicator;
30
+
27
31
  min-block-size: variables.$db-sizing-md;
28
32
  min-inline-size: variables.$db-sizing-md;
33
+
34
+ @include indicator.set-indicator-horizontal();
35
+
36
+ @include navigation-item.active-navigation-item {
37
+ @include indicator.show-indicator-horizontal();
38
+ }
29
39
  }
30
40
  }
31
41
  }
@@ -77,6 +87,7 @@
77
87
  padding-block: var(--nav-icon-size) 0;
78
88
  padding-inline-end: variables.$db-spacing-fixed-3xs;
79
89
  inline-size: fit-content;
90
+ justify-content: center;
80
91
  }
81
92
  }
82
93
  }
package/build/components/control-panel-mobile/control-panel-mobile.css CHANGED
@@ -173,7 +173,7 @@ dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data
173
173
  .db-drawer .db-drawer-container[data-direction=down]:not([data-width=full]), .db-control-panel-mobile[data-position=bottom] .db-drawer > .db-drawer-container:not([data-width=full]), .db-drawer .db-drawer-container[data-direction=up]:not([data-width=full]) {
174
174
  max-block-size: var(--db-drawer-max-height, calc(100% - var(--db-spacing-fixed-xl)));
175
175
  min-block-size: var(--db-drawer-min-height, calc(100% - var(--db-spacing-fixed-xl)));
176
- max-inline-size: none;
176
+ max-inline-size: 100vw;
177
177
  }
178
178
 
179
179
  .db-control-panel-mobile[data-position=bottom] .db-drawer > .db-drawer-container, .db-drawer .db-drawer-container[data-direction=up] {
package/build/components/drawer/drawer.css CHANGED
@@ -172,7 +172,7 @@ dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data
172
172
  .db-drawer .db-drawer-container[data-direction=down]:not([data-width=full]), .db-drawer .db-drawer-container[data-direction=up]:not([data-width=full]) {
173
173
  max-block-size: var(--db-drawer-max-height, calc(100% - var(--db-spacing-fixed-xl)));
174
174
  min-block-size: var(--db-drawer-min-height, calc(100% - var(--db-spacing-fixed-xl)));
175
- max-inline-size: none;
175
+ max-inline-size: 100vw;
176
176
  }
177
177
 
178
178
  .db-drawer .db-drawer-container[data-direction=up] {
package/build/components/drawer/drawer.scss CHANGED
@@ -34,7 +34,7 @@
34
34
  --db-drawer-min-height,
35
35
  calc(100% - #{variables.$db-spacing-fixed-xl})
36
36
  );
37
- max-inline-size: none;
37
+ max-inline-size: 100vw;
38
38
  }
39
39
  }
40
40
 
package/build/components/shell/shell-mobile.css CHANGED
@@ -252,7 +252,7 @@ dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data
252
252
  .db-drawer .db-drawer-container[data-direction=down]:not([data-width=full]), .db-drawer .db-drawer-container[data-direction=up]:not([data-width=full]) {
253
253
  max-block-size: var(--db-drawer-max-height, calc(100% - var(--db-spacing-fixed-xl)));
254
254
  min-block-size: var(--db-drawer-min-height, calc(100% - var(--db-spacing-fixed-xl)));
255
- max-inline-size: none;
255
+ max-inline-size: 100vw;
256
256
  }
257
257
 
258
258
  .db-drawer .db-drawer-container[data-direction=up] {
package/build/components/shell/shell.css CHANGED
@@ -1015,7 +1015,7 @@ dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data
1015
1015
  .db-drawer .db-drawer-container[data-direction=down]:not([data-width=full]), .db-shell[data-control-panel-mobile-position=bottom] > * > db-control-panel-mobile > .db-control-panel-mobile .db-drawer > .db-drawer-container:not([data-width=full]), .db-shell[data-control-panel-mobile-position=bottom] > db-control-panel-mobile > .db-control-panel-mobile .db-drawer > .db-drawer-container:not([data-width=full]), .db-shell[data-control-panel-mobile-position=bottom] > .db-control-panel-mobile .db-drawer > .db-drawer-container:not([data-width=full]), .db-drawer .db-drawer-container[data-direction=up]:not([data-width=full]) {
1016
1016
  max-block-size: var(--db-drawer-max-height, calc(100% - var(--db-spacing-fixed-xl)));
1017
1017
  min-block-size: var(--db-drawer-min-height, calc(100% - var(--db-spacing-fixed-xl)));
1018
- max-inline-size: none;
1018
+ max-inline-size: 100vw;
1019
1019
  }
1020
1020
 
1021
1021
  .db-shell[data-control-panel-mobile-position=bottom] > * > db-control-panel-mobile > .db-control-panel-mobile .db-drawer > .db-drawer-container, .db-shell[data-control-panel-mobile-position=bottom] > db-control-panel-mobile > .db-control-panel-mobile .db-drawer > .db-drawer-container, .db-shell[data-control-panel-mobile-position=bottom] > .db-control-panel-mobile .db-drawer > .db-drawer-container, .db-drawer .db-drawer-container[data-direction=up] {