Permalink
Fetching contributors…
Cannot retrieve contributors at this time
83 lines (69 sloc) 2.22 KB
/**
* @copyright 2010-2015, The Titon Project
* @license http://opensource.org/licenses/BSD-3-Clause
* @link http://titon.io
*/
@import "../common";
@include export("flyout") {
#{$flyout-class} {
position: absolute;
top: 0;
#{$align-direction}: 0;
z-index: $flyout-zindex;
opacity: 0;
visibility: hidden;
transition: opacity $flyout-transition, visibility $flyout-transition;
ul {
@include reset-list;
float: $align-direction;
width: 200px;
}
li {
position: relative;
> a {
padding: $small-padding;
line-height: 100%;
display: block;
text-decoration: none;
.caret-right,
.caret-left { display: none; }
}
// Display caret arrow
&.has-children > a {
.caret-right,
.caret-left {
float: $align-opposite-direction;
display: inline-block; // reveal
margin-top: 3px;
}
}
// Nested flyouts
> #{$flyout-class} {
#{$align-direction}: 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-opposite {
#{$align-direction}: auto;
#{$align-opposite-direction}: 90%;
}
}
&.is-open > #{$flyout-class} {
opacity: 1;
visibility: visible;
#{$align-direction}: 100%;
&.push-opposite {
#{$align-direction}: auto;
#{$align-opposite-direction}: 100%;
}
}
}
@include clear-fix;
}
#{$flyout-class-heading} {
padding: $small-padding;
line-height: 100%;
display: block;
text-decoration: none;
}
}