Sha256: 7ccfa32467cce38012f982f442b3d4bc7fbe9a54caf31efdf95e470538032373
Contents?: true
Size: 1.91 KB
Versions: 9
Compression:
Stored size: 1.91 KB
Contents
// Turns an ol into a Google-style two-level menu bar.
@mixin pwnplus-menu-bar(
$bar-color,
$text-color,
$border-color: $bar-color,
$hover-bar-color: $text-color,
$hover-text-color: $bar-color,
$z-index: 5,
$last-item-right: false) {
display: block;
background-color: $bar-color;
color: $text-color;
margin: 0;
padding: 0;
@if $last-item-right {
position: relative;
}
@include pwnplus-clearfix;
li {
margin: 0;
padding: 0;
white-space: nowrap;
}
vertical-align: bottom;
> li {
@include inline-block;
background-color: $bar-color;
vertical-align: bottom;
> a {
@include inline-block;
}
> ol {
list-style: none;
display: block;
@include opacity(0);
height: 0;
overflow: hidden;
background-color: $bar-color;
margin: 0;
padding: 0;
border: 1px solid $border-color;
position: absolute;
z-index: $z-index;
@include box-shadow(0 1px 1px 1px rgba(0, 0, 0, 0.1));
a {
padding: 0 2.5em 0 0.5em;
}
}
}
> li:hover {
> ol {
@include opacity(1);
height: auto;
}
}
li:hover > a {
background-color: $hover-bar-color;
color: $hover-text-color;
img {
@include filter(grayscale(0));
}
}
a {
display: block;
padding: 0 0.5em;
text-decoration: none;
color: inherit;
img {
@include filter(grayscale(0.33));
}
}
a:visited {
color: inherit;
}
>li:first-child > a {
padding-left: 1px;
}
@if $last-item-right == true {
> li:last-child {
position: absolute;
right: 0;
bottom: 0;
}
> li:last-child > ol {
right: 0;
max-width: 500%;
}
> li:last-child a {
vertical-align: bottom;
}
> li:last-child > a {
padding: 0 1px 0 0.5em;
}
> li:last-child a span {
@include inline-block;
}
}
}
Version data entries
9 entries across 9 versions & 1 rubygems