Verified Commit 96653961 authored by Théodore Biadala's avatar Théodore Biadala
Browse files

Issue #3440220 by kostyashupenko, adelansari: Remove bottom radius on hover... 

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

core/modules/navigation/css/components/toolbar-button.css

+5 −0
Original line number Diff line number Diff line
@@ -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;

}

core/modules/navigation/css/components/toolbar-button.pcss.css

+13 −6
Original line number Diff line number Diff line
@@ -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;

}