titon-toolkit 0.9.1 → 0.9.2

data/src/scss/toolkit/layout/grid.scss

@@ -0,0 +1,64 @@
+/**
+ * @copyright	Copyright 2010-2013, The Titon Project
+ * @license		http://opensource.org/licenses/bsd-license.php
+ * @link		http://titon.io
+ */
+
+@import "../common";
+
+.grid {
+	@include grid-row;
+}
+
+// These should be the same for all sizes
+@for $i from 1 through $grid-columns {
+	$span: grid-span($i);
+
+	.span-#{$i} { width: $span; }
+	.push-#{$i} { left: $span; }
+	.pull-#{$i} { right: $span; }
+}
+
+// Mobile supports 3 columns
+.col[class*="span-"],
+.col[class*="mobile-"] {
+	@include grid-column;
+}
+
+@for $i from 1 through ceil($grid-columns / 4) {
+	$span: grid-span($i * 4);
+
+	.col.mobile-#{$i} { width: $span; }
+	.col.mobile-push-#{$i} { left: $span; }
+	.col.mobile-pull-#{$i} { right: $span; }
+}
+
+// Tablet supports 6 columns
+@include in-tablet {
+	.col[class*="tablet-"] {
+		@include grid-column;
+	}
+
+	@for $i from 1 through ceil($grid-columns / 2) {
+		$span: grid-span($i * 2);
+
+		.col.tablet-#{$i} { width: $span; }
+		.col.tablet-push-#{$i} { left: $span; }
+		.col.tablet-pull-#{$i} { right: $span; }
+	}
+}
+
+// Desktop supports 12 columns
+@include in-desktop {
+	.col[class*="desktop-"] {
+		@include grid-column;
+	}
+
+	@for $i from 1 through $grid-columns {
+		$span: grid-span($i);
+
+		.col.desktop-#{$i} { width: $span; }
+		.col.desktop-push-#{$i} { left: $span; }
+		.col.desktop-pull-#{$i} { right: $span; }
+	}
+}

data/src/scss/toolkit/layout/input-group.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";
+
+.input-group {
+	display: inline-block;
+
+	> .input,
+	> .input-addon,
+	> .button,
+	> .button-group {
+		display: inline-block;
+		position: relative;
+		border-radius: 0;
+		margin-right: -6px; // Remove whitespace and overlap borders
+		white-space: nowrap;
+		height: auto;
+		vertical-align: middle;
+	}
+
+	// Inputs should always be above everything else
+	> .input { z-index: 1; }
+}
+
+.input-addon {
+	border: 1px solid $gray-dark;
+	background: $gray;
+	vertical-align: middle;
+	padding: $medium-padding;
+	line-height: normal;
+	font-size: inherit;
+}
+
+//-------------------- Modifiers --------------------//
+
+.input-group.round {
+	> .input:first-child,
+	> .input-addon:first-child,
+	> .button:first-child,
+	> .button-group:first-child .button {
+		border-top-left-radius: $round;
+		border-bottom-left-radius: $round;
+	}
+
+	> .input:last-child,
+	> .input-addon:last-child,
+	> .button:last-child,
+	> .button-group:last-child .button {
+		border-top-right-radius: $round;
+		border-bottom-right-radius: $round;
+	}
+}

data/src/scss/toolkit/layout/responsive.scss

@@ -0,0 +1,53 @@
+/**
+ * @copyright	Copyright 2010-2013, The Titon Project
+ * @license		http://opensource.org/licenses/bsd-license.php
+ * @link		http://titon.io
+ */
+
+@import "../common";
+
+img, video, canvas {
+	max-width: 100%;
+	max-height: auto;
+	height: auto;
+}
+
+.show-print { display: none; }
+
+// Desktop states
+@include in-desktop {
+	.show-tablet,
+	.show-mobile,
+	.hide-desktop { display: none; }
+}
+
+// Tablet states
+@include in-tablet {
+	.show-desktop,
+	.show-mobile,
+	.hide-tablet { display: none; }
+}
+
+// Mobile states
+@include in-mobile  {
+	.show-desktop,
+	.show-tablet,
+	.hide-mobile { display: none; }
+}
+
+// Orientation states
+@include if-portrait {
+	.show-landscape,
+	.hide-portrait { display: none; }
+}
+
+@include if-landscape {
+	.show-portrait,
+	.hide-landscape { display: none; }
+}
+
+// Type states
+@media print {
+	.show-print { display: block; }
+	.hide-print { display: none; }
+}

data/src/scss/toolkit/layout/table.scss

@@ -0,0 +1,82 @@
+/**
+ * @copyright	Copyright 2010-2013, The Titon Project
+ * @license		http://opensource.org/licenses/bsd-license.php
+ * @link		http://titon.io
+ */
+
+@import "../common";
+
+.table {
+	width: 100%;
+	background: $gray;
+	border-collapse: collapse;
+
+	th, td {
+		padding: $padding;
+		line-height: 110%;
+		vertical-align: top;
+		border: 1px solid $gray-dark;
+	}
+
+	// Move headings to bottom
+	thead th {
+		vertical-align: bottom;
+		text-align: left;
+	}
+
+	// Allow for multiple tbody's
+	tbody + tbody { border-top-width: 2px; }
+
+	// Row colors
+	thead tr,
+	tfoot tr {
+		background: $gray-dark;
+
+		th { border-color: shade($gray-dark, 10%); }
+	}
+
+	// Zebra striping
+	tbody tr {
+		background: $gray;
+
+		&:nth-child(odd) { background: $gray-light; }
+		&.divider { background: shade($gray, 2%); }
+	}
+}
+
+//-------------------- Modifiers --------------------//
+
+.table.table--hover {
+	tbody tr:not(.divider):hover { background: #fff; }
+}
+
+.table.table--sortable {
+	thead th {
+		padding: 0;
+
+		a, span {
+			padding: $padding;
+			display: block;
+		}
+
+		a {
+			background: $gray-dark;
+			color: #000;
+
+			&:hover { background: shade($gray-dark, 5%); }
+		}
+	}
+}
+
+.table.table--compact {
+	thead th,
+	tbody td { padding: $small-padding; }
+
+	&.table--sortable {
+		thead th {
+			padding: 0;
+
+			a, span { padding: $small-padding; }
+		}
+	}
+}

data/src/scss/toolkit/layout/typography.scss

@@ -0,0 +1,49 @@
+/**
+ * @copyright	Copyright 2010-2013, The Titon Project
+ * @license		http://opensource.org/licenses/bsd-license.php
+ * @link		http://titon.io
+ */
+
+@import "../common";
+
+h1 { font-size: 2.5rem; }
+h2 { font-size: 2.2rem; }
+h3 { font-size: 1.8rem; }
+h4 { font-size: 1.5rem; }
+h5 { font-size: 1.2rem; }
+h6 { font-size: 1rem; }
+
+h1, h2, h3, h4, h5, h6 {
+	margin: 0;
+	padding: 0;
+	line-height: 100%;
+	font-weight: normal;
+}
+
+p, ul, ol, hr, blockquote {
+	margin: $margin 0;
+}
+
+blockquote {
+	margin: $margin;
+	padding: 0 $padding;
+	border-left: 5px solid $gray;
+
+	cite { display: block; font-size: .8rem; }
+	cite:before { content: "\2014 \00A0"; /* em dash */ }
+
+	@include content-spacing;
+}
+
+mark {
+	display: inline-block;
+	background: $gray-dark;
+	border-radius: 2px;
+	padding: 0 5px;
+}
+
+.text-muted { color: $default; }
+.text-info { color: shade($info, 15%); }
+.text-error { color: shade($error, 15%); }
+.text-warning { color: shade($warning, 15%); }
+.text-success { color: shade($success, 15%); }

data/src/scss/toolkit/mixins/_grid.scss

@@ -0,0 +1,24 @@
+
+$grid-columns: 12 !default;
+$grid-width: (100% / $grid-columns) !default;
+
+// Calculate a width using a grid cell
+@function grid-span($n) {
+	@return $grid-width * $n;
+}
+
+// Styles for the row containing the columns
+@mixin grid-row() {
+	text-align: left;
+	width: 100%;
+	max-width: 100%;
+
+	@include clear-fix;
+}
+
+// Styles for the column
+@mixin grid-column() {
+	position: relative;
+	min-height: 1px;
+	float: left;
+}

data/src/scss/toolkit/mixins/_layout.scss

@@ -0,0 +1,90 @@
+
+$padding: .75rem !default;
+$margin: 1.25rem !default;
+
+$small-size: .7rem !default;
+$small-padding: .5rem !default;
+
+$medium-size: inherit !default;
+$medium-padding: $padding !default;
+
+$large-size: 1.3rem !default;
+$large-padding: 1rem !default;
+
+// Container clear fix for floats
+@mixin clear-fix {
+	&:after {
+		content: "";
+		display: block;
+		height: 0;
+		line-height: 0;
+		clear: both;
+		visibility: hidden;
+	}
+}
+
+// Reset an inline-block element to defaults
+@mixin reset-inline-block {
+	display: inline-block;
+	border: 0;
+	margin: 0;
+	padding: 0;
+	position: relative;
+	text-decoration: none;
+	vertical-align: middle;
+}
+
+// Remove the top and bottom margin from content elements
+// Allows for perfect spacing within content blocks
+@mixin content-spacing {
+	p, ul, ol, hr, blockquote {
+		&:first-child { margin-top: 0; }
+		&:last-child { margin-bottom: 0; }
+	}
+}
+
+//-------------------- Sizes --------------------//
+
+@mixin size-small {
+	font-size: $small-size;
+	padding: $small-padding;
+}
+
+@mixin size-medium {
+	font-size: $medium-size;
+	padding: $medium-padding;
+}
+
+@mixin size-large {
+	font-size: $large-size;
+	padding: $large-padding;
+}
+
+//-------------------- States --------------------//
+
+// Contains hover and active styles (on self or inherited from parent)
+@mixin active-state {
+	.is-active > &,
+	&:hover,
+	&.is-active,
+	&.is-active:hover { @content; }
+}
+
+// Contains disabled styles (on self or inherited from parent)
+@mixin disabled-state {
+	.is-disabled > &,
+	&.is-disabled,
+	&.is-disabled:hover,
+	&[disabled],
+	&[disabled]:hover { @content; }
+}
+
+//-------------------- Helpers --------------------//
+
+@function black($opacity){
+	@return rgba(0, 0, 0, $opacity);
+}
+
+@function white($opacity){
+	@return rgba(255, 255, 255, $opacity);
+}

data/src/scss/toolkit/mixins/_responsive.scss

@@ -0,0 +1,111 @@
+
+$responsive-design: "mobile" !default;
+$breakpoint-desktop: 1440px !default;
+$breakpoint-laptop: 1280px !default;
+$breakpoint-tablet-landscape: 1024px !default;
+$breakpoint-tablet-portrait: 768px !default;
+$breakpoint-mobile-landscape: 480px !default;
+$breakpoint-mobile-portrait: 320px !default;
+
+@mixin if-min($min) {
+	@media only screen and (min-width: $min) {
+		@content;
+	}
+}
+
+@mixin if-max($max) {
+	@media only screen and (max-width: $max) {
+		@content;
+	}
+}
+
+@mixin if-min-max($min, $max) {
+	@media only screen and (min-width: $min) and (max-width: $max) {
+		@content;
+	}
+}
+
+@mixin if-landscape {
+	@media only screen and (orientation: landscape) {
+		@content;
+	}
+}
+
+@mixin if-portrait {
+	@media only screen and (orientation: portrait) {
+		@content;
+	}
+}
+
+// Either support desktop-first or mobile-first responsive pattern
+@mixin do-responsive($desktop, $mobile) {
+	@if $responsive-design == "desktop" {
+		@if $desktop {
+			@include if-max($desktop) {
+				@content;
+			}
+		} @else {
+			@content;
+		}
+	} @else {
+		@if $mobile {
+			@include if-min($mobile) {
+				@content;
+			}
+		} @else {
+			@content;
+		}
+	}
+}
+
+//-------------------- Breakpoints --------------------//
+
+// Uses min or max
+@mixin if-desktop {
+	@include do-responsive(null, $breakpoint-tablet-landscape) {
+		@content;
+	}
+}
+
+@mixin if-tablet-landscape {
+	@include do-responsive($breakpoint-tablet-landscape, $breakpoint-tablet-portrait) {
+		@content;
+	}
+}
+
+@mixin if-tablet-portrait {
+	@include do-responsive($breakpoint-tablet-portrait, $breakpoint-mobile-landscape) {
+		@content;
+	}
+}
+
+@mixin if-mobile-landscape {
+	@include do-responsive($breakpoint-mobile-landscape, $breakpoint-mobile-portrait) {
+		@content;
+	}
+}
+
+@mixin if-mobile-portrait {
+	@include do-responsive($breakpoint-mobile-portrait, null) {
+		@content;
+	}
+}
+
+// Within 2 ranges
+@mixin in-desktop {
+	@include if-min($breakpoint-tablet-landscape + 1) {
+		@content;
+	}
+}
+
+@mixin in-tablet {
+	@include if-min-max($breakpoint-mobile-landscape + 1, $breakpoint-tablet-landscape) {
+		@content;
+	}
+}
+
+@mixin in-mobile {
+	@include if-max($breakpoint-mobile-landscape)  {
+		@content;
+	}
+}