Contents

/**
 * @copyright	Copyright 2010-2013, The Titon Project
 * @license		http://opensource.org/licenses/bsd-license.php
 * @link		http://titon.io
 */

@import "../common";

/**
 * Should be used in conjunction with the JavaScript Titon.Flyout module.
 */

.flyout {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 500;
	opacity: 0;
	visibility: hidden;
	background: $gray;
	border: 1px solid $gray-dark;
	@include box-sizing(content-box); // required by MooTools for multi columns
	@include transition(opacity 0.3s);

	ul {
		list-style: none;
		margin: 0;
		padding: 0;
		float: left;
		width: 200px;

		li {
			position: relative;

			> a,
			> .divider {
				padding: $small-padding;
				line-height: 100%;
				display: block;
				text-decoration: none;
			}

			> a .caret-right { display: none; }

			&.has-children > a .caret-right {
				float: right;
				display: inline-block; // reveal
				margin-top: 3px;
			}

			// Sub-flyouts
			> .flyout {
				left: 90%;
				@include transition(left .3s, right .3s, opacity .3s);

				// Reverse menu to left side incase it goes outside the viewport
				// Will be set automatically from the Javascript layer
				&.flyout--left {
					left: auto;
					right: 90%;
				}
			}

			&.is-open > .flyout {
				opacity: 1;
				visibility: visible;
				left: 100%;

				&.flyout--left {
					left: auto;
					right: 100%;
				}
			}
		}
	}

	@include clear-fix;
}

Version data entries

3 entries across 3 versions & 1 rubygems

Version	Path
titon-toolkit-0.9.4	src/scss/toolkit/modules/flyout.scss
titon-toolkit-0.9.3	src/scss/toolkit/modules/flyout.scss
titon-toolkit-0.9.2	src/scss/toolkit/modules/flyout.scss