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: 0.875rem; 16 font-weight: 600; 17} 18 19[dir="ltr"] .secondary-nav__menu { 20 margin-left: 0; 21} 22 23[dir="rtl"] .secondary-nav__menu { 24 margin-right: 0; 25} 26 27[dir="ltr"] .secondary-nav__menu { 28 margin-right: 0; 29} 30 31[dir="rtl"] .secondary-nav__menu { 32 margin-left: 0; 33} 34 35[dir="ltr"] .secondary-nav__menu { 36 padding-left: 0; 37} 38 39[dir="rtl"] .secondary-nav__menu { 40 padding-right: 0; 41} 42 43[dir="ltr"] .secondary-nav__menu { 44 padding-right: 0; 45} 46 47[dir="rtl"] .secondary-nav__menu { 48 padding-left: 0; 49} 50 51.secondary-nav__menu { 52 display: flex; 53 align-items: center; 54 margin-top: 0; 55 margin-bottom: 0; 56 padding-top: 0; 57 padding-bottom: 0; 58 list-style: none; 59} 60 61.secondary-nav__menu-item { 62 /* Parent element is set to flex-basis: 0. We 63 * don't want text to wrap unless it goes over a 64 * certain arbitrary width. 65 */ 66 67 /* @todo should this be scoped to desktop nav? */ 68 width: -webkit-max-content; 69 width: max-content; 70 max-width: 12.5rem 71} 72 73[dir="ltr"] .secondary-nav__menu-item:not(:last-child) { 74 margin-right: 1.6875rem; 75} 76 77[dir="rtl"] .secondary-nav__menu-item:not(:last-child) { 78 margin-left: 1.6875rem; 79} 80 81.secondary-nav__menu-link { 82 position: relative; 83 display: inline-flex; 84 align-items: center; 85 height: 2.25rem; 86 text-decoration: none; 87 color: inherit 88} 89 90.secondary-nav__menu-link:after { 91 position: absolute; 92 bottom: 0; 93 left: 0; 94 width: 100%; 95 height: 0; 96 content: ""; 97 transition: opacity 0.2s, transform 0.2s; 98 transform: translateY(0.3125rem); 99 opacity: 0; 100 /* Intentionally not using CSS logical properties. */ 101 border-top: solid 2px currentColor; 102 } 103 104.secondary-nav__menu-link:hover:after { 105 transform: translateY(0); 106 opacity: 0.8; 107 } 108 109@media (min-width: 75rem) { 110 [dir="ltr"] body:not(.is-always-mobile-nav) .secondary-nav { 111 margin-left: 1.125rem; 112 } 113 [dir="rtl"] body:not(.is-always-mobile-nav) .secondary-nav { 114 margin-right: 1.125rem; 115 } 116 [dir="ltr"] body:not(.is-always-mobile-nav) .secondary-nav { 117 padding-left: 2.25rem; 118 } 119 [dir="rtl"] body:not(.is-always-mobile-nav) .secondary-nav { 120 padding-right: 2.25rem; 121 } 122 body:not(.is-always-mobile-nav) .secondary-nav { 123 position: relative; 124 display: flex 125 } 126 127 [dir="ltr"] body:not(.is-always-mobile-nav) .secondary-nav:before { 128 left: 0; 129 } 130 131 [dir="rtl"] body:not(.is-always-mobile-nav) .secondary-nav:before { 132 right: 0; 133 } 134 135 body:not(.is-always-mobile-nav) .secondary-nav:before { 136 position: absolute; 137 top: 50%; 138 width: 2px; 139 height: 2.25rem; 140 content: ""; 141 transform: translateY(-50%); 142 background-color: #d7e1e8; 143 } 144 145 [dir="ltr"] body:not(.is-always-mobile-nav) .secondary-nav__menu-item:not(:last-child) { 146 margin-right: 2.25rem; 147 } 148 149 [dir="rtl"] body:not(.is-always-mobile-nav) .secondary-nav__menu-item:not(:last-child) { 150 margin-left: 2.25rem; 151 } 152 body:not(.is-always-mobile-nav) .secondary-nav__menu-link:focus { 153 position: relative; 154 outline: 0 155 } 156 157 body:not(.is-always-mobile-nav) .secondary-nav__menu-link:focus:before { 158 position: absolute; 159 top: 50%; 160 left: 50%; 161 width: calc(100% + 1.125rem); 162 height: 3.375rem; 163 content: ""; 164 transform: translate(-50%, -50%); 165 border: solid 2px #2494db; 166 border-radius: 0.25rem; 167 } 168 } 169