drupal/core/themes/olivero/css/components/breadcrumb.css

241 lines
4.0 KiB
CSS

/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
/**
* @file
* Breadcrumb region.
*/
.breadcrumb {
position: relative;
font-size: 0.875rem;
font-weight: bold;
line-height: 1.125rem
/* Shadow on the right side of breadcrumbs for narrow screens. */
}
[dir="ltr"] .breadcrumb:after {
right: -1.125rem
}
[dir="rtl"] .breadcrumb:after {
left: -1.125rem
}
.breadcrumb:after {
position: absolute;
top: 0;
width: 3.375rem;
height: 2.25rem;
content: "";
background: linear-gradient(to left, #fff 0%, rgba(255, 255, 255, 0) 100%) /* LTR */
}
@media (min-width: 62.5rem) {
.breadcrumb:after {
content: none
}
}
@media (min-width: 62.5rem) {
.breadcrumb {
position: static
}
}
[dir="rtl"] .breadcrumb:after {
background: linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%);
}
[dir="ltr"] .breadcrumb__content {
margin-left: -0.5625rem
}
[dir="rtl"] .breadcrumb__content {
margin-right: -0.5625rem
}
[dir="ltr"] .breadcrumb__content {
margin-right: -1.125rem
}
[dir="rtl"] .breadcrumb__content {
margin-left: -1.125rem
}
[dir="ltr"] .breadcrumb__content {
padding-left: 0.5625rem
}
[dir="rtl"] .breadcrumb__content {
padding-right: 0.5625rem
}
.breadcrumb__content {
overflow: auto;
margin-top: -0.5625rem;
margin-bottom: -0.5625rem;
padding-top: 0.5625rem;
padding-bottom: 0.5625rem;
-webkit-overflow-scrolling: touch
}
@media (min-width: 62.5rem) {
[dir="ltr"] .breadcrumb__content {
margin-right: 0
}
[dir="rtl"] .breadcrumb__content {
margin-left: 0
}
}
[dir="ltr"] .breadcrumb__list {
margin-left: -1.125rem
}
[dir="rtl"] .breadcrumb__list {
margin-right: -1.125rem
}
[dir="ltr"] .breadcrumb__list {
margin-right: -1.125rem
}
[dir="rtl"] .breadcrumb__list {
margin-left: -1.125rem
}
[dir="ltr"] .breadcrumb__list {
padding-left: 1.125rem
}
[dir="rtl"] .breadcrumb__list {
padding-right: 1.125rem
}
[dir="ltr"] .breadcrumb__list {
padding-right: 0
}
[dir="rtl"] .breadcrumb__list {
padding-left: 0
}
.breadcrumb__list {
overflow-x: auto;
width: -webkit-max-content;
width: max-content;
margin-top: 0;
margin-bottom: 0;
padding-top: 0;
padding-bottom: 1.125rem;
list-style: none;
white-space: nowrap
}
@media (min-width: 62.5rem) {
[dir="ltr"] .breadcrumb__list {
margin-left: 0
}
[dir="rtl"] .breadcrumb__list {
margin-right: 0
}
[dir="ltr"] .breadcrumb__list {
margin-right: 0
}
[dir="rtl"] .breadcrumb__list {
margin-left: 0
}
[dir="ltr"] .breadcrumb__list {
padding-left: 0
}
[dir="rtl"] .breadcrumb__list {
padding-right: 0
}
.breadcrumb__list {
overflow: visible;
padding-bottom: 0;
white-space: normal
}
}
.breadcrumb__item {
display: inline-block
}
[dir="ltr"] .breadcrumb__item:nth-child(n+2):before {
margin-left: 1rem;
margin-right: 1.25rem
}
[dir="rtl"] .breadcrumb__item:nth-child(n+2):before {
margin-right: 1rem;
margin-left: 1.25rem
}
[dir="ltr"] .breadcrumb__item:nth-child(n+2):before {
border-right: 2px solid #5d7585
}
[dir="rtl"] .breadcrumb__item:nth-child(n+2):before {
border-left: 2px solid #5d7585
}
.breadcrumb__item:nth-child(n+2):before {
display: inline-block;
width: 0.5rem;
height: 0.5rem;
content: "";
transform: rotate(45deg); /* LTR */
border-top: 2px solid #5d7585;
}
[dir="ltr"] .breadcrumb__item:last-child {
margin-right: 3.375rem
}
[dir="rtl"] .breadcrumb__item:last-child {
margin-left: 3.375rem
}
@media (min-width: 62.5rem) {
[dir="ltr"] .breadcrumb__item:last-child {
margin-right: 0
}
[dir="rtl"] .breadcrumb__item:last-child {
margin-left: 0
}
}
[dir="rtl"] .breadcrumb__item:nth-child(n+2):before {
transform: rotate(-45deg);
}
.breadcrumb__link {
text-decoration: none;
color: #0d77b5
}
.breadcrumb__link:hover,
.breadcrumb__link:focus {
text-decoration: underline;
}