titon-toolkit 0.9.1 → 0.9.2

data/src/scss/toolkit/mixins/_themes.scss

@@ -0,0 +1,98 @@
+
+@mixin alert-style($bg, $text) {
+	color: $text;
+	background: $bg;
+	border: 1px solid shade($bg, 10%);
+
+	hr { border-color: shade($bg, 10%); }
+
+	a { color: shade($text, 10%); }
+	a:hover { color: tint($text, 25%); }
+
+	@content;
+}
+
+@mixin button-style($base, $light, $dark) {
+	font-weight: bold;
+	background: shade($base, 5%);
+	text-shadow: 1px 1px black(.2);
+	border: 1px solid shade($base, 12%);
+
+	@include active-state {
+		color: #fff;
+		background-color: shade($base, 20%);
+		text-shadow: 1px 1px $dark;
+		border-color: shade($base, 30%);
+	}
+
+	@include disabled-state {
+		background: $base;
+		border-color: $base;
+		box-shadow: none;
+		text-shadow: none;
+		top: 0;
+		opacity: $disabled-opacity;
+	}
+
+	@content;
+}
+
+@mixin label-style($bg, $text) {
+	background: $bg;
+	color: $text;
+
+	@content;
+}
+
+@mixin progress-style($bg, $border) {
+	background: $bg;
+	text-shadow: 1px 1px $border;
+	border: 1px solid tint($border, 35%);
+	border-right: 0;
+
+	@content;
+}
+
+@mixin field-style() {
+	&.has-error {
+		.input,
+		.select {
+			border-color: $error;
+
+			&:focus { box-shadow: 0 0 5px $error-light; }
+		}
+
+		.radio,
+		.checkbox {
+			color: $error-dark;
+		}
+	}
+
+	&.has-warning {
+		.input,
+		.select {
+			border-color: $warning;
+
+			&:focus { box-shadow: 0 0 5px $warning-light; }
+		}
+
+		.radio,
+		.checkbox {
+			color: $warning-dark;
+		}
+	}
+
+	&.has-success {
+		.input,
+		.select {
+			border-color: $success;
+
+			&:focus { box-shadow: 0 0 5px $success-light; }
+		}
+
+		.radio,
+		.checkbox {
+			color: $success-dark;
+		}
+	}
+}

data/src/scss/toolkit/modules/accordion.scss

@@ -0,0 +1,62 @@
+/**
+ * @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.
+ *
+ *	<ul class="accordion">
+ *		<li>
+ *			<header class="accordion-head">Title Bar</header>
+ *			<section class="accordion-inner">
+ *				<div class="accordion-body">Collapsible content</div>
+ *			</section>
+ *		</li>
+ *	</ul>
+ */
+
+.accordion,
+.accordion li {
+	list-style: none;
+	text-align: left;
+	margin: 0;
+	padding: 0;
+}
+
+.accordion {
+	border: 1px solid $gray-dark;
+}
+
+.accordion-head {
+	padding: $padding;
+	background: $gray;
+	border: 1px solid $gray-dark;
+	margin: -1px;
+	cursor: pointer;
+
+	.is-active & {
+		background: $gray-dark;
+		border-color: $gray-darkest;
+	}
+}
+
+// Style this
+.accordion-body {
+	padding: $padding;
+
+	@include content-spacing;
+}
+
+// Inner is used for animations, do not style it!
+.accordion-inner {
+	overflow: hidden;
+	position: relative;
+	@include transition(all .3s ease-in-out);
+
+	&.show { height: auto; }
+	&.hide { max-height: 0; } // don't include on base styles
+}

data/src/scss/toolkit/modules/blackout.scss

@@ -0,0 +1,24 @@
+/**
+ * @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.Blackout module.
+ */
+
+.blackout {
+	position: fixed;
+	top: 0;
+	left: 0;
+	height: 100%;
+	width: 100%;
+	z-index: 600;
+	opacity: 0;
+	visibility: hidden;
+	background: black(.5);
+	@include transition(all 0.3s);
+}

data/src/scss/toolkit/modules/carousel.scss

@@ -0,0 +1,175 @@
+/**
+ * @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.Carousel module.
+ *
+ *	<div class="carousel">
+ *		<ul class="carousel-items">
+ *			<li>
+ *				<img src="/path/to/image.jpg">
+ *				<div class="carousel-caption">Image caption</div>
+ *			</li>
+ *		</ul>
+ *		<ol class="carousel-tabs">
+ *			<li><a href=""></a></li>
+ *		</ol>
+ *		<a href="javascript:;" class="carousel-prev">
+ *			<span class="icon-chevron-sign-left"></span>
+ *		</a>
+ *		<a href="javascript:;" class="carousel-next">
+ *			<span class="icon-chevron-sign-right"></span>
+ *		</a>
+ *	</div>
+ */
+
+.carousel {
+	// 16:9
+	max-width: 640px;
+	max-height: 360px;
+	width: 100%;
+	height: auto;
+	margin: 0 auto;
+	text-align: left;
+	position: relative;
+	overflow: hidden;
+}
+
+.carousel-items {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+	position: relative;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: auto;
+	z-index: 1;
+	@include transition(left 1s, top 1s);
+
+	> li {
+		position: relative;
+		width: 100%;
+		height: auto;
+		z-index: 1;
+		display: block;
+
+		> img {
+			display: block;
+			width: 100%;
+			max-width: 100%;
+			height: auto;
+		}
+
+		.carousel-caption {
+			position: absolute;
+			bottom: 0;
+			left: 0;
+			width: 100%;
+			padding: $padding;
+			color: #fff;
+			background: black(.70);
+		}
+	}
+}
+
+.carousel-prev,
+.carousel-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;
+	}
+
+	// Large icons for large resolutions
+	@include if-tablet-landscape {
+		.carousel-prev,
+		.carousel-next {
+			font-size: 56px;
+		}
+	}
+}
+
+.carousel-prev { left: 0; }
+.carousel-next { right: 0; }
+
+.carousel-tabs {
+	list-style: none;
+	line-height: 100%;
+	margin: 0;
+	padding: $padding;
+	position: absolute;
+	top: 0;
+	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; }
+}
+
+//-------------------- Animations --------------------//
+
+.carousel.slide {
+	.carousel-items {
+		@include clear-fix;
+
+		> li {
+			float: left;
+		}
+	}
+}
+
+.carousel.fade {
+	.carousel-items {
+		height: 360px; // needs a base height because slides are absolute
+
+		> li {
+			position: absolute;
+			top: 0;
+			left: 0;
+			opacity: 0;
+			z-index: 1;
+			@include transition(opacity 1s);
+
+			&.show { z-index: 2; }
+		}
+	}
+}

data/src/scss/toolkit/modules/flyout.scss

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

data/src/scss/toolkit/modules/modal.scss

@@ -0,0 +1,243 @@
+/**
+ * @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.Modal module.
+ *
+ *	<div class="modal">
+ *		<div class="modal-outer">
+ *			<div class="modal-inner">
+ *				Custom content here
+ *			</div>
+ *			<button type="button" class="modal-close"></button>
+ *		</div>
+ *	</div>
+ */
+
+.modal {
+	position: fixed;
+	top: 50%;
+	left: 50%;
+	width: 50%;
+	height: auto;
+	margin: 0;
+	padding: 0;
+	z-index: 610; // higher than blackout
+	max-width: 700px;
+	min-width: 350px;
+	visibility: hidden;
+	backface-visibility: hidden;
+	@include transform(translateX(-50%) translateY(-50%));
+
+	.close {
+		position: absolute;
+		top: -1px;
+		right: -35px;
+	}
+
+	&.is-loading {
+		.close { display: none; }
+
+		.modal-outer {
+			background: $gray url("../../../img/loader.gif") 50% 50% no-repeat;
+		}
+	}
+}
+
+// Used for animations, should also contain the styles
+.modal-outer {
+	position: relative;
+	margin: 0 auto;
+	background: $gray;
+	border: 1px solid $gray-dark;
+}
+
+// Reset draggable cursor
+.modal.is-draggable {
+	.modal-inner { cursor: default; }
+	.modal-head { cursor: move; }
+}
+
+// Apply block padding
+.modal-head,
+.modal-body,
+.modal-foot,
+.modal-loading,
+.modal-error {
+	padding: $padding;
+}
+
+// Remove margins from text elements
+.modal-body {
+	@include content-spacing;
+}
+
+//-------------------- Animations --------------------//
+
+.modal {
+	&.from-above,
+	&.from-below,
+	&.slide-in-top,
+	&.slide-in-bottom,
+	&.slide-in-left,
+	&.slide-in-right,
+	&.flip,
+	&.flip-vert {
+		.modal-outer {
+			opacity: 0;
+			@include transition(all 0.3s);
+		}
+
+		&.show .modal-outer {
+			opacity: 1;
+		}
+	}
+
+	&.fade {
+		opacity: 0;
+		@include transition(opacity 0.3s);
+	}
+
+	&.from-above {
+		.modal-outer {
+			@include transform(scale(1.3));
+		}
+
+		&.show .modal-outer {
+			@include transform(scale(1));
+		}
+	}
+
+	&.from-below {
+		.modal-outer {
+			@include transform(scale(0.7));
+		}
+
+		&.show .modal-outer {
+			@include transform(scale(1));
+		}
+	}
+
+	&.slide-in-top {
+		.modal-outer {
+			@include transform(translateY(-50%));
+		}
+
+		&.show .modal-outer {
+			@include transform(translateY(0));
+		}
+	}
+
+	&.slide-in-bottom {
+		.modal-outer {
+			@include transform(translateY(50%));
+		}
+
+		&.show .modal-outer {
+			@include transform(translateY(0));
+		}
+	}
+
+	&.slide-in-left {
+		.modal-outer {
+			@include transition(all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9));
+			@include transform(translateX(-50%));
+		}
+
+		&.show .modal-outer {
+			@include transform(translateX(0));
+		}
+	}
+
+	&.slide-in-right {
+		.modal-outer {
+			@include transition(all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9));
+			@include transform(translateX(50%));
+		}
+
+		&.show .modal-outer {
+			@include transform(translateX(0));
+		}
+	}
+
+	&.sticky-top {
+		top: -100%;
+		opacity: 0;
+		@include transition(all 0.3s);
+		@include transform(translateX(-50%)); // reset to x
+
+		&.show {
+			top: 0;
+			opacity: 1;
+		}
+	}
+
+	&.sticky-bottom {
+		top: auto;
+		bottom: -100%;
+		opacity: 0;
+		@include transition(all 0.3s);
+		@include transform(translateX(-50%)); // reset to x
+
+		&.show {
+			bottom: 0;
+			opacity: 1;
+		}
+	}
+
+	&.sticky-left {
+		left: -100%;
+		opacity: 0;
+		@include transition(all 0.3s);
+		@include transform(translate(0, -50%));
+
+		&.show {
+			left: 0;
+			opacity: 1;
+		}
+	}
+
+	&.sticky-right {
+		left: auto;
+		right: -100%;
+		opacity: 0;
+		@include transition(all 0.3s);
+		@include transform(translate(0, -50%));
+
+		&.show {
+			right: 0;
+			opacity: 1;
+		}
+	}
+
+	&.flip {
+		@include perspective(1300px);
+
+		.modal-outer {
+			@include transform-style(preserve-3d);
+			@include transform(rotateY(-70deg));
+		}
+
+		&.show .modal-outer {
+			@include transform(rotateY(0deg));
+		}
+	}
+
+	&.flip-vert {
+		@include perspective(1300px);
+
+		.modal-outer {
+			@include transform-style(preserve-3d);
+			@include transform(rotateX(-70deg));
+		}
+
+		&.show .modal-outer {
+			@include transform(rotateX(0deg));
+		}
+	}
+}