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 * Breadcrumb region. 11 */ 12 13.breadcrumb { 14 position: relative; 15 font-size: 0.875rem; 16 font-weight: bold; 17 line-height: 1.125rem 18 19 /* Shadow on the right side of breadcrumbs for narrow screens. */ 20} 21 22[dir="ltr"] .breadcrumb:after { 23 right: -1.125rem 24} 25 26[dir="rtl"] .breadcrumb:after { 27 left: -1.125rem 28} 29 30.breadcrumb:after { 31 position: absolute; 32 top: 0; 33 width: 3.375rem; 34 height: 2.25rem; 35 content: ""; 36 background: linear-gradient(to left, #fff 0%, rgba(255, 255, 255, 0) 100%) /* LTR */ 37 } 38 39@media (min-width: 62.5rem) { 40 41.breadcrumb:after { 42 content: none 43 } 44 } 45 46@media (min-width: 62.5rem) { 47 48.breadcrumb { 49 position: static 50} 51 } 52 53[dir="rtl"] .breadcrumb:after { 54 background: linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%); 55} 56 57[dir="ltr"] .breadcrumb__content { 58 margin-left: -0.5625rem 59} 60 61[dir="rtl"] .breadcrumb__content { 62 margin-right: -0.5625rem 63} 64 65[dir="ltr"] .breadcrumb__content { 66 margin-right: -1.125rem 67} 68 69[dir="rtl"] .breadcrumb__content { 70 margin-left: -1.125rem 71} 72 73[dir="ltr"] .breadcrumb__content { 74 padding-left: 0.5625rem 75} 76 77[dir="rtl"] .breadcrumb__content { 78 padding-right: 0.5625rem 79} 80 81.breadcrumb__content { 82 overflow: auto; 83 margin-top: -0.5625rem; 84 margin-bottom: -0.5625rem; 85 padding-top: 0.5625rem; 86 padding-bottom: 0.5625rem; 87 -webkit-overflow-scrolling: touch 88} 89 90@media (min-width: 62.5rem) { 91 92[dir="ltr"] .breadcrumb__content { 93 margin-right: 0 94 } 95 96[dir="rtl"] .breadcrumb__content { 97 margin-left: 0 98 } 99 } 100 101[dir="ltr"] .breadcrumb__list { 102 margin-left: -1.125rem 103} 104 105[dir="rtl"] .breadcrumb__list { 106 margin-right: -1.125rem 107} 108 109[dir="ltr"] .breadcrumb__list { 110 margin-right: -1.125rem 111} 112 113[dir="rtl"] .breadcrumb__list { 114 margin-left: -1.125rem 115} 116 117[dir="ltr"] .breadcrumb__list { 118 padding-left: 1.125rem 119} 120 121[dir="rtl"] .breadcrumb__list { 122 padding-right: 1.125rem 123} 124 125[dir="ltr"] .breadcrumb__list { 126 padding-right: 0 127} 128 129[dir="rtl"] .breadcrumb__list { 130 padding-left: 0 131} 132 133.breadcrumb__list { 134 overflow-x: auto; 135 width: -webkit-max-content; 136 width: max-content; 137 margin-top: 0; 138 margin-bottom: 0; 139 padding-top: 0; 140 padding-bottom: 1.125rem; 141 list-style: none; 142 white-space: nowrap 143} 144 145@media (min-width: 62.5rem) { 146 147[dir="ltr"] .breadcrumb__list { 148 margin-left: 0 149 } 150 151[dir="rtl"] .breadcrumb__list { 152 margin-right: 0 153 } 154 155[dir="ltr"] .breadcrumb__list { 156 margin-right: 0 157 } 158 159[dir="rtl"] .breadcrumb__list { 160 margin-left: 0 161 } 162 163[dir="ltr"] .breadcrumb__list { 164 padding-left: 0 165 } 166 167[dir="rtl"] .breadcrumb__list { 168 padding-right: 0 169 } 170 171.breadcrumb__list { 172 overflow: visible; 173 padding-bottom: 0; 174 white-space: normal 175} 176 } 177 178.breadcrumb__item { 179 display: inline-block 180} 181 182[dir="ltr"] .breadcrumb__item:nth-child(n+2):before { 183 margin-left: 1rem; 184 margin-right: 1.25rem 185} 186 187[dir="rtl"] .breadcrumb__item:nth-child(n+2):before { 188 margin-right: 1rem; 189 margin-left: 1.25rem 190} 191 192[dir="ltr"] .breadcrumb__item:nth-child(n+2):before { 193 border-right: 2px solid #5d7585 194} 195 196[dir="rtl"] .breadcrumb__item:nth-child(n+2):before { 197 border-left: 2px solid #5d7585 198} 199 200.breadcrumb__item:nth-child(n+2):before { 201 display: inline-block; 202 width: 0.5rem; 203 height: 0.5rem; 204 content: ""; 205 transform: rotate(45deg); /* LTR */ 206 border-top: 2px solid #5d7585; 207 } 208 209[dir="ltr"] .breadcrumb__item:last-child { 210 margin-right: 3.375rem 211} 212 213[dir="rtl"] .breadcrumb__item:last-child { 214 margin-left: 3.375rem 215} 216 217@media (min-width: 62.5rem) { 218 219[dir="ltr"] .breadcrumb__item:last-child { 220 margin-right: 0 221 } 222 223[dir="rtl"] .breadcrumb__item:last-child { 224 margin-left: 0 225 } 226 } 227 228[dir="rtl"] .breadcrumb__item:nth-child(n+2):before { 229 transform: rotate(-45deg); 230} 231 232.breadcrumb__link { 233 text-decoration: none; 234 color: #0d77b5 235} 236 237.breadcrumb__link:hover, 238 .breadcrumb__link:focus { 239 text-decoration: underline; 240 } 241