titon-toolkit 0.9.1 → 0.9.2

data/src/scss/toolkit/ui/alert.scss

@@ -0,0 +1,48 @@
+/**
+ * @copyright	Copyright 2010-2013, The Titon Project
+ * @license		http://opensource.org/licenses/bsd-license.php
+ * @link		http://titon.io
+ */
+
+@import "../common";
+
+/**
+ *	<div class="alert is-info">
+ *		<button type="button" class="close">
+ *			<span class="x">&times;</span>
+ *		</button>
+ *
+ *		<h3 class="alert-title">Title</h3>
+ *		<p>This is an information message!</p>
+ *	</div>
+ */
+
+.alert {
+	margin: $margin 0;
+	padding: $padding;
+	background: $gray;
+	border: 1px solid $gray-dark;
+	text-align: left;
+
+	hr {
+		border: 0;
+		border-top: 1px solid transparent;
+	}
+
+	a {
+		font-weight: bold;
+	}
+
+	.close {
+		float: right;
+		margin-left: $margin;
+
+		& ~ p { margin: 0; }
+	}
+
+	@include content-spacing;
+}
+
+.alert-title {
+	margin: 0 0 ($margin / 2) 0;
+}

data/src/scss/toolkit/ui/breadcrumbs.scss

@@ -0,0 +1,51 @@
+/**
+ * @copyright	Copyright 2010-2013, The Titon Project
+ * @license		http://opensource.org/licenses/bsd-license.php
+ * @link		http://titon.io
+ */
+
+@import "../common";
+
+/**
+ *	<nav class="breadcrumbs">
+ *		<ol>
+ *			<li><a href="">Home</a></li>
+ *			<li><a href="">Sub-page</a></li>
+ *			<li><a href="">Sub-page</a></li>
+ *			<li><a href="">Sub-page</a></li>
+ *			<li><a href="">Current</a></li>
+ *		</ol>
+ *	</nav>
+ */
+
+.breadcrumbs {
+	text-align: left;
+	margin: $margin 0;
+	background: $gray;
+	border: 1px solid $gray-dark;
+	border-radius: $round;
+
+	ul, ol {
+		margin: 0;
+		padding: 0;
+	}
+
+	li {
+		position: relative;
+		list-style: none;
+		float: left;
+	}
+
+	a {
+		display: block;
+		padding: $medium-padding;
+		line-height: 100%;
+		font-size: $medium-size;
+	}
+
+	// Sizes
+	&.small a { padding: $small-padding; font-size: $small-size; }
+	&.large a { padding: $large-padding; font-size: $large-size; }
+
+	@include clear-fix;
+}

data/src/scss/toolkit/ui/button-group.scss

@@ -0,0 +1,204 @@
+/**
+ * @copyright	Copyright 2010-2013, The Titon Project
+ * @license		http://opensource.org/licenses/bsd-license.php
+ * @link		http://titon.io
+ */
+
+@import "../common";
+
+/**
+ *	<div class="button-group pill">
+ *		<a href="" class="button">Left Button</a>
+ *		<a href="" class="button">Center Button</a>
+ *		<a href="" class="button">Right Button</a>
+ *	</div>
+ */
+
+.button-group {
+	@include reset-inline-block;
+	white-space: nowrap;
+
+	> li,
+	> .button {
+		float: left;
+		margin-left: -1px !important;
+		border-radius: 0;
+		display: block;
+
+		&:first-child { margin-left: 0; }
+		&:hover { z-index: 1; }
+	}
+
+	> li .button {
+		display: block;
+		border-radius: 0;
+	}
+
+	// Shape: round
+	&.round {
+		border-radius: $round;
+
+		> li:first-child .button,
+		> .button:first-child,
+		> .button.first {
+			border-top-left-radius: $round;
+			border-bottom-left-radius: $round;
+		}
+
+		> li:last-child .button,
+		> .button:last-child,
+		> .button.last {
+			border-top-right-radius: $round;
+			border-bottom-right-radius: $round;
+		}
+	}
+
+	// Shape: pill
+	&.pill {
+		border-radius: $pill;
+
+		> li:first-child .button,
+		> .button:first-child,
+		> .button.first {
+			border-top-left-radius: $pill;
+			border-bottom-left-radius: $pill;
+		}
+
+		> li:last-child .button,
+		> .button:last-child,
+		> .button.last {
+			border-top-right-radius: $pill;
+			border-bottom-right-radius: $pill;
+		}
+	}
+
+	// Shape: skew
+	&.skew {
+		border-top-left-radius: $skew;
+		border-top-right-radius: $skew;
+		border-bottom-left-radius: 0;
+		border-bottom-right-radius: 0;
+
+		> li:first-child .button,
+		> .button:first-child,
+		> .button.first {
+			border-top-left-radius: $skew;
+			border-bottom-left-radius: 0;
+		}
+
+		> li:last-child .button,
+		> .button:last-child,
+		> .button.last {
+			border-top-right-radius: $skew;
+			border-bottom-right-radius: 0;
+		}
+	}
+
+	@include clear-fix;
+}
+
+// Space out groups
+.button-group + .button-group {
+	margin-left: $margin;
+}
+
+//-------------------- Modifiers --------------------//
+
+.button-group.button-group--vertical {
+	vertical-align: top;
+
+	> li,
+	> .button {
+		float: none;
+		display: block;
+		margin: -1px 0 0 0 !important;
+		width: auto;
+		max-width: 100%;
+
+		&:first-child { margin-top: 0 !important; }
+		&:hover { z-index: 1; }
+	}
+
+	// Reset radius
+	&.round,
+	&.pill,
+	&.skew,
+	&.skew-reverse {
+		.button { border-radius: 0; }
+	}
+
+	// Shape: round
+	&.round {
+		> li:first-child .button,
+		> .button:first-child {
+			border-top-left-radius: $round;
+			border-top-right-radius: $round;
+		}
+
+		> li:last-child .button,
+		> .button:last-child {
+			border-bottom-left-radius: $round;
+			border-bottom-right-radius: $round;
+		}
+	}
+
+	// Shape: pill
+	&.pill {
+		border-radius: $pill;
+
+		> li:first-child .button,
+		> .button:first-child {
+			border-top-left-radius: $pill;
+			border-top-right-radius: $pill;
+		}
+
+		> li:last-child .button,
+		> .button:last-child {
+			border-bottom-left-radius: $pill;
+			border-bottom-right-radius: $pill;
+		}
+	}
+
+	// Shape: skew
+	&.skew {
+		border-top-left-radius: $skew-y 1.5rem;
+		border-bottom-left-radius: $skew-y 1.5rem;
+
+		> li:first-child .button,
+		> .button:first-child {
+			border-top-left-radius: $skew-reverse;
+		}
+
+		> li:last-child .button,
+		> .button:last-child {
+			border-bottom-left-radius: $skew-reverse;
+			border-top-right-radius: 0;
+		}
+	}
+
+	// Shape: skew-reverse
+	&.skew-reverse {
+		border-top-right-radius: $skew-y 1.25rem;
+		border-bottom-right-radius: $skew-y 1.25rem;
+
+		> li:first-child .button,
+		> .button:first-child {
+			border-top-right-radius: $skew-reverse;
+		}
+
+		> li:last-child .button,
+		> .button:last-child {
+			border-bottom-right-radius: $skew-reverse;
+		}
+	}
+}
+
+.button-group.button-group--justified {
+	display: table;
+	width: 100%;
+
+	> .button {
+		float: none;
+		display: table-cell;
+	}
+}

data/src/scss/toolkit/ui/button.scss

@@ -0,0 +1,48 @@
+/**
+ * @copyright	Copyright 2010-2013, The Titon Project
+ * @license		http://opensource.org/licenses/bsd-license.php
+ * @link		http://titon.io
+ */
+
+@import "../common";
+
+/**
+ *	<button type="button" class="button large round">Large Rounded Button</button>
+ *	<a href="" class="button small pill">Small Pill Button</a>
+ */
+
+.button {
+	@include reset-inline-block;
+	cursor: pointer;
+	text-align: center;
+	overflow: hidden;
+	font-weight: normal;
+	line-height: normal; // setting it to normal allows it to match form input heights
+	user-select: none;
+	white-space: nowrap;
+	@include size-medium;
+	background: $gray;
+	border: 1px solid $gray-dark;
+
+	// Sizes
+	&.small, .small & { @include size-small; }
+	&.large, .large & { @include size-large; }
+
+	// Shapes
+	&.round { border-radius: $round; }
+	&.pill { border-radius: $pill; }
+	&.oval { border-radius: #{$oval-x} / #{$oval-y}; }
+	&.skew { border-radius: #{$skew-x $skew-x} 0 0 / #{$skew-y $skew-y} 0 0; }
+
+	// State
+	@include disabled-state {
+		cursor: not-allowed;
+		pointer-events: none;
+	}
+}
+
+// Reset browser styles
+button::-moz-focus-inner {
+	padding: 0;
+	border: 0;
+}

data/src/scss/toolkit/ui/dropdown.scss

@@ -0,0 +1,105 @@
+/**
+ * @copyright	Copyright 2010-2013, The Titon Project
+ * @license		http://opensource.org/licenses/bsd-license.php
+ * @link		http://titon.io
+ */
+
+@import "../common";
+
+/**
+ *	<ul class="dropdown">
+ *		<li class="heading>Heading</li>
+ *		<li><a href="">Some Action</a></li>
+ *		<li><a href="">Some Action</a></li>
+ *		<li class="divider"></li>
+ *		<li><a href="">Some Action</a></li>
+ *	</ul>
+ */
+
+.dropdown {
+	display: none;
+	text-align: left;
+	position: absolute;
+	top: 100%;
+	left: 0;
+	width: 200px;
+	background: $gray-light;
+	border: 1px solid $gray-dark;
+	line-height: 100%;
+	z-index: 500;
+	opacity: 0;
+	visibility: hidden;
+	@include transition(opacity .3s);
+
+	// Nested dropdowns
+	.dropdown {
+		display: block;
+		top: 0;
+		left: 90%;
+		z-index: 510;
+		@include transition(left .3s, opacity .3s);
+	}
+
+	li {
+		position: relative;
+
+	 	> a {
+			padding: $small-padding;
+			display: block;
+
+			.caret-right {
+				float: right;
+				display: none;
+			}
+		}
+
+		&.divider {
+			margin: ($margin / 2) 0;
+			border-top: 1px solid $gray-dark;
+		}
+
+		&.has-children {
+			> a .caret-right { display: inline-block; }
+		}
+
+		// Show nested dropdown
+		&:hover {
+			> a { background: #fff; }
+
+			.dropdown {
+				visibility: visible;
+				opacity: 1;
+				left: 100%;
+			}
+		}
+
+		&.heading {
+			font-weight: bold;
+			padding: $small-padding;
+		}
+	}
+
+	// Force display
+	&.show {
+		display: block;
+	}
+}
+
+.dropdown,
+.dropdown ul {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+}
+
+//-------------------- Modifiers --------------------//
+
+.dropdown.dropdown--right {
+	left: auto;
+	right: 0;
+}
+
+.dropdown.dropdown--top {
+	top: auto;
+	bottom: 100%;
+}