bootswatch-rails 0.2.0 → 0.3.0

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

@@ -1,11 +1,9 @@
-// Variables to customize the look and feel of Bootstrap
-// Swatch: Journal
-// Version: 2.0.2
-// -----------------------------------------------------
-
+// Journal 2.2.2
+// Variables
+// --------------------------------------------------
 
 
-// GLOBAL VALUES
+// Global values
 // --------------------------------------------------
 
 
@@ -13,9 +11,9 @@
 // -------------------------
 $black:                 #000;
 $grayDarker:            #222;
-$grayDark:              #333;
-$gray:                  #888;
-$grayLight:             #999;
+$grayDark:              #777;
+$gray:                  #999;
+$grayLight:             #bbb;
 $grayLighter:           #eee;
 $white:                 #fff;
 
@@ -23,7 +21,7 @@ $white:                 #fff;
 // Accent colors
 // -------------------------
 $blue:                  #369;
-$blueDark:              darken($blue, .15);
+$blueDark:              darken($blue, 15%);
 $green:                 #22B24C;
 $red:                   #C00;
 $yellow:                #FCFADB;
@@ -34,82 +32,111 @@ $purple:                #7a43b6;
 
 // Scaffolding
 // -------------------------
-$bodyBackground:        #FCFBFD;
-$textColor:             $grayDarker;
+$bodyBackground:        $white;
+$textColor:             $grayDark;
 
 
 // Links
 // -------------------------
 $linkColor:             $textColor;
-$linkColorHover:        $gray;
+$linkColorHover:        $linkColor;
 
 
 // Typography
 // -------------------------
+$sansFontFamily:        "News Cycle", "Arial Narrow Bold", sans-serif;
+$serifFontFamily:       Georgia, "Times New Roman", Times, serif;
+$monoFontFamily:        Menlo, Monaco, Consolas, "Courier New", monospace;
+
 $baseFontSize:          14px;
-$baseFontFamily:        'Open Sans', sans-serif;
-$baseLineHeight:        18px;
-$altFontFamily:         Georgia, "Times New Roman", Times, serif;
+$baseFontFamily:        $serifFontFamily;
+$baseLineHeight:        20px;
+$altFontFamily:         $sansFontFamily;
 
-$headingsFontFamily:    inherit; // empty to use BS default, $baseFontFamily
+$headingsFontFamily:    $sansFontFamily; // empty to use BS default, $baseFontFamily
 $headingsFontWeight:    bold;    // instead of browser default, bold
-$headingsColor:         inherit; // empty to use BS default, $textColor
+$headingsColor:         $black; // 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:             $grayLighter; // for striping
-$tableBackgroundHover:              #f5f5f5; // for hover
+$tableBackgroundAccent:             #f5f5f5; // for striping
+$tableBackgroundHover:              $grayLighter; // 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, 15%);
 
-$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, 10%);
 $btnWarningBackgroundHighlight:     $orange;
 
-$btnDangerBackground:               #ee5f5b;
-$btnDangerBackgroundHighlight:      #bd362f;
+$btnDangerBackground:               lighten($red, 10%);
+$btnDangerBackgroundHighlight:      $red;
 
-$btnInverseBackground:              $gray;
-$btnInverseBackgroundHighlight:     $grayDarker;
+$btnInverseBackground:              lighten($grayDark, 5%);
+$btnInverseBackgroundHighlight:     $grayDark;
 
 
 // Forms
 // -------------------------
 $inputBackground:               $white;
 $inputBorder:                   #ccc;
+$inputBorderRadius:             $baseBorderRadius;
 $inputDisabledBackground:       $grayLighter;
+$formActionsBackground:         $grayLighter;
+$inputHeight:                   $baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border
 
 
 // Dropdowns
 // -------------------------
 $dropdownBackground:            $bodyBackground;
 $dropdownBorder:                rgba(0,0,0,.2);
-$dropdownLinkColor:             $textColor;
-$dropdownLinkColorHover:        $textColor;
-$dropdownLinkBackgroundHover:   #eee;
+$dropdownDividerTop:            $grayLighter;
+$dropdownDividerBottom:         $grayLighter;
 
+$dropdownLinkColor:             $headingsColor;
+$dropdownLinkColorHover:        $headingsColor;
+$dropdownLinkColorActive:       $headingsColor;
+
+$dropdownLinkBackgroundHover:   $grayLighter;
+$dropdownLinkBackgroundActive:  $dropdownLinkBackgroundHover;
 
 
 
 // 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,29 +165,66 @@ $placeholderText:         $grayLight;
 $hrBorder:                $grayLighter;
 
 
+// Horizontal forms & lists
+// -------------------------
+$horizontalComponentOffset:       180px;
+
+
+// Wells
+// -------------------------
+$wellBackground:                  $grayLighter;
+
+
 // 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:            $linkColor;
-$navbarLinkColorActive:           $navbarLinkColorHover;
+$navbarLinkColor:                 $headingsColor;
+$navbarLinkColorHover:            $headingsColor;
+$navbarLinkColorActive:           $headingsColor;
 $navbarLinkBackgroundHover:       transparent;
-$navbarLinkBackgroundActive:      $navbarBackground;
+$navbarLinkBackgroundActive:      transparent;
+
+$navbarBrandColor:                $navbarLinkColor;
+
+// Inverted navbar
+$navbarInverseBackground:                #111111;
+$navbarInverseBackgroundHighlight:       #222222;
+$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:                $bodyBackground;
+$paginationBorder:                    #ddd;
+$paginationActiveBackground:          $grayLighter;
 
 
 // Hero unit
 // -------------------------
 $heroUnitBackground:              $grayLighter;
-$heroUnitHeadingColor:            inherit;
+$heroUnitHeadingColor:            $headingsColor;
 $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/readable/_bootswatch.scss

@@ -1,419 +1,59 @@
-// Swatch: Readable
-// Version: 2.0.2
+// Readable 2.2.2
+// Bootswatch
 // -----------------------------------------------------
 
+
 // TYPOGRAPHY
 // -----------------------------------------------------
 
-h1, h2, h3, h4, h5, h6 {
-	line-height: 2em;
-	color: $textColor;
-}
-
-h1 {
-	font-size: 2em;
-}
-
-h2 {
-	font-size: 1.5em;
-}
-
-h3, h4, h5, h6 {
-	font-size: 1em;
-	text-transform: none;
-}
-
-small {
-	font-size: 13px;
-}
-
-.muted, .help-block, .uneditable-input, blockquote, small {
-	color: $grayLight;
-}
+@import url('//fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic');
 
 // SCAFFOLDING
 // -----------------------------------------------------
 
-body {
-	padding-top: 20px !important;
-}
-
-.page-header {
-	padding-bottom: 1em;
-	border-bottom: 2px solid $grayLighter;
-}
-
-footer.footer {
-	padding-top: 2em;
-	padding-bottom: 3em;
-	border-top: 2px solid $grayLighter;
-}
-
 // NAVBAR
 // -----------------------------------------------------
 
-.navbar {
-
-	margin-left: 16px;
-
-	.navbar-inner {
-		@include box-shadow(none);
-	}
-
-	.brand {
-		color: $linkColor;
-		font-size: $baseFontSize;
-		font-weight: bold;
-		line-height: 1em;
-		padding: 10px 10px 11px;
-
-		&:hover {
-			color: $linkColorHover;
-		}
-	}
-
-	.nav > li > a {
-		text-shadow: none;
-		padding: 10px;
-	}
-
-	.nav > li.active > a,
-	.nav > li:active > a,
-	.dropdown.open .dropdown-toggle {
-		color: $linkColor;
-	}
-
-	.search-query {
-		border: 1px solid #D4D4D4;
-		@include border-radius(0);
-		color: $textColor;
-		background-color: $white;
-	}
-
-	.nav .dropdown-toggle .caret,
-	.nav .open.dropdown .caret {
-		border-top-color: $linkColor;
-		opacity: 1;
-	}
-}
-
-@media (max-width: 980px) {
-	form.navbar-form, form.navbar-search {
-		border-top: 1px solid #D4D4D4;
-		border-bottom: 1px solid #D4D4D4;
-	}
-}
-
-.navbar-fixed-top {
-	position: static;
-	margin-bottom: 1.6em;
-}
-
 div.subnav {
-	@include box-shadow(none);
-	@include border-radius(0);
-	background-color: $white;
-	background-image: none;
 
-	.nav {
-		padding: 0;
-	}
-
-	.nav > li.active > a,
-	.nav > li:active > a {
-		color: $linkColor;
-		@include box-shadow(none);
-		background-color: transparent;
-	}
-
-	.nav > li > a:hover,
-	.nav > li.active > a:hover,
-	.nav > li:active > a:hover {
-		color: $linkColorHover;
-		@include box-shadow(none);
-		background-color: transparent;
-	}
-}
-
-div.subnav-fixed {
-	position: static;
-	left: auto;
-	width: 100%;
-	margin: 0;
-	@include box-shadow(none);
-	@include border-radius(4px);
-	border: 1px solid #E5E5E5;
-
-	.nav {
-		width: auto;
-		padding: 0;
-	}
-}
-
-.dropdown-menu {
-	border: 1px solid #D4D4D4;
-	@include border-radius(0);
-	@include box-shadow(1px 1px 1px rgba(0, 0, 0, 0.2));
-
-	.divider {
-		margin: 5px 1px;
-	}
-}
-
-.navbar .nav-collapse.in {
-
-	.nav li:first-child > a {
-		margin-bottom: 10px;
-	}
-
-	.nav li > a {
-		color: $linkColor;
-		@include border-radius(0);
-		font-weight: normal;
-
-		&:hover {
-			color: $linkColorHover;
-		}
+	.nav > li > a,
+	.nav > .active > a,
+	.nav > .active > a:hover {
+		color: $textColor;
 	}
 
-	.nav li > a:hover {
-		background: transparent;
+	div.subnav-fixed {
+		top: $navbarHeight;
 	}
 }
 
 // NAV
 // -----------------------------------------------------
 
-.nav .dropdown .caret {
-	opacity: 1;
-}
-
-.nav-tabs {
-
-	li > a {
-		@include border-radius(0);
-	}
-
-	li > a:hover {
-		background-color: $bodyBackground;
-	}
-
-	li.active > a,
-	li.active > a:hover {
-		color: $textColor;
-		background-color: $bodyBackground;
-	}
-}
-
-.nav-tabs.nav-stacked {
-
-	li > a {
-		background-color: $white;
-	}
-
-	li.active > a,
-	li.active > a:hover,
-	li > a:hover {
-		background-color: #F5F5F5;
-	}
-
-	li:first-child > a,
-	li:last-child > a {
-		@include border-radius(0);
-	}
-}
-
-.nav-pills {
-
-	li > a {
-		@include border-radius(0);
-	}
-
-	li > a:hover {
-		background-color: $bodyBackground;
-	}
-
-	li.active > a,
-	li.active > a:hover {
-		color: $textColor;
-		background-color: $bodyBackground;
-	}
-}
-
-.nav-list {
-
-	li > a:hover,
-	li.active > a,
-	li.active > a:hover {
-		background-color: transparent;
-		text-shadow: none;
-	}
-
-	li.active > a,
-	li.active > a:hover {
-		color: $textColor;
-	}
-
-	[class^="icon-"] {
-		margin-top: 3px;
-		opacity: 0.8;
-	}
-}
-
-.breadcrumb {
-	@include border-radius(0);
-	background-color: $white;
-	background-image: none;
-}
-
-.pagination {
-
-	ul {
-		@include box-shadow(none);
-	}
-
-	li > a {
-		padding: 10px 14px;
-	}
-
-
-	li.active > a,
-	li.active > a:hover {
-		color: $textColor;
-		background-color: #F5F5F5;
-	}
-
-	li > a,
-	li.disabled > a,
-	li.disabled > a:hover {
-		background-color: $white;
-	}
-
-	li:first-child > a,
-	li:last-child > a {
-		@include border-radius(0);
-	}
-}
-
-.pager {
-
-	a {
-		@include border-radius(0);
-	}
-}
-
 // BUTTONS
 // -----------------------------------------------------
 
-.btn-primary {
-  @include buttonBackground(lighten($btnPrimaryBackground, .1), $btnPrimaryBackground);
-}
-
-.btn [class^="icon-"],
-.btn [class*=" icon-"] {
-	margin-top: 4px;
-}
-
-.btn-large [class^="icon-"],
-.btn-large [class*=" icon-"] {
-	margin-top: 6px;
-	margin-right: 2px;
-}
-
-.btn-small [class^="icon-"],
-.btn-small [class*=" icon-"] {
-	margin-top: 3px;
-}
-
-.btn .caret {
-	margin-top: 13px;
-}
+// TABLES
+// -----------------------------------------------------
 
 // FORMS
 // -----------------------------------------------------
 
-input, button, select, textarea {
-	font-family: $baseFontFamily;
-}
-
-input, textarea, select {
-	color: $textColor;
-}
-
-.form-actions {
-	background-color: transparent;
-	border-top: 1px solid #D4D4D4;
-	padding-top: 2em;
-}
-
-// TABLES
+// DROPDOWNS
 // -----------------------------------------------------
 
-.table-bordered {
-	@include border-radius(0);
-}
-
-// MISCELLANEOUS
+// ALERTS, LABELS, BADGES
 // -----------------------------------------------------
 
-.alert,
-.label, .label:hover {
-	@include border-radius(0);
-	border: 1px solid #D4D4D4;
-	color: $textColor;
-	text-shadow: none;
-}
-
-.alert-heading {
-	color: $textColor;
-	text-shadow: none;
-}
-
-.label, .label:hover {
-	background-color: $white;
-	font-weight: normal;
-	font-size: $baseFontSize;
-	padding: 4px;
-}
-
-.label-important, .label-important:hover { background-color: $errorBackground; }
-
-.label-warning, .label-warning:hover { background-color: $warningBackground; }
-
-.label-success, .label-success:hover { background-color: $successBackground; }
-
-.label-info, .label-info:hover { background-color: $infoBackground; }
-
-.well {
-	@include box-shadow(none);
-	border: 1px solid #D4D4D4;
-	@include border-radius(0);
-	background-color: $white;
-}
-
-blockquote {
-	border-left: 6px solid $grayLighter;
+// MISC
+// -----------------------------------------------------
 
-	&.pull-right {
-		border-right: 6px solid $grayLighter;
-	}
+.hero-unit {
 
-	p {
-		font-size: 1em;
-		line-height: 1.2em;
+	h1, h2, h3, h4, h5, h6 {
+		margin: 13px 0;
 	}
 }
 
-.thumbnail {
-	background-color: $white;
-}
-
-.thumbnail, .thumbnail > img {
-	@include border-radius(0);
-	@include box-shadow(none);
-}
-
-code, pre {
-	@include border-radius(0);
-	background-color: $white;
-}
+// MEDIA QUERIES
+// -----------------------------------------------------