bootswatch-rails 0.2.0 → 0.3.0

data/vendor/assets/stylesheets/bootswatch/superhero/_variables.scss

@@ -1,9 +1,9 @@
-// Variables to customize the look and feel of Bootstrap
-// Swatch: Superhero
-// Version: 2.0.4
-// -----------------------------------------------------
+// Superhero 2.2.2
+// Variables
+// --------------------------------------------------
+
 
-// GLOBAL VALUES
+// Global values
 // --------------------------------------------------
 
 
@@ -58,22 +58,38 @@ $headingsFontWeight:    bold;    // instead of browser default, bold
 $headingsColor:         $orange; // empty to use BS default, $textColor
 
 
+// Component sizing
+// -------------------------
+// Based on 14px font-size and 20px line-height
+
+$fontSizeLarge:         $baseFontSize * 1.25; // ~18px
+$fontSizeSmall:         $baseFontSize * 0.85; // ~12px
+$fontSizeMini:          $baseFontSize * 0.75; // ~11px
+
+$paddingLarge:          11px 19px; // 44px
+$paddingSmall:          2px 10px;  // 26px
+$paddingMini:           0px 6px;   // 22px
+
+$baseBorderRadius:      4px;
+$borderRadiusLarge:     6px;
+$borderRadiusSmall:     3px;
+
+
 // Tables
 // -------------------------
-$tableBackground:                   darken($blue, .03); // overall background-color
+$tableBackground:                   darken($blue, 3%); // overall background-color
 $tableBackgroundAccent:             $blue; // for striping
-$tableBackgroundHover:              lighten($blue, .05); // for hover
+$tableBackgroundHover:              lighten($blue, 5%); // for hover
 $tableBorder:                       transparent; // table and cell border
 
-
 // Buttons
 // -------------------------
 $btnBackground:                     $white;
-$btnBackgroundHighlight:            darken($white, .1);
-$btnBorder:                         darken($white, .2);
+$btnBackgroundHighlight:            darken($white, 10%);
+$btnBorder:                         darken($white, 20%);
 
 $btnPrimaryBackground:              $linkColor;
-$btnPrimaryBackgroundHighlight:     adjust-hue($btnPrimaryBackground, .15);
+$btnPrimaryBackgroundHighlight:     adjust-hue($btnPrimaryBackground, 15%);
 
 $btnInfoBackground:                 #5bc0de;
 $btnInfoBackgroundHighlight:        #2f96b4;
@@ -81,7 +97,7 @@ $btnInfoBackgroundHighlight:        #2f96b4;
 $btnSuccessBackground:              #62c462;
 $btnSuccessBackgroundHighlight:     #51a351;
 
-$btnWarningBackground:              lighten($orange, .15);
+$btnWarningBackground:              lighten($orange, 15%);
 $btnWarningBackgroundHighlight:     $orange;
 
 $btnDangerBackground:               #ee5f5b;
@@ -95,37 +111,50 @@ $btnInverseBackgroundHighlight:     $grayDarker;
 // -------------------------
 $inputBackground:               $white;
 $inputBorder:                   #ccc;
-$inputBorderRadius:             3px;
+$inputBorderRadius:             $baseBorderRadius;
 $inputDisabledBackground:       $grayLighter;
 $formActionsBackground:         transparent;
+$inputHeight:                   $baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border
+
 
 // Dropdowns
 // -------------------------
-$dropdownBackground:            lighten($blue, .1);
-$dropdownBorder:                rgba(0,0,0,0);
-$dropdownLinkColor:             $textColor;
-$dropdownLinkColorHover:        $white;
-$dropdownLinkBackgroundHover:   $linkColor;
+$dropdownBackground:            lighten($blue, 10%);
+$dropdownBorder:                transparent;
 $dropdownDividerTop:            transparent;
 $dropdownDividerBottom:         $blue;
 
+$dropdownLinkColor:             $textColor;
+$dropdownLinkColorHover:        $white;
+$dropdownLinkColorActive:       $white;
+
+$dropdownLinkBackgroundActive:  $linkColor;
+$dropdownLinkBackgroundHover:   $dropdownLinkBackgroundActive;
+
 
 
 // COMPONENT VARIABLES
 // --------------------------------------------------
 
+
 // 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;
+$zindexTooltip:           1030;
 $zindexFixedNavbar:       1030;
 $zindexModalBackdrop:     1040;
 $zindexModal:             1050;
 
 
+// Sprite icons path
+// -------------------------
+$iconSpritePath:          "../img/glyphicons-halflings.png";
+$iconWhiteSpritePath:     "../img/glyphicons-halflings-white.png";
+
+
 // Input placeholder text color
 // -------------------------
 $placeholderText:         $grayLight;
@@ -136,11 +165,25 @@ $placeholderText:         $grayLight;
 $hrBorder:                transparent;
 
 
+// Horizontal forms & lists
+// -------------------------
+$horizontalComponentOffset:       180px;
+
+
+// Wells
+// -------------------------
+$wellBackground:                  $blue;
+
+
 // Navbar
 // -------------------------
-$navbarHeight:                    40px;
+$navbarCollapseWidth:             979px;
+$navbarCollapseDesktopWidth:      $navbarCollapseWidth + 1;
+
+$navbarHeight:                    70px;
 $navbarBackground:                $blueDark;
 $navbarBackgroundHighlight:       $navbarBackground;
+$navbarBorder:                    darken($navbarBackground, 5%);
 
 $navbarText:                      $grayLight;
 $navbarLinkColor:                 $orange;
@@ -149,12 +192,34 @@ $navbarLinkColorActive:           $navbarLinkColorHover;
 $navbarLinkBackgroundHover:       transparent;
 $navbarLinkBackgroundActive:      $navbarBackground;
 
-$navbarSearchBackground:          lighten($navbarBackground, .25);
-$navbarSearchBackgroundFocus:     $white;
-$navbarSearchBorder:              darken($navbarSearchBackground, .3);
-$navbarSearchPlaceholderColor:    #ccc;
 $navbarBrandColor:                $navbarLinkColor;
 
+// Inverted navbar
+$navbarInverseBackground:                $blue;
+$navbarInverseBackgroundHighlight:       $navbarInverseBackground;
+$navbarInverseBorder:                    darken($navbarBackground, 5%);
+
+$navbarInverseText:                      $grayLight;
+$navbarInverseLinkColor:                 $orange;
+$navbarInverseLinkColorHover:            $orange;
+$navbarInverseLinkColorActive:           $navbarInverseLinkColorHover;
+$navbarInverseLinkBackgroundHover:       transparent;
+$navbarInverseLinkBackgroundActive:      $navbarInverseBackground;
+
+$navbarInverseSearchBackground:          $white;
+$navbarInverseSearchBackgroundFocus:     $white;
+$navbarInverseSearchBorder:              $navbarInverseBackground;
+$navbarInverseSearchPlaceholderColor:    $grayLight;
+
+$navbarInverseBrandColor:                $navbarInverseLinkColor;
+
+
+// Pagination
+// -------------------------
+$paginationBackground:                $blue;
+$paginationBorder:                    transparent;
+$paginationActiveBackground:          $orange;
+
 
 // Hero unit
 // -------------------------
@@ -167,25 +232,43 @@ $heroUnitLeadColor:               inherit;
 // -------------------------
 $warningText:             #c09853;
 $warningBackground:       #fcf8e3;
-$warningBorder:           darken(adjust-hue($warningBackground, -10), .03);
+$warningBorder:           darken(adjust-hue($warningBackground, -10), 3%);
 
 $errorText:               #b94a48;
 $errorBackground:         #f2dede;
-$errorBorder:             darken(adjust-hue($errorBackground, -10), .03);
+$errorBorder:             darken(adjust-hue($errorBackground, -10), 3%);
 
 $successText:             #468847;
 $successBackground:       #dff0d8;
-$successBorder:           darken(adjust-hue($successBackground, -10), .05);
+$successBorder:           darken(adjust-hue($successBackground, -10), 5%);
 
 $infoText:                #3a87ad;
 $infoBackground:          #d9edf7;
-$infoBorder:              darken(adjust-hue($infoBackground, -10), .07);
+$infoBorder:              darken(adjust-hue($infoBackground, -10), 7%);
+
+
+// Tooltips and popovers
+// -------------------------
+$tooltipColor:            #fff;
+$tooltipBackground:       #000;
+$tooltipArrowWidth:       5px;
+$tooltipArrowColor:       $tooltipBackground;
+
+$popoverBackground:       #fff;
+$popoverArrowWidth:       10px;
+$popoverArrowColor:       #fff;
+$popoverTitleBackground:  darken($popoverBackground, 3%);
+
+// Special enhancement for popovers
+$popoverArrowOuterWidth:  $popoverArrowWidth + 1;
+$popoverArrowOuterColor:  rgba(0,0,0,.25);
 
 
 
 // GRID
 // --------------------------------------------------
 
+
 // Default 940px grid
 // -------------------------
 $gridColumns:             12;
@@ -193,7 +276,26 @@ $gridColumnWidth:         60px;
 $gridGutterWidth:         20px;
 $gridRowWidth:            ($gridColumns * $gridColumnWidth) + ($gridGutterWidth * ($gridColumns - 1));
 
+// 1200px min
+$gridColumnWidth1200:     70px;
+$gridGutterWidth1200:     30px;
+$gridRowWidth1200:        ($gridColumns * $gridColumnWidth1200) + ($gridGutterWidth1200 * ($gridColumns - 1));
+
+// 768px-979px
+$gridColumnWidth768:      42px;
+$gridGutterWidth768:      20px;
+$gridRowWidth768:         ($gridColumns * $gridColumnWidth768) + ($gridGutterWidth768 * ($gridColumns - 1));
+
+
 // Fluid grid
 // -------------------------
-$fluidGridColumnWidth:    6.382978723%;
-$fluidGridGutterWidth:    2.127659574%;
+$fluidGridColumnWidth:    percentage($gridColumnWidth/$gridRowWidth);
+$fluidGridGutterWidth:    percentage($gridGutterWidth/$gridRowWidth);
+
+// 1200px min
+$fluidGridColumnWidth1200:     percentage($gridColumnWidth1200/$gridRowWidth1200);
+$fluidGridGutterWidth1200:     percentage($gridGutterWidth1200/$gridRowWidth1200);
+
+// 768px-979px
+$fluidGridColumnWidth768:      percentage($gridColumnWidth768/$gridRowWidth768);
+$fluidGridGutterWidth768:      percentage($gridGutterWidth768/$gridRowWidth768);

data/vendor/assets/stylesheets/bootswatch/united/_bootswatch.scss

@@ -1,87 +1,128 @@
-// Swatch: United
-// Version: 2.0.2
+// United 2.2.2
+// Bootswatch
 // -----------------------------------------------------
 
+
 // TYPOGRAPHY
 // -----------------------------------------------------
 
-@import url("https://fonts.googleapis.com/css?family=Ubuntu");
+@import url(//fonts.googleapis.com/css?family=Ubuntu);
+
+// SCAFFOLDING
+// -----------------------------------------------------
 
 // NAVBAR
 // -----------------------------------------------------
 
-.navbar .nav > li > a {
-	border-right: 1px solid #C03D14;
-	border-left: 1px solid #E6633A;
+.navbar {
+
+	.nav > li > a {
+		border-right: 1px solid rgba(0, 0, 0, 0.2);
+		border-left: 1px solid rgba(255, 255, 255, 0.1);
 
-	&:hover {
-		background-color: $linkColorHover;
+		&:hover {
+			border-left: 1px solid rgba(0, 0, 0, 0.2);
+		}
 	}
-}
 
-// Lightened color of active item
-.navbar .nav .active > a,
-.navbar .nav .active > a:hover {
-  background-color: rgba(0,0,0,.2);
-}
+	.nav > .active > a,
+	.nav > .active > a:hover {
+		border-left: 1px solid rgba(0, 0, 0, 0.2);
+	}
 
-// Styled item divider
-.navbar .divider-vertical {
-	background-color: inherit;
-	border-right: 0px solid #CE4213;
-}
+	.divider-vertical {
+		background-color: inherit;
+		border-right: 1px solid rgba(0, 0, 0, 0.2);
+	}
 
-.navbar .navbar-text > a {
-	color: $white;
-	text-decoration: underline;
+	.navbar-text {
+		padding: 9px 10px 11px;
+		line-height: 19px;
+		color: $white;
+	}
 
-	&:hover {
-		color: #ddd;
+	.navbar-search .search-query {
+		margin-bottom: 3px;
+		border: 1px solid darken($navbarBackground, 15%);
 	}
 }
 
-.navbar-search .search-query {
-	border: 1px solid darken($navbarBackground, .15);
-}
+@media (max-width: $navbarCollapseWidth) {
+
+	.navbar .nav-collapse {
+
+		.nav li > a {
+			color: $white;
+			border-left: 0px solid $orange;
+			border-right: 0px solid $orange;
+
+			&:hover {
+				background-color: rgba(0, 0, 0, 0.3) !important;
+				background-image: none;
+			}
+		}
 
-.navbar .nav-collapse.in > .nav li > a {
-	color: $white;
-	border-left: 0px solid $orange;
-	border-right: 0px solid $orange;
+		.navbar-form,
+		.navbar-search {
+			border-top: 0px solid $orange;
+			border-bottom: 0px solid $orange;
+			@include box-shadow(none);
+		}
 
-	&:hover {
-		background-color: $linkColorHover;
+		.nav-header {
+			color: $grayLighter;
+		}
 	}
 }
 
-.navbar .nav-collapse.in .navbar-form,
-.navbar .nav-collapse.in .navbar-search {
-	border-top: 0px solid $orange;
-	border-bottom: 0px solid $orange;
-	@include box-shadow(none);
+// NAV
+// -----------------------------------------------------
+
+.nav-tabs .open .dropdown-toggle,
+.nav-pills .open .dropdown-toggle,
+.nav > li.dropdown.open.active > a:hover {
+	border-right: 1px solid #C03D14;
+	border-left: 1px solid #E6633A;
 }
 
 // BUTTONS
 // -----------------------------------------------------
 
 .btn-primary {
-  @include buttonBackground(lighten($btnPrimaryBackground, .15), $btnPrimaryBackground);
+  @include buttonBackground(lighten($btnPrimaryBackground, 15%), $btnPrimaryBackground);
 }
 
 .btn-warning {
-  @include buttonBackground(lighten($yellow, .15), $yellow);
+  @include buttonBackground(lighten($yellow, 15%), $yellow);
 }
 
-// ALERTS
+// TABLES
+// -----------------------------------------------------
+
+// FORMS
+// -----------------------------------------------------
+
+// DROPDOWNS
+// -----------------------------------------------------
+
+// ALERTS, LABELS, BADGES
 // -----------------------------------------------------
 
 .alert {
 	text-shadow: none;
 }
 
-// FORMS
+// MISC
 // -----------------------------------------------------
 
-.form-actions {
-	background-color: transparent;
+.hero-unit {
+    border: 1px solid rgba(0,0,0,.05);
+    @include box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
+
+	h1 {
+		line-height: 1.6em;
+	}
 }
+
+// MEDIA QUERIES
+// -----------------------------------------------------

data/vendor/assets/stylesheets/bootswatch/united/_variables.scss

@@ -1,11 +1,9 @@
-// Variables to customize the look and feel of Bootstrap
-// Swatch: United
-// Version: 2.0.2
-// -----------------------------------------------------
-
+// United 2.2.2
+// Variables
+// --------------------------------------------------
 
 
-// GLOBAL VALUES
+// Global values
 // --------------------------------------------------
 
 
@@ -16,7 +14,7 @@ $grayDarker:            #222;
 $grayDark:              #333;
 $gray:                  #555;
 $grayLight:             #999;
-$grayLighter:           #eee;
+$grayLighter:           #F5F5F5;
 $white:                 #fff;
 
 
@@ -41,21 +39,42 @@ $textColor:             $grayDark;
 // Links
 // -------------------------
 $linkColor:             $orange;
-$linkColorHover:        darken($linkColor, .15);
+$linkColorHover:        darken($linkColor, 15%);
 
 
 // Typography
 // -------------------------
-$baseFontSize:          13px;
-$baseFontFamily:        'Ubuntu', Tahoma, sans-serif;
-$baseLineHeight:        18px;
-$altFontFamily:         Georgia, "Times New Roman", Times, serif;
+$sansFontFamily:        'Ubuntu', Tahoma, sans-serif;
+$serifFontFamily:       Georgia, "Times New Roman", Times, serif;
+$monoFontFamily:        Menlo, Monaco, Consolas, "Courier New", monospace;
+
+$baseFontSize:          14px;
+$baseFontFamily:        $sansFontFamily;
+$baseLineHeight:        20px;
+$altFontFamily:         $serifFontFamily;
 
 $headingsFontFamily:    inherit; // empty to use BS default, $baseFontFamily
 $headingsFontWeight:    bold;    // instead of browser default, bold
 $headingsColor:         inherit; // empty to use BS default, $textColor
 
 
+// Component sizing
+// -------------------------
+// Based on 14px font-size and 20px line-height
+
+$fontSizeLarge:         $baseFontSize * 1.25; // ~18px
+$fontSizeSmall:         $baseFontSize * 0.85; // ~12px
+$fontSizeMini:          $baseFontSize * 0.75; // ~11px
+
+$paddingLarge:          11px 19px; // 44px
+$paddingSmall:          2px 10px;  // 26px
+$paddingMini:           0px 6px;   // 22px
+
+$baseBorderRadius:      4px;
+$borderRadiusLarge:     6px;
+$borderRadiusSmall:     3px;
+
+
 // Tables
 // -------------------------
 $tableBackground:                   transparent; // overall background-color
@@ -63,23 +82,22 @@ $tableBackgroundAccent:             #f9f9f9; // for striping
 $tableBackgroundHover:              #f5f5f5; // for hover
 $tableBorder:                       #ddd; // table and cell border
 
-
 // Buttons
 // -------------------------
 $btnBackground:                     $white;
-$btnBackgroundHighlight:            darken($white, .1);
-$btnBorder:                         darken($white, .2);
+$btnBackgroundHighlight:            darken($white, 10%);
+$btnBorder:                         darken($white, 20%);
 
 $btnPrimaryBackground:              $linkColor;
-$btnPrimaryBackgroundHighlight:     adjust-hue($btnPrimaryBackground, .15);
+$btnPrimaryBackgroundHighlight:     adjust-hue($btnPrimaryBackground, 15%);
 
-$btnInfoBackground:                 lighten($purple, .15);
+$btnInfoBackground:                 lighten($purple, 15%);
 $btnInfoBackgroundHighlight:        $purple;
 
 $btnSuccessBackground:              #62c462;
 $btnSuccessBackgroundHighlight:     #51a351;
 
-$btnWarningBackground:              lighten($orange, .15);
+$btnWarningBackground:              lighten($orange, 15%);
 $btnWarningBackgroundHighlight:     $orange;
 
 $btnDangerBackground:               #ee5f5b;
@@ -93,35 +111,50 @@ $btnInverseBackgroundHighlight:     $grayDarker;
 // -------------------------
 $inputBackground:               $white;
 $inputBorder:                   #ccc;
+$inputBorderRadius:             $baseBorderRadius;
 $inputDisabledBackground:       $grayLighter;
+$formActionsBackground:         transparent;
+$inputHeight:                   $baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border
 
 
 // Dropdowns
 // -------------------------
 $dropdownBackground:            $white;
 $dropdownBorder:                rgba(0,0,0,.2);
+$dropdownDividerTop:            #e5e5e5;
+$dropdownDividerBottom:         $white;
+
 $dropdownLinkColor:             $linkColor;
 $dropdownLinkColorHover:        $white;
-$dropdownLinkBackgroundHover:   $linkColor;
+$dropdownLinkColorActive:       $white;
 
+$dropdownLinkBackgroundActive:  $linkColor;
+$dropdownLinkBackgroundHover:   $dropdownLinkBackgroundActive;
 
 
 
 // COMPONENT VARIABLES
 // --------------------------------------------------
 
+
 // 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;
+$zindexTooltip:           1030;
 $zindexFixedNavbar:       1030;
 $zindexModalBackdrop:     1040;
 $zindexModal:             1050;
 
 
+// Sprite icons path
+// -------------------------
+$iconSpritePath:          "../img/glyphicons-halflings.png";
+$iconWhiteSpritePath:     "../img/glyphicons-halflings-white.png";
+
+
 // Input placeholder text color
 // -------------------------
 $placeholderText:         $grayLight;
@@ -132,28 +165,65 @@ $placeholderText:         $grayLight;
 $hrBorder:                $grayLighter;
 
 
+// Horizontal forms & lists
+// -------------------------
+$horizontalComponentOffset:       180px;
+
+
+// Wells
+// -------------------------
+$wellBackground:                  #f5f5f5;
+
+
 // Navbar
 // -------------------------
+$navbarCollapseWidth:             979px;
+$navbarCollapseDesktopWidth:      $navbarCollapseWidth + 1;
+
 $navbarHeight:                    40px;
-$navbarBackground:                $orange;
 $navbarBackgroundHighlight:       #CE4213;
+$navbarBackground:                $orange;
+$navbarBorder:                    darken($navbarBackground, 5%);
 
 $navbarText:                      $white;
 $navbarLinkColor:                 $white;
 $navbarLinkColorHover:            $white;
 $navbarLinkColorActive:           $navbarLinkColorHover;
-$navbarLinkBackgroundHover:       transparent;
-$navbarLinkBackgroundActive:      $navbarBackground;
+$navbarLinkBackgroundHover:       darken($navbarBackground, 12%);
+$navbarLinkBackgroundActive:      darken($navbarBackground, 12%);
+
+$navbarBrandColor:                $navbarLinkColor;
+
+// Inverted navbar
+$navbarInverseBackground:                $purple;
+$navbarInverseBackgroundHighlight:       lighten($purple, 4%);
+$navbarInverseBorder:                    darken($navbarInverseBackground, 5%);
+
+$navbarInverseText:                      $white;
+$navbarInverseLinkColor:                 $white;
+$navbarInverseLinkColorHover:            $white;
+$navbarInverseLinkColorActive:           $navbarInverseLinkColorHover;
+$navbarInverseLinkBackgroundHover:       darken($navbarInverseBackground, 8%);
+$navbarInverseLinkBackgroundActive:      darken($navbarInverseBackground, 8%);
+
+$navbarInverseSearchBackground:          lighten($navbarInverseBackground, 25%);
+$navbarInverseSearchBackgroundFocus:     $white;
+$navbarInverseSearchBorder:              $navbarInverseBackground;
+$navbarInverseSearchPlaceholderColor:    #eee;
+
+$navbarInverseBrandColor:                $navbarInverseLinkColor;
+
 
-$navbarSearchBackground:          lighten($navbarBackground, .25);
-$navbarSearchBackgroundFocus:     $white;
-$navbarSearchBorder:              darken($navbarSearchBackground, .3);
-$navbarSearchPlaceholderColor:    #ccc;
+// Pagination
+// -------------------------
+$paginationBackground:                #fff;
+$paginationBorder:                    #ddd;
+$paginationActiveBackground:          #f5f5f5;
 
 
 // Hero unit
 // -------------------------
-$heroUnitBackground:              lighten($purple, .2);
+$heroUnitBackground:              $grayLighter;
 $heroUnitHeadingColor:            inherit;
 $heroUnitLeadColor:               inherit;
 
@@ -161,27 +231,44 @@ $heroUnitLeadColor:               inherit;
 // Form states and alerts
 // -------------------------
 $warningText:             #ECA918;
-$warningBackground:       lighten($warningText, .4);
-$warningBorder:           darken(adjust-hue($warningBackground, -10), .03);
+$warningBackground:       lighten($warningText, 40%);
+$warningBorder:           darken(adjust-hue($warningBackground, -10), 3%);
 
 $errorText:               #DF382C;
-$errorBackground:         lighten($errorText, .4);
-$errorBorder:             darken(adjust-hue($errorBackground, -10), .03);
+$errorBackground:         lighten($errorText, 40%);
+$errorBorder:             darken(adjust-hue($errorBackground, -10), 3%);
 
 $successText:             #38B44A;
-$successBackground:       lighten($successText, .4);
-$successBorder:           darken(adjust-hue($successBackground, -10), .05);
+$successBackground:       lighten($successText, 40%);
+$successBorder:           darken(adjust-hue($successBackground, -10), 5%);
 
 $infoText:                $purple;
-$infoBackground:          lighten($purple, .5);
-$infoBorder:              darken(adjust-hue($infoBackground, -10), .07);
+$infoBackground:          lighten($purple, 50%);
+$infoBorder:              darken(adjust-hue($infoBackground, -10), 7%);
+
+
+// Tooltips and popovers
+// -------------------------
+$tooltipColor:            #fff;
+$tooltipBackground:       #000;
+$tooltipArrowWidth:       5px;
+$tooltipArrowColor:       $tooltipBackground;
+
+$popoverBackground:       #fff;
+$popoverArrowWidth:       10px;
+$popoverArrowColor:       #fff;
+$popoverTitleBackground:  darken($popoverBackground, 3%);
 
+// Special enhancement for popovers
+$popoverArrowOuterWidth:  $popoverArrowWidth + 1;
+$popoverArrowOuterColor:  rgba(0,0,0,.25);
 
 
 
 // GRID
 // --------------------------------------------------
 
+
 // Default 940px grid
 // -------------------------
 $gridColumns:             12;
@@ -189,8 +276,26 @@ $gridColumnWidth:         60px;
 $gridGutterWidth:         20px;
 $gridRowWidth:            ($gridColumns * $gridColumnWidth) + ($gridGutterWidth * ($gridColumns - 1));
 
+// 1200px min
+$gridColumnWidth1200:     70px;
+$gridGutterWidth1200:     30px;
+$gridRowWidth1200:        ($gridColumns * $gridColumnWidth1200) + ($gridGutterWidth1200 * ($gridColumns - 1));
+
+// 768px-979px
+$gridColumnWidth768:      42px;
+$gridGutterWidth768:      20px;
+$gridRowWidth768:         ($gridColumns * $gridColumnWidth768) + ($gridGutterWidth768 * ($gridColumns - 1));
+
 
 // Fluid grid
 // -------------------------
-$fluidGridColumnWidth:    6.382978723%;
-$fluidGridGutterWidth:    2.127659574%;
+$fluidGridColumnWidth:    percentage($gridColumnWidth/$gridRowWidth);
+$fluidGridGutterWidth:    percentage($gridGutterWidth/$gridRowWidth);
+
+// 1200px min
+$fluidGridColumnWidth1200:     percentage($gridColumnWidth1200/$gridRowWidth1200);
+$fluidGridGutterWidth1200:     percentage($gridGutterWidth1200/$gridRowWidth1200);
+
+// 768px-979px
+$fluidGridColumnWidth768:      percentage($gridColumnWidth768/$gridRowWidth768);
+$fluidGridGutterWidth768:      percentage($gridGutterWidth768/$gridRowWidth768);