compass-helium 0.0.1

data/stylesheets/compass-helium/grid.scss

@@ -0,0 +1,113 @@
+// ! Border-box sizing
+// -----------------
+
+* {
+	@include box-sizing(border-box);
+}
+
+// ! Containers
+// ------------
+
+img {
+	display: block;
+	max-width: 100%;
+}
+
+.container {
+	@include clearfix();
+	width: $page-width + ($column-gutter * 2);
+	padding: 0 $column-gutter;
+	margin: 0 auto;
+}
+
+.responsive {
+	.container {
+		
+		width: auto;	
+		max-width: $page-width + ($column-gutter * 2);
+		
+		@include respond-to(tablet) {
+			margin: 0;
+			padding: 0 $tablet-padding;
+		}
+	
+		@include respond-to(mobile) {
+			margin: 0;
+			padding: 0 $mobile-padding;
+		}
+	}
+}
+
+// ! Rows
+// ------
+
+.row {
+	@include clearfix();
+	margin-left: -($column-gutter / 2);
+	margin-right: -($column-gutter / 2);
+}
+
+
+@include respond-to(mobile) {
+	.responsive {
+		.row {
+			margin-left: 0;
+			margin-right: 0;
+		}
+	}
+}
+
+// ! Form field rows
+// -----------------
+
+.field-row {
+	@include clearfix();
+	margin-left: - ($form-input-gutter / 2);
+	margin-right: - ($form-input-gutter / 2);
+
+	[class*="span"] {
+		padding: 0 $form-input-gutter / 2;			
+	}	
+}
+
+@include respond-to(mobile) {
+	.responsive {
+		.field-row{
+			margin-left: 0;
+			margin-right: 0;
+			
+			[class*="span"] {
+				padding-left: 0;
+				padding-right: 0;			
+			}			
+		}
+	}
+}
+
+// ! Columns
+// ---------
+
+[class*="span"] {
+	float: left;
+	min-height: 1px;
+	padding: 0 $column-gutter / 2;
+	
+	&:last-child {
+		float: right;
+	}
+}
+
+.responsive {
+	[class*="span"] {
+		@include respond-to(mobile) {
+			float: none;
+			width: 100%;
+			padding-left: 0;
+			padding-right: 0;
+		}
+	}
+}
+
+@for $i from 1 through $column-count {
+  .span#{$i} { width: ($i / $column-count) * 100% ; }
+}

data/stylesheets/compass-helium/master.scss

@@ -0,0 +1,17 @@
+// Compass files first
+@import "compass/css3";
+@import "compass/reset";
+
+// Import core files in this order
+@import "config.scss";
+@import "utilities.scss";
+@import "grid.scss";
+@import "type.scss";
+
+// Optional components
+@import "webfonts.scss";
+@import "forms.scss";
+@import "buttons.scss";
+@import "navs.scss";
+@import "dropdowns.scss";
+@import "modals.scss";

data/stylesheets/compass-helium/modals.scss

@@ -0,0 +1,159 @@
+//
+// Modals
+// --------------------------------------------------
+
+.modal-active {
+	max-height: 100%;
+	overflow: hidden;
+}
+
+// Background
+.modal-backdrop {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 5000;
+  background-color: #000;
+  // Fade for backdrop
+  &.fade { opacity: 0; }
+}
+
+.modal-backdrop,
+.modal-backdrop.fade.in {
+  opacity: 0.8;
+}
+
+// Base modal
+.modal {
+	position: fixed;
+	z-index: 10000;
+	outline: none;
+	left: 50%;
+	width: $modal-width;
+	margin: 0 0 0 #{- $modal-width / 2};
+  
+	&.fade {
+  		@include transition(all 0.3s);
+    	top: -25%;
+    }
+    
+    &.fade.in {
+    	top: 35%;
+    }
+    
+    .modal-inner {
+	    width: $modal-width;
+	    background: $site-background-color;
+	    @include border-radius($big-border-radius);
+	    @include box-shadow(0px 10px 10px rgba(0,0,0,0.5));
+    }   
+    
+    .modal-section {
+    	position: relative;
+	    padding: $base-font-size $modal-padding;
+	    border-bottom: 1px solid rgba(0,0,0,0.1);
+	    
+	    &:first-child {
+		    @include border-radius($big-border-radius $big-border-radius 0 0);
+		    padding-top: $modal-padding;
+	    }
+	    
+	    &:last-child {
+		    @include border-radius(0 0 $big-border-radius $big-border-radius);
+		    padding-bottom: $modal-padding;
+		    border-bottom: none;
+	    }
+	    
+	    & > *:last-child {
+		    margin-bottom: 0;
+	    }
+	    
+	    .or-divider {
+		    position: absolute;
+		    top: - $base-line-height / 2;
+		    left: 50%;
+		    width: 2.5em;
+		    margin-left: -1.25em;
+		    background: $site-background-color;
+		    color: $muted-font-color;
+		    font-size: 11px;
+		    font-weight: bold;
+		    text-align: center;
+		    text-transform: uppercase;
+	    }
+    }
+    
+    .modal-footer {
+	    background-color: darken($site-background-color, 5%);
+    }
+}
+
+.hide {
+	display: none;
+}
+
+.fade {
+  opacity: 0;
+  -webkit-transition: opacity 0.15s linear;
+     -moz-transition: opacity 0.15s linear;
+       -o-transition: opacity 0.15s linear;
+          transition: opacity 0.15s linear;
+}
+
+.fade.in {
+  opacity: 1;
+}
+
+@media screen and (max-width: 767px) {
+
+	.modal {
+		width: 100%;
+		height: 100%;
+		top: 0;
+		left: 0;
+		margin: 0;
+		padding: $modal-padding;
+		overflow-y: auto;
+		
+		&.fade.in {
+			top: 0;
+		}
+		
+		.modal-inner {
+			width: auto;
+			max-width: $modal-width;
+			margin: 0 auto 20px auto;
+		}
+	}
+}
+
+.close {
+  position: absolute;
+  top: $modal-padding - 3;
+  right: $modal-padding;
+  font-size: 20px;
+  font-weight: bold;
+  line-height: 20px;
+  color: #000000;
+  text-shadow: 0 1px 0 #ffffff;
+  opacity: 0.2;
+  filter: alpha(opacity=20);
+}
+
+.close:hover {
+  color: #000000;
+  text-decoration: none;
+  cursor: pointer;
+  opacity: 0.4;
+  filter: alpha(opacity=40);
+}
+
+button.close {
+  padding: 0;
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  -webkit-appearance: none;
+}

data/stylesheets/compass-helium/navs.scss

@@ -0,0 +1,264 @@
+// Navbar
+// ------
+
+.top-bar {
+	
+	@include background-image(
+		linear-gradient(
+			top, 
+			lighten($navbar-background-color, 3%) 0px, 
+			darken($navbar-background-color, 3%) 100%
+		)
+	);
+	@include box-shadow(0px 1px 2px rgba(0,0,0,0.3));
+	
+	#nav-branding {
+		a {
+			display: block;
+			height: $navbar-height;
+			padding: ($navbar-height - $navbar-branding-font-size) / 2 0;
+			padding-right: $base-font-size;
+			color: $navbar-link-color;
+			font-size: $navbar-branding-font-size;
+			font-weight: bold;
+			line-height: 1;
+			
+			&:hover {
+				text-decoration: none;
+			}
+		}
+	}
+
+	.top-bar-links {
+		@include list-reset();
+		@include list-horizontal();
+		margin: 0;
+		
+		> li {
+			
+			> a {
+				display: block;
+				height: $navbar-height;
+				padding: ($navbar-height - $navbar-link-font-size) / 2 $navbar-link-horizontal-padding;
+				color: $navbar-link-color;
+				font-size: $navbar-link-font-size;
+				line-height: 1;
+				
+				&:hover {
+					background-color: darken($navbar-background-color, 10%);
+					text-decoration: none;
+				}
+				
+				&:focus {
+					outline: none;
+				}
+			}
+			
+			&.active {
+				a {
+					background-color: darken($navbar-background-color, 10%);
+				}
+			}
+			
+			&.has-dropdown {
+				> a {
+
+					padding-right: ($navbar-link-horizontal-padding * 1.5) + ($navbar-caret-height * 2);
+
+					.caret {
+						display: block;
+						position: absolute;
+						top: 0;
+						right: $navbar-link-horizontal-padding;
+						width: $navbar-caret-height * 2;
+						height: $navbar-height;
+						
+						&:after {
+							@include css-triangle($navbar-caret-height, $navbar-link-color, top);
+							position: absolute;
+							top: 50%;
+							left: 0;
+							margin-top: -1px;
+						}
+					}
+				}
+				
+				.dropdown {
+					border-top: 0;
+				}
+				
+				&.open {
+					> a {
+						.caret {
+							&:after {
+								@include css-triangle($navbar-caret-height, $base-font-color, top);
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+	
+	.button {
+		margin-top: ($navbar-height - $button-height) / 2;
+		
+		@include button-custom(
+			$theme: $button-theme, 
+			$background-color: lighten($navbar-background-color, 5%), 
+			$text-color: #fff, 
+			$reversed: true	
+		);
+	}
+}
+
+// ! Top bar fixed to top of viewport
+// ----------------------------------
+
+.fixed-top-bar { // Goes on the body
+	
+	padding-top: $navbar-height;
+	
+	.top-bar {
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 100%;
+		z-index: 5000;		
+	}
+}
+
+// ! Responsive top bar
+// --------------------
+
+@include respond-to(mobile) {
+	
+	#nav-collapse {
+		display: none;
+		position: absolute;
+		top: $navbar-height + 10px;
+		right: $mobile-padding;
+		min-width: 10em;
+		background: #fff;
+		border: 1px solid $border-color;
+		@include border-radius($big-border-radius);
+		@include box-shadow(0px 2px 8px rgba(0,0,0,0.2));
+	}
+	
+	#nav-auth {
+		display: none;
+	}
+	
+	#nav-site {
+		float: none;
+	}
+	
+	.top-bar {
+	
+		.top-bar-links {
+			padding: $tu * 2 0;
+			
+			> li {
+				float: none;
+				
+				> a {
+					height: $mobile-nav-link-height;
+					padding: ($mobile-nav-link-height - $mobile-nav-link-font-size) / 2 $base-font-size;
+					color: $base-font-color;
+					
+					&:hover {
+						background: $blue;
+						color: #fff;
+					}
+				}
+				
+				&.active {
+					> a {
+						background: $blue;
+						color: #fff;
+						
+						&:after {
+							display: none;
+						}
+					}
+				}
+				
+				&:first-child {
+					> a {
+						border-top-color: transparent;
+					}
+				}
+				
+				&.has-dropdown {
+					> a {
+						.caret {
+							display: none;
+						}
+					}
+				}
+			}
+		}
+	}
+	
+	.open {
+		#nav-collapse {
+			display: block;
+		}
+	}
+}
+
+// ! Tabs
+// ------
+
+.tabs {
+	margin-left: 0;
+	@include clearfix();
+	border-bottom: 1px solid $border-color;
+
+	> li {
+		display: block;
+		float: left;
+		margin: 0 5px -1px 0;
+		list-style-type: none;
+		
+		&:first-child {
+			margin-left: $column-gutter / 2;
+		}
+
+		> a {
+			@include border-radius($big-border-radius $big-border-radius 0 0);
+			@include background-image(
+				linear-gradient(
+					top,
+					$site-background-color 0px,
+					darken($site-background-color, 3%) 100%
+				)
+			);
+			border: 1px solid $border-color;
+			display: block;
+			padding: (40px - 2 - $base-font-size) / 2;
+			color: $base-font-color;
+			font-size: $base-font-size;
+			line-height: 1;
+			text-decoration: none;
+		}
+		
+		&:not(.active):hover {
+			> a {
+				background: darken($site-background-color, 3%);
+			}
+		}
+
+		&.active {
+			> a {
+				background: none;
+				border-color: $border-color $border-color $site-background-color $border-color;
+				color: $muted-font-color;
+				
+				&:hover {
+					text-decoration: none;
+				}
+			}
+		}
+	}
+}