Unverified Commit c117502f authored by Lauri Timmanee's avatar Lauri Timmanee
Browse files

Issue #3173014 by mherchel, morganlyndel, paulocs, raman.b, adamzimmermann,... 

Issue #3173014 by mherchel, morganlyndel, paulocs, raman.b, adamzimmermann, komalk, proeung, lauriii, alexpott, catch, volkswagenchick, kostyashupenko: Address code feedback for Olivero's header.pcss.css partials
parent 2e6adc10

core/themes/olivero/css/components/navigation/nav-secondary.css

+19 −39
Original line number Diff line number Diff line
@@ -7,15 +7,9 @@ 


/**

 * @file

 * Nav Secondary.

 * Secondary navigation styling.

 */



.secondary-nav__wrapper {

  display: flex;

  margin-top: 2.25rem;

  margin-bottom: 2.25rem;

}



.secondary-nav {

  letter-spacing: 0.02em;

  font-size: 0.875rem;
@@ -23,35 +17,35 @@ 
}



[dir="ltr"] .secondary-nav ul.menu {

    margin-left: 0;

    margin-left: 0

}



[dir="rtl"] .secondary-nav ul.menu {

    margin-right: 0;

    margin-right: 0

}



[dir="ltr"] .secondary-nav ul.menu {

    margin-right: 0;

    margin-right: 0

}



[dir="rtl"] .secondary-nav ul.menu {

    margin-left: 0;

    margin-left: 0

}



[dir="ltr"] .secondary-nav ul.menu {

    padding-left: 0;

    padding-left: 0

}



[dir="rtl"] .secondary-nav ul.menu {

    padding-right: 0;

    padding-right: 0

}



[dir="ltr"] .secondary-nav ul.menu {

    padding-right: 0;

    padding-right: 0

}



[dir="rtl"] .secondary-nav ul.menu {

    padding-left: 0;

    padding-left: 0

}



.secondary-nav ul.menu {
@@ -77,11 +71,11 @@ 
    }



[dir="ltr"] .secondary-nav ul.menu li:not(:last-child) {

        margin-right: 1.6875rem;

        margin-right: 1.6875rem

}



[dir="rtl"] .secondary-nav ul.menu li:not(:last-child) {

        margin-left: 1.6875rem;

        margin-left: 1.6875rem

}



.secondary-nav ul.menu a:not(.button--primary) {
@@ -115,43 +109,29 @@ 
        }



@media (min-width: 75rem) {

    body:not(.is-always-mobile-nav) .secondary-nav__wrapper {

      justify-content: flex-end;

      margin: 0



      /* If the secondary nav is the first item within the header, it does not need left separator. */

    }

      body:not(.is-always-mobile-nav) .secondary-nav__wrapper:first-child .secondary-nav:before {

        content: none;

      }



    [dir="ltr"] body:not(.is-always-mobile-nav) .secondary-nav {

      margin-left: 1.125rem;

      margin-left: 1.125rem

  }



    [dir="rtl"] body:not(.is-always-mobile-nav) .secondary-nav {

      margin-right: 1.125rem;

      margin-right: 1.125rem

  }



    [dir="ltr"] body:not(.is-always-mobile-nav) .secondary-nav {

      padding-left: 2.25rem;

      padding-left: 2.25rem

  }



    [dir="rtl"] body:not(.is-always-mobile-nav) .secondary-nav {

      padding-right: 2.25rem;

      padding-right: 2.25rem

  }



    body:not(.is-always-mobile-nav) .secondary-nav {

      position: relative;

      display: flex

    }



      [dir="ltr"] body:not(.is-always-mobile-nav) .secondary-nav:before {

        left: 0;

        left: 0

  }



      [dir="rtl"] body:not(.is-always-mobile-nav) .secondary-nav:before {

        right: 0;

        right: 0

  }



      body:not(.is-always-mobile-nav) .secondary-nav:before {
@@ -165,10 +145,10 @@ 
      }



      [dir="ltr"] body:not(.is-always-mobile-nav) .secondary-nav ul.menu li:not(:last-child) {

        margin-right: 2.25rem;

        margin-right: 2.25rem

  }



      [dir="rtl"] body:not(.is-always-mobile-nav) .secondary-nav ul.menu li:not(:last-child) {

        margin-left: 2.25rem;

        margin-left: 2.25rem

  }

  }

core/themes/olivero/css/components/navigation/nav-secondary.pcss.css

+1 −17
Original line number Diff line number Diff line 
/**

 * @file

 * Nav Secondary.

 * Secondary navigation styling.

 */



@import "../../base/variables.pcss.css";



.secondary-nav__wrapper {

  display: flex;

  margin-block-start: var(--sp2);

  margin-block-end: var(--sp2);

}



.secondary-nav {

  letter-spacing: 0.02em;

  font-size: var(--font-size-s);
@@ -79,16 +73,6 @@ 


body:not(.is-always-mobile-nav) {

  @media (--nav) {

    & .secondary-nav__wrapper {

      justify-content: flex-end;

      margin: 0;



      /* If the secondary nav is the first item within the header, it does not need left separator. */

      &:first-child .secondary-nav:before {

        content: none;

      }

    }



    & .secondary-nav {

      position: relative;

      display: flex;

core/themes/olivero/css/components/navigation/nav-button-wide.css→core/themes/olivero/css/components/navigation/wide-nav-expand.css

+21 −21
Original line number Diff line number Diff line
@@ -7,16 +7,16 @@ 


/**

 * @file

 * Nav Button Wide.

 * Button which expands the navigation at wide viewport widths.

 */



.nav-primary__button {

.wide-nav-expand {

  display: none

}



@media (min-width: 75rem) {



.nav-primary__button {

.wide-nav-expand {

    display: flex;

    visibility: hidden;

    flex-shrink: 0;
@@ -31,26 +31,26 @@ 
    background-color: #2494db

}



    .nav-primary__button:focus {

    .wide-nav-expand:focus {

      border: solid 1px transparent; /* Will show in IE/Edge high contrast mode. */

    }

  }



@media (min-width: 75rem) {



body:not(.is-always-mobile-nav) .js-fixed .nav-primary__button {

body:not(.is-always-mobile-nav) .js-fixed .wide-nav-expand {

    visibility: visible

}

  }



@media (min-width: 75rem) {



body.is-always-mobile-nav .nav-primary__button {

body.is-always-mobile-nav .wide-nav-expand {

    visibility: hidden

}

  }



.nav-primary__icon {

.wide-nav-expand__icon {

  position: relative;

  width: 2.25rem;

  height: 1.3125rem;
@@ -60,22 +60,22 @@ body.is-always-mobile-nav .nav-primary__button { 
  transform-style: preserve-3d

}



.nav-primary__icon > span {

.wide-nav-expand__icon > span {

    display: block;

    height: 0;

    /* Intentionally not using CSS logical properties. */

    border-top: solid 3px #fff

  }



[dir="ltr"] .nav-primary__icon > span:nth-child(1) {

[dir="ltr"] .wide-nav-expand__icon > span:nth-child(1) {

      left: 0

}



[dir="rtl"] .nav-primary__icon > span:nth-child(1) {

[dir="rtl"] .wide-nav-expand__icon > span:nth-child(1) {

      right: 0

}



.nav-primary__icon > span:nth-child(1) {

.wide-nav-expand__icon > span:nth-child(1) {

      position: absolute;

      top: 0;

      width: 100%;
@@ -84,15 +84,15 @@ body.is-always-mobile-nav .nav-primary__button { 
      background-color: #fff;

    }



[dir="ltr"] .nav-primary__icon > span:nth-child(2) {

[dir="ltr"] .wide-nav-expand__icon > span:nth-child(2) {

      left: 0

}



[dir="rtl"] .nav-primary__icon > span:nth-child(2) {

[dir="rtl"] .wide-nav-expand__icon > span:nth-child(2) {

      right: 0

}



.nav-primary__icon > span:nth-child(2) {

.wide-nav-expand__icon > span:nth-child(2) {

      position: absolute;

      top: 0.5625rem;

      width: 100%;
@@ -101,15 +101,15 @@ body.is-always-mobile-nav .nav-primary__button { 
      background-color: #fff;

    }



[dir="ltr"] .nav-primary__icon > span:nth-child(3) {

[dir="ltr"] .wide-nav-expand__icon > span:nth-child(3) {

      left: 0

}



[dir="rtl"] .nav-primary__icon > span:nth-child(3) {

[dir="rtl"] .wide-nav-expand__icon > span:nth-child(3) {

      right: 0

}



.nav-primary__icon > span:nth-child(3) {

.wide-nav-expand__icon > span:nth-child(3) {

      position: absolute;

      top: auto;

      bottom: 0;
@@ -119,20 +119,20 @@ body.is-always-mobile-nav .nav-primary__button { 
      background-color: #fff;

    }



.js-fixed .nav-primary__icon {

.js-fixed .wide-nav-expand__icon {

  opacity: 1;

}



[aria-expanded="true"] .nav-primary__icon > span:nth-child(1) {

[aria-expanded="true"] .wide-nav-expand__icon > span:nth-child(1) {

    top: 0.5625rem;

    transform: rotate(-45deg);

  }



[aria-expanded="true"] .nav-primary__icon > span:nth-child(2) {

[aria-expanded="true"] .wide-nav-expand__icon > span:nth-child(2) {

    opacity: 0;

  }



[aria-expanded="true"] .nav-primary__icon > span:nth-child(3) {

[aria-expanded="true"] .wide-nav-expand__icon > span:nth-child(3) {

    top: 0.5625rem;

    transform: rotate(45deg);

  }

core/themes/olivero/css/components/navigation/nav-button-wide.pcss.css→core/themes/olivero/css/components/navigation/wide-nav-expand.pcss.css

+7 −7
Original line number Diff line number Diff line 
/**

 * @file

 * Nav Button Wide.

 * Button which expands the navigation at wide viewport widths.

 */



@import "../../base/variables.pcss.css";



.nav-primary__button {

.wide-nav-expand {

  display: none;



  @media (--nav) {
@@ -28,19 +28,19 @@ 
  }

}



body:not(.is-always-mobile-nav) .js-fixed .nav-primary__button {

body:not(.is-always-mobile-nav) .js-fixed .wide-nav-expand {

  @media (--nav) {

    visibility: visible;

  }

}



body.is-always-mobile-nav .nav-primary__button {

body.is-always-mobile-nav .wide-nav-expand {

  @media (--nav) {

    visibility: hidden;

  }

}



.nav-primary__icon {

.wide-nav-expand__icon {

  position: relative;

  width: var(--sp2);

  height: 21px;
@@ -87,11 +87,11 @@ body.is-always-mobile-nav .nav-primary__button { 
  }

}



.js-fixed .nav-primary__icon {

.js-fixed .wide-nav-expand__icon {

  opacity: 1;

}



[aria-expanded="true"] .nav-primary__icon {

[aria-expanded="true"] .wide-nav-expand__icon {

  & > span:nth-child(1) {

    inset-block-start: 9px;

    transform: rotate(-45deg);

core/themes/olivero/css/components/header.css→core/themes/olivero/css/components/site-header.css

+2 −4
Original line number Diff line number Diff line
@@ -7,11 +7,9 @@ 


/**

 * @file

 * Main Header.

 * Site header.

 */



/* Header */



.site-header {

  position: relative

}
@@ -25,7 +23,7 @@ 
}

  }



.header__left {

.site-header__initial {

  position: relative;

  z-index: 102;

  display: flex;