Sha256: 4216dac0e118992ad99f122a0c3e3fa0c54b38277280e1d4eb77463fe34a59cd
Contents?: true
Size: 1.94 KB
Versions: 8
Compression:
Stored size: 1.94 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 {
display: inline-block;
background-color: $bar-color;
vertical-align: bottom;
> a {
display: inline-block;
}
> ol {
list-style: none;
display: block;
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;
box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.1);
a {
padding: 0 2.5em 0 0.5em;
}
}
}
> li:hover {
> ol {
opacity: 1;
height: auto;
}
}
li:hover > a {
background-color: $hover-bar-color;
color: $hover-text-color;
img {
-webkit-filter: grayscale(0);
filter: grayscale(0);
}
}
a {
display: block;
padding: 0 0.5em;
text-decoration: none;
color: inherit;
img {
-webkit-filter: grayscale(0.33);
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 {
display: inline-block;
}
}
}
Version data entries
8 entries across 8 versions & 1 rubygems