@@ -59,45 +56,6 @@ For general installation and configuration take a look at the [components](https
Option 2
-
-
-
-
-
-
-
-
-
diff --git a/packages/components/src/components/custom-select/docs/React.md b/packages/components/src/components/custom-select/docs/React.md
index b0eb8a9ae161..d6f3b32d5348 100644
--- a/packages/components/src/components/custom-select/docs/React.md
+++ b/packages/components/src/components/custom-select/docs/React.md
@@ -12,13 +12,7 @@ const App = () => (
);
diff --git a/packages/components/src/components/custom-select/docs/Vue.md b/packages/components/src/components/custom-select/docs/Vue.md
index e04ee7cfd1b4..f1e896379096 100644
--- a/packages/components/src/components/custom-select/docs/Vue.md
+++ b/packages/components/src/components/custom-select/docs/Vue.md
@@ -14,13 +14,7 @@ import { DBCustomSelect } from "@db-ui/v-components";
```
diff --git a/packages/components/src/components/drawer/drawer.scss b/packages/components/src/components/drawer/drawer.scss
index 5bb87e45d053..3843e6431073 100644
--- a/packages/components/src/components/drawer/drawer.scss
+++ b/packages/components/src/components/drawer/drawer.scss
@@ -137,8 +137,8 @@ $spacings: (
.db-drawer-container {
@extend %direction-right;
@extend %spacing-drawer;
- @include helpers.display(flex);
+ display: flex;
flex-direction: column;
background-color: colors.$db-adaptive-bg-basic-level-1-default;
block-size: 100%;
@@ -204,7 +204,8 @@ $spacings: (
}
.db-drawer-header {
- @include helpers.display(none);
+ display: none;
+
@include helpers.divider("bottom");
.db-drawer-header-text {
@@ -223,7 +224,7 @@ $spacings: (
&:has(.button-close-drawer),
&:has(:not(.db-drawer-header-text:empty)) {
- @include helpers.display(flex);
+ display: flex;
}
}
}
@@ -237,7 +238,7 @@ $spacings: (
background-color: transparent;
&[open] {
- @include helpers.display(flex);
+ display: flex;
}
&:not([data-direction]),
diff --git a/packages/components/src/components/header/header.scss b/packages/components/src/components/header/header.scss
index db0874b53eb7..9b85cc8ddd22 100644
--- a/packages/components/src/components/header/header.scss
+++ b/packages/components/src/components/header/header.scss
@@ -7,9 +7,7 @@
.db-header {
background-color: colors.$db-adaptive-bg-basic-level-1-default;
-
- @include helpers.display(flex);
-
+ display: flex;
flex-direction: column;
position: relative;
min-block-size: component.$min-mobile-header-height;
@@ -36,7 +34,7 @@
}
.db-link {
- @include helpers.display(inline-block);
+ display: inline-block;
}
&[data-on-forcing-mobile="true"] {
@@ -61,7 +59,7 @@
.db-header-meta-navigation:empty
):has(.db-header-secondary-action:empty) {
.db-header-burger-menu-container {
- @include helpers.display(none);
+ display: none;
}
}
@@ -75,8 +73,7 @@
}
.db-header-navigation-bar {
- @include helpers.display(flex);
-
+ display: flex;
position: relative;
padding: variables.$db-spacing-fixed-xs variables.$db-spacing-fixed-md;
inline-size: 100%;
@@ -89,8 +86,8 @@
.db-header-meta-navigation {
@extend %db-density-functional;
- @include helpers.display(flex);
+ display: flex;
flex-direction: column;
gap: variables.$db-spacing-fixed-sm;
justify-content: flex-end;
@@ -110,18 +107,17 @@
}
&:empty {
- @include helpers.display(none);
+ display: none;
}
}
&:empty {
- @include helpers.display(none);
+ display: none;
}
}
.db-header-navigation-container {
- @include helpers.display(inherit);
-
+ display: inherit;
flex: 1 1 auto;
inline-size: 100%;
align-items: center;
@@ -143,12 +139,12 @@
}
.db-header-brand-container:not(:has(> :nth-child(1))) {
- @include helpers.display(none);
+ display: none;
}
.db-header-action-container:has(> .db-header-secondary-action:empty) {
@include screen-sizes.screen("md") {
- @include helpers.display(none);
+ display: none;
}
}
@@ -176,9 +172,7 @@
.db-header-action-container {
align-items: center;
block-size: 100%;
-
- @include helpers.display(inherit);
-
+ display: inherit;
gap: inherit;
flex: 0 1 auto;
flex-grow: 0;
@@ -201,8 +195,7 @@
}
.db-header-drawer-navigation {
- @include helpers.display(flex);
-
+ display: flex;
flex-direction: column;
flex: 1 1 auto;
block-size: 100%;
@@ -220,8 +213,7 @@
.db-header-navigation,
.db-header-secondary-action {
- @include helpers.display(flex);
-
+ display: flex;
gap: variables.$db-spacing-fixed-sm;
padding-inline: variables.$db-spacing-fixed-md;
@@ -242,8 +234,7 @@
padding-block-end: 0;
.db-drawer-content {
- @include helpers.display(flex);
-
+ display: flex;
flex-direction: column;
block-size: 100%;
overflow: hidden;
@@ -254,21 +245,21 @@
.db-header-meta-navigation,
.db-header-navigation-container > .db-header-navigation,
.db-header-action-container > .db-header-secondary-action {
- @include helpers.display(none);
+ display: none;
@include screen-sizes.screen("md") {
- @include helpers.display(inherit);
+ display: inherit;
}
}
/* Only for Mobile */
.db-header-drawer-navigation > .db-header-meta-navigation:not(:empty) {
- @include helpers.display(inherit);
+ display: inherit;
}
.db-header-drawer,
.db-header-burger-menu-container {
@include screen-sizes.screen("md") {
- @include helpers.display(none);
+ display: none;
}
}
diff --git a/packages/components/src/components/icon/icon.scss b/packages/components/src/components/icon/icon.scss
index d3cc8911dcb6..62c7fcd7e2c5 100644
--- a/packages/components/src/components/icon/icon.scss
+++ b/packages/components/src/components/icon/icon.scss
@@ -1,12 +1,11 @@
@use "@db-ux/core-foundations/build/styles/icons";
-@use "@db-ux/core-foundations/build/styles/helpers/display";
.db-icon {
@include icons.is-icon-text-replace;
/* Safari hack */
@supports (-webkit-hyphens: none) {
- @include display.display(inline-block);
+ display: inline-block;
&::before {
block-size: auto;
diff --git a/packages/components/src/components/infotext/infotext.scss b/packages/components/src/components/infotext/infotext.scss
index a3c1a2ade67f..d485ecf5aeae 100644
--- a/packages/components/src/components/infotext/infotext.scss
+++ b/packages/components/src/components/infotext/infotext.scss
@@ -1,7 +1,6 @@
@use "sass:map";
@use "@db-ux/core-foundations/build/styles/fonts";
@use "@db-ux/core-foundations/build/styles/variables";
-@use "@db-ux/core-foundations/build/styles/helpers/display";
@use "@db-ux/core-foundations/build/styles/colors";
@use "@db-ux/core-foundations/build/styles/icons";
@@ -9,7 +8,8 @@
--db-icon-margin-end: #{variables.$db-spacing-fixed-2xs};
@extend %db-overwrite-font-size-sm;
- @include display.display(flex);
+
+ display: flex;
@include icons.has-no-icon {
@include icons.to-filled-icon;
diff --git a/packages/components/src/components/input/docs/React.md b/packages/components/src/components/input/docs/React.md
index b52b81365ae0..6a3df8f565e0 100644
--- a/packages/components/src/components/input/docs/React.md
+++ b/packages/components/src/components/input/docs/React.md
@@ -1,7 +1,5 @@
## React
-Warning: Date input is not working with iOS Voiceover currently, compare to [React issue](https://github.com/facebook/react/issues/33541) and [WebKit bug](https://bugs.webkit.org/show_bug.cgi?id=294649).
-
Load SCSS globally in a `index.scss` file inside `main.tsx`/`main.jsx` within your app:
```scss
diff --git a/packages/components/src/components/navigation-item/navigation-item.scss b/packages/components/src/components/navigation-item/navigation-item.scss
index d05b2cca7a3e..0ad50ceb56bc 100644
--- a/packages/components/src/components/navigation-item/navigation-item.scss
+++ b/packages/components/src/components/navigation-item/navigation-item.scss
@@ -56,6 +56,7 @@
background-color: colors.$db-adaptive-bg-basic-transparent-full-default;
cursor: pointer;
inline-size: 100%;
+ display: inline-flex;
border-radius: variables.$db-border-radius-sm;
padding: variables.$db-spacing-fixed-xs variables.$db-spacing-fixed-sm;
white-space: nowrap; // we don't want to break
@@ -63,8 +64,6 @@
align-items: center; // Centering the content vertically and horizontally
justify-content: space-between;
- @include helpers.display(inline-flex);
-
@include helpers.hover {
background-color: colors.$db-adaptive-bg-basic-transparent-full-hovered;
}
@@ -83,8 +82,8 @@
@extend %db-overwrite-font-size-md;
@include icon-passing.icon-passing;
- @include helpers.display(inline-flex);
+ display: inline-flex;
position: relative;
inline-size: auto;
@@ -187,9 +186,7 @@
@extend %component-border;
margin: 0;
-
- @include helpers.display(flex);
-
+ display: flex;
flex-direction: column;
z-index: 70;
inset-inline-start: 0;
@@ -202,7 +199,7 @@
@include screen-sizes.screen("md") {
.db-mobile-navigation-back {
- @include helpers.display(none);
+ display: none;
}
}
@@ -307,7 +304,7 @@
}
&:empty {
- @include helpers.display(none);
+ display: none;
}
.db-navigation-item {
@@ -320,8 +317,7 @@
}
.db-mobile-navigation-back {
- @include helpers.display(flex);
-
+ display: flex;
font-weight: normal;
background-color: colors.$db-adaptive-bg-basic-level-1-default;
padding-block-end: variables.$db-spacing-fixed-md;
diff --git a/packages/components/src/components/navigation/navigation.scss b/packages/components/src/components/navigation/navigation.scss
index 77167a220135..efd63fb4f3e5 100644
--- a/packages/components/src/components/navigation/navigation.scss
+++ b/packages/components/src/components/navigation/navigation.scss
@@ -1,7 +1,6 @@
@use "@db-ux/core-foundations/build/styles/variables";
@use "@db-ux/core-foundations/build/styles/screen-sizes";
@use "../../styles/internal/component";
-@use "@db-ux/core-foundations/build/styles/helpers/display";
@use "../../styles/internal/form-components";
@use "../../styles/internal/db-puls";
@@ -15,8 +14,7 @@
}
> menu {
- @include display.display(flex);
-
+ display: flex;
flex-direction: column;
padding: 0;
margin: 0;
@@ -102,7 +100,7 @@
&[data-force-close="true"] {
> menu menu {
@include screen-sizes.screen("md") {
- @include display.display(none);
+ display: none;
}
}
}
diff --git a/packages/components/src/components/notification/notification-grid-non-overlay.scss b/packages/components/src/components/notification/notification-grid-non-overlay.scss
index 41c36fc9e2f1..75fc0902d0a5 100644
--- a/packages/components/src/components/notification/notification-grid-non-overlay.scss
+++ b/packages/components/src/components/notification/notification-grid-non-overlay.scss
@@ -1,8 +1,6 @@
-@use "@db-ux/core-foundations/build/styles/helpers/display";
-
%grid-layout-variant-not-overlay {
span {
- @include display.display(none);
+ display: none;
}
// has link
diff --git a/packages/components/src/components/notification/notification.scss b/packages/components/src/components/notification/notification.scss
index bc3b4be769c8..539344e6ceff 100644
--- a/packages/components/src/components/notification/notification.scss
+++ b/packages/components/src/components/notification/notification.scss
@@ -1,7 +1,6 @@
@use "sass:map";
@use "@db-ux/core-foundations/build/styles/density";
@use "@db-ux/core-foundations/build/styles/variables";
-@use "@db-ux/core-foundations/build/styles/helpers/display";
@use "@db-ux/core-foundations/build/styles/colors";
@use "@db-ux/core-foundations/build/styles/icons";
@use "@db-ux/core-foundations/build/styles/screen-sizes";
@@ -28,8 +27,8 @@
@extend %component-border;
@extend %grid-layout-default;
@extend %ugly-line-height-workarounds;
- @include display.display(grid);
+ display: grid;
padding: variables.$db-spacing-fixed-md;
gap: variables.$db-spacing-fixed-xs variables.$db-spacing-fixed-md;
inline-size: inherit;
diff --git a/packages/components/src/components/page/page.scss b/packages/components/src/components/page/page.scss
index 116dc41ea548..848113a08a51 100644
--- a/packages/components/src/components/page/page.scss
+++ b/packages/components/src/components/page/page.scss
@@ -1,5 +1,4 @@
@use "@db-ux/core-foundations/build/styles/variables";
-@use "@db-ux/core-foundations/build/styles/helpers/display";
.db-page-document {
block-size: 100%;
@@ -8,8 +7,7 @@
@mixin header-footer-style {
> :is(.db-header, .db-footer, header, footer) {
- @include display.display(flex);
-
+ display: flex;
flex: 0 1 auto;
flex-grow: 0;
flex-shrink: 0;
@@ -35,9 +33,7 @@
block-size: 100%;
min-block-size: 100%;
-
- @include display.display(flex);
-
+ display: flex;
flex-direction: column;
/* workaround for angular */
@@ -46,8 +42,7 @@
}
> .db-main {
- @include display.display(flex);
-
+ display: flex;
flex-direction: column;
overflow: auto;
flex: 1 1 auto;
diff --git a/packages/components/src/components/popover/popover.scss b/packages/components/src/components/popover/popover.scss
index f096c50e687e..8cea457f6146 100644
--- a/packages/components/src/components/popover/popover.scss
+++ b/packages/components/src/components/popover/popover.scss
@@ -1,13 +1,10 @@
@use "@db-ux/core-foundations/build/styles/variables";
-@use "@db-ux/core-foundations/build/styles/helpers/display";
@use "../../styles/internal/popover-component";
@use "../../styles/internal/component";
.db-popover {
position: relative;
-
- @include display.display(flex);
-
+ display: flex;
block-size: fit-content;
inline-size: fit-content;
diff --git a/packages/components/src/components/select/docs/Angular.md b/packages/components/src/components/select/docs/Angular.md
index b1dd0aa22b14..1b3d707a1754 100644
--- a/packages/components/src/components/select/docs/Angular.md
+++ b/packages/components/src/components/select/docs/Angular.md
@@ -23,8 +23,5 @@ import { DBSelect } from '@db-ux/ngx-core-components';
-
-
-
```
diff --git a/packages/components/src/components/select/docs/HTML.md b/packages/components/src/components/select/docs/HTML.md
index 099ac886ed0a..d1bb41d9109a 100644
--- a/packages/components/src/components/select/docs/HTML.md
+++ b/packages/components/src/components/select/docs/HTML.md
@@ -13,9 +13,6 @@ For general installation and configuration take a look at the [components](https