Verified Commit 8ed1f23d authored by Alex Pott's avatar Alex Pott
Browse files

Issue #3274080 by mherchel, andy-blum, lauriii: Olivero's mobile menu... 

Issue #3274080 by mherchel, andy-blum, lauriii: Olivero's mobile menu experience doesn't properly adapt to forced colors
parent a2ce4d46

core/misc/cspell/dictionary.txt

+1 −0
Original line number Diff line number Diff line
@@ -163,6 +163,7 @@ bundleless 
bundlenode

buttonpane

buttonset

buttontext

buytaert

cacheability

cacheable

core/themes/olivero/css/components/header-navigation.css

+32 −3
Original line number Diff line number Diff line
@@ -53,8 +53,10 @@ 
  top: 0;

  visibility: hidden;

  overflow: auto;

  /* Ensure that header nav not use additional space and force

     system branding block text to unnecessarily wrap. */

  /**

   * Ensure that header nav not use additional space and force system branding

   * block text to unnecessarily wrap.

   */

  flex-basis: 0;

  flex-grow: 1; /* Necessary for IE11. */

  width: 100%;
@@ -62,7 +64,13 @@ 
  height: 100%;

  padding-top: 0;

  padding-bottom: var(--sp);

  border-top: solid var(--color--white) var(--sp3); /* Create room for the "close" button. */

  /**

   * Create room for the "close" button. We cannot use margin because the

   * mobile navigation needs to slide beneath the button, but we also cannot

   * use padding because that would enable the button to scroll out of the

   * viewport on short screens.

   */

  border-top: solid var(--color--white) var(--sp3);

  background-color: var(--color--white);

  box-shadow: 0 0 72px rgba(0, 0, 0, 0.1)

}
@@ -109,6 +117,20 @@ 
}

  }



.header-nav {



  /*

   * Ensure top border has the same color as the background when in forced colors.

   */

}



@media (forced-colors: active) {



.header-nav {

    border-top-color: canvas

}

  }



/*

 * Only apply transition styles when JS is loaded. This

 * works around https://bugs.chromium.org/p/chromium/issues/detail?id=332189
@@ -268,6 +290,13 @@ body.is-always-mobile-nav .header-nav { 
  background: var(--color--primary-40)

}



@media (forced-colors: active) {



.header-nav-overlay {

    background: canvastext

}

  }



.is-overlay-active .header-nav-overlay {

    display: block

}

core/themes/olivero/css/components/header-navigation.pcss.css

+22 −3
Original line number Diff line number Diff line
@@ -12,8 +12,10 @@ 
  inset-inline-start: 100%;

  visibility: hidden;

  overflow: auto;

  /* Ensure that header nav not use additional space and force

     system branding block text to unnecessarily wrap. */

  /**

   * Ensure that header nav not use additional space and force system branding

   * block text to unnecessarily wrap.

   */

  flex-basis: 0;

  flex-grow: 1; /* Necessary for IE11. */

  width: 100%;
@@ -22,7 +24,13 @@ 
  padding-block: 0 var(--sp);

  padding-inline-start: var(--sp);

  padding-inline-end: var(--sp);

  border-block-start: solid var(--color--white) var(--sp3); /* Create room for the "close" button. */

  /**

   * Create room for the "close" button. We cannot use margin because the

   * mobile navigation needs to slide beneath the button, but we also cannot

   * use padding because that would enable the button to scroll out of the

   * viewport on short screens.

   */

  border-block-start: solid var(--color--white) var(--sp3);

  background-color: var(--color--white);

  box-shadow: 0 0 72px rgba(0, 0, 0, 0.1);
@@ -48,6 +56,13 @@ 
  @media (--lg) {

    grid-column: 5 / 14;

  }



  /*

   * Ensure top border has the same color as the background when in forced colors.

   */

  @media (forced-colors: active) {

    border-top-color: canvas;

  }

}



/*
@@ -151,6 +166,10 @@ body.is-always-mobile-nav { 
  opacity: 0.2;

  background: var(--color--primary-40);



  @media (forced-colors: active) {

    background: canvastext;

  }



  @nest .is-overlay-active & {

    display: block;

  }

core/themes/olivero/css/components/header-search-narrow.css

+13 −0
Original line number Diff line number Diff line
@@ -217,6 +217,19 @@ 
        border-top: solid 5px var(--color--primary-50);

      }



@media (forced-colors: active) {



.block-search-narrow .search-form__submit .icon--search {

        background: buttontext;

        -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='26' height='27.2' viewBox='0 0 26 27.2'%3e  %3cpath fill='%23fff' d='M25.8,25.5l-5.3-5.3c2.1-2.1,3.4-5.1,3.4-8.3C23.9,5.3,18.5,0,11.9,0C5.3,0,0,5.3,0,11.9c0,6.6,5.3,11.9,11.9,11.9c2.6,0,5.1-0.9,7-2.3l5.4,5.4c0.4,0.4,1,0.4,1.4,0C26.1,26.6,26.1,25.9,25.8,25.5z M11.9,21.9c-5.5,0-9.9-4.4-9.9-9.9S6.4,2,11.9,2c5.5,0,9.9,4.4,9.9,9.9S17.4,21.9,11.9,21.9z'/%3e%3c/svg%3e");

        mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='26' height='27.2' viewBox='0 0 26 27.2'%3e  %3cpath fill='%23fff' d='M25.8,25.5l-5.3-5.3c2.1-2.1,3.4-5.1,3.4-8.3C23.9,5.3,18.5,0,11.9,0C5.3,0,0,5.3,0,11.9c0,6.6,5.3,11.9,11.9,11.9c2.6,0,5.1-0.9,7-2.3l5.4,5.4c0.4,0.4,1,0.4,1.4,0C26.1,26.6,26.1,25.9,25.8,25.5z M11.9,21.9c-5.5,0-9.9-4.4-9.9-9.9S6.4,2,11.9,2c5.5,0,9.9,4.4,9.9,9.9S17.4,21.9,11.9,21.9z'/%3e%3c/svg%3e");

        -webkit-mask-repeat: no-repeat;

        mask-repeat: no-repeat;

        -webkit-mask-position: center;

        mask-position: center

    }

      }



.block-search-narrow .search-form__submit:focus {

      outline: solid 4px transparent;

      outline-offset: -4px;

core/themes/olivero/css/components/header-search-narrow.pcss.css

+7 −0
Original line number Diff line number Diff line
@@ -113,6 +113,13 @@ 
        transform-origin: left; /* LTR */

        border-block-start: solid 5px var(--color--primary-50);

      }



      @media (forced-colors: active) {

        background: buttontext;

        mask-image: url("../../images/search--white.svg");

        mask-repeat: no-repeat;

        mask-position: center;

      }

    }



    &:focus {