diff --git a/core/modules/navigation/css/components/toolbar-button.css b/core/modules/navigation/css/components/toolbar-button.css index c1e29d548858ca6ce1a3570b3b039743bbd950e7..b47adc2d7f790ebd7704613251f2a58a6ecbea6b 100644 --- a/core/modules/navigation/css/components/toolbar-button.css +++ b/core/modules/navigation/css/components/toolbar-button.css @@ -174,6 +174,11 @@ [aria-expanded="true"]:is(.toolbar-button--expand--down, [dir="rtl"] .toolbar-button--expand--down)::after { transform: rotate(-90deg); } +[aria-expanded="true"]:is(.toolbar-button--expand--down, [dir="rtl"] .toolbar-button--expand--down):focus, +[aria-expanded="true"]:is(.toolbar-button--expand--down, [dir="rtl"] .toolbar-button--expand--down):hover { + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; +} .toolbar-button--arrow-first::after { order: -1; } diff --git a/core/modules/navigation/css/components/toolbar-button.pcss.css b/core/modules/navigation/css/components/toolbar-button.pcss.css index 739569ffd7342073941a9bfba5c9a0839750763a..a00c62085d5dec953d8f6eb4b0cd2d388a5d5a16 100644 --- a/core/modules/navigation/css/components/toolbar-button.pcss.css +++ b/core/modules/navigation/css/components/toolbar-button.pcss.css @@ -4,7 +4,7 @@ * Toolbar button styles. */ -@import "../base/media-queries.pcss.css"; +@import '../base/media-queries.pcss.css'; :root { --toolbar-button-outline-offset: 0; @@ -33,7 +33,7 @@ border-radius: var(--admin-toolbar-space-8); background-color: transparent; font-size: var(--admin-toolbar-font-size-info-sm); - font-variation-settings: "wght" 700; + font-variation-settings: 'wght' 700; line-height: var(--admin-toolbar-line-height-info-sm); gap: calc(0.5 * var(--admin-toolbar-rem)); @@ -145,7 +145,7 @@ } .toolbar-button--weight--400 { - font-variation-settings: "wght" 400; + font-variation-settings: 'wght' 400; } /* Set 0 specificity */ @@ -168,7 +168,7 @@ mask-position: center center; mask-image: url(../../assets/icons/chevron.svg); - [dir="rtl"] & { + [dir='rtl'] & { transform: rotate(180deg); } @@ -179,7 +179,7 @@ } .toolbar-button--expand--down, -[dir="rtl"] .toolbar-button--expand--down { +[dir='rtl'] .toolbar-button--expand--down { &::after { transform: rotate(90deg); @@ -192,6 +192,11 @@ &::after { transform: rotate(-90deg); } + &:focus, + &:hover { + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; + } } } @@ -296,6 +301,8 @@ html:not([data-admin-toolbar='expanded']) { } /* Hides button's label while transitioning. */ -html[data-admin-toolbar-animating][data-admin-toolbar="expanded"] .toolbar-button--collapsible .toolbar-button__label { +html[data-admin-toolbar-animating][data-admin-toolbar='expanded'] + .toolbar-button--collapsible + .toolbar-button__label { display: none; }