From 99cbc58c3b50d29642171d9e7214f86d58830600 Mon Sep 17 00:00:00 2001
From: Nicolas Merget
diff --git a/packages/components/src/components/badge/badge.scss b/packages/components/src/components/badge/badge.scss index 6ccdda89ef8..b3499eb1bf0 100644 --- a/packages/components/src/components/badge/badge.scss +++ b/packages/components/src/components/badge/badge.scss @@ -88,3 +88,9 @@ @extend %absolute-badge; } } + +// Global styles + +*:has(> .db-badge[data-placement^="corner"]) { + position: relative; +} diff --git a/packages/components/src/components/tooltip/tooltip.scss b/packages/components/src/components/tooltip/tooltip.scss index 5a40a412e00..f48e5d3ab60 100644 --- a/packages/components/src/components/tooltip/tooltip.scss +++ b/packages/components/src/components/tooltip/tooltip.scss @@ -95,3 +95,28 @@ $tooltip-arrow-shadow-size: variables.$db-sizing-2xs; } } } + +// Global styles + +@mixin show-popover($state) { + *:has( + > db-tooltip > .db-tooltip:not([data-open]), + > dbtooltip > .db-tooltip:not([data-open]), + > .db-tooltip:not([data-open]) + ) { + &:#{$state} { + .db-tooltip:first-of-type { + @extend %show-popover; + } + } + } +} + +*:has(> db-tooltip, > dbtooltip, > .db-tooltip) { + position: relative; +} + +$popover-states: "hover", "focus"; +@each $state in $popover-states { + @include show-popover($state); +} diff --git a/packages/components/src/styles/component-animations.scss b/packages/components/src/styles/component-animations.scss new file mode 100644 index 00000000000..03fc8dbe774 --- /dev/null +++ b/packages/components/src/styles/component-animations.scss @@ -0,0 +1,12 @@ +@use "@db-ui/foundations/build/scss/animation"; + +// transitions +[class^="db-"], +[class^="db-"] * { + @extend %default-transition; + + ::before, + ::after { + @extend %default-transition; + } +} diff --git a/packages/components/src/styles/db-ui-42.scss b/packages/components/src/styles/db-ui-42.scss index 18ca542c81b..80c953a0a40 100644 --- a/packages/components/src/styles/db-ui-42.scss +++ b/packages/components/src/styles/db-ui-42.scss @@ -1,5 +1,11 @@ /* This is a predefined beginner friendly bundle with default asset-paths (../assets) */ @forward "./db-ui-components"; +// Bundle default theme @forward "@db-ui/foundations/build/css/default-theme"; + +// Bundle optionals @forward "@db-ui/foundations/build/scss/icons/include"; +@forward "@db-ui/foundations/build/scss/density/classes/all"; +@forward "@db-ui/foundations/build/scss/fonts/classes/all"; +@forward "@db-ui/foundations/build/scss/colors/classes/all"; diff --git a/packages/components/src/styles/db-ui-components.scss b/packages/components/src/styles/db-ui-components.scss index e6884c9eb5b..d0b2aa884e0 100644 --- a/packages/components/src/styles/db-ui-components.scss +++ b/packages/components/src/styles/db-ui-components.scss @@ -1,4 +1,5 @@ @forward "@db-ui/foundations/build/scss/db-ui-foundations"; +@forward "component-animations"; @forward "../components/button/button"; @forward "../components/icon/icon"; @forward "../components/tab-item/tab-item"; @@ -25,7 +26,6 @@ @forward "../components/navigation/navigation"; @forward "../components/popover/popover"; @forward "../components/tooltip/tooltip"; -@forward "dialog-init"; @forward "../components/tab-item/tab-item"; @forward "../components/tab-list/tab-list"; @forward "../components/tabs/tabs"; @@ -108,30 +108,3 @@ db-notification, dbnotification { inline-size: inherit; } - -:has(> .db-badge[data-placement^="corner"]) { - position: relative; -} - -@mixin show-popover($state) { - :has( - > db-tooltip > .db-tooltip:not([data-open]), - > dbtooltip > .db-tooltip:not([data-open]), - > .db-tooltip:not([data-open]) - ) { - &:#{$state} { - .db-tooltip:first-of-type { - @extend %show-popover; - } - } - } -} - -:has(> db-tooltip, > dbtooltip, > .db-tooltip) { - position: relative; -} - -$popover-states: "hover", "focus"; -@each $state in $popover-states { - @include show-popover($state); -} diff --git a/packages/components/src/styles/_dialog-init.scss b/packages/components/src/styles/dialog-init.scss similarity index 100% rename from packages/components/src/styles/_dialog-init.scss rename to packages/components/src/styles/dialog-init.scss diff --git a/packages/components/test/import-styles/simple-button/index.html b/packages/components/test/import-styles/simple-button/index.html new file mode 100644 index 00000000000..27ef076d9c8 --- /dev/null +++ b/packages/components/test/import-styles/simple-button/index.html @@ -0,0 +1,43 @@ + + +
+ + +
+ + + +
+