titon-toolkit 0.9.1 → 0.9.2

data/src/scss/toolkit/modules/popover.scss

@@ -0,0 +1,84 @@
+/**
+ * @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;
+	}
+}

data/src/scss/toolkit/modules/showcase.scss

@@ -0,0 +1,166 @@
+/**
+ * @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.Showcase module.
+ *
+ *	<div class="showcase">
+ *		<div class="showcase-inner">
+ *			<ul class="showcase-items"></u>
+ *			<ol class="showcase-tabs"></ol>
+ *			<a href="javascript:;" class="showcase-prev showcase-event-prev"><span class="icon-chevron-sign-left"></span></a>
+ *			<a href="javascript:;" class="showcase-next showcase-event-next"><span class="icon-chevron-sign-right"></span></a>
+ *			<button type="button" class="close showcase-event-close">
+ *				<span class="x">&times;</span>
+ *			</button>
+ *		</div>
+ *	</div>
+ */
+
+.showcase {
+	position: fixed;
+	top: 50%;
+	left: 50%;
+	width: auto;
+	height: auto;
+	margin: 0;
+	padding: 0;
+	z-index: 610; // higher than blackout
+	visibility: hidden;
+	backface-visibility: hidden;
+	@include transform(translateX(-50%) translateY(-50%));
+
+	.close {
+		position: absolute;
+		top: -1px;
+		right: -35px;
+	}
+
+	&.is-loading,
+	&.is-single {
+		.showcase-prev,
+		.showcase-next,
+		.showcase-tabs {
+			display: none !important;
+		}
+
+		.showcase-inner {
+			background: $gray url("../../../img/loader.gif") 50% 50% no-repeat;
+		}
+	}
+}
+
+.showcase-inner {
+	position: relative;
+	padding: $padding;
+	background: $gray;
+	border: 1px solid $gray-dark;
+}
+
+.showcase-items {
+	list-style: none;
+	padding: 0;
+	margin: 0;
+	width: 100px;
+	height: 100px;
+	max-width: 1024px;
+	position: relative;
+	overflow: hidden;
+	@include transition(width .3s, height .3s);
+
+	> li {
+		position: absolute;
+		top: 0;
+		left: 0;
+		opacity: 0;
+		@include transition(opacity .3s);
+
+		> img {
+			max-width: 100%;
+			width: 100%;
+			height: auto;
+			display: block;
+		}
+
+		&.show {
+			.showcase-caption {
+				display: block;
+			}
+		}
+	}
+}
+
+.showcase-caption {
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	width: 100%;
+	padding: $padding;
+	color: #fff;
+	background: black(.70);
+	display: none;
+}
+
+.showcase-prev,
+.showcase-next {
+	display: block;
+	position: absolute;
+	padding: $padding;
+	width: auto;
+	height: auto;
+	z-index: 5;
+	font-size: 28px;
+	color: #fff;
+	opacity: .65;
+	top: 50%;
+	@include transform(translateY(-50%)); // move up 50% of their height
+
+	&:hover {
+		color: #fff;
+		opacity: 1;
+	}
+
+	&:focus {
+		outline: none;
+	}
+}
+
+.showcase-prev { left: $padding; }
+.showcase-next { right: $padding; }
+
+.showcase-tabs {
+	list-style: none;
+	line-height: 100%;
+	margin: 0;
+	padding: $padding;
+	position: absolute;
+	top: $padding;
+	left: 50%;
+	z-index: 5;
+	@include transform(translateX(-50%)); // move left 50% of their width
+
+	li {
+		display: inline-block;
+		margin: 0 3px;
+	}
+
+	a {
+		display: inline-block;
+		border: 2px solid #fff;
+		height: 10px;
+		width: 10px;
+		border-radius: 50%;
+		opacity: .65;
+
+		&:hover { opacity: 1; }
+		&.is-active { background: #fff; }
+	}
+
+	// Hide if no tabs
+	&:empty { display: none; }
+}

data/src/scss/toolkit/modules/tabs.scss

@@ -0,0 +1,56 @@
+/**
+ * @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.Tabs module.
+ *
+ * 	<div id="tabs" class="tabs">
+ *		<nav class="tabs-nav">
+ *			<ul>
+ *				<li><a href="#tab-1">Tab 1</a></li>
+ *				<li><a href="#tab-2">Tab 2</a></li>
+ *			</ul>
+ *		</nav>
+ *
+ *		<section id="tab-1" class="tabs-section"></section>
+ *		<section id="tab-2" class="tabs-section"></section>
+ * 	</div>
+ */
+
+.tabs {
+	text-align: left;
+}
+
+.tabs-nav {
+	display: block;
+	margin-bottom: $margin;
+
+	ul, li {
+		@include reset-inline-block;
+		list-style: none;
+	}
+
+	@include clear-fix;
+}
+
+// Display none on sections since visibility takes up DOM space
+.tabs-section.hide {
+	display: none;
+}
+
+//-------------------- Modifiers --------------------//
+
+.tabs.tabs--horizontal {
+	.tabs-nav {
+		ul, li, a, button {
+			display: block;
+			float: none;
+			text-align: left;
+		}
+	}
+}

data/src/scss/toolkit/modules/tooltip.scss

@@ -0,0 +1,130 @@
+/**
+ * @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.Tooltip module.
+ *
+ *	<div class="tooltip">
+ *		<div class="tooltip-inner">
+ *			<div class="tooltip-head">Tooltip Title</div>
+ *			<div class="tooltip-body">Tooltip Content</div>
+ *		</div>
+ *		<div class="tooltip-arrow"></div>
+ *	</div>
+ */
+
+.tooltip {
+	position: absolute;
+	top: 0;
+	left: 0;
+	margin: 0;
+	padding: $small-padding;
+	z-index: 500;
+	max-width: 200px;
+	visibility: hidden;
+	background: #000;
+	color: #fff;
+	@include box-sizing(content-box); // required or else MooTools position() is off
+
+	&.center-left .tooltip-arrow,
+	&.center-right .tooltip-arrow {
+		top: 50%;
+		margin-top: -6px;
+	}
+
+	&.center-left .tooltip-arrow {
+		border-left-color: #000;
+		right: -12px;
+	}
+
+	&.center-right .tooltip-arrow {
+		border-right-color: #000;
+		left: -12px;
+	}
+
+	&.top-center .tooltip-arrow,
+	&.bottom-center .tooltip-arrow {
+		left: 50%;
+		margin-left: -6px;
+	}
+
+	&.top-center .tooltip-arrow {
+		border-top-color: #000;
+		bottom: -12px;
+	}
+
+	&.bottom-center .tooltip-arrow {
+		border-bottom-color: #000;
+		top: -12px;
+	}
+}
+
+.tooltip-arrow {
+	width: 0;
+	height: 0;
+	border: 6px solid transparent;
+	position: absolute;
+
+	&:after {
+		content: "";
+		border: 4px solid transparent;
+		position: absolute;
+	}
+}
+
+//-------------------- Animations --------------------//
+
+.tooltip,
+.popover {
+	&.fade {
+		opacity: 0;
+		@include transition(opacity 0.5s);
+	}
+
+	&.from-above {
+		@include transition(transform 0.3s);
+		@include transform(scale(1.2));
+
+		&.show {
+			@include transform(scale(1));
+		}
+	}
+
+	&.from-below {
+		@include transition(transform 0.3s);
+		@include transform(scale(0.8));
+
+		&.show {
+			@include transform(scale(1));
+		}
+	}
+
+	&.flip-rotate {
+		@include transition(transform 0.3s);
+		@include transform(rotate(-90deg));
+
+		&.show {
+			@include transform(rotate(0deg));
+		}
+	}
+
+	&.slide-in {
+		@include transition(transform 0.3s);
+
+		&.top-left { @include transform(translate(-25%, -25%)); }
+		&.top-center { @include transform(translateY(-50%)); }
+		&.top-right { @include transform(translate(25%, -25%)); }
+		&.center-left { @include transform(translateX(-25%)); }
+		&.center-right { @include transform(translateX(25%)); }
+		&.bottom-left { @include transform(translate(-25%, 25%)); }
+		&.bottom-center { @include transform(translateY(50%)); }
+		&.bottom-right { @include transform(translate(25%, 25%)); }
+
+		&.show { @include transform(translate(0)); }
+	}
+}

data/src/scss/toolkit/modules/type-ahead.scss

@@ -0,0 +1,67 @@
+/**
+ * @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.TypeAhead module.
+ */
+
+.type-ahead {
+	position: absolute;
+	top: 0;
+	left: 0;
+	z-index: 500;
+	opacity: 0;
+	visibility: hidden;
+	background: $gray;
+	border: 1px solid $gray-dark;
+	@include transition(opacity 0.3s);
+
+	ul {
+		list-style: none;
+		margin: 0;
+		padding: 0;
+		min-width: 200px;
+
+		a,
+		li.heading {
+			padding: $small-padding;
+			line-height: 100%;
+			display: block;
+			text-decoration: none;
+		}
+
+		li.heading {
+			font-weight: bold;
+		}
+	}
+}
+
+.type-ahead-desc {
+	display: block;
+	color: $gray-darkest;
+	font-size: .7rem;
+}
+
+.type-ahead-shadow {
+	position: relative;
+
+	input {
+		position: absolute;
+		top: 0;
+		left: 0;
+	}
+
+	.is-shadow {
+		color: gray;
+	}
+
+	.not-shadow {
+		background: transparent;
+		z-index: 1;
+	}
+}