titon-toolkit 0.9.1 → 0.9.2

data/src/scss/toolkit/themes/titon.scss

@@ -0,0 +1,364 @@
+/**
+ * @copyright	Copyright 2010-2013, The Titon Project
+ * @license		http://opensource.org/licenses/bsd-license.php
+ * @link		http://titon.io
+ */
+
+@import "../common";
+
+body {
+	font: normal 16px/1.75rem "Helvetica Neue", Helvetica, Arial, sans-serif;
+	background: $background-color;
+	color: $foreground-color;
+}
+
+//-------------------- Layout --------------------//
+
+a {
+	color: shade($info, 15%);
+	text-decoration: none;
+
+	&:hover { color: $info-dark; }
+}
+
+blockquote cite { color: $default; }
+
+code { background: $info-light; color: $info-dark; }
+var { background: $error-light; color: $error-dark; }
+mark { background: tint($warning-light, 25%); }
+
+input, textarea {
+	font: normal 16px/1.75rem "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+
+.close { line-height: 90%; }
+
+//-------------------- Accordion --------------------//
+
+.accordion-head {
+	@include transition(all .15s);
+
+	.is-active & {
+		background: $info;
+		border-color: $info-dark;
+		color: #fff;
+	}
+}
+
+//-------------------- Alert --------------------//
+
+.alert {
+	@include alert-style($default-light, $default-dark);
+
+	&.is-info { @include alert-style($info-light, $info-dark); }
+	&.is-error { @include alert-style($error-light, $error-dark); }
+	&.is-warning { @include alert-style($warning-light, $warning-dark); }
+	&.is-success { @include alert-style($success-light, $success-dark); }
+}
+
+//-------------------- Breadcrumbs --------------------//
+
+.breadcrumbs {
+	overflow: hidden;
+
+	a {
+		height: 45px;
+		line-height: 45px;
+		padding: 0 30px 0 20px;
+		border-right: 0;
+		outline: none;
+
+		&:before,
+		&:after {
+			content: "";
+			position: absolute;
+			height: 32px;
+			width: 32px;
+			border-right: 1px solid $gray-lightest;
+			border-bottom: 1px solid $gray-lightest;
+			top: 6px;
+			right: 2px;
+			z-index: 1;
+			@include transform(rotate(-45deg));
+		}
+
+		&:before {
+			height: 32px;
+			width: 32px;
+			border-right: 1px solid $gray-dark;
+			border-bottom: 1px solid $gray-dark;
+			right: 4px;
+		}
+
+		&:hover {
+			&:before {
+				border-color: $gray-darkest;
+			}
+		}
+
+		.caret-right { display: none; }
+	}
+
+	li:last-child a {
+		color: $default;
+	}
+
+	&.small {
+		a { height: 30px; line-height: 30px; padding: 0 25px 0 15px; }
+		a:before { height: 22px; width: 22px; top: 4px; }
+		a:after { height: 22px; width: 22px; top: 4px; }
+	}
+
+	&.large {
+		a { height: 50px; line-height: 50px; padding: 0 30px 0 20px; }
+		a:before { height: 40px; width: 40px; top: 4px; }
+		a:after { height: 40px; width: 40px; top: 4px; }
+	}
+}
+
+//-------------------- Button --------------------//
+
+.button {
+	color: #fff;
+	@include transition(all .2s);
+	@include button-style($default, $default-light, $default-dark);
+
+	&:active {
+		top: 1px;
+	}
+
+	&.is-info { @include button-style($info, $info-light, $info-dark); }
+	&.is-error { @include button-style($error, $error-light, $error-dark); }
+	&.is-warning { @include button-style($warning, $warning-light, $warning-dark); }
+	&.is-success { @include button-style($success, $success-light, $success-dark); }
+}
+
+//-------------------- Dropdown --------------------//
+
+.dropdown {
+	box-shadow: 5px 5px black(.25);
+
+	li {
+		a {
+			@include transition(background .15s);
+
+			.caret-right {
+				top: 2px;
+			}
+		}
+
+		&.heading {
+			color: $default;
+			font-size: .8rem;
+		}
+
+		&:hover > a {
+			background: $info;
+			color: #fff;
+
+			.caret-right { border-left-color: #fff; }
+		}
+
+		&:nth-child(odd) {
+			background: $gray-lightest;
+		}
+	}
+}
+
+.dropdown.dropdown--top {
+	box-shadow: 5px -5px black(.25);
+}
+
+//-------------------- Flyout, TypeAhead --------------------//
+
+.flyout,
+.type-ahead {
+	background: $gray;
+	border: 1px solid $gray-dark;
+	box-shadow: 5px 5px black(.25);
+	padding: $small-padding;
+
+	li {
+		&:nth-child(odd) > a { background: $gray-lightest; }
+		&.heading { background: $gray-dark; }
+
+		> a {
+			@include transition(all .15s);
+		}
+
+		> a:hover,
+		&.is-open > a,
+		&.is-active > a {
+			background: $info;
+			color: #fff;
+
+			.caret-right { border-left-color: #fff; }
+		}
+	}
+}
+
+.type-ahead-highlight { background: $warning-light; }
+
+.type-ahead {
+	li a:hover,
+	li.is-active a {
+		.type-ahead-desc { color: $gray-lightest; }
+		.type-ahead-highlight{ background: $info-light; color: $info-dark; }
+	}
+}
+
+//-------------------- Label, Badge --------------------//
+
+.label,
+.badge {
+	@include label-style($default-light, $default-dark);
+
+	&.is-info { @include label-style($info-light, $info-dark); }
+	&.is-error { @include label-style($error-light, $error-dark); }
+	&.is-warning { @include label-style($warning-light, $warning-dark); }
+	&.is-success { @include label-style($success-light, $success-dark); }
+}
+
+.label.label--left {
+	&:after { border-right-color: $default-light; }
+	&.is-info:after { border-right-color: $info-light; }
+	&.is-error:after { border-right-color: $error-light; }
+	&.is-warning:after { border-right-color: $warning-light; }
+	&.is-success:after { border-right-color: $success-light; }
+}
+
+.label.label--right {
+	&:after { border-left-color: $default-light; }
+	&.is-info:after { border-left-color: $info-light; }
+	&.is-error:after { border-left-color: $error-light; }
+	&.is-warning:after { border-left-color: $warning-light; }
+	&.is-success:after { border-left-color: $success-light; }
+}
+
+//-------------------- Modal --------------------//
+
+.modal-outer {
+	margin: $margin;
+	background: $gray;
+	border: 1px solid $gray-dark;
+	box-shadow: 5px 5px black(.25);
+}
+
+.modal-body {
+	background: #fff;
+	border-top: 1px solid $gray-dark;
+	border-bottom: 1px solid $gray-dark;
+}
+
+.modal-foot {
+	background: $gray-lightest;
+	text-align: center;
+}
+
+//-------------------- Popover --------------------//
+
+.popover {
+	margin: 15px;
+	background: #fff;
+	line-height: 115%;
+	border-radius: $round;
+	border: 1px solid $gray-dark;
+	box-shadow: 5px 5px black(.25);
+
+	&.top-center .popover-arrow {
+		border-top-color: black(.25);
+		@include transform(translateY(6px));
+
+		&:after {
+			margin-top: -8px;
+			border-top: 8px solid #fff;
+		}
+	}
+
+	&.center-left .popover-arrow {
+		border-left-color: black(.25);
+		@include transform(translateX(6px));
+
+		&:after {
+			margin-left: -8px;
+			border-left: 8px solid #fff;
+		}
+	}
+
+	&.center-right .popover-arrow {
+		border-right-color: $gray-dark;
+
+		&:after {
+			margin-left: 2px;
+			border-right-color: #fff;
+		}
+	}
+
+	&.bottom-center .popover-arrow {
+		border-bottom-color: $gray-dark;
+
+		&:after {
+			margin-top: 2px;
+			border-bottom-color: #fff;
+		}
+	}
+
+	&.top-left,
+	&.top-right,
+	&.bottom-left,
+	&.bottom-right {
+		margin: $margin / 2;
+	}
+}
+
+.popover-head {
+	font-weight: bold;
+	background: $gray;
+	border-bottom: 1px solid $gray-dark;
+}
+
+//-------------------- Progress --------------------//
+
+.progress {
+	box-shadow: inset 1px 1px 2px $gray-darkest;
+	border-radius: $round;
+}
+
+.progress-bar {
+	color: #fff;
+	font-weight: bold;
+	border-top-left-radius: $round;
+	border-bottom-left-radius: $round;
+	@include progress-style($default, $default-dark);
+
+	&.is-info { @include progress-style($info, $info-dark); }
+	&.is-error { @include progress-style($error, $error-dark); }
+	&.is-warning { @include progress-style($warning, $warning-dark); }
+	&.is-success { @include progress-style($success, $success-dark); }
+}
+
+.progress-bar + .progress-bar {
+	border-top-left-radius: 0;
+	border-bottom-left-radius: 0;
+}
+
+//-------------------- Tooltip --------------------//
+
+.tooltip {
+	background: black(.70);
+	color: #fff;
+	border-radius: $round;
+	margin: 10px;
+	line-height: 115%;
+
+	&.top-center .tooltip-arrow { border-top-color: black(.70); }
+	&.center-left .tooltip-arrow { border-left-color: black(.70); }
+	&.center-right .tooltip-arrow { border-right-color: black(.70); }
+	&.bottom-center .tooltip-arrow { border-bottom-color: black(.70); }
+}
+
+.tooltip-head {
+	color: $info;
+	font-weight: bold;
+	margin-bottom:  $margin / 2;
+}

data/src/scss/toolkit/themes/tomorrow-night.scss

@@ -0,0 +1,569 @@
+/**
+ * @copyright	Copyright 2010-2013, The Titon Project
+ * @license		http://opensource.org/licenses/bsd-license.php
+ * @link		http://titon.io
+ */
+
+/**
+ * Based on the Tomorrow Night theme by Chris Kempson.
+ * https://github.com/chriskempson/tomorrow-theme
+ */
+
+@import "../common";
+
+$gray-lightest: #72757b;
+$gray-light: #575b62;
+$gray: #373b41;
+$gray-dark: #282a2e;
+$gray-darkest: #1d1f21;
+
+$background-color: #1d1f21;
+$foreground-color: #c5c8c6;
+$middleground-color: #373b41;
+
+$default: #969896;
+$default-light: #e2e3e2;
+$default-dark: #515251;
+
+$info: #81a2be;
+$info-light: #d2e9f4;
+$info-dark: #45586d;
+
+$warning: #f0c674;
+$warning-light: #fdf7c5;
+$warning-dark: #b1753e;
+
+$success: #b5bd68;
+$success-light: #f1f4b8;
+$success-dark: #666d37;
+
+$error: #cc6666;
+$error-light: #f8b5b5;
+$error-dark: #7a3636;
+
+//-------------------- Layout --------------------//
+
+body {
+	color: $foreground-color;
+	background: $background-color;
+}
+
+//-------------------- Typography --------------------//
+
+.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; }
+.x { color: $foreground-color; }
+
+.text-muted { color: $default; }
+.text-info { color: $info; }
+.text-error { color: $error; }
+.text-warning { color: $warning; }
+.text-success { color: $success; }
+
+a {
+	color: $info;
+	text-decoration: none;
+
+	&:hover { color: $info-light; }
+}
+
+blockquote { border-color: $info; }
+blockquote cite { color: $default; }
+
+pre, code, var, kbd { color: $default-dark; }
+code { background: $info-light; color: $info-dark; }
+var { background: $error-light; color: $error-dark; }
+
+//-------------------- Layout --------------------//
+
+.table {
+	background: $gray;
+
+	td, th {
+		border-color: $gray-light;
+	}
+
+	thead tr,
+	tfoot tr {
+		background: $gray-light;
+
+		th { border-color: $gray-lightest; }
+	}
+
+	tbody tr {
+		background: $gray;
+
+		&:nth-child(odd) { background: $gray-dark; }
+		&.divider { background: $gray-light; }
+	}
+}
+
+.table.table--hover {
+	tbody tr:not(.divider):hover { background: $gray-darkest; }
+}
+
+.table.table--sortable thead th a {
+	background: $gray-light;
+	color: #fff;
+
+	&:hover { background: shade($gray-light, 5%); }
+}
+
+fieldset {
+	border-color: $gray-light;
+}
+
+.input {
+	background: $gray;
+	border-color: $gray-light;
+	color: $foreground-color;
+
+	&:hover { border-color: $gray-lightest; }
+	&:focus { border-color: $info; box-shadow: 0 0 5px $info-light; }
+
+	@include disabled-state {
+		color: $default;
+		border-color: $gray;
+	}
+
+	&[readonly] {
+		color: $default;
+		border-color: $gray;
+		box-shadow: none;
+	}
+}
+
+.input-addon {
+	border-color: $gray-light;
+	background-color: $gray-dark;
+}
+
+.input-group {
+	.input-addon,
+	.button,
+	.button-group {
+		box-shadow: none;
+		margin-right: -5px;
+	}
+}
+
+.field {
+	@include field-style;
+}
+
+//-------------------- Accordion --------------------//
+
+.accordion {
+	border-color: $gray-light;
+	border-radius: 3px;
+	background: $gray-dark;
+
+	li {
+		&:first-child .accordion-head {
+			border-top-left-radius: 3px;
+			border-top-right-radius: 3px;
+		}
+
+		&:last-child {
+			.accordion-head {
+				border-bottom-left-radius: 3px;
+				border-bottom-right-radius: 3px;
+			}
+
+			.accordion-body {
+				border: 0;
+			}
+		}
+
+		&.is-active .accordion-head {
+			background: $gray-light;
+			border-color: $gray-lightest;
+			color: $success;
+		}
+	}
+}
+
+.accordion-head {
+	color: $info;
+	background: $gray;
+	border-color: $gray-light;
+	padding: 1rem;
+	text-align: center;
+	cursor: pointer;
+	@include transition(all .3s);
+}
+
+.accordion-body { padding: $padding; }
+
+//-------------------- Alert --------------------//
+
+.alert {
+	text-shadow: 0 1px 0 white(.50);
+	box-shadow: 0 0 3px #000;
+	@include alert-style($default-light, $default-dark);
+
+	&.is-info { @include alert-style($info-light, $info-dark); }
+	&.is-warning { @include alert-style($warning-light, $warning-dark); }
+	&.is-error { @include alert-style($error-light, $error-dark); }
+	&.is-success { @include alert-style($success-light, $success-dark); }
+}
+
+//-------------------- Button --------------------//
+
+.breadcrumbs {
+	background: $gray;
+	border-color: $gray-light;
+
+	a {
+		padding-right: 0 !important;
+
+		.caret-right {
+			top: -1px;
+			margin-left: $medium-padding;
+			opacity: .5;
+			display: inline-block;
+		}
+	};
+
+	&.small a .caret-right { margin-left: $small-padding; }
+	&.large a .caret-right { margin-left: $large-padding; }
+
+	li:last-child a {
+		color: $default;
+		.caret-right { display: none; }
+	}
+}
+
+//-------------------- Button --------------------//
+
+$button-shadow: 0 1px 0 white(.5) inset, 0 0 3px #000;
+
+@mixin button-style($color) {
+	color: shade($color, 75%);
+	background: $color;
+	border: 1px solid #000;
+	@include background-image(linear-gradient($color, shade($color, 30%)));
+
+	@include active-state {
+		color: #000;
+		background: tint($color, 30%);
+		@include background-image(linear-gradient(tint($color, 30%), $color));
+	}
+
+	@include disabled-state { background: $color; }
+	&:active { background: $color; }
+}
+
+.button {
+	font-weight: bold;
+	text-shadow: 0 1px white(.35);
+	box-shadow: $button-shadow;
+	@include transition(all .3s);
+
+	&.small, .small & { text-shadow: 0 1px white(.25); }
+	&.large, .large & { font-weight: normal; }
+
+	@include button-style($default);
+	@include disabled-state {
+		opacity: .35;
+	}
+
+	&.is-info { @include button-style($info); }
+	&.is-warning { @include button-style($warning); }
+	&.is-error { @include button-style($error); }
+	&.is-success { @include button-style($success); }
+}
+
+.button.visual-popout {
+	box-shadow: $button-shadow, 0 6px 0 0 black(.25) !important;
+
+	&:active {
+		box-shadow: $button-shadow, 0 3px 0 0 black(.5) !important;
+	}
+}
+
+//-------------------- ButtonGroup, Pagination --------------------//
+
+.button-group,
+.pagination.pagination--grouped ul {
+	box-shadow: 0 0 3px #000;
+
+	li .button,
+	> .button {
+		box-shadow: 0 1px 0 white(0.5) inset;
+		border-left: 1px solid black(.35);
+		border-right: 1px solid black(.35);
+	}
+}
+
+.button-group {
+	> li:first-child .button,
+	> .button:first-child { border-left: 0; }
+
+	> li:last-child .button,
+	> .button:last-child { border-right: 0; }
+}
+
+.pagination.pagination--grouped li {
+	&:first-child .button { border-left: 0; }
+	&:last-child .button { border-right: 0; }
+}
+
+.button-group.button-group--vertical {
+	.button {
+		box-shadow: none;
+		border: 1px solid black(.35);
+	}
+
+	> li:first-child .button,
+	> .button:first-child { border-top: 0; }
+
+	> li:last-child .button,
+	> .button:last-child { border-bottom: 0; }
+}
+
+//-------------------- Label, Badge --------------------//
+
+.label,
+.badge {
+	color: #000;
+	box-shadow: 0 0 3px #000;
+	text-shadow: 0 1px white(.35);
+	background-color: $default;
+
+	&.is-info { background-color: $info; }
+	&.is-warning { background-color: $warning; }
+	&.is-error { background-color: $error; }
+	&.is-success { background-color: $success; }
+}
+
+.label.label--left {
+	&:after { border-right-color: $default; }
+	&.is-info:after { border-right-color: $info; }
+	&.is-warning:after { border-right-color: $warning; }
+	&.is-error:after { border-right-color: $error; }
+	&.is-success:after { border-right-color: $success; }
+}
+
+.label.label--right {
+	&:after { border-left-color: $default; }
+	&.is-info:after { border-left-color: $info; }
+	&.is-warning:after { border-left-color: $warning; }
+	&.is-error:after { border-left-color: $error; }
+	&.is-success:after { border-left-color: $success; }
+}
+
+//-------------------- Dropdown, TypeAhead, Flyout --------------------//
+
+.dropdown,
+.flyout,
+.type-ahead {
+	border: 3px solid white(.75);
+	border-radius: 3px;
+	background: $gray-dark;
+	box-shadow: 0 0 3px #000;
+
+	li {
+		border-top: 1px solid $gray;
+
+		&:first-child { border: 0; }
+
+		a {
+			.caret-right {
+				float: right;
+				margin-top: 3px;
+			}
+		}
+
+		a:hover,
+		&.is-open > a,
+		&.is-active > a,
+		&:hover > a {
+			background: $gray-darkest;
+			color: #fff;
+		}
+
+		&.heading {
+			background: $gray;
+			font-size: .9em;
+			color: #fff;
+		}
+
+		&.divider {
+			background: $gray-darkest;
+			border-top: 1px solid $gray;
+			height: 10px;
+			margin: 0;
+		}
+	}
+}
+
+.type-ahead-desc {
+	display: block;
+	color: $default;
+	font-size: .7rem;
+}
+
+.type-ahead-highlight {
+	color: $warning;
+}
+
+//-------------------- Modal --------------------//
+
+.modal {
+	.close {
+		top: .9rem;
+		right: .9rem;
+	}
+}
+
+.modal-outer {
+	border: 10px solid white(.75);
+	border-radius: 3px;
+	background: $gray-dark;
+	margin: 10px;
+}
+
+.modal-head,
+.modal-foot,
+.modal-loading,
+.modal-error {
+	background: $gray-darkest;
+}
+
+.modal-head {
+	font-size: 1rem;
+	font-weight: normal;
+	color: $info;
+}
+
+.modal-foot {
+	text-align: center;
+}
+
+.modal-body {
+	border-top: 1px solid $gray;
+	border-bottom: 1px solid $gray;
+}
+
+//-------------------- Popover --------------------//
+
+.popover {
+	border: 3px solid white(.75);
+	border-radius: 3px;
+	background: $gray-dark;
+	box-shadow: 0 0 3px #000;
+	margin: 10px;
+
+	.popover-head {
+		font-size: 1rem;
+		font-weight: bold;
+		color: $info;
+		background: $gray-darkest;
+		border-bottom: 1px solid $gray;
+	}
+
+	&.center-left .popover-arrow {
+		right: -19px;
+		border-left-color: $gray-darkest;
+
+		&:after {
+			margin-left: -2px;
+			border-left-color: white(.75);
+		}
+	}
+
+	&.center-right .popover-arrow {
+		left: -19px;
+		border-right-color: $gray-darkest;
+
+		&:after {
+			margin-left: 2px;
+			border-right-color: white(.75);
+		}
+	}
+
+	&.top-center .popover-arrow {
+		bottom: -19px;
+		border-top-color: $gray-darkest;
+
+		&:after {
+			margin-top: -2px;
+			border-top-color: white(.75);
+		}
+	}
+
+	&.bottom-center .popover-arrow {
+		top: -19px;
+		border-bottom-color: $gray-darkest;
+
+		&:after {
+			margin-top: 2px;
+			border-bottom-color: white(.75);
+		}
+	}
+}
+
+//-------------------- Progress --------------------//
+
+.progress {
+	background: $gray;
+	box-shadow: inset 1px 1px 2px $gray-darkest;
+	border-radius: $round;
+}
+
+.progress-bar {
+	color: #fff;
+	font-weight: bold;
+	border-top-left-radius: $round;
+	border-bottom-left-radius: $round;
+	@include progress-style($default, $default-dark);
+
+	&.is-info { @include progress-style($info, $info-dark); }
+	&.is-error { @include progress-style($error, $error-dark); }
+	&.is-warning { @include progress-style($warning, $warning-dark); }
+	&.is-success { @include progress-style($success, $success-dark); }
+}
+
+.progress-bar + .progress-bar {
+	border-top-left-radius: 0;
+	border-bottom-left-radius: 0;
+}
+
+//-------------------- Showcase --------------------//
+
+.showcase {
+	border: 10px solid white(.75);
+	border-radius: 3px;
+
+	.close {
+		top: -11px;
+		right: -40px;
+	}
+}
+
+.showcase-inner {
+	padding: 0;
+}
+
+//-------------------- Tooltip --------------------//
+
+.tooltip {
+	background: white(.90);
+	color: #000;
+	border-radius: 3px;
+	margin: $margin / 2;
+
+	.tooltip-head {
+		padding-bottom: $small-padding;
+		font-weight: bold;
+		font-size: 1rem;
+	}
+
+	&.top-center .tooltip-arrow { border-top-color: white(.90); }
+	&.center-left .tooltip-arrow { border-left-color: white(.90); }
+	&.center-right .tooltip-arrow { border-right-color: white(.90); }
+	&.bottom-center .tooltip-arrow { border-bottom-color: white(.90); }
+}