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

fix: #3511280 Front-end theme styles can bleed into Navigation 

By: m4olivei
By: finnsky
By: mherchel
By: plopesc
By: grimreaper
By: scott_euser
By: nod_
By: smustgrave
(cherry picked from commit ae8ac5ed)
parent bd013c9c

core/modules/navigation/components/badge/badge.css

+14 −11
Original line number Diff line number Diff line
@@ -9,6 +9,7 @@ 
 * @file

 * Toolbar badge styles.

 */

:is(#extra-specificity-hack, [data-drupal-admin-styles]) {

  .toolbar-badge {

    padding: var(--admin-toolbar-space-4) var(--admin-toolbar-space-8);

    border-radius: 1rem;
@@ -17,7 +18,9 @@ 
    line-height: var(--admin-toolbar-line-height-label-sm);

    font-variation-settings: "wght" 700;

  }



  .toolbar-badge--success {

    color: var(--admin-toolbar-color-green-600);

    background-color: var(--admin-toolbar-color-green-050);

  }

}

core/modules/navigation/components/badge/badge.pcss.css

+13 −11
Original line number Diff line number Diff line
@@ -4,6 +4,7 @@ 
 * Toolbar badge styles.

 */



:is(#extra-specificity-hack, [data-drupal-admin-styles]) {

  .toolbar-badge {

    padding: var(--admin-toolbar-space-4) var(--admin-toolbar-space-8);

    border-radius: 1rem;
@@ -17,3 +18,4 @@ 
    color: var(--admin-toolbar-color-green-600);

    background-color: var(--admin-toolbar-color-green-050);

  }

}

core/modules/navigation/components/title/title.css

+29 −23
Original line number Diff line number Diff line
@@ -9,13 +9,16 @@ 
 * @file

 * Toolbar title styles.

 */

:is(#extra-specificity-hack, [data-drupal-admin-styles]) {

  .toolbar-title {

    font-variation-settings: "wght" 500;

  }



  /* Sizes aligned with variables from css/base/variables.pcss.css */

  .toolbar-title--xs {

    font-size: var(--admin-toolbar-font-size-heading-xs);

  }



  .toolbar-title--ellipsis {

    .toolbar-title__label {

      overflow: hidden;
@@ -24,13 +27,16 @@ 
      text-overflow: ellipsis;

    }

  }



  .toolbar-title:has(.toolbar-title__icon) {

    display: flex;

    align-items: center;

    gap: var(--admin-toolbar-space-8);

  }



  .toolbar-title__icon {

    flex-shrink: 0;

    inline-size: var(--admin-toolbar-space-16);

    block-size: var(--admin-toolbar-space-16);

  }

}

core/modules/navigation/components/title/title.pcss.css

+25 −23
Original line number Diff line number Diff line
@@ -4,6 +4,7 @@ 
 * Toolbar title styles.

 */



:is(#extra-specificity-hack, [data-drupal-admin-styles]) {

  .toolbar-title {

    font-variation-settings: "wght" 500;

  }
@@ -33,3 +34,4 @@ 
    inline-size: var(--admin-toolbar-space-16);

    block-size: var(--admin-toolbar-space-16);

  }

}

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

+171 −155
Original line number Diff line number Diff line
@@ -27,6 +27,7 @@ 
  /* Icon */

  --toolbar-button-icon-size: var(--admin-toolbar-space-20);

}

:is(#extra-specificity-hack, [data-drupal-admin-styles]) {

  .toolbar-button {

    z-index: 1;

    flex-grow: 0;
@@ -86,15 +87,18 @@ 
      background-color: var(--toolbar-button-current-bg);

    }

  }



  /* Dark color modifier for submenus title */

  .toolbar-button--dark {

    color: var(--admin-toolbar-color-gray-990);

  }



  .toolbar-button--large {

    padding: var(--admin-toolbar-space-8) var(--admin-toolbar-space-16);

    font-size: var(--admin-toolbar-font-size-info-lg);

    line-height: var(--admin-toolbar-line-height-info-lg);

  }



  .toolbar-button--non-interactive {

    &:hover,

    &:focus,
@@ -106,13 +110,16 @@ 
      background-color: var(--toolbar-button-bg);

    }

  }



  .toolbar-button--small-offset {

    --toolbar-button-outline-offset: calc(-1 * var(--admin-toolbar-space-4));

  }



  /* Class starts with `toolbar-button--icon`  */

  [class*="toolbar-button--icon"] {

    padding-inline: var(--admin-toolbar-space-10);

  }



  [class*="toolbar-button--icon"]:not(:has(.toolbar-button__icon)) {

    &::before {

      flex-shrink: 0;
@@ -123,6 +130,7 @@ 
      inline-size: var(--toolbar-button-icon-size);

    }

  }



  .toolbar-button--primary {

    --toolbar-button-color: var(--admin-toolbar-color-white);

    --toolbar-button-bg: var(--admin-toolbar-color-blue-450);
@@ -130,14 +138,17 @@ 
    --toolbar-button-hover-bg: var(--admin-toolbar-color-blue-600);

    --toolbar-button-focus-color: var(--admin-toolbar-color-white);

  }



  .toolbar-button--weight--400 {

    font-variation-settings: "wght" 400;

  }



  /* Set 0 specificity */

  :where(.toolbar-button) {

    display: flex;

    flex-grow: 1;

  }



  .toolbar-button--expand--down {

    &[aria-expanded="true"] {

      &:focus,
@@ -147,9 +158,11 @@ 
      }

    }

  }

[dir="ltr"] .toolbar-button--icon--announcements-feed-announcement .toolbar-button__icon {



  [dir="ltr"] & .toolbar-button--icon--announcements-feed-announcement .toolbar-button__icon {

    scale: -1 1;

  }



  .toolbar-button--collapsible {

    & .toolbar-button__chevron {

      display: none;
@@ -188,6 +201,7 @@ 
      }

    }

  }



  .toolbar-button__chevron {

    flex-shrink: 0;

    margin-inline-start: auto;
@@ -208,9 +222,11 @@ 
      rotate: -90deg;

    }

  }



  .toolbar-button__icon {

    fill: currentColor;

    flex-shrink: 0;

    inline-size: var(--toolbar-button-icon-size);

    block-size: var(--toolbar-button-icon-size);

  }

}