diff --git a/breadcrumb.scss b/breadcrumb.scss index b2949b6..7b3a912 100644 --- a/breadcrumb.scss +++ b/breadcrumb.scss @@ -4,66 +4,66 @@ list-style: none; overflow: hidden; font-size: 12px; -} -.crumbs-1 li { - background: $content-background-color; - border: 1px solid $content-border-color; - padding: 10px 10px 10px 20px; - position: relative; - display: block; - float: left; - text-shadow: -1px -1px 1px #ffffff; - cursor: pointer; + li { + background: $content-background-color; + border: 1px solid $content-border-color; + padding: 10px 10px 10px 20px; + position: relative; + display: block; + float: left; + text-shadow: -1px -1px 1px #ffffff; + cursor: pointer; - @include box-shadow-out(#ffffff); + @include box-shadow-out(#ffffff); - &:first-child { - @include border-left-radius(3px); + &:first-child { + @include border-left-radius(3px); + } + + &:not(.last):after, &:before { + content:" "; + display: block; + width: 0; + height: 0; + border-top: 18px solid transparent; + border-bottom: 17px solid transparent; + border-left: 14px solid $content-background-color; + position: absolute; + top: 50%; + margin-top: -18px; + left: 100%; + } + + &:not(.last):after { + z-index: 2; + } + + &:before { + border-left-color: $content-border-color; + margin-left: 1px; + z-index: 1; + } + + &.active:not(.last):after, &:hover:not(.last):after { + border-left: 14px solid #ffffff; + } + } + + .last { + padding-right: 20px; + @include border-right-radius(3px); + + &:before { + border: none; + } + } + + .active { + cursor: default; + } + + .active, li:hover { + background: #ffffff; } } - -.crumbs-1 .last { - padding-right: 20px; - @include border-right-radius(3px); -} - -.crumbs-1 li:not(.last):after, .crumbs-1 li:before { - content:" "; - display: block; - width: 0; - height: 0; - border-top: 18px solid transparent; - border-bottom: 17px solid transparent; - border-left: 14px solid $content-background-color; - position: absolute; - top: 50%; - margin-top: -18px; - left: 100%; -} - -.crumbs-1 .last:before { - border: none; -} - -.crumbs-1 li:not(.last):after { - z-index: 2; -} - -.crumbs-1 li:before { - border-left-color: $content-border-color; - margin-left: 1px; - z-index: 1; -} - -.crumbs-1 .active, .crumbs-1 li:hover { - background: #ffffff; -} - -.crumbs-1 .active { - cursor: default; -} - -.crumbs-1 li.active:not(.last):after, .crumbs-1 li:hover:not(.last):after { - border-left: 14px solid #ffffff; -}