Sha256: cd89dabde17c47638d31fb422a2150f705bfb74a7e28106eaf2ccebed4fa4571
Contents?: true
Size: 1.87 KB
Versions: 5
Compression:
Stored size: 1.87 KB
Contents
/**
* @copyright 2010-2014, The Titon Project
* @license http://opensource.org/licenses/BSD-3-Clause
* @link http://titon.io
*/
@import "../common";
.#{$vendor-prefix}flyout {
position: absolute;
top: 0;
left: 0;
z-index: $flyout-zindex;
opacity: 0;
visibility: hidden;
box-sizing: content-box; // required by MooTools for multi columns
transition: opacity $flyout-transition, visibility $flyout-transition;
ul {
@include reset-list;
float: left;
width: 200px;
}
li {
position: relative;
> a {
padding: $small-padding;
line-height: 100%;
display: block;
text-decoration: none;
.caret-right { display: none; }
}
// Hover states
> a:hover,
&.is-open > a {}
// Display caret arrow
&.has-children > a .caret-right {
float: right;
display: inline-block; // reveal
margin-top: 3px;
}
// Nested flyouts
> .#{$vendor-prefix}flyout {
left: 90%;
transition: left $flyout-transition, right $flyout-transition, opacity $flyout-transition, visibility $flyout-transition;
// Reverse menu to left side in case it goes outside the viewport
// Will be set automatically from the Javascript layer
&.push-left {
left: auto;
right: 90%;
}
}
&.is-open > .#{$vendor-prefix}flyout {
opacity: 1;
visibility: visible;
left: 100%;
&.push-left {
left: auto;
right: 100%;
}
}
}
@include clear-fix;
}
.#{$vendor-prefix}flyout-heading {
padding: $small-padding;
line-height: 100%;
display: block;
text-decoration: none;
}
Version data entries
5 entries across 5 versions & 1 rubygems