bootswatch-rails 0.2.0 → 0.3.0

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

@@ -1,8 +1,6 @@
-// Variables to customize the look and feel of Bootstrap
-// Swatch: Cerulean
-// Version: 2.0.2
-// -----------------------------------------------------
-
+// Cerulean 2.2.2
+// Variables
+// --------------------------------------------------
 
 
 // GLOBAL VALUES
@@ -16,13 +14,13 @@ $grayDarker:            #222;
 $grayDark:              #333;
 $gray:                  #555;
 $grayLight:             #999;
-$grayLighter:           #eee;
+$grayLighter:           #F5F5F5;
 $white:                 #fff;
 
 
 // Accent colors
 // -------------------------
-$blue:                  #3E78B3;
+$blue:                  #2FA4E7;
 $blueDark:              #033C73;
 $green:                 #73A839;
 $red:                   #C71C22;
@@ -40,22 +38,43 @@ $textColor:             $gray;
 
 // Links
 // -------------------------
-$linkColor:             #369BD7;
-$linkColorHover:        darken($linkColor, .15);
+$linkColor:             $blue;
+$linkColorHover:        darken($linkColor, 15%);
 
 
 // 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:        20px;
+$altFontFamily:         $monoFontFamily;
 
 $headingsFontFamily:    'Telex', sans-serif; // empty to use BS default, $baseFontFamily
 $headingsFontWeight:    bold;    // instead of browser default, bold
 $headingsColor:         #317EAC; // 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,15 +82,14 @@ $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:                 $purple;
 $btnInfoBackgroundHighlight:        #2f96b4;
@@ -85,7 +103,7 @@ $btnWarningBackgroundHighlight:     $orange;
 $btnDangerBackground:               $red;
 $btnDangerBackgroundHighlight:      #bd362f;
 
-$btnInverseBackground:              $yellow;
+$btnInverseBackground:              $blueDark;
 $btnInverseBackgroundHighlight:     $grayDarker;
 
 
@@ -93,23 +111,32 @@ $btnInverseBackgroundHighlight:     $grayDarker;
 // -------------------------
 $inputBackground:               $white;
 $inputBorder:                   #ccc;
+$inputBorderRadius:             $baseBorderRadius;
 $inputDisabledBackground:       $grayLighter;
+$formActionsBackground:         #f5f5f5;
+$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:             $grayDark;
 $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
@@ -122,6 +149,12 @@ $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,23 +165,60 @@ $placeholderText:         $grayLight;
 $hrBorder:                $grayLighter;
 
 
+// Horizontal forms & lists
+// -------------------------
+$horizontalComponentOffset:       180px;
+
+
+// Wells
+// -------------------------
+$wellBackground:                  #f5f5f5;
+
+
 // Navbar
 // -------------------------
-$navbarHeight:                    40px;
-$navbarBackground:                $linkColor;
-$navbarBackgroundHighlight:       lighten($linkColor, .1);
+$navbarCollapseWidth:             979px;
+$navbarCollapseDesktopWidth:      $navbarCollapseWidth + 1;
+
+$navbarHeight:                    50px;
+$navbarBackground:                $blue;
+$navbarBackgroundHighlight:       lighten($navbarBackground, 8%);
+$navbarBorder:                    darken($navbarBackground, 8%);
 
 $navbarText:                      $grayLighter;
-$navbarLinkColor:                 $grayLighter;
+$navbarLinkColor:                 $white;
 $navbarLinkColorHover:            $white;
 $navbarLinkColorActive:           $navbarLinkColorHover;
-$navbarLinkBackgroundHover:       transparent;
-$navbarLinkBackgroundActive:      $navbarBackground;
+$navbarLinkBackgroundHover:       darken($navbarBackground, 12%);
+$navbarLinkBackgroundActive:      darken($navbarBackground, 12%);
+
+$navbarBrandColor:                $navbarLinkColor;
+
+// Inverted navbar
+$navbarInverseBackground:                $blueDark;
+$navbarInverseBackgroundHighlight:       lighten($navbarInverseBackground, 5%);
+$navbarInverseBorder:                    darken($navbarInverseBackground, 3%);
 
-$navbarSearchBackground:          lighten($navbarBackground, .25);
-$navbarSearchBackgroundFocus:     $white;
-$navbarSearchBorder:              darken($navbarSearchBackground, .3);
-$navbarSearchPlaceholderColor:    $white;
+$navbarInverseText:                      $white;
+$navbarInverseLinkColor:                 $white;
+$navbarInverseLinkColorHover:            $white;
+$navbarInverseLinkColorActive:           $white;
+$navbarInverseLinkBackgroundHover:       darken($navbarInverseBackground, 6%);
+$navbarInverseLinkBackgroundActive:      darken($navbarInverseBackground, 6%);
+
+$navbarInverseSearchBackground:          $white;
+$navbarInverseSearchBackgroundFocus:     $white;
+$navbarInverseSearchBorder:              $navbarInverseBackground;
+$navbarInverseSearchPlaceholderColor:    $grayLight;
+
+$navbarInverseBrandColor:                $navbarInverseLinkColor;
+
+
+// Pagination
+// -------------------------
+$paginationBackground:                #fff;
+$paginationBorder:                    #ddd;
+$paginationActiveBackground:          #f5f5f5;
 
 
 // Hero unit
@@ -160,28 +230,45 @@ $heroUnitLeadColor:               inherit;
 
 // Form states and alerts
 // -------------------------
-$warningText:             darken($linkColor, .2);
-$warningBackground:       lighten($linkColor, .2);
-$warningBorder:           darken(adjust-hue($warningBackground, -10), .03);
+$warningText:             $orange;
+$warningBackground:       #F1CEAB;
+$warningBorder:           darken(adjust-hue($warningBackground, -10), 3%);
 
-$errorText:               darken(#C45559, .05);
-$errorBackground:         #EDDBE3;
-$errorBorder:             darken(adjust-hue($errorBackground, -10), .03);
+$errorText:               darken(#C45559, 5%);
+$errorBackground:         #F2BDB1;
+$errorBorder:             darken(adjust-hue($errorBackground, -10), 3%);
 
-$successText:             darken($green, .05);
-$successBackground:       #CDB;
-$successBorder:           darken(adjust-hue($successBackground, -10), .05);
+$successText:             darken($green, 5%);
+$successBackground:       #D5ECBF;
+$successBorder:           darken(adjust-hue($successBackground, -10), 5%);
 
-$infoText:                darken(#908A62, .05);
-$infoBackground:          #EDEBE1;
-$infoBorder:              darken(adjust-hue($infoBackground, -10), .07);
+$infoText:                darken(#908A62, 5%);
+$infoBackground:          #A7DFF1;
+$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);

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

@@ -1,12 +1,12 @@
-// Swatch: Cosmo
-// Version: 2.0.2
+// Cosmo 2.2.2
+// Bootswatch
 // -----------------------------------------------------
 
 
 // TYPOGRAPHY
 // -----------------------------------------------------
 
-@import url('https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700');
+@import url('//fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700');
 
 body {
 	font-weight: 300;
@@ -58,8 +58,8 @@ blockquote {
 
 	.navbar-inner {
 		background-image: none;
-        @include box-shadow(none);
-        @include border-radius(0);
+		@include box-shadow(none);
+		@include border-radius(0);
 	}
 
 	.brand {
@@ -72,7 +72,7 @@ blockquote {
 	.nav > .active > a,
 	.nav > .active > a:hover,
 	.nav > .active > a:focus {
-        @include box-shadow(none);
+		@include box-shadow(none);
 		background-color: $navbarLinkBackgroundHover;
 	}
 
@@ -102,7 +102,7 @@ blockquote {
 		.nav > .active > a:hover,
 		.nav > .active > a:focus {
 			background-color: $navbarInverseLinkBackgroundHover;
-            @include box-shadow(none);
+			@include box-shadow(none);
 			color: $white;
 		}
 
@@ -116,9 +116,9 @@ div.subnav {
 
 	background-color: $grayLight;
 	background-image: none;
-    @include box-shadow(none);
-	border-color: transparent;
-    @include border-radius(0);
+	@include box-shadow(none);
+	border: none;
+	@include border-radius(0);
 
 	.nav {
 		background-color: transparent;
@@ -128,20 +128,16 @@ div.subnav {
 		border-color: transparent;
 	}
 
-	.nav > .active > a {
+	.nav > .active > a,
+	.nav > .active > a:hover {
 		border-color: transparent;
-		background-color: transparent;
+		background-color: $black;
+		color: $white;
 		// border-left-width: 2px;
 		@include box-shadow(none);
-		color: $grayDarker;
-
-		&:hover {
-			background-color: $black;
-			color: $white;
-		}
 	}
 
-    &.subnav-fixed {
+	div.subnav-fixed {
 		top: $navbarHeight;
 	}
 }
@@ -161,7 +157,7 @@ div.subnav {
 .nav-tabs {
 
 	& > li > a {
-         @include border-radius(0);
+		@include border-radius(0);
 	}
 
 	&.nav-stacked {
@@ -249,7 +245,7 @@ div.subnav {
 		}
 
 		& > .active > a,
-		& > .active > span {
+		& > .active > span { 
 			color: $white;
 		}
 
@@ -304,25 +300,28 @@ div.subnav {
 // -----------------------------------------------------
 
 .btn {
-
 	padding: 5px 12px;
 	background-image: none;
 	@include box-shadow(none);
 	border: none;
-    @include border-radius(0);
+	@include border-radius(0);
 	text-shadow: none;
 
 	&.disabled {
-		box-shadow: inset 0 2px 4px rgba(0,0,0,.15),0 1px 2px rgba(0,0,0,.05);
+		box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
 	}
+}
 
-	&.btn-large {
-		padding: 22px 30px;
-	}
+.btn-large {
+	padding: 22px 30px;
+}
 
-	&.btn-mini {
-		padding: 2px 6px;
-	}
+.btn-small {
+	padding: 2px 10px;
+}
+
+.btn-mini {
+	padding: 2px 6px;
 }
 
 .btn-group {
@@ -355,7 +354,7 @@ div.subnav {
 		color: $white;
 	}
 
-	&.table-bordered {
+	.table-bordered {
 		@include border-radius(0);
 
 		thead:first-child tr:first-child th:first-child,
@@ -385,7 +384,7 @@ input[type="search"], input[type="tel"], input[type="color"] {
 
 	&.warning {
 
-		& > label,
+		.control-label,
 		.help-block,
 		.help-inline {
 			color: $orange;
@@ -401,7 +400,7 @@ input[type="search"], input[type="tel"], input[type="color"] {
 
 	&.error {
 
-		& > label,
+		.control-label,
 		.help-block,
 		.help-inline {
 			color: $red;
@@ -417,7 +416,7 @@ input[type="search"], input[type="tel"], input[type="color"] {
 
 	&.success {
 
-		& > label,
+		.control-label,
 		.help-block,
 		.help-inline {
 			color: $green;
@@ -456,7 +455,7 @@ legend {
 	@include border-radius(0);
 	text-shadow: none;
 
-	&.alert-heading, h1, h2, h3, h4, h5, h6 {
+	.alert-heading, h1, h2, h3, h4, h5, h6 {
 		color: $white;
 	}
 }
@@ -468,42 +467,44 @@ legend {
 	font-weight: 300;
 	text-shadow: none;
 
-	&.label-success {
+	.label-success {
 		background-color: $green;
 	}
 
-	&.label-important {
+	.label-important {
 		background-color: $red;
 	}
 
-	&.label-info {
+	.label-info {
 		background-color: $purple;
 	}
 
-	&.label-inverse {
+	.label-inverse {
 		background-color: $black;
 	}
 }
 
 .badge {
-    @include border-radius(0);
-    font-weight: 300;
-    text-shadow: none;
-    .badge-success {
-        background-color: $green;
-    }
 
-    .badge-important {
-        background-color: $red;
-    }
+	@include border-radius(0);
+	font-weight: 300;
+	text-shadow: none;
 
-    .badge-info {
-        background-color: $purple;
-    }
+	.badge-success {
+		background-color: $green;
+	}
 
-    .badge-inverse {
-        background-color: $black;
-    }
+	.badge-important {
+		background-color: $red;
+	}
+
+	.badge-info {
+		background-color: $purple;
+	}
+
+	.badge-inverse {
+		background-color: $black;
+	}
 }
 
 // MISC
@@ -547,19 +548,19 @@ a.thumbnail {
 		background-image: none;
 	}
 
-	&.progress-info {
+	.progress-info {
 		background-color: $purple;
 	}
 
-	&.progress-success {
+	.progress-success {
 		background-color: $green;
 	}
 
-	&.progress-warning {
+	.progress-warning {
 		background-color: $orange;
 	}
 
-	&.progress-danger {
+	.progress-danger {
 		background-color: $red;
 	}
 }
@@ -567,11 +568,11 @@ a.thumbnail {
 .modal {
 	@include border-radius(0);
 
-	&.modal-header {
+	.modal-header {
 		border-bottom: none;
 	}
 
-	&.modal-footer {
+	.modal-footer {
 		border-top: none;
 		background-color: transparent;
 	}
@@ -581,7 +582,7 @@ a.thumbnail {
 	@include border-radius(0);
 	color: $white;
 
-	&.popover-title {
+	.popover-title {
 		border-bottom: none;
 		color: $white;
 	}