source/stylesheets/refills/_breadcrumbs.scss in refills-0.0.2 vs source/stylesheets/refills/_breadcrumbs.scss in refills-0.1.0
- old
+ new
@@ -1,62 +1,73 @@
-.breadcrumb {
+.breadcrumb {
+ ///////////////////////////////////////////////////////////////////////////////////
+ $base-border-color: gainsboro !default;
+ $base-border-radius: 3px !default;
+ $base-background-color: white !default;
+ $base-spacing: 1.5em !default;
+ $base-accent-color: #477DCA !default;
+ $base-link-color: $base-accent-color !default;
+ $medium-gray: #999 !default;
+ $light-gray: #DDD !default;
+ $medium-screen: em(640) !default;
+ //////////////////////////////////////////////////////////////////////////////////
+
$breadcrumb-border-color: $base-border-color;
$breadcrumb-border: 1px solid $breadcrumb-border-color;
- $breadcrumb-height: $base-line-height * 1.5;
+ $breadcrumb-height: $base-spacing * 1.5;
$breadcrumb-arrow-color: $breadcrumb-border-color;
- $breadcrumb-background: $base-body-color;
+ $breadcrumb-background: $base-background-color;
$breadcrumb-inactive-hover-color: $breadcrumb-background;
$breadcrumb-color: $medium-gray;
$breadcrumb-color-hover: $base-accent-color;
$breadcrumb-color-active: $breadcrumb-color;
- @include inline-block;
+ display: inline-block;
+ margin-bottom: $base-spacing;
text-align: left;
- margin-bottom: $base-line-height;
a {
- @include inline-block;
background-color: $breadcrumb-background;
+ border-left: 0;
border: $breadcrumb-border;
color: $breadcrumb-color;
+ display: inline-block;
+ font-size: 0.8em;
line-height: $breadcrumb-height;
+ margin-bottom: 2px;
margin-right: -5px;
- font-size: .8em;
- padding: 0 $breadcrumb-height/4 0 $breadcrumb-height/2;
+ padding: 0 ($breadcrumb-height / 4) 0 ($breadcrumb-height / 2);
position: relative;
text-decoration: none;
- margin-bottom: 2px;
&:first-child {
- padding-left: $breadcrumb-height/2;
- border-top-left-radius: $base-border-radius;
border-bottom-left-radius: $base-border-radius;
+ border-left: $breadcrumb-border;
+ border-top-left-radius: $base-border-radius;
+ padding-left: $breadcrumb-height / 2;
}
&:last-child {
background-color: $breadcrumb-background;
- color: $breadcrumb-color-active;
border-bottom-right-radius: $base-border-radius;
border-top-right-radius: $base-border-radius;
- padding-right: $breadcrumb-height/2;
+ color: $breadcrumb-color-active;
+ padding-right: $breadcrumb-height / 2;
}
+ &:focus,
&:hover {
- color: $breadcrumb-color-hover;
background-color: $breadcrumb-inactive-hover-color;
+ color: $breadcrumb-color-hover;
}
- &:hover:after {
- border-left-color: $breadcrumb-inactive-hover-color;;
- }
-
&:after,
&:before {
@include position(absolute, 0px auto 0px 100%);
- border-bottom: $breadcrumb-height/2 solid transparent;
- border-left: $breadcrumb-height/4 solid transparent;
- border-top: $breadcrumb-height/2 solid transparent;
+ border-bottom: $breadcrumb-height / 2 solid transparent;
+ border-left: $breadcrumb-height / 4 solid transparent;
+ border-top: $breadcrumb-height / 2 solid transparent;
content: '';
display: block;
margin: auto;
z-index: 2;
}
@@ -75,10 +86,10 @@
border-left-color: $breadcrumb-background;
}
@include media($medium-screen) {
font-size: 1em;
- padding: 0 $breadcrumb-height/2 0 $breadcrumb-height/1.5;
+ padding: 0 ($breadcrumb-height / 2) 0 ($breadcrumb-height / 1.5);
}
}
}