compass-helium 0.0.1

data/stylesheets/compass-helium/components.scss

@@ -0,0 +1,109 @@
+// Progress indicator
+// ------------------
+
+$progress-indicator-step-diameter: 36px;
+$progress-indicator-connector-height: 14px;
+$progress-indicator-fill-padding: 4px;
+
+.progress-indicator {
+	
+	@include list-reset();
+	text-align: center;
+	font-size: 0;
+	
+	.step {
+		display: inline-block;
+		position: relative;
+		width: 16%;
+		
+		a {
+			&:hover {
+				text-decoration: none;
+			}
+		}
+		
+		.step-number {
+			display: block;
+			width: $progress-indicator-step-diameter;
+			height: $progress-indicator-step-diameter;
+			margin: 0 auto;
+			padding: $progress-indicator-fill-padding;
+			background: #ccc;
+			
+			@include border-radius(100px);
+			
+			.fill {
+				display: block;
+				position: relative;
+				z-index: 2;
+				width: $progress-indicator-step-diameter - ($progress-indicator-fill-padding * 2);
+				height: $progress-indicator-step-diameter - ($progress-indicator-fill-padding * 2);
+
+				@include border-radius(100px);
+				
+				font-size: 16px;
+				line-height: $progress-indicator-step-diameter - ($progress-indicator-fill-padding * 2);
+				
+
+			}
+		}
+		
+		.step-title {
+			color: $muted-font-color;
+			font-size: 12px;
+		}
+		
+		.step-connector {
+			display: block;
+			position: absolute;
+			top: ($progress-indicator-step-diameter / 2) - ($progress-indicator-connector-height / 2);
+			left: 50%;
+			width: 100%;
+			height: $progress-indicator-connector-height;
+			padding: $progress-indicator-fill-padding 0;
+			background: #ccc;
+		}
+		
+		&.completed {
+			
+			.step-number {
+				.fill {
+					background: $link-color;
+					color: #fff;
+				}
+			}
+			
+			.step-connector {
+				.fill {
+					display: block;
+					position: relative;
+					z-index: 1;
+					height: $progress-indicator-connector-height - ($progress-indicator-fill-padding * 2);
+					background: $link-color;
+				}
+			}
+		}
+		
+		&.current {
+			.step-number {
+				padding: 0;
+				background: none;
+				
+				.fill {
+					width: $progress-indicator-step-diameter;
+					height: $progress-indicator-step-diameter;
+					background: $link-color;
+					color: #fff;
+					font-size: 18px;
+					line-height: $progress-indicator-step-diameter;					
+				}
+			}
+		}
+		
+		&:last-child {
+			.step-connector {
+				display: none;
+			}
+		}
+	}
+}

data/stylesheets/compass-helium/config.scss

@@ -0,0 +1,134 @@
+// Colors
+// ------
+
+$gray-light: #999 !default;
+$gray: #444 !default;
+$gray-dark: #222 !default;
+$blue: #006699 !default;
+$facebook-blue: #3B5998 !default;
+$twitter-blue: #00ACED !default;
+$red-dark: #A01D2B !default;
+
+
+// Grid
+// -----
+
+$page-width: 940px !default;
+$column-count: 12 !default;
+$column-gutter: 20px !default;
+$responsive-breakpoint: 767px !default;
+$mobile-padding: 15px !default; // Distance from content to edge of screen on mobile
+$tablet-padding: 20px !default; // Distance from content to edge of screen on tablet
+
+// Typography
+// ----------
+
+$base-font-color : $gray !default;
+$muted-font-color : $gray-light !default;
+$base-font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif !default;
+$base-font-size : 14px !default;
+$base-line-height : 21px !default;
+$small-font-size : 12px !default;
+$small-line-height : 18px !default;
+$heading-font-family : $base-font-family !default;
+$heading-font-weight: 600 !default;
+$heading-color : $gray-dark !default;
+$icon-size: 20px !default;
+
+// Links
+// -----
+
+$link-color : $blue !default;
+
+// Miscellaneous UI
+// ----------------
+
+$site-background-color: #fafafa !default;
+$big-border-radius: 4px !default;
+$small-border-radius: 4px !default;
+$border-color: rgba(0,0,0,0.13) !default;
+$box-shadow: 0px 1px 1px rgba(0,0,0,0.08) !default;
+
+// Buttons
+// -------
+
+$button-theme: glossy !default; // Required - can take values of glossy or flat
+$button-height: 32px !default; // Total height of normal size button
+$button-caret-height: 4px !default;
+$button-font-color: $base-font-color !default;
+$button-font-family: $heading-font-family !default;
+$button-font-size: 12px !default;
+$button-font-weight: 600 !default;
+$button-icon-size: 16px !default;
+$button-solid-background: #e0e0e0 !default; // Solid color for flat buttons and fallback
+$button-highlight: #fbfbfb !default; // Top gradient stop for glossy theme
+$button-lowlight: darken($button-highlight, 6%) !default; // Bottom gradient stop for glossy theme
+$button-border-color: rgba(0,0,0,0.2) !default; // Border color - ignored when theme is flat, highly recommended to keep this as an alpha value of black
+$button-border-width: 1px !default; // Border width - ignored when theme is flat
+$button-shine: #fff !default; // 1px shine at top of button and inset text - ignored when theme is flat
+$button-horizontal-padding: $button-font-size !default;
+$button-border-radius: $small-border-radius !default;
+$button-box-shadow: 0px 1px 1px rgba(0,0,0,0.08) !default;
+$button-large-height: 40px !default;
+$button-large-font-size: 16px !default;
+$button-large-horizontal-padding: 20px !default;
+$button-small-height: 24px !default;
+$button-small-font-size: 11px !default;
+$button-small-horizontal-padding: 11px !default;
+
+// Navbar
+// ------
+
+$navbar-background-color: $gray-dark !default;
+$navbar-height: 50px !default;
+$navbar-highlight: #99191C !default;
+$navbar-lowlight: #6A111A !default;
+$navbar-link-font-size: 14px !default;
+$navbar-link-color: #fff !default;
+$navbar-branding-font-size: 18px !default;
+$navbar-caret-height: 5px !default;
+$navbar-link-horizontal-padding: $navbar-link-font-size !default;
+
+$vertical-nav-link-font-size: 16px !default;
+$vertical-nav-link-height: 32px !default;
+
+$mobile-nav-link-font-size: $base-font-size !default;
+$mobile-nav-link-height: 30px !default;
+
+// Dropdowns
+// ---------
+
+$dropdown-background: #fff !default;
+$dropdown-link-font-size: $base-font-size !default;
+$dropdown-link-height: 24px !default;
+$dropdown-caret-height: 5px !default;
+$dropdown-box-shadow: 0px 1px 2px rgba(0,0,0,0.2) !default;
+
+// Forms
+// -----
+
+$form-input-height: 30px !default;
+$form-input-gutter: 20px !default;
+$form-transition-duration: 0.2s !default;
+$input-border-radius: 2px !default;
+$placeholder-color: $muted-font-color !default;
+$placeholder-focus-color: lighten($muted-font-color, 15%) !default;
+$radio-checkbox-input-height: 13px !default;
+$radio-checkbox-item-height: $base-font-size * 2 !default;
+$radio-checkbox-font-size: $base-font-size !default;
+$radio-checkbox-line-height: $base-line-height !default;
+$single-checkbox-font-size: $small-font-size !default;
+$error-color: $red-dark !default;
+
+// Modals
+// ------
+
+$modal-padding: 20px !default;
+$modal-width: 400px !default;
+
+// Sprites
+// -------
+
+$sprite-color-size: 300px 300px !default;
+$sprite-icons-white-size: 300px 300px !default;
+$sprite-icons-black-size: 300px 300px !default;

data/stylesheets/compass-helium/dropdowns.scss

@@ -0,0 +1,94 @@
+// Generic dropdown styles
+// -----------------------
+
+.has-dropdown {
+	position: relative; // for positioning of dropdown
+	
+	> a {
+		position: relative; // for positioning of caret
+	}
+	
+	&.open > a {
+		background: $dropdown-background !important;
+		color: $base-font-color !important;
+		
+		&:after {
+			@include pseudo();
+			width: 100%;
+			height: 6px;
+			background: $dropdown-background;
+			bottom: -4px;
+			left: 0px;
+			z-index: 2;
+		}
+	}
+	
+	.dropdown {  // dropdown menu styles
+		
+		@include border-radius(0 0 $small-border-radius $small-border-radius);
+		
+		@if $button-theme == "glossy" {
+			@include box-shadow($dropdown-box-shadow);
+		}
+		
+		visibility: hidden;
+		position: absolute;
+		left: -1px;
+		top: 100%;
+		min-width: 160px;
+		margin: 0;
+		padding: $base-font-size - (($dropdown-link-height - $dropdown-link-font-size) / 2) 0;
+		background: $dropdown-background;
+		background-clip: border-box;
+		border: $button-border-width solid $button-border-color;
+		line-height: 1;
+		z-index: 1;
+
+		&.right { // Align dropdown with right edge of parent item
+			float: none;
+			left: auto;
+			right: -1px;
+		}
+		
+		> li {
+			display: block;
+			margin: 0;
+			padding: 0;
+			
+			> a {
+				position: relative;		
+				display: block;
+				padding: ($dropdown-link-height - $dropdown-link-font-size) / 2 $base-font-size;
+				font-size: $dropdown-link-font-size;
+				text-decoration: none;
+				white-space: nowrap;
+				
+				&:hover {
+					background-color: $link-color;
+					color: #fff;
+				}
+			}
+		}
+		
+		.divider {
+			border-top: 1px solid $border-color;
+			margin: $base-font-size - (($dropdown-link-height - $dropdown-link-font-size) / 2) 0;
+		}
+		
+		.section-title {
+			padding: ($dropdown-link-height - $dropdown-link-font-size) / 2 $base-font-size;
+			color: $muted-font-color;
+			font-size: 11px;
+			font-weight: bold;
+			text-transform: uppercase;
+			cursor: default;
+		}
+
+	}
+	
+	&.open {		
+		.dropdown {
+			visibility: visible;
+		}
+	}
+}

data/stylesheets/compass-helium/forms.scss

@@ -0,0 +1,272 @@
+// Forms
+// -----
+
+label,
+input,
+textarea {
+	color: $base-font-color;
+	font-size: $base-font-size;
+	font-family: $base-font-family;
+	font-weight: normal;
+}
+
+// Basic form layouts
+// ------------------
+
+.field-group {
+	margin-bottom: $base-font-size;
+	
+	.field-label {
+		display: block;
+		color: $gray-dark;
+	}
+	
+	.field-instructions {
+		float: none;
+		clear: both;
+		color: $muted-font-color;
+		font-size: $small-font-size;
+		
+		a {
+			color: $muted-font-color;
+			text-decoration: underline;
+		}
+	}
+}
+
+.input-inline {
+	display: inline-block;
+	height: $form-input-height;
+	line-height: $form-input-height;
+}
+
+.multi-field {
+	
+	@include clearfix();
+	
+	input, .input-inline {
+		float: left;
+		margin-right: ($base-font-size / 2) - 2;
+	}
+}
+
+// Left-aligned labels
+// -------------------
+
+
+@media screen and (min-width: $responsive-breakpoint) {
+
+	.labels-left {
+		
+		.field-group {
+			@include clearfix();
+		}
+	
+		.field-label {
+			position: relative;
+			left: $form-input-gutter / 2;
+			line-height: $base-font-size + 2;
+			padding: ($form-input-height - ($base-font-size + 2)) / 2 0;
+			text-align: right;
+		}
+	}
+}
+
+// Text fields and textareas
+// -------------------------
+
+textarea,
+input[type="text"],
+input[type="password"],
+input[type="datetime"],
+input[type="datetime-local"],
+input[type="date"],
+input[type="month"],
+input[type="time"],
+input[type="week"],
+input[type="number"],
+input[type="email"],
+input[type="url"],
+input[type="search"],
+input[type="tel"],
+input[type="color"] {
+	
+	@include border-radius($input-border-radius);
+	@include box-shadow(inset 0px 1px 0px rgba(0,0,0,0.06));
+
+	display: inline-block;
+	height: $form-input-height;
+	width: 100%;
+	max-width: 100%;
+	padding: 0 $base-font-size / 2;
+	border: 1px solid rgba(0,0,0,0.25);
+
+	outline: none;
+	-webkit-appearance: none;
+	
+	&:focus {
+		border-color: $link-color;
+		@include box-shadow(0px 0px 3px rgba($link-color, 0.3));	
+	}
+}
+
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+    /* display: none; <- Crashes Chrome on hover */
+    -webkit-appearance: none;
+    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
+}
+
+textarea {
+	height: auto;
+	min-width: 100%;
+	min-height: $form-input-height;
+	padding: $base-font-size / 2;
+}
+
+@for $i from 1 through 10 {
+  input.char#{$i} { width: ($i * ($base-font-size * 0.75)) + $base-font-size ; }
+}
+
+// Special positioning for select
+// ------------------------------
+
+.select-holder {
+	height: $form-input-height;
+	display: table-cell;
+	vertical-align: middle;
+}
+
+// Placeholders
+// ------------
+
+::-webkit-input-placeholder {
+	color: $placeholder-color; 
+	@include transition($form-transition-duration all);
+}
+
+:-moz-placeholder {
+	color: $placeholder-color;
+	@include transition($form-transition-duration all);
+}
+
+::-webkit-input-placeholder:focus {
+	color: $placeholder-focus-color;
+}
+
+:-moz-placeholder:focus {  
+	color: $placeholder-focus-color;
+}
+
+// Radio and checkbox
+// ------------------
+
+input[type=radio],
+input[type=checkbox] {
+	margin: 0;
+	cursor: pointer;
+}
+
+// Radio and checkbox lists
+// ------------------------
+
+.radio-checkbox-list {
+	@include list-reset();
+	margin-bottom: 0;
+		
+	> li {
+		padding: ($radio-checkbox-item-height - $radio-checkbox-line-height) / 2 0;
+	}
+
+	input[type=radio],
+	input[type=checkbox] {
+		display: block;
+		position: absolute;
+		top: ($radio-checkbox-line-height - $radio-checkbox-input-height) / 2;
+		left: 0px;
+	}
+	
+	label {
+		display: block;
+		position: relative;
+		padding-left: $radio-checkbox-input-height * 1.61;
+		cursor: pointer;
+	}
+	
+	.error-message {
+		margin-left: $radio-checkbox-input-height * 1.61;
+	}
+}
+
+// Single checkboxes
+// -----------------
+
+.single-checkbox {
+	display: block;
+	position: relative;
+	padding: ($base-line-height - ($single-checkbox-font-size * 1.2)) / 2 0 ($base-line-height - ($single-checkbox-font-size * 1.2)) / 2 $radio-checkbox-input-height * 1.61;
+	font-size: $single-checkbox-font-size;
+	line-height: 1.2;
+	cursor: pointer;
+
+	input[type=radio],
+	input[type=checkbox] {
+		display: block;
+		position: absolute;
+		top: ($base-line-height - $radio-checkbox-input-height) / 2;
+		left: 0px;
+	}
+	
+	a {
+		text-decoration: underline;
+	}
+}
+
+// Buttons 
+// -------
+
+button {
+	margin: 0;
+	font-size: 100%;
+	vertical-align: middle;
+//	*overflow: visible; // Inner spacing ie IE6/7
+//	line-height: normal !important; // FF3/4 have !important on line-height in UA stylesheet
+}
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  padding: 0;
+  border: 0;
+}
+
+// Errors
+// ------
+
+.error {
+	label {
+		color: $error-color;
+	}
+	
+	input {
+		border-color: $error-color;
+	}
+	.error-message {
+		@include border-radius($input-border-radius);
+		
+		display: inline-block;
+		position: relative;
+		margin-top: $base-font-size / 2;
+		padding: $base-font-size / 2;
+		background: $error-color;
+		color: #fff;
+		font-size: $small-font-size;
+		line-height: $small-font-size;
+		
+		&:after {
+			position: absolute;
+			top: -12px;
+			left: 10px;
+			@include css-triangle(6px, $error-color, bottom)
+		}
+	}
+}