bootswatch-rails 0.2.0 → 0.3.0

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

@@ -1,11 +1,9 @@
-// Variables to customize the look and feel of Bootstrap
-// Swatch: Readable
-// Version: 2.0.2
-// -----------------------------------------------------
-
+// Readable 2.2.2
+// Variables
+// --------------------------------------------------
 
 
-// GLOBAL VALUES
+// Global values
 // --------------------------------------------------
 
 
@@ -14,18 +12,18 @@
 $black:                 #000;
 $grayDarker:            #222;
 $grayDark:              #333;
-$gray:                  #777;
+$gray:                  #555;
 $grayLight:             #999;
-$grayLighter:           #CDCDCD;
+$grayLighter:           #eee;
 $white:                 #fff;
 
 
 // Accent colors
 // -------------------------
-$blue:                  #049cdb;
+$blue:                  #0063AC;
 $blueDark:              #0064cd;
-$green:                 #46a546;
-$red:                   #9C0001;
+$green:                 #1C9B47;
+$red:                   #9c0001;
 $yellow:                #ffc40d;
 $orange:                #f89406;
 $pink:                  #c3325f;
@@ -34,94 +32,129 @@ $purple:                #7a43b6;
 
 // Scaffolding
 // -------------------------
-$bodyBackground:        #FDFDFA;
-$textColor:             #090000;
+$bodyBackground:        #F6F6F6;
+$textColor:             $grayDark;
 
 
 // Links
 // -------------------------
 $linkColor:             $red;
-$linkColorHover:        lighten($linkColor, .08);
+$linkColorHover:        darken($linkColor, 5%);
 
 
 // Typography
 // -------------------------
-$baseFontSize:          19px;
-$baseFontFamily:        Georgia, "Times New Roman", Times, serif;
-$baseLineHeight:        $baseFontSize * 1.6;
-$altFontFamily:         Georgia, "Times New Roman", Times, serif;
+$sansFontFamily:        "Helvetica Neue", Helvetica, Arial, sans-serif;
+$serifFontFamily:       "Lora", Georgia, "Times New Roman", Times, serif;
+$monoFontFamily:        Monaco, Menlo, Consolas, "Courier New", monospace;
+
+$baseFontSize:          17px;
+$baseFontFamily:        $serifFontFamily;
+$baseLineHeight:        26px;
+$altFontFamily:         $sansFontFamily;
 
 $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:             darken($bodyBackground, .02); // for striping
-$tableBackgroundHover:              darken($bodyBackground, .04); // for hover
+$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:                         #bbb;
 
-$btnPrimaryBackground:              $linkColor;
-$btnPrimaryBackgroundHighlight:     adjust-hue($btnPrimaryBackground, .15);
+$btnPrimaryBackground:              lighten($linkColor, 5%);
+$btnPrimaryBackgroundHighlight:     $linkColor;
 
-$btnInfoBackground:                 #5bc0de;
-$btnInfoBackgroundHighlight:        #2f96b4;
+$btnInfoBackground:                 lighten($blue, 5%);
+$btnInfoBackgroundHighlight:        $blue;
 
-$btnSuccessBackground:              #62c462;
-$btnSuccessBackgroundHighlight:     #51a351;
+$btnSuccessBackground:              lighten($green, 5%);
+$btnSuccessBackgroundHighlight:     $green;
 
-$btnWarningBackground:              lighten($orange, .15);
+$btnWarningBackground:              lighten($orange, 5%);
 $btnWarningBackgroundHighlight:     $orange;
 
-$btnDangerBackground:               #ee5f5b;
-$btnDangerBackgroundHighlight:      #bd362f;
+$btnDangerBackground:               lighten($red, 5%);
+$btnDangerBackgroundHighlight:      $red;
 
-$btnInverseBackground:              $gray;
-$btnInverseBackgroundHighlight:     $grayDarker;
+$btnInverseBackground:              lighten($grayDark, 5%);
+$btnInverseBackgroundHighlight:     $grayDark;
 
 
 // Forms
 // -------------------------
 $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;
+$dropdownBackground:            $bodyBackground;
 $dropdownBorder:                rgba(0,0,0,.2);
-$dropdownLinkColor:             $linkColor;
-$dropdownLinkColorHover:        $linkColorHover;
-$dropdownLinkBackgroundHover:   transparent;
+$dropdownDividerTop:            #e5e5e5;
+$dropdownDividerBottom:         $white;
 
+$dropdownLinkColor:             $grayDark;
+$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;
@@ -132,28 +165,65 @@ $placeholderText:         $grayLight;
 $hrBorder:                $grayLighter;
 
 
+// Horizontal forms & lists
+// -------------------------
+$horizontalComponentOffset:       180px;
+
+
+// Wells
+// -------------------------
+$wellBackground:                  #f5f5f5;
+
+
 // Navbar
 // -------------------------
-$navbarHeight:                    40px;
-$navbarBackground:                $bodyBackground;
+$navbarCollapseWidth:             979px;
+$navbarCollapseDesktopWidth:      $navbarCollapseWidth + 1;
+
+$navbarHeight:                    60px;
 $navbarBackgroundHighlight:       $bodyBackground;
+$navbarBackground:                $bodyBackground;
+$navbarBorder:                    darken($navbarBackground, 12%);
 
 $navbarText:                      $textColor;
-$navbarLinkColor:                 $linkColor;
-$navbarLinkColorHover:            $linkColorHover;
-$navbarLinkColorActive:           $linkColorHover;
+$navbarLinkColor:                 $textColor;
+$navbarLinkColorHover:            $textColor;
+$navbarLinkColorActive:           $textColor;
 $navbarLinkBackgroundHover:       transparent;
-$navbarLinkBackgroundActive:      $navbarBackground;
+$navbarLinkBackgroundActive:      darken($navbarBackground, 5%);
+
+$navbarBrandColor:                $navbarLinkColor;
+
+// Inverted navbar
+$navbarInverseBackground:                $grayDark;
+$navbarInverseBackgroundHighlight:       $grayDark;
+$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;
+
 
-$navbarSearchBackground:          lighten($navbarBackground, .25);
-$navbarSearchBackgroundFocus:     $white;
-$navbarSearchBorder:              darken($navbarSearchBackground, .3);
-$navbarSearchPlaceholderColor:    #ccc;
+// Pagination
+// -------------------------
+$paginationBackground:                #fff;
+$paginationBorder:                    #ddd;
+$paginationActiveBackground:          #f5f5f5;
 
 
 // Hero unit
 // -------------------------
-$heroUnitBackground:              $white;
+$heroUnitBackground:              $grayLighter;
 $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:       #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/simplex/_bootswatch.scss

@@ -1,14 +1,14 @@
+// Simplex 2.2.2
 // Bootswatch.less
-// Swatch: Simplex
-// Version: 2.1.1
 // -----------------------------------------------------
 
+
 $boxShadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
 
 // TYPOGRAPHY
 // -----------------------------------------------------
 
-@import url('https://fonts.googleapis.com/css?family=Josefin+Sans:300,400,700');
+@import url('//fonts.googleapis.com/css?family=Josefin+Sans:300,400,700');
 
 // SCAFFOLDING
 // -----------------------------------------------------
@@ -75,20 +75,19 @@ hr {
 	.dropdown-menu a {
 		font-family: $headingsFontFamily;
 	}
-}
 
-.navbar-inverse {
+	.navbar-inverse {
 
-	.navbar-inner {
-		@include box-shadow(none);
-	}
+		.navbar-inner {
+			@include box-shadow(none);
+		}
 
-	.brand:hover {
-		color: $white;
+		.brand:hover {
+			color: $white;
+		}
 	}
 }
 
-
 @media (max-width: $navbarCollapseWidth) {
 
 	.navbar .nav-collapse {
@@ -138,7 +137,7 @@ div.subnav {
 	font-family: $headingsFontFamily;
 
 	&.subnav-fixed {
-		@include box-shadow(#{inset 0 5px #fff, $boxShadow});
+		@include box-shadow(inset 0 5px #fff, $boxShadow);
 	}
 
 	.nav > li > a {
@@ -176,7 +175,7 @@ div.subnav {
 .nav-tabs {
 
 	& > li > a {
-		background-color: darken($bodyBackground, .03);
+		background-color: darken($bodyBackground, 3%);
 		border: 1px solid #ccc;
 		color: $textColor;
 
@@ -307,14 +306,19 @@ div.subnav {
 }
 
 .breadcrumb {
-	@include box-shadow(#{$boxShadow, -1px -1px 0 rgba(0, 0, 0, 0.1)});
+	background-color: $white;
 	border: 0px solid transparent;
+	@include box-shadow($boxShadow, -1px -1px 0 rgba(0, 0, 0, 0.1));
 
 	li {
-		padding-top: 5px;
+		padding-top: 2px;
 		text-shadow: none;
 	}
 
+	.active {
+		color: $textColor;
+	}
+
 	a {
 		text-shadow: none;
 	}
@@ -326,8 +330,9 @@ div.subnav {
 
 .pagination {
 
-	li > a {
-		padding: 4px 14px 0;
+	ul > li > a,
+	ul > li > span {
+		padding: 2px 14px 0;
 		color: $textColor;
 
 		&:hover {
@@ -336,10 +341,19 @@ div.subnav {
 		}
 	}
 
-	li.active > a {
+	ul > .active > a,
+	ul > .active > span {
 		background-color: $dropdownLinkBackgroundHover;
 		color: $linkColor;
 	}
+
+	ul > .disabled > a,
+	ul > .disabled > a:hover,
+	ul > .disabled > span,
+	ul > .disabled > span:hover {
+		background-color: transparent;
+		color: $textColor;
+	}
 }
 
 
@@ -402,13 +416,13 @@ i[class^="icon-"]{
 }
 
 .well {
-	@include box-shadow(#{$boxShadow, -1px -1px 0 rgba(0, 0, 0, 0.1)});
+	@include box-shadow($boxShadow, -1px -1px 0 rgba(0, 0, 0, 0.1));
 	border: none;
 }
 
 .hero-unit {
 	background-color: $navbarBackground;
-	@include box-shadow(#{$boxShadow, -1px -1px 0 rgba(0, 0, 0, 0.1)});
+	@include box-shadow($boxShadow, -1px -1px 0 rgba(0, 0, 0, 0.1));
 }
 
 .thumbnail {
@@ -420,17 +434,20 @@ i[class^="icon-"]{
     @include gradient-vertical(#e0e0e0, #e8e8e8);
 }
 
-.modal-header {
-	border-bottom: none;
-}
+.modal {
 
-.modal-header,
-.modal-body {
-	background-color: $navbarBackground;
-}
+	.modal-header {
+		border-bottom: none;
+	}
 
-.modal-footer {
-	background-color: $bodyBackground;
+	.modal-header,
+	.modal-body {
+		background-color: $navbarBackground;
+	}
+
+	.modal-footer {
+		background-color: $bodyBackground;
+	}
 }
 
 // MEDIA QUERIES