Skip to content


Subversion checkout URL

You can clone with
Download ZIP
Fetching contributors…
Cannot retrieve contributors at this time
120 lines (98 sloc) 2.77 KB
@import 'compass';
$height: 2em;
$default-border-radius: 4px;
$inactive: #f0f0f0;
$inactive-dark: #d3d3d3;
$inactive-text: #444;
$inactive-sep: #999;
$hover: #99e;
$hover-dark: #66c;
$hover-text: #fff;
$hover-sep: #777;
$active: desaturate(darken($hover, 10%), 10%);
$active-dark: desaturate(darken($hover-dark, 10%), 10%);
$active-text: #eee;
$active-sep: $hover-sep;
$current-text: #666;
.breadcrumbs {
border: 1px solid $inactive-sep;
display: inline-block;
font: {
family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
size: 13px;
@include border-radius;
@include box-shadow(0 1px 3px rgba(0,0,0,0.5));
@include background(linear-gradient(top, $inactive, $inactive-dark));
@include clearfix;
ul {
@include inline-list;
li:first-child {
a, span {
padding-left: 1em;
@include border-left-radius;
li:last-child {
a, span {
@include border-right-radius;
&:after { content: normal; }
a, span {
color: $inactive-text;
display: block;
float: left;
position: relative;
line-height: $height;
padding: 0 1em 0 1.5em;
text-decoration: none;
@include text-shadow(0 1px 0 rgba(255,255,255,0.7));
@include background(linear-gradient(top, $inactive, $inactive-dark));
&:after {
content: '';
display: block;
z-index: 1;
@include box-sizing(border-box);
height: $height;
width: $height;
border: {
right: 2px solid $inactive-sep;
top: 2px solid $inactive-sep;
position: absolute;
right: 0;
top: 0;
@include background(linear-gradient(left top, $inactive, $inactive-dark));
@include transform(translateX($height/2) rotate(45deg) scale(1/sqrt(3)) skew(15deg, 15deg));
&:hover {
color: $hover-text;
@include text-shadow(0 -1px 0 rgba(0,0,0,0.5));
@include background(linear-gradient(top, $hover, $hover-dark));
&:after {
border-color: $hover-sep;
@include background(linear-gradient(left top, $hover, $hover-dark));
&:active {
color: $active-text;
@include background(linear-gradient(top, $active, $active-dark));
@include box-shadow(inset 0 0 3px rgba(0,0,0,0.5));
&:after {
border-color: $active-sep;
@include background(linear-gradient(left top, $active, $active-dark));
@include box-shadow(inset -2px 2px 3px rgba(0,0,0,0.5));
&.current, &.current:hover, &.current:active {
background: inherit;
color: $current-text;
@include text-shadow(0 1px 0 rgba(255,255,255,0.7));
@include box-shadow(none);
@include border-right-radius;
&:after { content: normal; }
Jump to Line
Something went wrong with that request. Please try again.