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.Popover module.
 *
 *	<div class="popover">
 *		<div class="popover-inner">
 *			<div class="popover-head">Popover Title</div>
 *			<div class="popover-body">Popover Content</div>
 *		</div>
 *		<div class="popover-arrow"></div>
 *	</div>
 */

.popover {
	position: absolute;
	top: 0;
	left: 0;
	margin: 0;
	padding: 0;
	z-index: 500;
	max-width: 300px;
	visibility: hidden;
	background: $gray;
	border: 1px solid $gray-dark;

	&.center-left .popover-arrow,
	&.center-right .popover-arrow {
		top: 50%;
		margin-top: -8px;
	}

	&.center-left .popover-arrow {
		border-left-color: #000;
		right: -16px;
	}

	&.center-right .popover-arrow {
		border-right-color: #000;
		left: -16px;
	}

	&.top-center .popover-arrow,
	&.bottom-center .popover-arrow {
		left: 50%;
		margin-left: -8px;
	}

	&.top-center .popover-arrow {
		border-top-color: #000;
		bottom: -16px;
	}

	&.bottom-center .popover-arrow {
		border-bottom-color: #000;
		top: -16px;
	}
}

.popover-head,
.popover-body {
	padding: $small-padding;
}

.popover-arrow {
	width: 0;
	height: 0;
	border: 8px solid transparent;
	position: absolute;

	&:after {
		content: "";
		border: 6px solid transparent;
		position: absolute;
		top: -6px;
		left: -6px;
	}
}

Version data entries

3 entries across 3 versions & 1 rubygems

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