nav-secondary.css

Secondary navigation styling.

File

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

View source 
  1. /*

  2.  * DO NOT EDIT THIS FILE.

  3.  * See the following change record for more information,

  4.  * https://www.drupal.org/node/3084859

  5.  * @preserve

  6.  */

  7. 

  8. /**

  9.  * @file

  10.  * Secondary navigation styling.

  11.  */

  12. 

  13. .secondary-nav {

  14.   letter-spacing: 0.02em;

  15.   font-size: var(--font-size-s);

  16.   font-weight: 600;

  17. }

  18. 

  19. .secondary-nav__menu {

  20.   display: flex;

  21.   align-items: center;

  22.   margin-block: 0;

  23.   margin-inline-start: 0;

  24.   margin-inline-end: 0;

  25.   padding-block: 0;

  26.   padding-inline-start: 0;

  27.   padding-inline-end: 0;

  28.   list-style: none;

  29. }

  30. 

  31. .secondary-nav__menu-item {

  32.   /* Parent element is set to flex-basis: 0. We

  33.    * don't want text to wrap unless it goes over a

  34.    * certain arbitrary width.

  35.    */

  36. 

  37.   /* @todo should this be scoped to desktop nav? */

  38.   width: max-content;

  39.   max-width: 12.5rem;

  40. }

  41. 

  42. .secondary-nav__menu-item:not(:last-child) {

  43.   margin-inline-end: var(--sp1-5);

  44. }

  45. 

  46. .secondary-nav__menu-link {

  47.   position: relative;

  48.   display: inline-flex;

  49.   align-items: center;

  50.   height: var(--sp2);

  51.   -webkit-text-decoration: none;

  52.   text-decoration: none;

  53.   color: inherit;

  54. }

  55. 

  56. .secondary-nav__menu-link::after {

  57.   position: absolute;

  58.   bottom: 0;

  59.   left: 0;

  60.   width: 100%;

  61.   height: 0;

  62.   content: "";

  63.   transition:

  64.     opacity 0.2s,

  65.     transform 0.2s;

  66.   transform: translateY(0.3125rem);

  67.   opacity: 0;

  68.   /* Intentionally not using CSS logical properties. */

  69.   border-top: solid 2px currentColor;

  70. }

  71. 

  72. .secondary-nav__menu-link:hover::after {

  73.   transform: translateY(0);

  74.   opacity: 0.8;

  75. }

  76. 

  77. @media (min-width: 75rem) {

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

  79.     position: relative;

  80.     display: flex;

  81.     margin-inline-start: var(--sp);

  82.     padding-inline-start: var(--sp2);

  83.   }

  84. 

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

  86.     position: absolute;

  87.     inset-block-start: 50%;

  88.     inset-inline-start: 0;

  89.     width: 2px;

  90.     height: var(--sp2);

  91.     content: "";

  92.     transform: translateY(-50%);

  93.     background-color: var(--color--gray-90);

  94.   }

  95. 

  96.   body:not(.is-always-mobile-nav) .secondary-nav__menu-item:not(:last-child) {

  97.     margin-inline-end: var(--sp2);

  98.   }

  99.   body:not(.is-always-mobile-nav) .secondary-nav__menu-link:focus {

  100.     position: relative;

  101.     outline: 0;

  102.   }

  103. 

  104.   body:not(.is-always-mobile-nav) .secondary-nav__menu-link:focus::before {

  105.     position: absolute;

  106.     top: 50%;

  107.     left: 50%;

  108.     width: calc(100% + var(--sp));

  109.     height: var(--sp3);

  110.     content: "";

  111.     transform: translate(-50%, -50%);

  112.     border: solid 2px var(--color--primary-50);

  113.     border-radius: 0.25rem;

  114.   }

  115. }