titon-toolkit 0.9.1 → 0.9.2

data/src/scss/toolkit/_variables.scss

@@ -0,0 +1,59 @@
+
+//-------------------- Compass --------------------//
+
+$experimental-support-for-mozilla: true !default;
+$experimental-support-for-webkit: true !default;
+$experimental-support-for-opera: false !default;
+$experimental-support-for-microsoft: false !default;
+$experimental-support-for-khtml: false !default;
+
+$support-for-original-webkit-gradients: false !default;
+
+//-------------------- Colors --------------------//
+
+$gray-lightest: #fbfbfb !default;
+$gray-light: #f8f8f8 !default;
+$gray: #f5f5f5 !default;
+$gray-dark: #e5e5e5 !default;
+$gray-darkest: #c2c2c2 !default;
+
+$background-color: #fff !default;
+$foreground-color: #2d2d2d !default;
+
+//-------------------- States --------------------//
+
+$default: #929497 !default;
+$default-light: #d0d2d3 !default;
+$default-dark: #404041 !default;
+
+$info: #45c5eb !default;
+$info-light: #dbf1fa !default;
+$info-dark: #4067ab !default;
+
+$warning: #fcd04b !default;
+$warning-light: #ffebb5 !default;
+$warning-dark: #c87e00 !default;
+
+$success: #97cb6f !default;
+$success-light: #e7f2dd !default;
+$success-dark: #226b36 !default;
+
+$error: #f06060 !default;
+$error-light: #fdc5c1 !default;
+$error-dark: #b10e0e !default;
+
+$disabled-opacity: .75 !default;
+
+//-------------------- Border Styles --------------------//
+
+$round: .2rem !default;
+
+$pill: 2rem !default;
+
+$oval-x: 7rem !default;
+$oval-y: 2.75rem !default;
+
+$skew-x: 1rem !default;
+$skew-y: 3rem !default;
+$skew: $skew-x $skew-y;
+$skew-reverse: $skew-y $skew-x;

data/src/scss/toolkit/effects/visual.scss

@@ -0,0 +1,75 @@
+/**
+ * @copyright	Copyright 2010-2013, The Titon Project
+ * @license		http://opensource.org/licenses/bsd-license.php
+ * @link		http://titon.io
+ */
+
+@import "../common";
+
+//-------------------- Gloss --------------------//
+
+.visual-gloss {
+	&:after {
+		content: "";
+		position: absolute;
+		width: 100%;
+		height: 60%;
+		top: 1%;
+		left: 0;
+		border-radius: 0 0 2rem 2rem / 0 0 1rem 1rem;
+		@include background-image(linear-gradient(left, white(.3) 0%, white(0) 50%, white(.3) 100%));
+	}
+
+	&.round:after {
+		border-radius: .2rem .2rem 2rem 2rem / .5rem .5rem 1rem 1rem;
+		width: 98%;
+		left: 1.5%;
+	}
+
+	&.pill:after,
+	&.oval:after,
+	&.skew:after {
+		width: 90%;
+		left: 5.5%;
+	}
+
+	&.pill:after { border-radius: 1rem 1rem 2rem 2rem / 1rem 1rem 1rem 1rem; }
+	&.oval:after { border-radius: 5rem 5rem 4rem 4rem / 1.5rem 1.5rem 1.5rem 1.5rem; }
+	&.skew:after { border-radius: 1rem 1rem 3rem 3rem / 1rem 1rem 2rem 2rem; }
+}
+
+//-------------------- Reflection --------------------//
+
+.visual-reflect:after {
+	content: "";
+	position: absolute;
+	width: 100%;
+	height: 50%;
+	top: 0;
+	left: 0;
+	@include background-image(linear-gradient(top, white(0), white(.3)));
+}
+
+//-------------------- Glare --------------------//
+
+.visual-glare:after {
+	content: "";
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	top: 0;
+	left: 0;
+	@include background-image(linear-gradient(160deg, white(.5) 0%, white(.1) 50%, white(0) 50%, white(.3) 100%));
+}
+
+//-------------------- Popout --------------------//
+
+.visual-popout {
+	box-shadow: 0 6px 0 0 black(.25) !important;
+	top: -3px;
+
+	&:active {
+		box-shadow: 0 3px 0 0 black(.5) !important;
+		top: 0;
+	}
+}

data/src/scss/toolkit/layout/base.scss

@@ -0,0 +1,93 @@
+/**
+ * @copyright	Copyright 2010-2013, The Titon Project
+ * @license		http://opensource.org/licenses/bsd-license.php
+ * @link		http://titon.io
+ */
+
+@import "../common";
+
+// Use border-box for everything
+*, *:after, *:before { @include box-sizing(border-box); }
+
+// Alignment
+.align-left { text-align: left; }
+.align-center { text-align: center; }
+.align-right { text-align: right; }
+.align-justify { text-align: justify; }
+
+.float-left { float: left; }
+.float-right { float: right; }
+.float-none { float: none; }
+
+// Animations
+.show { opacity: 1 !important; visibility: visible !important; }
+.hide { visibility: hidden !important; }
+
+// Display
+.shown { display: block; }
+.inline { display: inline; }
+.inline-block { display: inline-block; }
+.hidden { display: none; }
+
+// Positioning
+.relative { position: relative; }
+.absolute { position: absolute; }
+.static { position: static; }
+
+// Layout
+.clear { clear: both; display: block; margin: 0; padding: 0; }
+.clear-fix { @include clear-fix; }
+
+// Styles
+.round { border-radius: $round; }
+.is-draggable { cursor: move; }
+.is-disabled,
+button[disabled] { cursor: not-allowed !important; pointer-events: none; }
+
+// Carets
+.caret-up,
+.caret-down,
+.caret-left,
+.caret-right {
+	@include reset-inline-block;
+	border: 5px solid transparent;
+	content: "";
+	height: 0;
+	width: 0;
+}
+
+.caret-up { border-bottom-color: $foreground-color; }
+.caret-down { border-top-color: $foreground-color; }
+.caret-left { border-right-color: $foreground-color; }
+.caret-right { border-left-color: $foreground-color; }
+
+// Close
+.x {
+	@include reset-inline-block;
+	color: $foreground-color;
+	font: bold 1.5rem/100% Arial, sans-serif;
+	text-transform: uppercase;
+}
+
+.close {
+	@include reset-inline-block;
+	width: 30px;
+	height: 30px;
+	line-height: 30px;
+	text-align: center;
+	background: white(.5);
+	border-radius: 2px;
+	cursor: pointer;
+
+	.x {
+		color: black(.5);
+		position: relative;
+		top: -1px;
+	}
+
+	&:hover {
+		background: white(.8);
+
+		.x { color: black(.75); }
+	}
+}

data/src/scss/toolkit/layout/code.scss

@@ -0,0 +1,61 @@
+/**
+ * @copyright	Copyright 2010-2013, The Titon Project
+ * @license		http://opensource.org/licenses/bsd-license.php
+ * @link		http://titon.io
+ */
+
+@import "../common";
+
+code,
+var,
+kbd,
+pre {
+	font: normal .8rem/115% Consolas, Monaco, 'Andale Mono', monospace;
+}
+
+code,
+var,
+kbd {
+	display: inline-block;
+	background: $gray-dark;
+	border-radius: 2px;
+	padding: 2px 4px;
+}
+
+pre {
+	padding: $padding;
+	margin: $margin 0;
+	background: $gray-light;
+	border: 1px solid $gray-dark;
+	border-radius: 3px;
+	text-align: left;
+	direction: ltr;
+	white-space: pre;
+	word-spacing: normal;
+	font-size: .9rem;
+	overflow-x: auto;
+
+	code {
+		padding: 0;
+		margin: 0;
+		color: inherit;
+		font: inherit;
+		white-space: pre-wrap;
+		background: transparent;
+		border: none;
+	}
+
+	&.code--scrollable {
+		max-height: 350px;
+		overflow-y: auto;
+	}
+}
+
+kbd {
+	background: #fff;
+	position: relative;
+	border: 1px solid $gray-dark;
+	border-top-color: $gray-dark;
+	box-shadow: 0 2px 0 1px $gray-darkest;
+	top: -3px;
+}

data/src/scss/toolkit/layout/form.scss

@@ -0,0 +1,158 @@
+/**
+ * @copyright	Copyright 2010-2013, The Titon Project
+ * @license		http://opensource.org/licenses/bsd-license.php
+ * @link		http://titon.io
+ */
+
+@import "../common";
+
+form { text-align: left; }
+
+fieldset {
+	padding: $padding 0;
+	margin: 0;
+	border: 0;
+	border-top: 1px solid $gray-dark;
+
+	&.legendless {
+		border: 0;
+		padding: 0;
+	}
+}
+
+legend {
+	font-size: 1.3rem;
+	padding-right: $padding;
+}
+
+select[multiple],
+select[size] { height: auto; }
+
+// Reset browser styles
+input::-moz-focus-inner {
+	padding: 0;
+	border: 0;
+}
+
+// Required values to match browser restrictions
+label,
+.input-static {
+	font-size: inherit;
+	line-height: normal;
+}
+
+//-------------------- Inputs --------------------//
+
+.input,
+.input-static {
+	@include reset-inline-block;
+	border: 1px solid $gray-dark;
+	font-size: $medium-size;
+	padding: $medium-padding;
+}
+
+.input {
+	background: $gray-lightest;
+	border-radius: $round;
+	@include transition(all .3s);
+
+	&:hover { border-color: $gray-darkest; }
+	&:focus { border-color: $info; box-shadow: 0 0 5px $info-light; outline: 0; }
+
+	@include disabled-state {
+		cursor: not-allowed;
+		color: $gray-darkest;
+		border-color: $gray;
+	}
+
+	&[readonly] {
+		color: $gray-darkest;
+		border: 1px solid $gray-dark;
+		box-shadow: none;
+	}
+}
+
+.input-static {
+	background: transparent;
+	border-color: transparent;
+	padding-left: 0;
+	padding-right: 0;
+}
+
+select.input { padding: $medium-padding - .05; } // fixes vertical alignment
+select.input[multiple] { min-height: 150px; max-height: 500px; }
+
+textarea.input {
+	line-height: 135%;
+	min-height: 150px;
+}
+
+.radio,
+.checkbox {
+	display: inline-block;
+	vertical-align: middle;
+	cursor: pointer;
+
+	input[type="checkbox"],
+	input[type="radio"] {
+		vertical-align: middle;
+		position: relative;
+		top: -1px;
+		margin-right: 3px;
+	}
+}
+
+//-------------------- Fields, Labels --------------------//
+
+.field {
+	margin-bottom: $margin;
+
+	&.is-required {
+		.field-label { font-weight: bold; }
+	}
+
+	@include field-style;
+}
+
+.field-label {
+	display: block;
+	vertical-align: middle;
+	margin-bottom: 7px;
+}
+
+.field-help {
+	margin-top: 7px;
+	font-size: $small-size;
+}
+
+.form-actions {
+	text-align: center;
+}
+
+//-------------------- Modifiers --------------------//
+
+.form--horizontal {
+	.field { @include grid-row; }
+
+	.field-label {
+		text-align: right;
+		border: 1px solid transparent; // matches input sizes
+		padding-top: $medium-padding;
+	}
+
+	.field-col { padding-left: $margin; }
+}
+
+.form--inline {
+	.field,
+	.field-label,
+	.form-actions {
+		display: inline-block;
+		vertical-align: middle;
+		margin-right: $margin;
+		margin-bottom: $margin / 2;
+	}
+
+	.field-label { margin: 0 ($margin / 2) 0 0; }
+	.field-help { display: none; }
+}