65 lines
1.4 KiB
SCSS
65 lines
1.4 KiB
SCSS
@charset "UTF-8";
|
||
@if $use-flyout == true{
|
||
|
||
/*------------------------------------*\
|
||
$FLYOUT
|
||
\*------------------------------------*/
|
||
/**
|
||
* Flyouts are pieces of content that fly out of a parent when said parent is
|
||
* hovered. They typically appear bottom-left of the parent.
|
||
*
|
||
<div class=flyout>
|
||
Foo
|
||
<div class=flyout__content>
|
||
<h1>Lorem</h1>
|
||
<p>Ipsum</p>
|
||
</div>
|
||
</div>
|
||
*
|
||
* Extend these objects in your theme stylesheet.
|
||
*
|
||
* Demo: jsfiddle.net/inuitcss/B52HG
|
||
*
|
||
*/
|
||
.flyout,
|
||
.flyout--alt{
|
||
position:relative;
|
||
overflow:hidden;
|
||
}
|
||
.flyout__content{
|
||
/**
|
||
* Position the flyouts off-screen. This is typically better than
|
||
* `display:none;`.
|
||
*/
|
||
position:absolute;
|
||
top:100%;
|
||
left:-99999px;
|
||
}
|
||
|
||
/**
|
||
* Bring the flyouts into view when you hover their parents.
|
||
* Two different types of flyout; ‘regular’ (`.flyout`) and ‘alternative’
|
||
* (`.flyout--alt`).
|
||
*/
|
||
.flyout:hover,
|
||
.flyout--alt:hover{
|
||
overflow:visible;
|
||
}
|
||
|
||
/**
|
||
* Regular flyouts sit all the way from the top, flush left.
|
||
*/
|
||
.flyout:hover > .flyout__content{
|
||
left:0;
|
||
}
|
||
|
||
/**
|
||
* Alternative flyouts sit all the way from the left, flush top.
|
||
*/
|
||
.flyout--alt:hover > .flyout__content{
|
||
top:0;
|
||
left:100%;
|
||
}
|
||
|
||
}//endif
|