diff --git a/.changeset/nervous-experts-change.md b/.changeset/nervous-experts-change.md new file mode 100644 index 0000000000..a02a83dfb9 --- /dev/null +++ b/.changeset/nervous-experts-change.md @@ -0,0 +1,8 @@ +--- +'@swisspost/design-system-styles': patch +--- + +Updated popover styles. +- Removed popover `min-width` and updated `max-width`. +- Simplyfied popover arrow size definition. +- Removed `:focus` selector fom `.text-auto` utility class diff --git a/packages/components/src/components/post-popover/post-popover.scss b/packages/components/src/components/post-popover/post-popover.scss index b294125742..66780a3b75 100644 --- a/packages/components/src/components/post-popover/post-popover.scss +++ b/packages/components/src/components/post-popover/post-popover.scss @@ -21,8 +21,8 @@ align-items: self-start; padding: 0.5em; - // Max 2/3 of the column width - max-width: min(66vw, 60rem); + min-width: 160px; + max-width: 280px; // Max available width on mobile, popovercontainer will handle offsets @include post.media-breakpoint-down(rg) { @@ -32,4 +32,5 @@ .popover-content { padding: 0.5em; + flex-grow: 1; } diff --git a/packages/components/src/components/post-popovercontainer/post-popovercontainer.scss b/packages/components/src/components/post-popovercontainer/post-popovercontainer.scss index 1a2ab724bb..5a674a3a94 100644 --- a/packages/components/src/components/post-popovercontainer/post-popovercontainer.scss +++ b/packages/components/src/components/post-popovercontainer/post-popovercontainer.scss @@ -39,9 +39,7 @@ } .arrow { - // Diagonal of 16px -> 1rem -> 1/1.41 = ~0.7 - // https://www.omnicalculator.com/math/square-diagonal?c=CHF&v=hide:0,diagonal:16!cm - $arrow-size: math.div(spacing.$size-regular, math.sqrt(2)); + $arrow-size: 0.5825rem; position: absolute; width: $arrow-size; height: $arrow-size; diff --git a/packages/styles/src/components/utilities.scss b/packages/styles/src/components/utilities.scss index ef285abe0d..4a4c97f085 100644 --- a/packages/styles/src/components/utilities.scss +++ b/packages/styles/src/components/utilities.scss @@ -73,7 +73,6 @@ span.spacer { a { color: inherit; - &:focus, &:hover { opacity: 0.8; } @@ -83,7 +82,6 @@ span.spacer { a { color: var(--post-contrast-color); - &:focus, &:hover { color: rgba(var(--post-contrast-color-rgb), 0.8); }