colorgy_style 0.0.0.1 → 0.0.0.2

data/assets/stylesheets/colorgy/components/_badge.scss

@@ -0,0 +1,9 @@
+// *************************************
+//
+// Badges.
+//
+// Styleguide Badge.
+//
+// *************************************
+
+@import "bootstrap/badges";

data/assets/stylesheets/colorgy/components/_breadcrumb.scss

@@ -0,0 +1,9 @@
+// *************************************
+//
+// Breadcrumbs.
+//
+// Styleguide Breadcrumb.
+//
+// *************************************
+
+@import "bootstrap/breadcrumbs";

data/assets/stylesheets/colorgy/components/_button.scss

@@ -1,18 +1,61 @@
-// Clickable control
+// *************************************
+//
+// Default buttons.
 //
 // :hover                - On mouse hovered.
 // :active, .active      - Active state.
 // :disabled, .disabled  - Disabled state.
-// .btn-lg               - Large button.
-// .btn-sm               - Small button.
-// .btn-xs               - Tiny button.
-// .btn-block            - Block level buttons, span the full width of a parent.
+// .lg                   - Large button.
+// .sm                   - Small button.
+// .xs                   - Tiny button.
+// .block                - Block level buttons, span the full width of a parent.
+//
+// Styleguide Button.
 //
-// Styleguide 2.1.
+// *************************************
 
 @import "bootstrap/buttons";
 
 .btn {
 	@extend .btn-default;
-	font-weight: bold;
+
+	&.primary {
+		@extend .btn-primary;
+	}
+
+	&.success {
+		@extend .btn-success;
+	}
+
+	&.info {
+		@extend .btn-info;
+	}
+
+	&.warning {
+		@extend .btn-warning;
+	}
+
+	&.danger {
+		@extend .btn-danger;
+	}
+
+	&.link {
+		@extend .btn-link;
+	}
+
+	&.lg {
+		@extend .btn-lg;
+	}
+
+	&.sm {
+		@extend .btn-sm;
+	}
+
+	&.xs {
+		@extend .btn-xs;
+	}
+
+	&.block {
+		@extend .btn-block;
+	}
 }

data/assets/stylesheets/colorgy/components/_button_group.scss

@@ -0,0 +1,33 @@
+// *************************************
+//
+// Button groups.
+//
+// .lg         - Large.
+// .sm         - Small.
+// .xs         - Extra small.
+// .justified  - Stretch at equal sizes to span the entire width of its parent.
+//
+// Styleguide ButtonGroup.
+//
+// *************************************
+
+@import "bootstrap/button-groups";
+
+.btn-group {
+
+	&.lg {
+		@extend .btn-group-lg;
+	}
+
+	&.sm {
+		@extend .btn-group-sm;
+	}
+
+	&.xs {
+		@extend .btn-group-xs;
+	}
+
+	&.justified {
+		@extend .btn-group-justified;
+	}
+}

data/assets/stylesheets/colorgy/components/_dropdown.scss

@@ -0,0 +1,18 @@
+// *************************************
+//
+// Dropdowns. Requires `components/dropdown.js` to make interactive.
+//
+// .right  - Pulls right the <code>dropdown-menu</code>.
+//
+// Styleguide Dropdown.
+//
+// *************************************
+
+@import "bootstrap/dropdowns";
+
+.dropdown-menu {
+
+	&.right {
+		@extend .dropdown-menu-right;
+	}
+}

data/assets/stylesheets/colorgy/components/_input_group.scss

@@ -0,0 +1,23 @@
+// *************************************
+//
+// Input groups.
+//
+// .lg  - Large.
+// .sm  - Small.
+//
+// Styleguide InputGroup.
+//
+// *************************************
+
+@import "bootstrap/input-groups";
+
+.input-group {
+
+	&.lg {
+		@extend .input-group-lg;
+	}
+
+	&.sm {
+		@extend .input-group-sm;
+	}
+}

data/assets/stylesheets/colorgy/components/_label.scss

@@ -0,0 +1,39 @@
+// *************************************
+//
+// Labels.
+//
+// .primary  - Primary.
+// .success  - Success.
+// .info     - Info.
+// .warning  - Warning.
+// .danger   - Danger.
+//
+// Styleguide Label.
+//
+// *************************************
+
+@import "bootstrap/labels";
+
+.label {
+	@extend .label-default;
+
+	&.primary {
+		@extend .label-primary;
+	}
+
+	&.success {
+		@extend .label-success;
+	}
+
+	&.info {
+		@extend .label-info;
+	}
+
+	&.warning {
+		@extend .label-warning;
+	}
+
+	&.danger {
+		@extend .label-danger;
+	}
+}

data/assets/stylesheets/colorgy/components/_list_group.scss

@@ -0,0 +1,9 @@
+// *************************************
+//
+// List groups.
+//
+// Styleguide ListGroup.
+//
+// *************************************
+
+@import "bootstrap/list-group";

data/assets/stylesheets/colorgy/components/_media.scss

@@ -0,0 +1,9 @@
+// *************************************
+//
+// Media objects.
+//
+// Styleguide Media.
+//
+// *************************************
+
+@import "bootstrap/media";

data/assets/stylesheets/colorgy/components/_nav.scss

@@ -0,0 +1,33 @@
+// *************************************
+//
+// Navs.
+//
+// .tabs       - Tabs.
+// .pills      - Pills.
+// .stacked    - Stacked.
+// .justified  - Justified.
+//
+// Styleguide Nav.
+//
+// *************************************
+
+@import "bootstrap/navs";
+
+.nav {
+
+	&.tabs {
+		@extend .nav-tabs;
+	}
+
+	&.pills {
+		@extend .nav-pills;
+	}
+
+	&.stacked {
+		@extend .nav-stacked;
+	}
+
+	&.justified {
+		@extend .nav-justified;
+	}
+}

data/assets/stylesheets/colorgy/components/_navbar.scss

@@ -0,0 +1,23 @@
+// *************************************
+//
+// Navbars.
+//
+// .default  - Default style.
+// .inverse  - Inverted.
+//
+// Styleguide Navbar.
+//
+// *************************************
+
+@import "bootstrap/navbar";
+
+.navbar {
+
+	&.default {
+		@extend .navbar-default;
+	}
+
+	&.inverse {
+		@extend .navbar-inverse;
+	}
+}

data/assets/stylesheets/colorgy/components/_page_header.scss

@@ -0,0 +1,11 @@
+// *************************************
+//
+// Page headers.
+//
+// Styleguide PageHeader.
+//
+// *************************************
+
+.page-header {
+
+}

data/assets/stylesheets/colorgy/components/_pager.scss

@@ -0,0 +1,9 @@
+// *************************************
+//
+// Pagers.
+//
+// Styleguide Pager.
+//
+// *************************************
+
+@import "bootstrap/pager";

data/assets/stylesheets/colorgy/components/_pagination.scss

@@ -0,0 +1,23 @@
+// *************************************
+//
+// Paginations.
+//
+// .lg  - Large.
+// .sm  - Small.
+//
+// Styleguide Pagination.
+//
+// *************************************
+
+@import "bootstrap/pagination";
+
+.pagination {
+
+	&.lg {
+		@extend .pagination-lg;
+	}
+
+	&.sm {
+		@extend .pagination-sm;
+	}
+}

data/assets/stylesheets/colorgy/components/_panel.scss

@@ -0,0 +1,39 @@
+// *************************************
+//
+// Panels.
+//
+// .primary  - Primary.
+// .success  - Success.
+// .info     - Info.
+// .warning  - Warning.
+// .danger   - Danger.
+//
+// Styleguide Panel.
+//
+// *************************************
+
+@import "bootstrap/panels";
+
+.panel {
+	@extend .panel-default;
+
+	&.primary {
+		@extend .panel-primary;
+	}
+
+	&.success {
+		@extend .panel-success;
+	}
+
+	&.info {
+		@extend .panel-info;
+	}
+
+	&.warning {
+		@extend .panel-warning;
+	}
+
+	&.danger {
+		@extend .panel-danger;
+	}
+}

data/assets/stylesheets/colorgy/components/_progress_bar.scss

@@ -0,0 +1,41 @@
+// *************************************
+//
+// Progress bars.
+//
+// .primary         - Primary.
+// .success         - Success.
+// .info            - Info.
+// .warning         - Warning.
+// .danger          - Danger.
+// .striped         - Striped.
+// .striped.active  - Stripe animated.
+//
+// Styleguide ProgressBar.
+//
+// *************************************
+
+@import "bootstrap/progress-bars";
+
+
+.progress-bar {
+
+	&.success {
+		@extend .progress-bar-success;
+	}
+
+	&.info {
+		@extend .progress-bar-info;
+	}
+
+	&.warning {
+		@extend .progress-bar-warning;
+	}
+
+	&.danger {
+		@extend .progress-bar-danger;
+	}
+
+	&.striped {
+		@extend .progress-bar-striped;
+	}
+}

data/assets/stylesheets/colorgy/components/_thumbnail.scss

@@ -0,0 +1,9 @@
+// *************************************
+//
+// Thumbnails.
+//
+// Styleguide Thumbnail.
+//
+// *************************************
+
+@import "bootstrap/thumbnails";

data/assets/stylesheets/colorgy/components/_toast.scss

@@ -0,0 +1,352 @@
+// *************************************
+//
+// Toast notifications.
+//
+// With `flash.js`, you can send flash toasts interactively using JS:
+// `flash.info()`, `flash.success()`, `flash.error()` and `flash.warning()`.
+//
+// For example:
+//
+//     flash.info('Hello World', '<button class="btn">Ok</button>', 'Hi');
+//
+// .success  - Success.
+// .error  - error.
+// .warning  - Warning.
+//
+// Styleguide Toast.
+//
+// *************************************
+
+@import "compass/css3/transition";
+
+.toast {
+	position: relative;
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+	width: 300px;
+	-moz-border-radius: 3px;
+	-webkit-border-radius: 3px;
+	border-radius: 3px;
+	background-color: #555;
+	background-repeat: no-repeat;
+	background-position: 15px center;
+	color: #ffffff;
+	-moz-box-shadow: 0 0 12px #999999;
+	-webkit-box-shadow: 0 0 12px #999999;
+	box-shadow: 0 0 12px #999999;
+	overflow: hidden;
+	opacity: .8;
+	-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
+	filter: alpha(opacity=80);
+
+	// @include transition-property(margin, margin-top);
+	// @include transition-duration(.3s);
+
+	// &:hover {
+	// 	-moz-box-shadow: 0 0 12px #000000;
+	// 	-webkit-box-shadow: 0 0 12px #000000;
+	// 	box-shadow: 0 0 12px #000000;
+	// 	opacity: 1;
+	// 	-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
+	// 	filter: alpha(opacity=100);
+	// 	cursor: pointer;
+	// }
+
+	> * {
+		display: table-cell;
+	}
+
+	.toast-content {
+		width: 10000px;
+		padding: 15px;
+		vertical-align: middle;
+	}
+
+	@media all and (max-width: 240px) {
+
+		& {
+			padding: 8px;
+			width: 11em;
+		}
+
+		& .toast-close-button {
+			right: -.2em;
+			top: -.2em;
+		}
+	}
+
+	@media all and (min-width: 241px) and (max-width: 480px) {
+
+		& {
+			width: 18em;
+
+			.toast-content {
+				padding: 8px;
+			}
+		}
+
+		& .toast-close-button {
+			right: -.2em;
+			top: -.2em;
+		}
+	}
+
+	@media all and (min-width: 481px) and (max-width: 768px) {
+
+		& {
+			width: 25em;
+
+			.toast-content {
+				padding: 15px;
+			}
+		}
+	}
+}
+
+// -------------------------------------
+//   Modifiers
+// -------------------------------------
+
+.toast-success,
+.toast.success {
+	background-color: #51a351;
+}
+
+.toast-error,
+.toast.error {
+	background-color: #bd362f;
+}
+
+.toast-warning,
+.toast.warning {
+	background-color: #f89406;
+}
+
+// -------------------------------------
+//   Elements
+// -------------------------------------
+
+.toast-title {
+	font-weight: bold;
+}
+
+.toast-message {
+	-ms-word-wrap: break-word;
+	word-wrap: break-word;
+}
+
+.toast-message a,
+.toast-message label {
+	color: #ffffff;
+
+	&:hover {
+		color: #cccccc;
+		text-decoration: none;
+	}
+}
+
+.toast-actions {
+	position: relative;
+	text-align: center;
+	vertical-align: middle;
+
+	.btn, > * {
+		display: table-row;
+		display: block;
+		padding: 7px 14px 7px 16px;
+		min-height: 44px;
+		line-height: 44px;
+
+		&,
+		&:hover,
+		&:active,
+		&:focus,
+		&:visited {
+			border: 0;
+			background-color: transparent;
+			color: #ffffff;
+			text-decoration: none;
+			cursor: pointer;
+		}
+
+		&::before {
+			content: '';
+			display: block;
+			position: absolute;
+			z-index: -1;
+			top: 0;
+			bottom: 0;
+			left: 0;
+			right: 0;
+			border: 1px solid rgba(255,255,255, .32);
+			border-top-width: 0;
+			border-right-width: 0;
+			border-bottom-width: 0;
+		}
+
+		&:first-child::before {
+			bottom: 50%;
+		}
+
+		&:last-child::before {
+			top: 50%;
+			border-top-width: 1px;
+		}
+
+		&:only-child::before {
+			top: 0;
+			bottom: 0;
+			border-top-width: 0;
+		}
+
+		&:hover::before {
+			background-color: rgba(255,255,255, .12);
+		}
+	}
+}
+
+.toast-close-button {
+	position: relative;
+	right: -.3em;
+	top: -.3em;
+	float: right;
+	font-size: 20px;
+	font-weight: bold;
+	color: #ffffff;
+	-webkit-text-shadow: 0 1px 0 #ffffff;
+	text-shadow: 0 1px 0 #ffffff;
+	opacity: .8;
+	-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
+	filter: alpha(opacity=80);
+
+	&:hover,
+	&:focus {
+		color: #000000;
+		text-decoration: none;
+		cursor: pointer;
+		opacity: .4;
+		-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
+		filter: alpha(opacity=40);
+	}
+}
+
+button.toast-close-button {
+	padding: 0;
+	cursor: pointer;
+	background: transparent;
+	border: 0;
+	-webkit-appearance: none;
+}
+
+.toast-progress {
+	position: absolute;
+	left: 0;
+	bottom: 0;
+	height: 4px;
+	background-color: #000000;
+	opacity: .4;
+	-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
+	filter: alpha(opacity=40);
+}
+
+// -------------------------------------
+//   Container Position
+// -------------------------------------
+
+#toast-container {
+	position: fixed;
+	z-index: 999999;
+
+	> * {
+		margin-bottom: 12px;
+	}
+
+	&.toast-top-center {
+		top: 0;
+		right: 0;
+		width: 100%;
+	}
+
+	&.toast-bottom-center {
+		right: 0;
+		bottom: 0;
+		width: 100%;
+	}
+
+	&.toast-top-full-width {
+		top: 0;
+		right: 0;
+		width: 100%;
+	}
+
+	&.toast-bottom-full-width {
+		right: 0;
+		bottom: 0;
+		width: 100%;
+	}
+
+	&.toast-top-left {
+		top: 12px;
+		left: 12px;
+	}
+
+	&.toast-top-right {
+		top: 12px;
+		right: 12px;
+	}
+
+	&.toast-bottom-right {
+		right: 12px;
+		bottom: 12px;
+	}
+
+	&.toast-bottom-left {
+		bottom: 12px;
+		left: 12px;
+	}
+
+	&.toast-top-center > div,
+	&.toast-bottom-center > div {
+		width: 300px;
+		margin-left: auto;
+		margin-right: auto;
+	}
+
+	&.toast-top-full-width > div,
+	&.toast-bottom-full-width > div {
+		width: 96%;
+		margin-left: auto;
+		margin-right: auto;
+	}
+}
+
+
+// -------------------------------------
+//   Icons
+// -------------------------------------
+
+.toast-error,
+.toast.error {
+	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHOSURBVEhLrZa/SgNBEMZzh0WKCClSCKaIYOED+AAKeQQLG8HWztLCImBrYadgIdY+gIKNYkBFSwu7CAoqCgkkoGBI/E28PdbLZmeDLgzZzcx83/zZ2SSXC1j9fr+I1Hq93g2yxH4iwM1vkoBWAdxCmpzTxfkN2RcyZNaHFIkSo10+8kgxkXIURV5HGxTmFuc75B2RfQkpxHG8aAgaAFa0tAHqYFfQ7Iwe2yhODk8+J4C7yAoRTWI3w/4klGRgR4lO7Rpn9+gvMyWp+uxFh8+H+ARlgN1nJuJuQAYvNkEnwGFck18Er4q3egEc/oO+mhLdKgRyhdNFiacC0rlOCbhNVz4H9FnAYgDBvU3QIioZlJFLJtsoHYRDfiZoUyIxqCtRpVlANq0EU4dApjrtgezPFad5S19Wgjkc0hNVnuF4HjVA6C7QrSIbylB+oZe3aHgBsqlNqKYH48jXyJKMuAbiyVJ8KzaB3eRc0pg9VwQ4niFryI68qiOi3AbjwdsfnAtk0bCjTLJKr6mrD9g8iq/S/B81hguOMlQTnVyG40wAcjnmgsCNESDrjme7wfftP4P7SP4N3CJZdvzoNyGq2c/HWOXJGsvVg+RA/k2MC/wN6I2YA2Pt8GkAAAAASUVORK5CYII=") !important;
+
+	.toast-content {
+		padding-left: 50px;
+	}
+}
+.toast-success,
+.toast.success {
+	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==") !important;
+
+	.toast-content {
+		padding-left: 50px;
+	}
+}
+.toast-warning,
+.toast.warning {
+	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGYSURBVEhL5ZSvTsNQFMbXZGICMYGYmJhAQIJAICYQPAACiSDB8AiICQQJT4CqQEwgJvYASAQCiZiYmJhAIBATCARJy+9rTsldd8sKu1M0+dLb057v6/lbq/2rK0mS/TRNj9cWNAKPYIJII7gIxCcQ51cvqID+GIEX8ASG4B1bK5gIZFeQfoJdEXOfgX4QAQg7kH2A65yQ87lyxb27sggkAzAuFhbbg1K2kgCkB1bVwyIR9m2L7PRPIhDUIXgGtyKw575yz3lTNs6X4JXnjV+LKM/m3MydnTbtOKIjtz6VhCBq4vSm3ncdrD2lk0VgUXSVKjVDJXJzijW1RQdsU7F77He8u68koNZTz8Oz5yGa6J3H3lZ0xYgXBK2QymlWWA+RWnYhskLBv2vmE+hBMCtbA7KX5drWyRT/2JsqZ2IvfB9Y4bWDNMFbJRFmC9E74SoS0CqulwjkC0+5bpcV1CZ8NMej4pjy0U+doDQsGyo1hzVJttIjhQ7GnBtRFN1UarUlH8F3xict+HY07rEzoUGPlWcjRFRr4/gChZgc3ZL2d8oAAAAASUVORK5CYII=") !important;
+
+	.toast-content {
+		padding-left: 50px;
+	}
+}