Drupal
/
drupal
mirror of https://git.drupalcode.org/project/drupal.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Issue #3440220 by kostyashupenko, adelansari: Remove bottom radius on hover state of expanded sub menu item 

(cherry picked from commit 96653961e5)
merge-requests/7514/merge
nod_ 2024-04-30 03:18:03 +09:00 committed by catch
parent 2af725faeb
commit 051b9bae6c
2 changed files with 18 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
core/modules/navigation/css/components/toolbar-button.css
View File

@ -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;
}

19
core/modules/navigation/css/components/toolbar-button.pcss.css
View File

@ -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;
}