bootswatch-rails 0.2.0 → 0.3.0

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

@@ -1,11 +1,9 @@
-// Variables to customize the look and feel of Bootstrap
-// Swatch: Amelia
-// Version: 2.0.2
-// -----------------------------------------------------
-
+// Amelia 2.2.2
+// Variables
+// --------------------------------------------------
 
 
-// GLOBAL VALUES
+// Global values
 // --------------------------------------------------
 
 
@@ -13,7 +11,7 @@
 // -------------------------
 $black:                 #000;
 $grayDarker:            #111;
-$grayDark:              #333;
+$grayDark:              #444;
 $gray:                  #555;
 $grayLight:             #aaa;
 $grayLighter:           #ddd;
@@ -24,9 +22,9 @@ $white:                 #fff;
 // -------------------------
 $blue:                  #00BCE1;
 $blueDark:              #1269B0;
-$green:                 #7FC518;
-$red:                   #E51925;
-$yellow:                #EAC504;
+$green:                 #48CA3B;
+$red:                   #AD1D28;
+$yellow:                #DEBB27;
 $orange:                #DF6E1E;
 $pink:                  #FFBCB9;
 $purple:                #4D3A7D;
@@ -40,51 +38,145 @@ $textColor:             rgba(255, 255, 255, 0.9);
 
 // Links
 // -------------------------
-$linkColor:             lighten($yellow, .15);
+$linkColor:             lighten($yellow, 15%);
 $linkColorHover:        $linkColor;
 
 
 // Typography
 // -------------------------
+$sansFontFamily:        'Cabin', Verdana, sans-serif;
+$serifFontFamily:       Georgia, "Times New Roman", Times, serif;
+$monoFontFamily:        Menlo, Monaco, Consolas, "Courier New", monospace;
+
 $baseFontSize:          14px;
-$baseFontFamily:        'Cabin', Verdana, sans-serif;
+$baseFontFamily:        $sansFontFamily;
 $baseLineHeight:        20px;
-$altFontFamily:         Georgia, "Times New Roman", Times, serif;
+$altFontFamily:         $serifFontFamily;
 
 $headingsFontFamily:    'Lobster', cursive; // empty to use BS default, $baseFontFamily
 $headingsFontWeight:    normal;    // 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:          20px 24px; // 58px
+$paddingSmall:          8px 12px;  // 34px
+$paddingMini:           4px 8px;   // 28px
+
+$baseBorderRadius:      0;
+$borderRadiusLarge:     6px;
+$borderRadiusSmall:     3px;
+
+
 // Tables
 // -------------------------
-$tableBackground:                   lighten(#147E88, .1); // overall background-color
-$tableBackgroundAccent:             lighten(#147E88, .15); // for striping
+$tableBackground:                   lighten(#147E88, 10%); // overall background-color
+$tableBackgroundAccent:             lighten(#147E88, 15%); // for striping
 $tableBackgroundHover:              rgba(255, 255, 255, 0.4); // for hover
-$tableBorder:                       lighten(#147E88, .12); // table and cell border
+$tableBorder:                       lighten(#147E88, 12%); // table and cell border
+
+
+// Navbar
+// -------------------------
+$navbarCollapseWidth:             979px;
+$navbarCollapseDesktopWidth:      $navbarCollapseWidth + 1;
+
+$navbarHeight:                    50px;
+$navbarBackgroundHighlight:       $red;
+$navbarBackground:                $red;
+$navbarBorder:                    darken($navbarBackground, 12%);
+
+$navbarText:                      $white;
+$navbarLinkColor:                 $white;
+$navbarLinkColorHover:            $white;
+$navbarLinkColorActive:           $navbarLinkColorHover;
+$navbarLinkBackgroundHover:       lighten($navbarBackground, 10%);
+$navbarLinkBackgroundActive:      lighten($navbarBackground, 10%);
+
+$navbarBrandColor:                $navbarLinkColor;
+
+// Inverted navbar
+$navbarInverseBackground:                $yellow;
+$navbarInverseBackgroundHighlight:       $yellow;
+$navbarInverseBorder:                    rgba(0, 0, 0, 0.1);
+
+$navbarInverseText:                      $white;
+$navbarInverseLinkColor:                 $white;
+$navbarInverseLinkColorHover:            $white;
+$navbarInverseLinkColorActive:           $white;
+$navbarInverseLinkBackgroundHover:       rgba(255, 255, 255, 0.2);
+$navbarInverseLinkBackgroundActive:      rgba(255, 255, 255, 0.2);
+
+$navbarInverseSearchBackground:          lighten($navbarInverseBackground, 25%);
+$navbarInverseSearchBackgroundFocus:     $white;
+$navbarInverseSearchBorder:              $navbarInverseBackground;
+$navbarInverseSearchPlaceholderColor:    $white;
+
+$navbarInverseBrandColor:                $navbarInverseLinkColor;
+
+
+// Buttons
+// -------------------------
+$btnBackground:                     $grayLighter;
+$btnBackgroundHighlight:            $grayLighter;
+$btnBorder:                         rgba(0, 0, 0, 0);
+
+$btnPrimaryBackground:              $navbarBackground;
+$btnPrimaryBackgroundHighlight:     $navbarBackground;
+
+$btnInfoBackground:                 $purple;
+$btnInfoBackgroundHighlight:        $purple;
+
+$btnSuccessBackground:              $green;
+$btnSuccessBackgroundHighlight:     $green;
+
+$btnWarningBackground:              $orange;
+$btnWarningBackgroundHighlight:     $orange;
+
+$btnDangerBackground:               $yellow;
+$btnDangerBackgroundHighlight:      $yellow;
+
+$btnInverseBackground:              #27666D;
+$btnInverseBackgroundHighlight:     #27666D;
 
 
 // Forms
 // -------------------------
 $inputBackground:               $white;
 $inputBorder:                   transparent;
+$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);
-$dropdownLinkColor:             $bodyBackground;
+$dropdownDividerTop:            #e5e5e5;
+$dropdownDividerBottom:         $white;
+
+$dropdownLinkColor:             $grayDark;
 $dropdownLinkColorHover:        $white;
-$dropdownLinkBackgroundHover:   rgba(0, 57, 59, 0.9);
+$dropdownLinkColorActive:       $white;
 
+$dropdownLinkBackgroundActive:  $red;
+$dropdownLinkBackgroundHover:   $red;
 
 
 
 // COMPONENT VARIABLES
 // --------------------------------------------------
 
+
 // Z-index master list
 // -------------------------
 // Used for a bird's eye view of components dependent on the z-axis
@@ -97,6 +189,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;
@@ -107,48 +205,21 @@ $placeholderText:         $grayLight;
 $hrBorder:                transparent;
 
 
-// Navbar
+// Horizontal forms & lists
 // -------------------------
-$navbarHeight:                    50px;
-$navbarBackground:                #AD1D28;
-$navbarBackgroundHighlight:       #AD1D28;
-
-$navbarText:                      $white;
-$navbarLinkColor:                 $white;
-$navbarLinkColorHover:            $white;
-$navbarLinkColorActive:           $navbarLinkColorHover;
-$navbarLinkBackgroundHover:       lighten($navbarBackground, .1);
-$navbarLinkBackgroundActive:      lighten($navbarBackground, .1);
-
-$navbarSearchBackground:          rgba(0, 0, 0, 0);
-$navbarSearchBackgroundFocus:     lighten($navbarBackground, .25);
-$navbarSearchBorder:              darken($navbarSearchBackground, .3);
-$navbarSearchPlaceholderColor:    $textColor;
+$horizontalComponentOffset:       180px;
 
 
-// Buttons
+// Wells
 // -------------------------
-$btnBackground:                     $grayLighter;
-$btnBackgroundHighlight:            $grayLighter;
-$btnBorder:                         rgba(0, 0, 0, 0);
+$wellBackground:                  #3CB9C6;
 
-$btnPrimaryBackground:              $navbarBackground;
-$btnPrimaryBackgroundHighlight:     adjust-hue($btnPrimaryBackground, .15);
 
-$btnInfoBackground:                 $purple;
-$btnInfoBackgroundHighlight:        $purple;
-
-$btnSuccessBackground:              $green;
-$btnSuccessBackgroundHighlight:     $green;
-
-$btnWarningBackground:              $orange;
-$btnWarningBackgroundHighlight:     $orange;
-
-$btnDangerBackground:               darken($yellow, .03);
-$btnDangerBackgroundHighlight:      darken($yellow, .03);
-
-$btnInverseBackground:              #27666D;
-$btnInverseBackgroundHighlight:     #27666D;
+// Pagination
+// -------------------------
+$paginationBackground:                #3CB9C6;
+$paginationBorder:                    transparent;
+$paginationActiveBackground:          rgba(255, 255, 255, 0.4);
 
 
 // Hero unit
@@ -162,26 +233,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:  $navbarBackground;
 
+// Special enhancement for popovers
+$popoverArrowOuterWidth:  $popoverArrowWidth + 1;
+$popoverArrowOuterColor:  rgba(0,0,0,.25);
 
 
 
 // GRID
 // --------------------------------------------------
 
+
 // Default 940px grid
 // -------------------------
 $gridColumns:             12;
@@ -189,8 +277,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/cerulean/_bootswatch.scss

@@ -1,60 +1,131 @@
-// Swatch: Cerulean
-// Version: 2.0.2
+// Cerulean 2.2.2
+// Bootswatch
 // -----------------------------------------------------
 
+
 // TYPOGRAPHY
 // -----------------------------------------------------
 
-@import url("https://fonts.googleapis.com/css?family=Telex");
+@import url(//fonts.googleapis.com/css?family=Telex);
 
-.navbar, .subnav {
-	font-family: $headingsFontFamily;
-}
+// SCAFFOLDING
+// -----------------------------------------------------
 
 // NAVBAR
 // -----------------------------------------------------
 
-.navbar-inner {
-  @include gradient-vertical-three-colors($navbarBackground, $navbarBackground, .9, $navbarBackgroundHighlight);
-}
+.navbar {
 
-.navbar .nav .active > a,
-.navbar .nav .active > a:hover {
-  background-color: $navbarBackground;
-  background-color: rgba(0,0,0,.2);
-}
 
-.navbar .search-query {
-	border: 1px solid darken($linkColor, .1);
-}
+	.brand {
+		padding: 14px 20px 16px;
+		font-family: $headingsFontFamily;
+		text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
+	}
+
+	li {
+		line-height: 20px;
+	}
+
+	.nav > li > a {
+		padding: 16px 10px 14px;
+		font-family: $headingsFontFamily;
+		text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
+	}
+
+	.search-query {
+		border: 1px solid darken($linkColor, 10%);
+		line-height: normal;
+	}
 
-// responsive menu colors
+	.navbar-text {
+		padding: 19px 10px 18px;
+		line-height: 13px;
+		color: rgba(0, 0, 0, 0.5);
+		text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
+	}
 
-.navbar .nav-collapse.in > .nav > li .dropdown-menu a {
-	color: $white;
+	.navbar-inverse {
 
-	&:hover {
-		color: $white;
+		.navbar-search .search-query {
+			color: $textColor;
+		}
 	}
 }
 
-.navbar .nav-collapse.in .nav li > a {
-	color: $white;
+@media (max-width: $navbarCollapseWidth) {
+
+	.navbar .nav-collapse {
+
+		.nav li > a {
+
+			font-family: $headingsFontFamily;
+			font-weight: normal;
+			color: $white;
+			text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
+
+			&:hover {
+				background-color: #2B7CAC;
+			}
+		}
+
+		.nav .active > a {
+			@include box-shadow(none);
+			background-color: #2B7CAC;
+		}
+
+		.dropdown-menu li > a:hover,
+		.dropdown-menu li > a:focus,
+		.dropdown-submenu:hover > a {
+			background-image: none;
+		}
+
+		.navbar-form,
+		.navbar-search {
+			border: none;
+		}
 
-	&:hover {
-		background-color: #2B7CAC;
+		.nav-header {
+			color: #2B7CAC;
+		}
+	}
+
+	.navbar-inverse .nav-collapse {
+
+		.nav li > a {
+			color: $navbarInverseLinkColor;
+
+			&:hover {
+				background-color: rgba(0, 0, 0, 0.1);
+			}
+		}
+
+		.nav .active > a,
+		.nav > li > a:hover,
+		.dropdown-menu a:hover {
+			background-color: rgba(0, 0, 0, 0.1) !important;
+		}
 	}
 }
 
-.btn-navbar:hover {
-    background-color: darken($white, .2);
+div.subnav {
+
+	font-family: $headingsFontFamily;
+	text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.2);
+
+	div.subnav-fixed {
+		top: $navbarHeight;
+	}
 }
 
+// NAV
+// -----------------------------------------------------
+
 // BUTTONS
 // -----------------------------------------------------
 
 .btn {
-  @include gradient-vertical-three-colors($white, $white, .05, darken($white, 0));
+  @include gradient-vertical-three-colors($white, $white, 5%, darken($white, 0%));
   $shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
   @include box-shadow($shadow);
 
@@ -64,33 +135,47 @@
 }
 
 .btn-primary {
-  @include buttonBackground(lighten($btnPrimaryBackground, .05), $btnPrimaryBackground);
+  @include buttonBackground(lighten($btnPrimaryBackground, 5%), $btnPrimaryBackground);
 }
 
 .btn-info {
-  @include buttonBackground(lighten($btnInfoBackground, .05), $btnInfoBackground);
+  @include buttonBackground(lighten($btnInfoBackground, 5%), $btnInfoBackground);
 }
 
 .btn-success {
-  @include buttonBackground(lighten($btnSuccessBackground, .05), $btnSuccessBackground);
+  @include buttonBackground(lighten($btnSuccessBackground, 5%), $btnSuccessBackground);
 }
 
 .btn-warning {
-  @include buttonBackground(lighten($btnWarningBackground, .05), $btnWarningBackground);
+  @include buttonBackground(lighten($btnWarningBackground, 5%), $btnWarningBackground);
 }
 
 .btn-danger {
-  @include buttonBackground(lighten($btnDangerBackground, .05), $btnDangerBackground);
+  @include buttonBackground(lighten($btnDangerBackground, 5%), $btnDangerBackground);
 }
 
 .btn-inverse {
-  @include buttonBackground(lighten($btnInverseBackground, .05), $btnInverseBackground);
+  @include buttonBackground(lighten($btnInverseBackground, 5%), $btnInverseBackground);
 }
 
-// ICONS
+// TABLES
+// -----------------------------------------------------
+
+// FORMS
+// -----------------------------------------------------
+
+// DROPDOWNS
+// -----------------------------------------------------
+
+// ALERTS, LABELS, BADGES
+// -----------------------------------------------------
+
+// MISC
 // -----------------------------------------------------
 
-// Make icons gray
 i[class^="icon-"]{
 	opacity: 0.8;
 }
+
+// MEDIA QUERIES
+// -----------------------------------------------------