Edit
/* scss/6-page-content-elements/_breadcrumbs.scss */
// legacy css
#breadcrumbs2 {
clear: left;
margin-top: 1.5625rem;
margin-bottom: 1.5625rem;
}
.user_content .m-breadcrumbs {
max-width: 700px;
margin: 0;
padding: 0;
overflow: visible;
list-style: none;
color: var(--color-wmgreen-90);
&__link {
display: inline;
margin: 0;
font-family: font(text-sans);
font-size: 0.94rem;
& a {
@include wm_default_link_styles();
}
&:last-child {
font-weight: 400;
color: var(--color-text-base);
}
&::after {
padding: 0 0 0 0.35533rem;
color: var(--color-text-base);
content: "/";
}
&:last-child:after,
&:only-child:after,
&:last-of-type:after {
content: none;
}
}
}
[id^="collapsedlinks"] .m-breadcrumbs__link::after {
content: none;
}
.feature .m-breadcrumbs {
margin-bottom: 1.066rem;
}
// breadcrumb ellipsis
.m-breadcrumbs__link button {
display: inline-block;
min-height: auto;
width: auto;
min-height: auto;
margin: 0;
padding: 0 0.1em 0 0.1em;
cursor: pointer;
color: var(--color-link-base);
border: 0;
background: transparent;
font-size: 1.3em;
font-weight: bold;
line-height: 1em;
}
.m-breadcrumbs__link button:hover,
.m-breadcrumbs__link button:focus {
text-decoration: underline !important;
color: var(--color-webgold-75);
background-color: white;
}
#collapsedlinks {
position: absolute;
display: none;
max-width: 255px;
padding: 7px 45px 7px 17px;
border: 1px solid var(--color-wmsilver-25);
border-radius: 2px;
background: #fff;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.05);
}
#collapsedlinks[data-show] {
display: block;
-webkit-animation: fadeindown 0.2s;
-moz-animation: fadeindown 0.2s;
-ms-animation: fadeindown 0.2s;
-o-animation: fadeindown 0.2s;
animation: fadeindown 0.2s;
animation-timing-function: ease-in-out;
}
#collapsedlinks li {
display: block;
margin: 0.85rem 0;
text-align: left;
font-size: 1em;
line-height: 1.2em;
}
#collapsedlinks li::after {
content: none;
}
#collapsedlinks[data-popper-placement^="top"] > #bc_arrow {
bottom: -4px;
}
#collapsedlinks[data-popper-placement^="bottom"] > #bc_arrow {
top: -6px;
}
#collapsedlinks[data-popper-placement^="left"] > #bc_arrow {
right: -4px;
}
#collapsedlinks[data-popper-placement^="right"] > #bc_arrow {
left: -4px;
}
#bc_arrow,
#bc_arrow::before {
position: absolute;
z-index: -1;
width: 10px;
height: 10px;
}
#bc_arrow::before {
left: 0;
content: "";
transform: rotate(45deg);
background: #fff;
}
#collapsedlinks[data-popper-placement^="top"] > #bc_arrow::before {
border: 1px solid #fff;
border-right-color: var(--color-wmsilver-25);
border-bottom-color: var(--color-wmsilver-25);
}
#collapsedlinks[data-popper-placement^="bottom"] > #bc_arrow::before {
border: 1px solid #fff;
border-top-color: var(--color-wmsilver-25);
border-left-color: var(--color-wmsilver-25);
}
#collapsedlinks[data-popper-placement="bottom-end"] > #bc_arrow::before,
#collapsedlinks[data-popper-placement="top-end"] > #bc_arrow::before {
left: -10px;
}
[id^="collapsedlinks"] {
position: absolute;
z-index: 1;
display: none;
max-width: 255px;
padding: 7px 45px 7px 17px;
border: 1px solid var(--color-wmsilver-25);
border-radius: 2px;
background: #fff;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.05);
}
[id^="collapsedlinks"][data-show] {
display: block;
-webkit-animation: fadeindown 0.2s;
-moz-animation: fadeindown 0.2s;
-ms-animation: fadeindown 0.2s;
-o-animation: fadeindown 0.2s;
animation: fadeindown 0.2s;
animation-timing-function: ease;
animation-timing-function: ease-in-out;
}
[id^="collapsedlinks"][data-popper-placement^="bottom"] > [id^="bc_arrow"] {
top: -6px;
}
[id^="collapsedlinks"][data-popper-placement^="bottom"] > [id^="bc_arrow"]::before {
border: 1px solid #fff;
border-top-color: var(--color-wmsilver-25);
border-left-color: var(--color-wmsilver-25);
}
[id^="collapsedlinks"][data-popper-placement^="top"] > [id^="bc_arrow"] {
bottom: -4px;
}
[id^="collapsedlinks"][data-popper-placement^="top"] > [id^="bc_arrow"]::before {
border: 1px solid #fff;
border-right-color: var(--color-wmsilver-25);
border-bottom-color: var(--color-wmsilver-25);
}
.user_content [id^="collapsedlinks"] li {
display: block;
margin: 0.85rem 0;
text-align: left;
font-size: 1em;
line-height: 1.2em;
}
[id^="bc_arrow"],
[id^="bc_arrow"]::before {
position: absolute;
z-index: -1;
width: 10px;
height: 10px;
}
[id^="bc_arrow"]::before {
left: 0;
content: "";
transform: rotate(45deg);
background: #fff;
}
#bc_arrow,
#bc_arrow::before {
position: absolute;
z-index: -1;
width: 10px;
height: 10px;
}
#bc_arrow::before {
left: 0;
content: "";
transform: rotate(45deg);
background: #fff;
}
#collapsedlinks[data-popper-placement^="top"] > #bc_arrow::before {
border: 1px solid #fff;
border-right-color: var(--color-wmsilver-25);
border-bottom-color: var(--color-wmsilver-25);
}
#collapsedlinks[data-popper-placement^="bottom"] > #bc_arrow::before {
border: 1px solid #fff;
border-top-color: var(--color-wmsilver-25);
border-left-color: var(--color-wmsilver-25);
}
#collapsedlinks[data-popper-placement="bottom-end"] > #bc_arrow::before,
#collapsedlinks[data-popper-placement="top-end"] > #bc_arrow::before {
left: -10px;
}
@keyframes fadeinup {
from {
top: 20px;
opacity: 0;
}
to {
top: 0;
opacity: 1;
}
}
@-moz-keyframes fadeinup {
from {
top: 20px;
opacity: 0;
}
to {
top: 0;
opacity: 1;
}
}
@-webkit-keyframes fadeinup {
from {
top: 20px;
opacity: 0;
}
to {
top: 0;
opacity: 1;
}
}
@-ms-keyframes fadeinup {
from {
top: 20px;
opacity: 0;
}
to {
top: 0;
opacity: 1;
}
}
@-o-keyframes fadeinup {
from {
top: 20px;
opacity: 0;
}
to {
top: 0;
opacity: 1;
}
}
@keyframes fadeindown {
from {
top: -20px;
opacity: 0;
}
to {
top: 0;
opacity: 1;
}
}
@-moz-keyframes fadeindown {
from {
top: -20px;
opacity: 0;
}
to {
top: 0;
opacity: 1;
}
}
@-webkit-keyframes fadeindown {
from {
top: -20px;
opacity: 0;
}
to {
top: 0;
opacity: 1;
}
}
@-ms-keyframes fadeindown {
from {
top: -20px;
opacity: 0;
}
to {
top: 0;
opacity: 1;
}
}
@-o-keyframes fadeindown {
from {
top: -20px;
opacity: 0;
}
to {
top: 0;
opacity: 1;
}
}