compass-bootstrap 0.1.2 → 0.1.3

data/vendor/assets/stylesheets/compass-bootstrap/_mixins.scss

@@ -0,0 +1,210 @@
+/* Variables.less
+ * Snippets of reusable CSS to develop faster and keep code readable
+ * ----------------------------------------------------------------- */
+
+// 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;
+	}
+}
+
+// Center-align a block level element
+@mixin center-block() {
+	display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+// Sizing shortcuts
+@mixin size($height: 5px, $width: 5px) {
+	height: $height;
+	width: $width;
+}
+@mixin square($size: 5px) {
+	@include size($size, $size);
+}
+
+// Input placeholder text
+@mixin placeholder($color: $grayLight) {
+  :-moz-placeholder {
+    color: $color;
+  }
+  ::-webkit-input-placeholder {
+    color: $color;
+  }
+}
+
+// Font Stacks
+@mixin font-shorthand($weight: normal, $size: 14px, $lineHeight: 20px) {
+  font-size: $size;
+  font-weight: $weight;
+  line-height: $lineHeight;
+}
+@mixin font-sans-serif($weight: normal, $size: 14px, $lineHeight: 20px) {
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: $size;
+  font-weight: $weight;
+  line-height: $lineHeight;
+}
+@mixin font-serif($weight: normal, $size: 14px, $lineHeight: 20px) {
+  font-family: "Georgia", Times New Roman, Times, serif;
+  font-size: $size;
+  font-weight: $weight;
+  line-height: $lineHeight;
+}
+@mixin font-monospace($weight: normal, $size: 12px, $lineHeight: 20px) {
+  font-family: "Monaco", Courier New, monospace;
+  font-size: $size;
+  font-weight: $weight;
+  line-height: $lineHeight;
+}
+
+// Grid System
+@mixin fixed-container() {
+  width: $siteWidth;
+  margin-left: auto;
+  margin-right: auto;
+  @include clearfix();
+}
+@mixin columns($columnSpan: 1) {
+  width: ($gridColumnWidth * $columnSpan) + ($gridGutterWidth * ($columnSpan - 1));
+}
+@mixin offset($columnOffset: 1) {
+  margin-left: ($gridColumnWidth * $columnOffset) + ($gridGutterWidth * ($columnOffset - 1)) + $extraSpace;
+}
+// Necessary grid styles for every column to make them appear next to each other horizontally
+@mixin gridColumn() {
+  display: inline;
+  float: left;
+  margin-left: $gridGutterWidth;
+}
+// makeColumn can be used to mark any element (e.g., .content-primary) as a column without changing markup to .span something
+@mixin makeColumn($columnSpan: 1) {
+  @include gridColumn();
+  @include columns($columnSpan);
+}
+
+// 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;
+}
+
+// Transitions
+@mixin transition($transition) {
+	-webkit-transition: $transition;
+	   -moz-transition: $transition;
+ 	    -ms-transition: $transition;
+	     -o-transition: $transition;
+	        transition: $transition;
+}
+
+// Background clipping
+@mixin background-clip($clip) {
+	-webkit-background-clip: $clip;
+	   -moz-background-clip: $clip;
+	        background-clip: $clip;
+}
+
+// CSS3 Content Columns
+@mixin content-columns($columnCount, $columnGap: 20px) {
+	-webkit-column-count: $columnCount;
+	   -moz-column-count: $columnCount;
+          column-count: $columnCount;
+  -webkit-column-gap: $columnGap;
+	   -moz-column-gap: $columnGap;
+          column-gap: $columnGap;
+}
+
+// Add an alphatransparency value to any background or border color (via Elyse Holladay)
+@mixin translucent-background($color: $white, $alpha: 1) {
+    background-color: hsla(hue($color), saturation($color), lightness($color), $alpha);
+}
+@mixin translucent-border($color: $white, $alpha: 1) {
+	border-color: hsla(hue($color), saturation($color), lightness($color), $alpha);
+	background-clip: padding-box;
+}
+
+// Gradient Bar Colors for buttons and allerts
+@mixin gradientBar($primaryColor, $secondaryColor) {
+  @include gradient-vertical($primaryColor, $secondaryColor);
+  text-shadow: 0 -1px 0 rgba(0,0,0,.25);
+  border-color: $secondaryColor $secondaryColor darken($secondaryColor, 15%);
+  border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%);
+}
+
+// Gradients
+@mixin gradient-horizontal ($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 gradient-vertical ($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
+}
+@mixin gradient-directional ($startColor: #555, $endColor: #333, $deg: 45deg) {
+  background-color: $endColor;
+  background-repeat: repeat-x;
+  background-image: -moz-linear-gradient($deg, $startColor, $endColor); // FF 3.6+
+  background-image: -ms-linear-gradient($deg, $startColor, $endColor); // IE10
+  background-image: -webkit-linear-gradient($deg, $startColor, $endColor); // Safari 5.1+, Chrome 10+
+  background-image: -o-linear-gradient($deg, $startColor, $endColor); // Opera 11.10
+  background-image: linear-gradient($deg, $startColor, $endColor); // The standard
+}
+@mixin gradient-vertical-three-colors($startColor: #00b3ee, $midColor: #7a43b6, $colorStop: 50%, $endColor: #c3325f) {
+  background-color: $endColor;
+  background-repeat: no-repeat;
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from($startColor), color-stop($colorStop, $midColor), to($endColor));
+  background-image: -webkit-linear-gradient($startColor, $midColor $colorStop, $endColor);
+  background-image: -moz-linear-gradient(top, $startColor, $midColor $colorStop, $endColor);
+  background-image: -ms-linear-gradient($startColor, $midColor $colorStop, $endColor);
+  background-image: -o-linear-gradient($startColor, $midColor $colorStop, $endColor);
+  background-image: linear-gradient($startColor, $midColor $colorStop, $endColor);
+  filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr='#{$startColor}', endColorstr='#{$endColor}', GradientType=0); // IE9 and down
+}
+
+// Reset filters for IE
+@mixin reset-filter() {
+  filter: progid:DXImageTransform.Microsoft.Gradient(enabled = false);
+}
+
+// Opacity
+@mixin opacity($opacity: 100) {
+	filter: alpha(opacity='#{$opacity}');
+	-khtml-opacity: $opacity / 100;
+	  -moz-opacity: $opacity / 100;
+	       opacity: $opacity / 100;
+}

data/{templates → vendor/assets/stylesheets}/compass-bootstrap/_patterns.scss

@@ -23,8 +23,10 @@
   }
 
   // Hover and active states
-  a:hover,
-  ul .active a {
+  // h3 for backwards compatibility
+  h3 a:hover,
+  .brand a:hover,
+  ul .active > a {
     background-color: #333;
     background-color: rgba(255,255,255,.05);
     color: $white;
@@ -32,17 +34,29 @@
   }
 
   // Website name
+  // h3 left for backwards compatibility
   h3 {
     position: relative;
-    a {
-      float: left;
-      display: block;
-      padding: 8px 20px 12px;
-      margin-left: -20px; // negative indent to left-align the text down the page
+  }
+  h3 a,
+  .brand {
+    float: left;
+    display: block;
+    padding: 8px 20px 12px;
+    margin-left: -20px; // negative indent to left-align the text down the page
+    color: $white;
+    font-size: 20px;
+    font-weight: 200;
+    line-height: 1;
+  }
+
+  // Plain text in topbar
+  p {
+    margin: 0;
+    line-height: 40px;
+    a:hover {
+      background-color: transparent;
       color: $white;
-      font-size: 20px;
-      font-weight: 200;
-      line-height: 1;
     }
   }
 
@@ -51,19 +65,23 @@
     float: left;
     margin: 5px 0 0 0;
     position: relative;
-    @include bt-opacity(100);
+    @include opacity(100);
+  }
+  // Todo: remove from v2.0 when ready, added for legacy
+  form.pull-right {
+    float: right;
   }
   input {
     background-color: #444;
     background-color: rgba(255,255,255,.3);
-    @include sans-serif(13px, normal, 1);
+    @include font-sans-serif(13px, normal, 1);
     padding: 4px 9px;
-    color: #fff;
+    color: $white;
     color: rgba(255,255,255,.75);
     border: 1px solid #111;
-    @include  border-radius(4px);
+    @include border-radius(4px);
     $shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.25);
-    @include  bt-box-shadow($shadow);
+    @include box-shadow($shadow);
     @include transition(none);
 
     // Placeholder text gets special styles; can't be bundled together though for some reason
@@ -77,15 +95,15 @@
     &:hover {
       background-color: $grayLight;
       background-color: rgba(255,255,255,.5);
-      color: #fff;
+      color: $white;
     }
     // Focus states (we use .focused since IE8 and down doesn't support :focus)
     &:focus,
     &.focused {
-      outline: none;
-      background-color: #fff;
+      outline: 0;
+      background-color: $white;
       color: $grayDark;
-      text-shadow: 0 1px 0 #fff;
+      text-shadow: 0 1px 0 $white;
       border: 0;
       padding: 5px 10px;
       @include box-shadow(0 0 3px rgba(0,0,0,.15));
@@ -94,13 +112,13 @@
 }
 
 // gradient is applied to it's own element because overflow visible is not honored by ie when filter is present
-// For backwards compatability, include .topbar .fill
+// For backwards compatibility, include .topbar .fill
 .topbar-inner,
 .topbar .fill {
   background-color: #222;
-  @include vertical-gradient(#333, #222);
+  @include gradient-vertical(#333, #222);
   $shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
-  @include bt-box-shadow($shadow);
+  @include box-shadow($shadow);
 }
 
 
@@ -128,11 +146,11 @@
     line-height: 19px;
     text-decoration: none;
     &:hover {
-      color: #fff;
+      color: $white;
       text-decoration: none;
     }
   }
-  .active a {
+  .active > a {
     background-color: #222;
     background-color: rgba(0,0,0,.5);
   }
@@ -146,6 +164,7 @@
     .menu-dropdown,
     .dropdown-menu {
       right: 0;
+      border: 0;
     }
   }
   // Dropdowns within the .nav
@@ -164,7 +183,7 @@
     // a.menu for backwards compatibility
     a.menu,
     .dropdown-toggle {
-      color: #fff;
+      color: $white;
       &.open {
         background: #444;
         background: rgba(255,255,255,.05);
@@ -174,10 +193,13 @@
       color: #999;
       text-shadow: 0 1px 0 rgba(0,0,0,.5);
       &:hover {
-        @include vertical-gradient(#292929,#191919);
-        color: #fff;
+        @include gradient-vertical(#292929,#191919);
+        color: $white;
       }
     }
+    .active a {
+      color: $white;
+    }
     .divider {
       background-color: #222;
       border-color: #444;
@@ -185,7 +207,7 @@
   }
 }
 
-// For backwards compatability with new dropdowns, redeclare dropdown link padding
+// For backwards compatibility with new dropdowns, redeclare dropdown link padding
 .topbar ul .menu-dropdown li a,
 .topbar ul .dropdown-menu li a {
   padding: 4px 15px;
@@ -212,18 +234,19 @@ a.menu:after,
   margin-left: 4px;
   border-left: 4px solid transparent;
   border-right: 4px solid transparent;
-  border-top: 4px solid #fff;
-  @include bt-opacity(50);
+  border-top: 4px solid $white;
+  @include opacity(50);
 }
 // The dropdown menu (ul)
 // .menu-dropdown for backwards compatibility
 .menu-dropdown,
 .dropdown-menu {
-  background-color: #fff;
+  background-color: $white;
   float: left;
   display: none; // None by default, but block on "open" of the menu
   position: absolute;
   top: 40px;
+  z-index: 900;
   min-width: 160px;
   max-width: 220px;
   _width: 160px;
@@ -236,7 +259,7 @@ a.menu:after,
   border-style: solid;
   border-width: 0 1px 1px;
   @include border-radius(0 0 6px 6px);
-  @include bt-box-shadow(0 2px 4px rgba(0,0,0,.2));
+  @include box-shadow(0 2px 4px rgba(0,0,0,.2));
   @include background-clip(padding-box);
 
   // Unfloat any li's to make them stack
@@ -251,7 +274,7 @@ a.menu:after,
     margin: 5px 0;
     overflow: hidden;
     background-color: #eee;
-    border-bottom: 1px solid #fff;
+    border-bottom: 1px solid $white;
   }
 }
 
@@ -264,14 +287,14 @@ a.menu:after,
     font-weight: normal;
     line-height: 18px;
     color: $gray;
-    text-shadow: 0 1px 0 #fff;
+    text-shadow: 0 1px 0 $white;
     // Hover state
     &:hover {
-      @include vertical-gradient(#eeeeee, #dddddd);
+      @include gradient-vertical(#eeeeee, #dddddd);
       color: $grayDark;
       text-decoration: none;
       $shadow: inset 0 1px 0 rgba(0,0,0,.025), inset 0 -1px rgba(0,0,0,.025);
-      @include bt-box-shadow($shadow);
+      @include box-shadow($shadow);
     }
   }
 }
@@ -283,7 +306,7 @@ a.menu:after,
   // .menu for backwards compatibility
   .menu,
   .dropdown-toggle {
-    color: #fff;
+    color: $white;
     background: #ccc;
     background: rgba(0,0,0,.3);
   }
@@ -312,28 +335,29 @@ a.menu:after,
 
 // Basic Tabs
 .tabs {
+  float: left;
   width: 100%;
   border-bottom: 1px solid #ddd;
   > li {
     position: relative; // For the dropdowns mostly
     top: 1px;
     > a {
-      margin-right: 2px;
       padding: 0 15px;
-      line-height: ($baseline * 2) - 1;
+      margin-right: 2px;
+      line-height: $baseline * 2;
+      border: 1px solid transparent;
       @include border-radius(4px 4px 0 0);
       &:hover {
-        background-color: #eee;
-        border-bottom: 1px solid #ddd;
         text-decoration: none;
+        background-color: #eee;
+        border-color: #eee #eee #ddd;
       }
     }
     &.active > a {
-      background-color: #fff;
-      padding: 0 14px;
-      border: 1px solid #ddd;
-      border-bottom: 0;
       color: $gray;
+      background-color: $white;
+      border: 1px solid #ddd;
+      border-bottom-color: transparent;
     }
   }
   // first one for backwards compatibility
@@ -351,41 +375,84 @@ a.menu:after,
     margin-left: 5px;
   }
   // first one for backwards compatibility
+  li.open.menu .menu,
+  .open.dropdown .dropdown-toggle {
+    border-color: #999;
+  }
+  // first one for backwards compatibility
   li.open a.menu:after,
   .dropdown.open .dropdown-toggle:after {
     border-top-color: #555;
   }
 }
+.tab-content {
+  clear: both;
+}
 
 // Basic pill nav
 .pills {
   a {
       margin: 5px 3px 5px 0;
     padding: 0 15px;
-    text-shadow: 0 1px 1px #fff;
+    text-shadow: 0 1px 1px $white;
     line-height: 30px;
     @include border-radius(15px);
     &:hover {
       background: $linkColorHover;
-      color: #fff;
+      color: $white;
       text-decoration: none;
       text-shadow: 0 1px 1px rgba(0,0,0,.25);
     }
   }
   .active a {
     background: $linkColor;
-    color: #fff;
+    color: $white;
     text-shadow: 0 1px 1px rgba(0,0,0,.25);
   }
 }
 
+.tab-content > *,
+.pill-content > * {
+  display: none;
+}
+
+.tab-content > .active,
+.pill-content > .active {
+  display:block;
+}
+
+
+// BREADCRUMBS
+// -----------
+
+.breadcrumb {
+  margin: 0 0 $baseline;
+  padding: 7px 14px;
+  @include gradient-vertical(#ffffff, #f5f5f5);
+  border: 1px solid #ddd;
+  @include border-radius(3px);
+  @include box-shadow(inset 0 1px 0 $white);
+  li {
+    display: inline;
+    text-shadow: 0 1px 0 $white;
+  }
+  .divider {
+    padding: 0 5px;
+    color: $grayLight;
+  }
+  a {
+  }
+  .active a {
+    color: $grayDark;
+  }
+}
+
 
 // PAGE HEADERS
 // ------------
 
 .hero-unit {
   background-color: #f5f5f5;
-  margin-top: 60px;
   margin-bottom: 30px;
   padding: 60px;
   @include border-radius(6px);
@@ -414,7 +481,7 @@ footer {
 .page-header {
   margin-bottom: $baseline - 1;
   border-bottom: 1px solid #ddd;
-  @include bt-box-shadow(0 1px 0 rgba(255,255,255,.5));
+  @include box-shadow(0 1px 0 rgba(255,255,255,.5));
   h1 {
     margin-bottom: ($baseline / 2) - 1px;
   }
@@ -424,22 +491,51 @@ footer {
 // BUTTON STYLES
 // -------------
 
+// Shared colors for buttons and alerts
+.btn,
+.alert-message {
+  // Set text color
+  &.danger,
+  &.danger:hover,
+  &.error,
+  &.error:hover,
+  &.success,
+  &.success:hover,
+  &.info,
+  &.info:hover {
+    color: $white
+  }
+  // Danger and error appear as red
+  &.danger,
+  &.error {
+    @include gradientBar(#ee5f5b, #c43c35);
+  }
+  // Success appears as green
+  &.success {
+    @include gradientBar(#62c462, #57a957);
+  }
+  // Info appears as a neutral blue
+  &.info {
+    @include gradientBar(#5bc0de, #339bb9);
+  }
+}
+
 // Base .btn styles
 .btn {
   // Button Base
   cursor: pointer;
   display: inline-block;
-  @include vertical-three-colors-gradient(#ffffff, #ffffff, 25%, darken(#ffffff, 10%)); // Don't use .gradientbar() here since it does a three-color gradient
+  @include gradient-vertical-three-colors(#ffffff, #ffffff, 25%, darken(#ffffff, 10%)); // Don't use .gradientbar() here since it does a three-color gradient
   padding: 5px 14px 6px;
   text-shadow: 0 1px 1px rgba(255,255,255,.75);
   color: #333;
-  font-size: 13px;
+  font-size: $basefont;
   line-height: normal;
   border: 1px solid #ccc;
   border-bottom-color: #bbb;
   @include border-radius(4px);
   $shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
-  @include bt-box-shadow($shadow);
+  @include box-shadow($shadow);
 
   &:hover {
     background-position: 0 -15px;
@@ -447,9 +543,14 @@ footer {
     text-decoration: none;
   }
 
+  // Focus state for keyboard and accessibility
+  &:focus {
+    outline: 1px dotted #666;
+  }
+
   // Primary Button Type
   &.primary {
-    color:#fff;
+    color: $white;
     @include gradientBar($blue, $blueDark)
   }
 
@@ -459,14 +560,14 @@ footer {
   // Active and Disabled states
   &:active {
     $shadow: inset 0 2px 4px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.05);
-    @include bt-box-shadow($shadow);
+    @include box-shadow($shadow);
   }
   &.disabled {
     cursor: default;
     background-image: none;
     @include reset-filter();
-    @include bt-opacity(65);
-    @include bt-box-shadow(none);
+    @include opacity(65);
+    @include box-shadow(none);
   }
   &[disabled] {
     // disabled pseudo can't be included with .disabled
@@ -474,26 +575,26 @@ footer {
     cursor: default;
     background-image: none;
     @include reset-filter();
-    @include bt-opacity(65);
-    @include bt-box-shadow(none);
+    @include opacity(65);
+    @include box-shadow(none);
   }
 
   // Button Sizes
   &.large {
-    font-size: 16px;
+    font-size: $basefont + 2px;
     line-height: normal;
     padding: 9px 14px 9px;
     @include border-radius(6px);
   }
   &.small {
     padding: 7px 9px 7px;
-    font-size: 11px;
+    font-size: $basefont - 2px;
   }
 }
 // Super jank hack for removing border-radius from IE9 so we can keep filter gradients on alerts and buttons
 :root .alert-message,
 :root .btn {
-  border-radius: 0 \0;
+    border-radius: 0 \0;
 }
 
 // Help Firefox not be a jerk about adding extra padding to buttons
@@ -506,20 +607,44 @@ input[type=submit].btn {
 }
 
 
+// CLOSE ICONS
+// -----------
+.close {
+  float: right;
+  color: $black;
+  font-size: 20px;
+  font-weight: bold;
+  line-height: $baseline * .75;
+  text-shadow: 0 1px 0 rgba(255,255,255,1);
+  @include opacity(20);
+  &:hover {
+    color: $black;
+    text-decoration: none;
+    @include opacity(40);
+  }
+}
+
+
 // ERROR STYLES
 // ------------
 
 // Base alert styles
 .alert-message {
-  @include gradientBar(#fceec1, #eedc94); // warning by default
+  position: relative;
+  padding: 7px 15px;
   margin-bottom: $baseline;
-  padding: 7px 14px;
   color: $grayDark;
+  @include gradientBar(#fceec1, #eedc94); // warning by default
   text-shadow: 0 1px 0 rgba(255,255,255,.5);
   border-width: 1px;
   border-style: solid;
   @include border-radius(4px);
-  @include bt-box-shadow(inset 0 1px 0 rgba(255,255,255,.25));
+  @include box-shadow(inset 0 1px 0 rgba(255,255,255,.25));
+
+  // Adjust close icon
+  .close {
+    *margin-top: 3px; /* IE7 spacing */
+  }
 
   // Remove extra margin from content
   h5 {
@@ -535,21 +660,7 @@ input[type=submit].btn {
   }
   .btn {
     // Provide actions with buttons
-    @include bt-box-shadow(0 1px 0 rgba(255,255,255,.25));
-  }
-  .close {
-    float: right;
-    margin-top: -2px;
-    color: $black;
-    font-size: 20px;
-    font-weight: bold;
-    text-shadow: 0 1px 0 rgba(255,255,255,1);
-    @include bt-opacity(20);
-    &:hover {
-      color: $black;
-      text-decoration: none;
-      @include bt-opacity(40);
-    }
+    @include box-shadow(0 1px 0 rgba(255,255,255,.25));
   }
 
   &.block-message {
@@ -558,11 +669,16 @@ input[type=submit].btn {
     @include reset-filter();
     padding: 14px;
     border-color: #fceec1;
-    @include bt-box-shadow(none);
-
-    p {
+    @include box-shadow(none);
+    ul, p {
       margin-right: 30px;
     }
+    ul {
+      margin-bottom: 0;
+    }
+    li {
+      color: $grayDark;
+    }
     .alert-actions {
       margin-top: 5px;
     }
@@ -600,7 +716,7 @@ input[type=submit].btn {
     border: 1px solid #ddd;
     border: 1px solid rgba(0,0,0,.15);
     @include border-radius(3px);
-    @include bt-box-shadow(0 1px 2px rgba(0,0,0,.05));
+    @include box-shadow(0 1px 2px rgba(0,0,0,.05));
   }
   li {
     display: inline;
@@ -641,7 +757,11 @@ input[type=submit].btn {
   border: 1px solid #eee;
   border: 1px solid rgba(0,0,0,.05);
   @include border-radius(4px);
-  @include bt-box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
+  @include box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
+  blockquote {
+    border-color: #ddd;
+    border-color: rgba(0,0,0,.15);
+  }
 }
 
 
@@ -649,55 +769,60 @@ input[type=submit].btn {
 // ------
 
 .modal-backdrop {
-  background-color: rgba(0,0,0,.5);
+  background-color: $black;
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
-  z-index: 1000;
+  z-index: 10000;
+  // Fade for backdrop
+  &.fade { opacity: 0; }
 }
+
+.modal-backdrop, .modal-backdrop.fade.in {
+  @include opacity(80);
+}
+
 .modal {
   position: fixed;
   top: 50%;
   left: 50%;
-  z-index: 2000;
+  z-index: 11000;
   width: 560px;
-  margin: -280px 0 0 -250px;
+  margin: -250px 0 0 -250px;
   background-color: $white;
   border: 1px solid #999;
   border: 1px solid rgba(0,0,0,.3);
   *border: 1px solid #999; /* IE6-7 */
   @include border-radius(6px);
-  @include bt-box-shadow(0 3px 7px rgba(0,0,0,0.3));
+  @include box-shadow(0 3px 7px rgba(0,0,0,0.3));
   @include background-clip(padding-box);
+  .close { margin-top: 7px; }
+  &.fade {
+    @include transition(e('opacity .3s linear, top .3s ease-out'));
+    top: -25%;
+  }
+  &.fade.in { top: 50%; }
 }
 .modal-header {
   border-bottom: 1px solid #eee;
-  padding: 5px 20px;
-  .close {
-    position: absolute;
-    right: 10px;
-    top: 10px;
-    color: #999;
-    line-height:10px;
-    font-size: 18px;
-  }
+  padding: 5px 15px;
 }
 .modal-body {
-  padding: 20px;
+  padding: 15px;
 }
 .modal-footer {
   background-color: #f5f5f5;
-  padding: 14px 20px 15px;
+  padding: 14px 15px 15px;
   border-top: 1px solid #ddd;
   @include border-radius(0 0 6px 6px);
-  @include bt-box-shadow(inset 0 1px 0 #fff);
+  @include box-shadow(inset 0 1px 0 $white);
   @include clearfix();
   margin-bottom: 0;
   .btn {
     float: right;
-    margin-left: 10px;
+    margin-left: 5px;
   }
 }
 
@@ -705,39 +830,38 @@ input[type=submit].btn {
 // POPOVER ARROWS
 // --------------
 
-  @mixin popoverArrow-above($arrowWidth: 5px) {
-    bottom: 0;
-    left: 50%;
-    margin-left: -$arrowWidth;
-    border-left: $arrowWidth solid transparent;
-    border-right: $arrowWidth solid transparent;
-    border-top: $arrowWidth solid #000;
-  }
-  @mixin popoverArrow-left($arrowWidth: 5px) {
-    top: 50%;
-    right: 0;
-    margin-top: -$arrowWidth;
-    border-top: $arrowWidth solid transparent;
-    border-bottom: $arrowWidth solid transparent;
-    border-left: $arrowWidth solid #000;
-  }
-  @mixin popoverArrow-below($arrowWidth: 5px) {
-    top: 0;
-    left: 50%;
-    margin-left: -$arrowWidth;
-    border-left: $arrowWidth solid transparent;
-    border-right: $arrowWidth solid transparent;
-    border-bottom: $arrowWidth solid #000;
-  }
-  @mixin popoverArrow-right($arrowWidth: 5px) {
-    top: 50%;
-    left: 0;
-    margin-top: -$arrowWidth;
-    border-top: $arrowWidth solid transparent;
-    border-bottom: $arrowWidth solid transparent;
-    border-right: $arrowWidth solid #000;
-  }
-
+@mixin popoverArrow-above($arrowWidth: 5px) {
+  bottom: 0;
+  left: 50%;
+  margin-left: -$arrowWidth;
+  border-left: $arrowWidth solid transparent;
+  border-right: $arrowWidth solid transparent;
+  border-top: $arrowWidth solid $black;
+}
+@mixin popoverArrow-left($arrowWidth: 5px) {
+  top: 50%;
+  right: 0;
+  margin-top: -$arrowWidth;
+  border-top: $arrowWidth solid transparent;
+  border-bottom: $arrowWidth solid transparent;
+  border-left: $arrowWidth solid $black;
+}
+@mixin popoverArrow-below($arrowWidth: 5px) {
+  top: 0;
+  left: 50%;
+  margin-left: -$arrowWidth;
+  border-left: $arrowWidth solid transparent;
+  border-right: $arrowWidth solid transparent;
+  border-bottom: $arrowWidth solid $black;
+}
+@mixin popoverArrow-right($arrowWidth: 5px) {
+  top: 50%;
+  left: 0;
+  margin-top: -$arrowWidth;
+  border-top: $arrowWidth solid transparent;
+  border-bottom: $arrowWidth solid transparent;
+  border-right: $arrowWidth solid $black;
+}
 
 // TWIPSY
 // ------
@@ -749,15 +873,18 @@ input[type=submit].btn {
   padding: 5px;
   font-size: 11px;
   z-index: 1000;
-  @include bt-opacity(80);
-  &.above .twipsy-arrow   {@include popoverArrow-above(); }
-  &.left .twipsy-arrow    {@include popoverArrow-left(); }
-  &.below .twipsy-arrow   {@include popoverArrow-below(); }
-  &.right .twipsy-arrow   {@include popoverArrow-right(); }
+  @include opacity(80);
+  &.fade.in {
+    @include opacity(80);
+  }
+  &.above .twipsy-arrow   { @include popoverArrow-above(); }
+  &.left .twipsy-arrow    { @include popoverArrow-left(); }
+  &.below .twipsy-arrow   { @include popoverArrow-below(); }
+  &.right .twipsy-arrow   { @include popoverArrow-right(); }
 }
 .twipsy-inner {
   padding: 3px 8px;
-  background-color: #000;
+  background-color: $black;
   color: white;
   text-align: center;
   max-width: 200px;
@@ -791,13 +918,13 @@ input[type=submit].btn {
     height: 0;
   }
   .inner {
-    background: #333;
-    background: rgba(0,0,0,.8);
+    background-color: $black;
+    background-color: rgba(0,0,0,.8);
     padding: 3px;
     overflow: hidden;
     width: 280px;
     @include border-radius(6px);
-    @include bt-box-shadow(0 3px 7px rgba(0,0,0,0.3));
+    @include box-shadow(0 3px 7px rgba(0,0,0,0.3));
   }
   .title {
     background-color: #f5f5f5;
@@ -815,4 +942,62 @@ input[type=submit].btn {
       margin-bottom: 0;
     }
   }
-}
+}
+
+
+// PATTERN ANIMATIONS
+// ------------------
+
+.fade {
+  @include transition(opacity .15s linear);
+  opacity: 0;
+  &.in {
+    opacity: 1;
+  }
+}
+
+
+// LABELS
+// ------
+
+.label {
+  padding: 1px 3px 2px;
+  background-color: $grayLight;
+  font-size: $basefont * .75;
+  font-weight: bold;
+  color: $white;
+  text-transform: uppercase;
+  @include border-radius(3px);
+  &.important { background-color: #c43c35; }
+  &.warning   { background-color: $orange; }
+  &.success   { background-color: $green; }
+  &.notice    { background-color: lighten($blue, 25%); }
+}
+
+
+// MEDIA GRIDS
+// -----------
+
+.media-grid {
+  margin-left: -20px;
+  margin-bottom: 0;
+  @include clearfix();
+  li {
+    display: inline;
+  }
+  a {
+    float: left;
+    padding: 4px;
+    margin: 0 0 20px 20px;
+    border: 1px solid #ddd;
+    @include border-radius(4px);
+    @include box-shadow(0 1px 1px rgba(0,0,0,.075));
+    img {
+      display: block;
+    }
+    &:hover {
+      border-color: $linkColor;
+      @include box-shadow(0 1px 4px rgba(0,105,214,.25));
+    }
+  }
+}