bootswatch-rails 0.2.0 → 0.3.0

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

@@ -1,11 +1,9 @@
-// Variables to customize the look and feel of Bootstrap
-// Swatch: Slate
-// Version: 2.0.2
-// -----------------------------------------------------
-
+// Slate 2.2.2
+// Variables
+// --------------------------------------------------
 
 
-// GLOBAL VALUES
+// Global values
 // --------------------------------------------------
 
 
@@ -15,17 +13,17 @@ $black:                 #000;
 $grayDarker:            #272B30;
 $grayDark:              #3A3F44;
 $gray:                  #52575C;
-$grayLight:             #757C82;
+$grayLight:             #7A8288;
 $grayLighter:           #BBBFC2;
 $white:                 #fff;
 
 
 // Accent colors
 // -------------------------
-$blue:                  #02A1DD;
+$blue:                  #5bc0de;
 $blueDark:              #108CBB;
-$green:                 #87CA4D;
-$red:                   #9d261d;
+$green:                 #62c462;
+$red:                   #ee5f5b;
 $yellow:                #F6D30D;
 $orange:                #f89406;
 $pink:                  #c3325f;
@@ -35,7 +33,7 @@ $purple:                #7a43b6;
 // Scaffolding
 // -------------------------
 $bodyBackground:        $grayDarker;
-$textColor:             $grayLight;
+$textColor:             #C8C8C8;
 
 
 // Links
@@ -46,43 +44,63 @@ $linkColorHover:        $white;
 
 // Typography
 // -------------------------
-$baseFontSize:          13px;
-$baseFontFamily:        "Helvetica Neue", Helvetica, Arial, sans-serif;
-$baseLineHeight:        18px;
-$altFontFamily:         Georgia, "Times New Roman", Times, serif;
+$sansFontFamily:        "Helvetica Neue", Helvetica, Arial, sans-serif;
+$serifFontFamily:       Georgia, "Times New Roman", Times, serif;
+$monoFontFamily:        Menlo, Monaco, Consolas, "Courier New", monospace;
+
+$baseFontSize:          14px;
+$baseFontFamily:        $sansFontFamily;
+$baseLineHeight:        21px;
+$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
-$tableBackgroundAccent:             #f9f9f9; // for striping
-$tableBackgroundHover:              #f5f5f5; // for hover
-$tableBorder:                       darken($grayDarker, .05); // table and cell border
-
+$tableBackgroundAccent:             darken($grayDark, 5%); // for striping
+$tableBackgroundHover:              $grayDark; // for hover
+$tableBorder:                       darken($grayDarker, 5%); // table and cell border
 
 // Buttons
 // -------------------------
 $btnBackground:                     $white;
-$btnBackgroundHighlight:            darken($white, .1);
-$btnBorder:                         darken($white, .2);
+$btnBackgroundHighlight:            darken($white, 10%);
+$btnBorder:                         darken($white, 20%);
 
-$btnPrimaryBackground:              $grayLight;
-$btnPrimaryBackgroundHighlight:     adjust-hue($btnPrimaryBackground, .15);
+$btnPrimaryBackground:              $grayLighter;
+$btnPrimaryBackgroundHighlight:     adjust-hue($btnPrimaryBackground, 15%);
 
-$btnInfoBackground:                 #5bc0de;
+$btnInfoBackground:                 $blue;
 $btnInfoBackgroundHighlight:        #2f96b4;
 
-$btnSuccessBackground:              #62c462;
+$btnSuccessBackground:              $green;
 $btnSuccessBackgroundHighlight:     #51a351;
 
-$btnWarningBackground:              lighten($orange, .15);
+$btnWarningBackground:              lighten($orange, 15%);
 $btnWarningBackgroundHighlight:     $orange;
 
-$btnDangerBackground:               #ee5f5b;
+$btnDangerBackground:               $red;
 $btnDangerBackgroundHighlight:      #bd362f;
 
 $btnInverseBackground:              $gray;
@@ -93,35 +111,50 @@ $btnInverseBackgroundHighlight:     $grayDarker;
 // -------------------------
 $inputBackground:               $white;
 $inputBorder:                   #ccc;
+$inputBorderRadius:             $baseBorderRadius;
 $inputDisabledBackground:       $grayLighter;
+$formActionsBackground:         darken($grayDarker, 3%);
+$inputHeight:                   $baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border
 
 
 // Dropdowns
 // -------------------------
-$dropdownBackground:            $white;
+$dropdownBackground:            $grayDark;
 $dropdownBorder:                rgba(0,0,0,.2);
-$dropdownLinkColor:             $grayDark;
+$dropdownDividerTop:            transparent;
+$dropdownDividerBottom:         darken($grayDarker, 5%);
+
+$dropdownLinkColor:             $grayLight;
 $dropdownLinkColorHover:        $white;
-$dropdownLinkBackgroundHover:   $linkColor;
+$dropdownLinkColorActive:       $white;
 
+$dropdownLinkBackgroundActive:  $grayDarker;
+$dropdownLinkBackgroundHover:   $grayDarker;
 
 
 
 // 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:                  darken($grayDarker, 3%);
+
+
 // Navbar
 // -------------------------
+$navbarCollapseWidth:             979px;
+$navbarCollapseDesktopWidth:      $navbarCollapseWidth + 1;
+
 $navbarHeight:                    40px;
 $navbarBackground:                $grayDarker;
 $navbarBackgroundHighlight:       $grayDark;
+$navbarBorder:                    darken($navbarBackground, 12%);
 
-$navbarText:                      $grayLight;
-$navbarLinkColor:                 $grayLight;
+$navbarText:                      $textColor;
+$navbarLinkColor:                 $textColor;
 $navbarLinkColorHover:            $white;
 $navbarLinkColorActive:           $navbarLinkColorHover;
-$navbarLinkBackgroundHover:       transparent;
+$navbarLinkBackgroundHover:       $grayDark;
 $navbarLinkBackgroundActive:      $navbarBackground;
 
-$navbarSearchBackground:          lighten($navbarBackground, .25);
-$navbarSearchBackgroundFocus:     $white;
-$navbarSearchBorder:              darken($navbarSearchBackground, .3);
-$navbarSearchPlaceholderColor:    #ccc;
+$navbarBrandColor:                $grayLighter;
+
+// Inverted navbar
+$navbarInverseBackground:                darken($grayDarker, 10%);
+$navbarInverseBackgroundHighlight:       $grayDarker;
+$navbarInverseBorder:                    #252525;
+
+$navbarInverseText:                      $grayLight;
+$navbarInverseLinkColor:                 $grayLight;
+$navbarInverseLinkColorHover:            $white;
+$navbarInverseLinkColorActive:           $navbarInverseLinkColorHover;
+$navbarInverseLinkBackgroundHover:       transparent;
+$navbarInverseLinkBackgroundActive:      $navbarInverseBackground;
+
+$navbarInverseSearchBackground:          lighten($navbarInverseBackground, 25%);
+$navbarInverseSearchBackgroundFocus:     $white;
+$navbarInverseSearchBorder:              $navbarInverseBackground;
+$navbarInverseSearchPlaceholderColor:    #ccc;
+
+$navbarInverseBrandColor:                $navbarInverseLinkColor;
+
+
+// Pagination
+// -------------------------
+$paginationBackground:                #fff;
+$paginationBorder:                    #ddd;
+$paginationActiveBackground:          #f5f5f5;
 
 
 // Hero unit
 // -------------------------
-$heroUnitBackground:              $grayLighter;
+$heroUnitBackground:              darken($grayDarker, 3%);
 $heroUnitHeadingColor:            inherit;
 $heroUnitLeadColor:               inherit;
 
@@ -162,26 +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:       $dropdownBackground;
+$tooltipArrowWidth:       5px;
+$tooltipArrowColor:       $tooltipBackground;
+
+$popoverBackground:       $dropdownBackground;
+$popoverArrowWidth:       10px;
+$popoverArrowColor:       $dropdownBackground;
+$popoverTitleBackground:  lighten($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);

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

@@ -1,12 +1,12 @@
-// Bootswatch.less
-// Swatch: Spacelab
-// Version: 2.1.1
+// Spacelab 2.2.2
+// Bootswatch
 // -----------------------------------------------------
 
+
 // TYPOGRAPHY
 // -----------------------------------------------------
 
-@import url('http://fonts.googleapis.com/css?family=Muli');
+@import url('//fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700');
 
 // SCAFFOLDING
 // -----------------------------------------------------
@@ -17,8 +17,7 @@
 .navbar {
 
 	.navbar-inner {
-		border-bottom: 1px solid #CACACA;
-		@include box-shadow(0 1px 0 rgba(255,255,255,0.4));
+		@include box-shadow(0 1px 0 rgba(255,255,255,0.4), 0 1px 0 rgba(0,0,0,0.8));
 	}
 
 	.brand {
@@ -26,19 +25,18 @@
 		text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
 
 		&:hover {
-			color: $linkColor;
+			color: $navbarLinkColorHover;
 		}
 	}
 
 	.nav > li > a {
-		padding: 11px 10px 9px;
+		padding: 11px 10px 8px;
 		text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
 	}
 
 	.navbar-text {
-		margin-top: 2px;
-		padding: 0 10px;
-		line-height: 38px;
+		padding: 11px 10px 8px;
+		line-height: inherit;
 	}
 
 	.navbar-search .search-query,
@@ -55,33 +53,34 @@
 			color: $textColor;
 		}
 	}
-}
 
-.navbar-inverse {
-	.brand {
-		text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
+	.navbar-inverse {
 
-		&:hover {
-			color: $white;
+		.brand {
+			text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
+
+			&:hover {
+				color: $white;
+			}
 		}
-	}
 
-	.nav > li > a {
-		text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
-	}
+		.nav > li > a {
+			text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
+		}
 
-	.nav li.dropdown.open > .dropdown-toggle .caret,
-	.nav li.dropdown:hover > .dropdown-toggle .caret,
-	.nav li.dropdown.open:hover > .dropdown-toggle .caret {
-		border-top-color: $white;
-	}
+		.nav li.dropdown.open > .dropdown-toggle .caret,
+		.nav li.dropdown:hover > .dropdown-toggle .caret,
+		.nav li.dropdown.open:hover > .dropdown-toggle .caret {
+			border-top-color: $white;
+		}
 
-	.navbar-search .search-query,
-	.navbar-search .search-query:hover {
+		.navbar-search .search-query,
+		.navbar-search .search-query:hover {
 
-		color: $white;
+			color: $white;
 
-		@include placeholder($grayLighter);
+			@include placeholder($grayLighter);
+		}
 	}
 }
 
@@ -121,10 +120,10 @@ div.subnav {
 
 	.nav > li > a {
 
-		color: $textColor;
+		color: $navbarLinkColor;
 
 		&:hover {
-			color: $linkColor;
+			color: $navbarLinkColorHover;
 		}
 	}
 
@@ -176,59 +175,6 @@ div.subnav {
 // BUTTONS
 // -----------------------------------------------------
 
-.btn-info {
-	&:hover,
-	&.disabled {
-		
-		color: $textColor;
-		text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
-
-		.caret {
-			border-top-color: $textColor;
-			border-bottom-color: $textColor;
-		}
-	}
-}
-
-/*.btn {
-	.buttonBackground(#F4F4F4, #ECECEC);
-	color: $textColor;
-	text-shadow: none;
-
-
-	&:hover,
-	&:active,
-	&.active,
-	&.disabled,
-	&[disabled] {
-		color: $grayDark;
-	}
-}
-
-.btn-primary {
-	.buttonBackground(#909090, #3F3F3F);
-}
-
-.btn-warning {
-  .buttonBackground(adjust-hue($yellow, .15), $yellow);
-}
-
-.btn-danger {
-  .buttonBackground(adjust-hue(#DA2D2D, .15), #DA2D2D);
-}
-
-.btn-success {
-  .buttonBackground(#8ADD6D, #60B044);
-}
-
-.btn-info {
-  .buttonBackground(adjust-hue(#4488BB, .15), #4488BB);
-}
-
-.btn-inverse {
-  .buttonBackground(adjust-hue($purple, .05), $purple);
-}*/
-
 // TABLES
 // -----------------------------------------------------
 
@@ -254,41 +200,48 @@ div.subnav {
 // -----------------------------------------------------
 
 .alert {
-	color: $white;
+	
 	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+
+	h1, h2, h3, h4, h5, h6 {
+		color: $white;
+		font-weight: bold;
+		text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+	}
 }
 
 .label, .badge {
+
 	padding-top: 4px;
 
-}
-.label-important, .badge-important{
-	background-color: $red;
-}
+	.label,-important {
+		background-color: $red;
+	}
 
-.label-warning, .badge-warning {
-	background-color: $orange;
-}
+	.label,-warning {
+		background-color: $orange;
+	}
 
-.label-success, .badge-success {
-	background-color: $green;
-}
+	.label,-success {
+		background-color: $green;
+	}
 
-.label-info, .badge-info {
-	background-color: $blue;
+	.label,-info {
+		background-color: $blue;
+	}
 }
 
 // MISC
 // -----------------------------------------------------
 
 .well {
-	background-color: $grayLighter;
+	@include box-shadow(inset 1px 1px 0 rgba(0,0,0,.1));
 }
 
 .hero-unit {
-    @include box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
-    border: 1px solid rgba(0,0,0,.05);
+	@include box-shadow(inset 1px 1px 0 rgba(0,0,0,.1));
+	border: 1px solid rgba(0,0,0,.1);
 }
 
 // MEDIA QUERIES
-// -----------------------------------------------------
+// -----------------------------------------------------