bandshell 0.0.21 → 0.8

data/lib/bandshell/application/public/stylesheets/sass/common/mixins.scss

@@ -0,0 +1,284 @@
+// Border Radius
+@mixin border-radius($radius: 5px) {
+  -webkit-border-radius: $radius;
+     -moz-border-radius: $radius;
+          border-radius: $radius;
+}
+
+// Drop shadows
+@mixin box-shadow($shadow: 0 1px 3px rgba(0,0,0,.25)) {
+  -webkit-box-shadow: $shadow;
+     -moz-box-shadow: $shadow;
+          box-shadow: $shadow;
+}
+
+@mixin no-box-shadow {
+  box-shadow: 0 0 0;
+  -moz-box-shadow: 0 0 0;
+  -webkit-box-shadow: 0 0 0;
+}
+
+
+// Clearfix for clearing floats like a boss h5bp.com/q
+@mixin clearfix {
+  zoom: 1;
+  &:before,
+  &:after {
+    display: table;
+    content: "";
+    zoom: 1;
+    *display: inline;
+  }
+  &:after {
+    clear: both;
+  }
+}
+.clearfix { @include clearfix; }
+
+
+// Gradients
+@mixin horizontal-gradient ($startColor: #555, $endColor: #333) {
+  background-color: $endColor;
+  background-repeat: repeat-x;
+  background-image: -khtml-gradient(linear, left top, right top, from($startColor), to($endColor)); // Konqueror
+  background-image: -moz-linear-gradient(left, $startColor, $endColor); // FF 3.6+
+  background-image: -ms-linear-gradient(left, $startColor, $endColor); // IE10
+  background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, $startColor), color-stop(100%, $endColor)); // Safari 4+, Chrome 2+
+  background-image: -webkit-linear-gradient(left, $startColor, $endColor); // Safari 5.1+, Chrome 10+
+  background-image: -o-linear-gradient(left, $startColor, $endColor); // Opera 11.10
+  background-image: linear-gradient(left, $startColor, $endColor); // Le standard
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$startColor}', endColorstr='#{$endColor}', GradientType=1); // IE9 and down
+}
+
+@mixin vertical-gradient ($startColor: #555, $endColor: #333) {
+  background-color: $endColor;
+  background-repeat: repeat-x;
+  background-image: -khtml-gradient(linear, left top, left bottom, from($startColor), to($endColor)); // Konqueror
+  background-image: -moz-linear-gradient(top, $startColor, $endColor); // FF 3.6+
+  background-image: -ms-linear-gradient(top, $startColor, $endColor); // IE10
+  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, $startColor), color-stop(100%, $endColor)); // Safari 4+, Chrome 2+
+  background-image: -webkit-linear-gradient(top, $startColor, $endColor); // Safari 5.1+, Chrome 10+
+  background-image: -o-linear-gradient(top, $startColor, $endColor); // Opera 11.10
+  background-image: linear-gradient(top, $startColor, $endColor); // The standard
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$startColor}', endColorstr='#{$endColor}', GradientType=0); // IE9 and down
+}
+
+// Transitions
+@mixin transition($transition) {
+  -webkit-transition: $transition;
+     -moz-transition: $transition;
+      -ms-transition: $transition;
+       -o-transition: $transition;
+          transition: $transition;
+}
+
+// Opacity
+@mixin opacity($opacity: 100) {
+  filter: alpha(opacity=$opacity);
+  -khtml-opacity: $opacity / 100;
+    -moz-opacity: $opacity / 100;
+         opacity: $opacity / 100;
+}
+
+// Box sizing
+@mixin box-sizing($boxmodel) {
+  -webkit-box-sizing: $boxmodel;
+     -moz-box-sizing: $boxmodel;
+      -ms-box-sizing: $boxmodel;
+          box-sizing: $boxmodel;
+}
+
+
+// Background clipping (from bootstrap-sass)
+// Heads up: FF 3.6 and under need "padding" instead of "padding-box"
+@mixin background-clip($clip) {
+  -webkit-background-clip: $clip;
+     -moz-background-clip: $clip;
+          background-clip: $clip;
+}
+
+
+// Font Stacks
+@mixin shorthand-font($weight: normal, $size: 14px, $lineHeight: 20px) {
+  font-size: $size;
+  font-weight: $weight;
+  line-height: $lineHeight;
+}
+@mixin sans-serif-font($weight: normal, $size: 14px, $lineHeight: 20px) {
+  font-family: $sans-body;
+  font-size: $size;
+  font-weight: $weight;
+  line-height: $lineHeight;
+}
+@mixin serif-font($weight: normal, $size: 14px, $lineHeight: 20px) {
+  font-family: "Georgia", Times New Roman, Times, serif;
+  font-size: $size;
+  font-weight: $weight;
+  line-height: $lineHeight;
+}
+@mixin monospace-font($weight: normal, $size: 12px, $lineHeight: 20px) {
+  font-family: "Monaco", Courier New, monospace;
+  font-size: $size;
+  font-weight: $weight;
+  line-height: $lineHeight;
+}
+
+
+// form fields
+
+@mixin input-block-level() {
+  display: block;
+  width: 100%;
+  min-height: 28px; // Make inputs at least the height of their button counterpart
+  @include box-sizing(border-box); // Makes inputs behave like true block-level elements
+}
+
+
+// Horizontal dividers
+// -------------------
+// Dividers (basically an hr) within dropdowns and nav lists
+@mixin nav-divider($top: #e5e5e5, $bottom: $white) {
+  // IE7 needs a set width since we gave a height. Restricting just
+  // to IE7 to keep the 1px left/right space in other browsers.
+  // It is unclear where IE is getting the extra space that we need
+  // to negative-margin away, but so it goes.
+  *width: 100%;
+  height: 1px;
+  margin: (($baseLineHeight / 2) - 1) 1px; // 8px 1px
+  *margin: -5px 0 5px;
+  overflow: hidden;
+  background-color: $top;
+  border-bottom: 1px solid $bottom;
+}
+
+
+
+// IE7 inline-block
+// ----------------
+@mixin ie7-inline-block() {
+  *display: inline; /* IE7 inline-block hack */
+  *zoom: 1;
+}
+
+// IE7 likes to collapse whitespace on either side of the inline-block elements.
+// Ems because we're attempting to match the width of a space character. Left
+// version is for form buttons, which typically come after other elements, and
+// right version is for icons, which come before. Applying both is ok, but it will
+// mean that space between those elements will be .6em (~2 space characters) in IE7,
+// instead of the 1 space in other browsers.
+@mixin ie7-restore-left-whitespace() {
+  *margin-left: .3em;
+
+  &:first-child {
+    *margin-left: 0;
+  }
+}
+
+@mixin ie7-restore-right-whitespace() {
+  *margin-right: .3em;
+
+  &:last-child {
+    *margin-left: 0;
+  }
+}
+
+
+@mixin at2x($image_name, $w: auto, $h: auto, $extention: '.png') {
+  background-image: image_url($image_name + $extention);
+  $x2img : $image_name + '@2x' + $extention;
+
+  @media all and (-webkit-min-device-pixel-ratio : 1.5) {
+    background-image: image_url($x2img);
+    background-size: $w $h;
+  }  
+}
+
+
+// The Grid
+@mixin gridCore($columnWidth, $gutterWidth) {
+  .row {
+    margin-left: $gutterWidth * -1;
+    @include clearfix();
+  }
+
+  [class*="span"] {
+    float: left;
+    margin-left: $gutterWidth;
+  }
+
+  // Set the container width, and override it for fixed navbars in media queries
+  .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container { @include gridCoreSpan($gridColumns, $columnWidth, $gutterWidth); }
+
+  @include gridCoreSpanX($gridColumns, $columnWidth, $gutterWidth);
+  @include gridCoreOffsetX($gridColumns, $columnWidth, $gutterWidth);
+}
+@mixin gridCoreSpanX($cols, $columnWidth, $gutterWidth) {
+  @for $i from 1 through $cols {
+    .span#{$i} { @include gridCoreSpan($i, $columnWidth, $gutterWidth) };
+  }
+}
+@mixin gridCoreSpan($columns, $columnWidth, $gutterWidth) {
+  width: ($columnWidth * $columns) + ($gutterWidth * ($columns - 1));
+}
+@mixin gridCoreOffsetX($cols, $columnWidth, $gutterWidth) {
+  @for $i from 1 through $cols {
+    .offset#{$i} { @include gridCoreOffset($i, $columnWidth, $gutterWidth); };
+  }
+}
+@mixin gridCoreOffset($columns, $columnWidth, $gutterWidth) {
+  margin-left: ($columnWidth * $columns) + ($gutterWidth * ($columns + 1));
+}
+
+// responsive grid
+
+@mixin gridFluid($columnWidth, $gutterWidth) {
+  .row-fluid {
+    width: 100%;
+    @include clearfix();
+    [class*="span"] {
+      @include input-block-level();
+      float: left;
+      margin-left: $gutterWidth;
+      *margin-left: $gutterWidth - (.5 / ($gridRowWidth/1px) * 100 * 1%);
+    }
+    [class*="span"]:first-child {
+      margin-left: 0;
+    }
+
+    // generate .spanX
+    @include gridFluidSpanX($gridColumns, $columnWidth, $gutterWidth);
+  }
+}
+@mixin gridFluidSpanX($cols, $columnWidth, $gutterWidth) {
+  @for $i from 1 through $cols {
+    .span#{$i} { @include gridFluidSpan($i, $columnWidth, $gutterWidth) };
+  }
+}
+@mixin gridFluidSpan($columns, $columnWidth, $gutterWidth) {
+  width: ($columnWidth * $columns) + ($gutterWidth * ($columns - 1));
+  *width: ($columnWidth * $columns) + ($gutterWidth * ($columns - 1)) - (.5 / ($gridRowWidth/1px) * 100 * 1%);
+}
+
+@mixin gridInput($columnWidth, $gutterWidth) {
+  input, textarea, .uneditable-input {
+    margin-left: 0; // override margin-left from core grid system
+  }
+
+  // generate .spanX
+  @include gridInputSpanX($gridColumns, $columnWidth, $gutterWidth);
+}
+@mixin gridInputSpanX($cols, $columnWidth, $gutterWidth) {
+  @for $i from 1 through $cols {
+    input.span#{$i}, textarea.span#{$i}, .uneditable-input.span#{$i} { @include gridInputSpan($i, $columnWidth, $gutterWidth); }
+  }
+}
+@mixin gridInputSpan($columns, $columnWidth, $gutterWidth) {
+  width: (($columnWidth) * $columns) + ($gutterWidth * ($columns - 1)) - 10;
+}
+
+@mixin makeFluidColumn($columns, $columnWidth, $gutterWidth) {
+  // This isn't perfect, but it's better than nothing.
+  float: left;
+  margin-left: $gutterWidth;
+  @include gridFluidSpan($columns, $columnWidth, $gutterWidth);
+}

data/lib/bandshell/application/public/stylesheets/sass/common/reset.scss

@@ -0,0 +1,125 @@
+/*##########################################################################*/
+/*  Frame and Resets  */
+/*##########################################################################*/
+
+
+//////////////////
+
+html {
+	// include background with retina mixin:
+	background: url(/images/layout/pagebg.gif) repeat;
+	
+ 	color: #000;
+ 	font-family: $sans-body;
+	//min-width: 800px;
+}
+
+body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td {
+	margin: 0;
+ 	padding: 0;
+ 	font-size: 12px; 
+}
+
+table {
+	border-collapse: collapse;
+ 	border-spacing: 0; 
+}
+
+fieldset, img {
+	border: 0; 
+}
+
+address, caption, cite, code, dfn, em, strong, b, th, var, optgroup {
+	font-style: inherit;
+ 	font-weight: inherit; 
+}
+
+del, ins {
+	text-decoration: none; 
+}
+
+caption, th {
+	text-align: left; 
+}
+
+h1, h2, h3, h4, h5, h6 {
+	font-size: 100%;
+ 	font-weight: normal; 
+}
+
+q {
+	&:before, &:after {
+		content: ''; 
+	} 
+}
+
+abbr {
+	border: 0;
+ 	font-variant: normal; 
+}
+
+sup, sub {
+	vertical-align: baseline; 
+}
+
+b, strong {
+	font-weight: bold; 
+}
+
+legend {
+	color: #000; 
+}
+
+input, button, textarea, select, optgroup, option {
+	font-family: inherit;
+	font-size: inherit;
+  font-style: inherit;
+ 	font-weight: inherit; 
+}
+
+input, button, textarea, select {
+	*font-size: 100%; 
+}
+
+small {
+	font-size: 0.7em; 
+}
+
+/* Common Inheritance */
+
+.wrap {
+	width: $main-width;
+ 	margin: 0 auto; 
+}
+
+.caps {
+ 	text-transform: uppercase; 
+}
+
+.spaced {
+ 	letter-spacing: .12em; 
+}
+
+.center {
+ 	text-align: center; 
+}
+
+.larger {
+ 	font-size: 1.2em; 
+}
+
+.emboss {
+ 	text-shadow: 0 1px 1px #FFF; 
+}
+
+.nomargin {
+ 	margin: 0 !important; 
+}
+
+.clear {
+	clear: both; 
+}
+
+.cursor-pointer {
+  cursor: pointer;
+}

data/lib/bandshell/application/public/stylesheets/sass/common/variables.scss

@@ -0,0 +1,139 @@
+//////////////////
+
+
+// Concerto 2 Palette
+$concerto-blue-0: 	#006699;
+$concerto-blue-1:		#003366;
+$concerto-blue-2:		#0099cc;
+$concerto-blue-4:		#b0d3f1;
+$concerto-blue-5:		#dee7ee;
+$concerto-blue-6:   #e7f1f9;
+
+// Grays
+$black:             #000;
+$grayDarker:        lighten($black, 15%);
+$grayDark:          lighten($black, 25%);
+$gray:              lighten($black, 50%);
+$grayLight:         lighten($black, 75%);
+$grayLighter:       lighten($black, 90%);
+$grayLightest:      lighten($black, 95%);
+$white:             #fff;
+
+// Accent Colors
+$blue:              #049CDB;
+$blueDark:          #0064CD;
+$green:             #46a546;
+$red:               #9d261d;
+$yellow:            #ffc40d;
+$orange:            #f89406;
+$pink:              #c3325f;
+$purple:            #7a43b6;
+
+
+// Links
+$linkColor:         $concerto-blue-0;
+$linkColorHover:    darken($linkColor, 15);
+
+
+// TYPE:
+
+$sans-headers: 			"Myriad Pro", Helvetica, Arial, sans-serif;
+$sans-body: 				"Lucida Grande",Arial,sans-serif;
+$serifFontFamily:       Georgia, "Times New Roman", Times, serif !default;
+$monoFontFamily:        Menlo, Monaco, Consolas, "Courier New", monospace !default;
+
+
+// Form states and alerts
+// -------------------------
+$warningText:             #764b00 !default;
+$warningBackground:       #fcf8e3 !default;
+$warningBorder:           darken(adjust-hue($warningBackground, -10), 3%) !default;
+
+$errorText:               #b94a48 !default;
+$errorBackground:         #f2dede !default;
+$errorBorder:             darken(adjust-hue($errorBackground, -10), 3%) !default;
+
+$successText:             #468847 !default;
+$successBackground:       #dff0d8 !default;
+$successBorder:           darken(adjust-hue($successBackground, -10), 5%) !default;
+
+$infoText:                #3a87ad !default;
+$infoBackground:          #d9edf7 !default;
+$infoBorder:              darken(adjust-hue($infoBackground, -10), 7%) !default;
+
+$zeroText:                $gray;
+$zeroBackground:          $grayLightest;
+$zeroBorder:              $grayLighter;
+
+
+// OTHER VALUES:
+
+// Z-index master list
+// -------------------------
+// Used for a bird's eye view of components dependent on the z-axis
+// Try to avoid customizing these :)
+$zindexDropdown:          1000;
+$zindexPopover:           1010;
+$zindexTooltip:           1020;
+$zindexFixedNavbar:       1030;
+$zindexModalBackdrop:     1040;
+$zindexModal:             1050;
+
+
+
+$main-width: 				980px;
+
+// Baseline grid
+$basefont:          12px;
+$baseline:          18px;
+$baseFontSize:          12px !default;
+$baseFontFamily:        sans-headers !default;
+$baseLineHeight:        18px !default;
+$altFontFamily:         $serifFontFamily !default;
+
+
+// FIXED GRID
+// --------------------------------------------------
+
+// Default, 940px
+// -------------------------
+$gridColumns:             12 !default;
+$gridColumnWidth:         60px !default;
+$gridGutterWidth:         20px !default;
+$gridRowWidth:            ($gridColumns * $gridColumnWidth) + ($gridGutterWidth * ($gridColumns - 1)) !default;
+
+// Portrait tablet to default desktop
+// -------------------------
+$gridColumnWidthTablet:   42px !default;
+$gridGutterWidthTablet:   20px !default;
+
+// Large desktop and up
+// -------------------------
+$gridColumnWidthLarge:    70px !default;
+$gridGutterWidthLarge:    30px !default;
+
+
+
+/// FLUID GRID
+// --------------------------------------------------
+
+// to calculate, use this formula: 
+// ($gridColumns * $fluidGridColumnWidth) + ($fluidGridGutterWidth * ($gridColumns - 1)) = 100%
+// ex: 12 * fluidGridColumnWidth + fluidGridGutterWidth * 11 = 100%
+// fluidGridColumnWidth = (100 - 11 * fluidGridGutterWidth) / 12
+// fluidGridGutterWidth = (100 - 12 * fluidGridColumnWidth) / 11
+
+// Default
+// -------------------------
+$fluidGridColumnWidth:         7.2996453905% !default;  /* changed from 6.382978723% !default; */
+$fluidGridGutterWidth:         1.127659574% !default;   /* changed from 2.127659574% !default; */
+
+// Portrait tablet to default desktop
+// -------------------------
+$fluidGridColumnWidthTablet:   6.801104972% !default;
+$fluidGridGutterWidthTablet:   1.6715218487 !default;   /* changed from 2.762430939% !default; */
+
+// Large desktop and up
+// -------------------------
+$fluidGridColumnWidthLarge:    6.982905983% !default;
+$fluidGridGutterWidthLarge:    1.4731934731 !default;   /* changed from 2.564102564% !default; */