|
/****************************/ |
|
|
|
If coming from the list page |
|
|
|
<div class="list-breadcrumb"> |
|
Breadcrumb code |
|
</div> |
|
|
|
If coming from the spot page |
|
|
|
<div class="spot-breadcrumb"> |
|
Breadcrumb code |
|
</div> |
|
|
|
*/ |
|
|
|
.list_breadcrumb { |
|
include @breadcrumb-mobile(list-arrow-image, list-background-image-url, list-inner-glow); |
|
} |
|
|
|
.spot_breadcrumb { |
|
include @breadcrumb-mobile(spot-arrow-image-url, spot-background-image-url, spot-inner-glow); |
|
} |
|
|
|
/* |
|
|
|
@mixin breadcrumb($left-arrow, $background-image, $inner-glow, $media) { |
|
if $media == "iphone" |
|
....... |
|
elsif $media == "ipad" |
|
..... |
|
end |
|
} |
|
*/ |
|
|
|
/************UPDATED*************/ |
|
/* mobile breadcrumb */ |
|
@mixin breadcrumb-mobile($left_arrow, $background_image, $inner_glow) { |
|
margin: 15px 0; |
|
.breadcrumb-wrapper { |
|
background: url($left_arrow) left top no-repeat; |
|
background-size: contain; |
|
height: 32px; |
|
width: auto; |
|
border-right: 1px solid $breadcrumb-title-border-mobile; |
|
} |
|
.breadcrumb-location { |
|
display: none; |
|
} |
|
.breadcrumb-location-detail { |
|
display: none; |
|
} |
|
a { |
|
text-overflow: ellipsis; |
|
overflow: hidden; |
|
color: $white; |
|
text-transform: uppercase; |
|
font: 900 em(15) $sans-serif-font; |
|
display: block; |
|
height: 32px; |
|
line-height: 32px; |
|
padding: 0 10px 0 22px; |
|
margin-left: 13px; |
|
background: url($background_image) repeat; |
|
border-top: 1px solid $breadcrumb-title-border-mobile; |
|
border-bottom: 1px solid $breadcrumb-title-border-mobile; |
|
box-shadow: -1px -1px 1px $inner_glow inset, $breadcrumb-title-inner-glow-mobile -1px 1px 1px inset; |
|
&:link, &:visited { |
|
color: $white; |
|
} |
|
} |
|
} /* END breadcrumb-mobile mixin */ |
|
|
|
|
|
|
|
|
|
|
|
|
|
/************ORIGINAL*****************/ |
|
/* mobile breadcrumb */ |
|
@mixin breadcrumb-mobile { |
|
margin: 15px 0; |
|
.breadcrumb-wrapper { |
|
background: url(/assets/breadcrumb-arrow-lft-mobile.png) left top no-repeat; |
|
background-size: contain; |
|
height: 32px; |
|
width: auto; |
|
border-right: 1px solid $breadcrumb-title-border-mobile; |
|
} |
|
.breadcrumb-location { |
|
display: none; |
|
} |
|
.breadcrumb-location-detail { |
|
display: none; |
|
} |
|
a { |
|
text-overflow: ellipsis; |
|
overflow: hidden; |
|
color: $white; |
|
text-transform: uppercase; |
|
font: 900 em(15) $sans-serif-font; |
|
display: block; |
|
height: 32px; |
|
line-height: 32px; |
|
padding: 0 10px 0 22px; |
|
margin-left: 13px; |
|
background: url(/assets/breadcrumb-bkgd-mobile.png) repeat; |
|
border-top: 1px solid $breadcrumb-title-border-mobile; |
|
border-bottom: 1px solid $breadcrumb-title-border-mobile; |
|
box-shadow: -1px -1px 1px $breadcrumb-title-inner-glow-mobile inset, $breadcrumb-title-inner-glow-mobile -1px 1px 1px inset; |
|
&:link, &:visited { |
|
color: $white; |
|
} |
|
} |
|
} /* END breadcrumb-mobile mixin */ |
