diff --git a/templates/widgets/breadcrumbs.lucius b/templates/widgets/breadcrumbs.lucius index d74dddeec..7a1b604ab 100644 --- a/templates/widgets/breadcrumbs.lucius +++ b/templates/widgets/breadcrumbs.lucius @@ -8,14 +8,18 @@ margin-bottom: 10px; padding-left: 30px; transition: margin-bottom .2s ease; - z-index: 10; } + .breadcrumbs__container--animated { transition: left .2s ease; } + .breadcrumbs__link { color: var(--color-lightwhite); - z-index: 2; + + &:hover { + color: var(--color-lightwhite); + } } .breadcrumbs__item { @@ -23,11 +27,16 @@ padding-right: 4px; position: relative; line-height: 28px; - --color-bg-odd: var(--color-dark); - --color-bg-even: var(--color-primary); + opacity: 0.8; + z-index: 1; - &:nth-child(even) { - background-color: var(--color-bg-even); + --color-bg-odd: transparent; + --color-bg-odd-after: var(--color-dark); + --color-bg-even: var(--color-primary); + --color-bg-even-after: var(--color-primary); + + &:hover { + opacity: 1; } &:first-child { @@ -38,11 +47,11 @@ background-color: var(--color-bg-even); &::before { - border-left-color: var(--color-bg-odd) !important; + border-left-color: var(--color-bg-odd-after) !important; } &::after { - border-left-color: var(--color-bg-even) !important; + border-left-color: var(--color-bg-even-after) !important; } } @@ -50,11 +59,11 @@ background-color: var(--color-bg-odd); &::before { - border-left-color: var(--color-bg-even) !important; + border-left-color: var(--color-bg-even-after) !important; } &::after { - border-left-color: var(--color-bg-odd) !important; + border-left-color: var(--color-bg-odd-after) !important; } } @@ -68,7 +77,8 @@ left: 0; border-top: 14px solid transparent; border-bottom: 14px solid transparent; - border-left: 14px solid var(--color-light); + border-left: 14px solid transparent; + z-index: 10; } } @@ -81,7 +91,8 @@ right: -14px; border-top: 14px solid transparent; border-bottom: 14px solid transparent; - border-left: 14px solid var(--color-light); + border-left: 14px solid transparent; + z-index: 10; } } }