bootswatch-rails 0.2.0 → 0.3.0

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

@@ -1,11 +1,9 @@
-// Variables to customize the look and feel of Bootstrap
-// Swatch: Cyborg
-// Version: 2.0.2
-// -----------------------------------------------------
-
+// Cyborg 2.2.2
+// Variables
+// --------------------------------------------------
 
 
-// GLOBAL VALUES
+// Global values
 // --------------------------------------------------
 
 
@@ -13,7 +11,7 @@
 // -------------------------
 $black:                 #000;
 $grayDarker:            #020202;
-$grayDark:              #282828;
+$grayDark:              #222;
 $gray:                  #999;
 $grayLight:             #ADAFAE;
 $grayLighter:           #eee;
@@ -46,70 +44,99 @@ $linkColorHover:        $white;
 
 // Typography
 // -------------------------
-$baseFontSize:          13px;
-$baseFontFamily:        'Droid Sans', sans-serif;
-$baseLineHeight:        18px;
-$altFontFamily:         Georgia, "Times New Roman", Times, serif;
+$sansFontFamily:        'Droid Sans', sans-serif;
+$serifFontFamily:       Georgia, "Times New Roman", Times, serif;
+$monoFontFamily:        Menlo, Monaco, Consolas, "Courier New", monospace;
+
+$baseFontSize:          14px;
+$baseFontFamily:        $sansFontFamily;
+$baseLineHeight:        20px;
+$altFontFamily:         $serifFontFamily;
 
 $headingsFontFamily:    inherit; // empty to use BS default, $baseFontFamily
 $headingsFontWeight:    normal;    // instead of browser default, bold
 $headingsColor:         $white; // 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:             rgba(100, 100, 100, 0.1); // for striping
 $tableBackgroundHover:              $grayDark; // for hover
-$tableBorder:                       #222; // table and cell border
-
+$tableBorder:                       $grayDark; // table and cell border
 
 // Buttons
 // -------------------------
-$btnBackground:                     $white;
-$btnBackgroundHighlight:            darken($white, .1);
+$btnBackground:                     darken($gray, 20%);
+$btnBackgroundHighlight:            darken($gray, 25%);
 $btnBorder:                         rgba(0, 0, 0, 0);
 
 $btnPrimaryBackground:              $blueDark;
-$btnPrimaryBackgroundHighlight:     darken($blueDark, .1);
+$btnPrimaryBackgroundHighlight:     darken($blueDark, 10%);
 
-$btnInfoBackground:                 #5bc0de;
-$btnInfoBackgroundHighlight:        #2f96b4;
+$btnInfoBackground:                 darken($gray, 40%);
+$btnInfoBackgroundHighlight:        darken($gray, 50%);
 
-$btnSuccessBackground:              #62c462;
-$btnSuccessBackgroundHighlight:     #51a351;
+$btnSuccessBackground:              lighten($green, 10%);
+$btnSuccessBackgroundHighlight:     $green;
 
-$btnWarningBackground:              lighten($orange, .15);
+$btnWarningBackground:              lighten($orange, 15%);
 $btnWarningBackgroundHighlight:     $orange;
 
-$btnDangerBackground:               #ee5f5b;
-$btnDangerBackgroundHighlight:      #bd362f;
+$btnDangerBackground:               lighten($red, 10%);
+$btnDangerBackgroundHighlight:      $red;
 
-$btnInverseBackground:              $gray;
-$btnInverseBackgroundHighlight:     $grayDarker;
+$btnInverseBackground:              lighten($purple, 5%);
+$btnInverseBackgroundHighlight:     $purple;
 
 
 // Forms
 // -------------------------
 $inputBackground:               #ccc;
 $inputBorder:                   #bbb;
-$inputDisabledBackground:       $grayLighter;
+$inputBorderRadius:             $baseBorderRadius;
+$inputDisabledBackground:       #555;
+$formActionsBackground:         transparent;
+$inputHeight:                   $baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border
 
 
 // Dropdowns
 // -------------------------
-$dropdownBackground:            $white;
+$dropdownBackground:            #131517;
 $dropdownBorder:                rgba(0,0,0,.2);
+$dropdownDividerTop:            transparent;
+$dropdownDividerBottom:         #222;
+
 $dropdownLinkColor:             $textColor;
 $dropdownLinkColorHover:        $white;
-$dropdownLinkBackgroundHover:   $linkColor;
+$dropdownLinkColorActive:       $white;
 
+$dropdownLinkBackgroundActive:  $linkColor;
+$dropdownLinkBackgroundHover:   $linkColor;
 
 
 
 // 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;
@@ -129,14 +162,28 @@ $placeholderText:         $grayLight;
 
 // Hr border color
 // -------------------------
-$hrBorder:                $gray;
+$hrBorder:                $grayDark;
+
+
+// Horizontal forms & lists
+// -------------------------
+$horizontalComponentOffset:       180px;
+
+
+// Wells
+// -------------------------
+$wellBackground:                  #131517;
 
 
 // Navbar
 // -------------------------
-$navbarHeight:                    40px;
-$navbarBackground:                $grayDarker;
+$navbarCollapseWidth:             979px;
+$navbarCollapseDesktopWidth:      $navbarCollapseWidth + 1;
+
+$navbarHeight:                    50px;
 $navbarBackgroundHighlight:       $grayDarker;
+$navbarBackground:                $grayDarker;
+$navbarBorder:                    darken($navbarBackground, 12%);
 
 $navbarText:                      $grayLight;
 $navbarLinkColor:                 $grayLight;
@@ -145,43 +192,83 @@ $navbarLinkColorActive:           $navbarLinkColorHover;
 $navbarLinkBackgroundHover:       transparent;
 $navbarLinkBackgroundActive:      $navbarBackground;
 
-$navbarSearchBackground:          lighten($navbarBackground, .25);
-$navbarSearchBackgroundFocus:     $white;
-$navbarSearchBorder:              darken($navbarSearchBackground, .3);
-$navbarSearchPlaceholderColor:    #ccc;
+$navbarBrandColor:                $navbarLinkColor;
+
+// Inverted navbar
+$navbarInverseBackground:                #252A30;
+$navbarInverseBackgroundHighlight:       #252A30;
+$navbarInverseBorder:                    transparent;
+
+$navbarInverseText:                      $grayLight;
+$navbarInverseLinkColor:                 $grayLight;
+$navbarInverseLinkColorHover:            $white;
+$navbarInverseLinkColorActive:           $navbarInverseLinkColorHover;
+$navbarInverseLinkBackgroundHover:       #242A31;
+$navbarInverseLinkBackgroundActive:      $navbarInverseLinkBackgroundHover;
+
+$navbarInverseSearchBackground:          lighten($navbarInverseBackground, 25%);
+$navbarInverseSearchBackgroundFocus:     $white;
+$navbarInverseSearchBorder:              $navbarInverseBackground;
+$navbarInverseSearchPlaceholderColor:    $white;
+
+$navbarInverseBrandColor:                $navbarInverseLinkColor;
+
+
+// Pagination
+// -------------------------
+$paginationBackground:                $bodyBackground;
+$paginationBorder:                    transparent;
+$paginationActiveBackground:          $blue;
 
 
 // Hero unit
 // -------------------------
-$heroUnitBackground:              rgba(40, 40, 40, 0.5);
+$heroUnitBackground:              #131517;
 $heroUnitHeadingColor:            inherit;
 $heroUnitLeadColor:               inherit;
 
 
 // Form states and alerts
 // -------------------------
-$warningText:             darken(#c09853, .1);
+$warningText:             darken(#c09853, 10%);
 $warningBackground:       $grayLighter;
 $warningBorder:           transparent;
 
 $errorText:               #b94a48;
 $errorBackground:         $grayLighter;
-$errorBorder:             darken(adjust-hue($errorBackground, -10), .03);
+$errorBorder:             darken(adjust-hue($errorBackground, -10), 3%);
 
 $successText:             #468847;
 $successBackground:       $grayLighter;
-$successBorder:           darken(adjust-hue($successBackground, -10), .05);
+$successBorder:           darken(adjust-hue($successBackground, -10), 5%);
 
 $infoText:                $blueDark;
 $infoBackground:          $grayLighter;
-$infoBorder:              darken(adjust-hue($infoBackground, -10), .07);
+$infoBorder:              darken(adjust-hue($infoBackground, -10), 7%);
+
+
+// Tooltips and popovers
+// -------------------------
+$tooltipColor:            #fff;
+$tooltipBackground:       $heroUnitBackground;
+$tooltipArrowWidth:       5px;
+$tooltipArrowColor:       $tooltipBackground;
+
+$popoverBackground:       $heroUnitBackground;
+$popoverArrowWidth:       10px;
+$popoverArrowColor:       $popoverBackground;
+$popoverTitleBackground:  $popoverBackground;
 
+// 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/journal/_bootswatch.scss

@@ -1,125 +1,330 @@
-// Swatch: Journal
-// Version: 2.0.2
+// Journal 2.2.2
+// Bootswatch
 // -----------------------------------------------------
 
-// SCAFFOLDING
+
+// TYPOGRAPHY
 // -----------------------------------------------------
 
-a {
-	text-decoration: underline;
+@import url('//fonts.googleapis.com/css?family=News+Cycle:400,700');
+
+h1, h2, h3, h4, h5, h6 {
+
+	margin: 0 0 10px;
+	line-height: 1.2;
+
+	a {
+		color: $headingsColor;
+	}
 }
 
-.nav a, .navbar .brand, .subnav a, a.btn {
+h1 { font-size: 48px; }
+
+h2 { font-size: 36px; }
+
+h3 { font-size: 28px; }
+
+h4 { font-size: 20px; }
+
+h5 { font-size: 13px; }
+
+p > a,
+address > a,
+.breadcrumb a,
+abbr[title] {
 	text-decoration: none;
+	border-bottom: 1px dotted;
+
+	&:hover {
+		text-decoration: none;
+		border-bottom: 1px solid;
+	}
 }
 
-// TYPOGRAPHY
-// -----------------------------------------------------
+code, pre {
+	@include border-radius(0);
+	background-color: $grayLighter;
+	@include box-shadow(none);
+}
 
-@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');
+// SCAFFOLDING
+// -----------------------------------------------------
 
-h1, h2, h3, h4, h5, h6, .brand, .navbar, .subnav a, blockquote > p {
-	font-family: 'Open Sans', sans-serif;
-	color: $textColor;
+.page-header {
+	border-bottom: 2px solid $grayLighter;
 }
 
-h1, h2, h3, h4, h5, h6, .brand {
-	font-weight: 700;
+hr {
+	border-bottom: 1px solid $grayLighter;
 }
 
 // NAVBAR
 // -----------------------------------------------------
 
-.navbar .brand {
-	color: $navbarLinkColor;
-	text-shadow: none;
+.navbar {
+
+	font-family: $sansFontFamily;
 	font-weight: bold;
 
-	&:hover {
-		background-color: #EEEEEE;
+	.navbar-inner {
+		border-bottom: 2px solid $grayLighter;
+		@include border-radius(0);
+		@include box-shadow(none);
+	}
+
+	.brand {
+		padding: 19px 20px 21px;
+		font-size: 24px;
+		font-weight: bold;
+		text-shadow: none;
+		text-transform: uppercase;
+	}
+
+	.nav > li > a {
+		padding: 20px 10px 20px;
+		font-size: 18px;
+		text-shadow: none;
+		text-transform: uppercase;
+	}
+
+	.nav > .active > a {
+		background-color: transparent;
+	}
+
+	.navbar-text {
+		margin-top: 20px;
+		padding-left: 10px;
+		padding-right: 10px;
+		font-size: 18px;
+		line-height: 20px;
+	}
+
+	.nav > .active > a,
+	.nav > .active > a:hover,
+	.nav > .active > a:focus {
+		@include box-shadow(none);
+	}
+
+	.divider-vertical {
+		border-left-color: $grayLighter;
+		border-right-color: $grayLighter;
+	}
+
+	.dropdown-menu {
+
+		top: 85%;
+		@include border-radius(0);
+
+		a {
+			font-size: 15px;
+			font-weight: bold;
+		}
+	}
+
+	.navbar-search .search-query,
+	.navbar-search .search-query:hover {
+		border: 2px solid $grayLighter;
+		color: $textColor;
+		@include placeholder($gray);
 	}
 }
 
-.navbar-inner {
-	border-top: 1px solid #E5E5E5;
-	$shadow: 0 2px 4px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
-	@include box-shadow($shadow);
+@media (max-width: $navbarCollapseWidth) {
+
+	.nav-collapse .navbar-form,
+	.nav-collapse .navbar-search {
+		margin-bottom: 0;
+		border-top: 2px solid $grayLighter;
+		border-bottom: 2px solid $grayLighter;
+	} 
+
+
+
+	.navbar .nav-collapse {
+
+		.nav li > a {
+			color: $navbarLinkColor;
+
+			&:hover {
+				background-color: $dropdownLinkBackgroundHover;
+			}
+		}
+
+		.navbar-text {
+			margin-top: 0;
+		}
+	}
+
+	.navbar-inverse .nav-collapse {
+
+		.nav li > a {
+			color: $navbarInverseLinkColor;
+
+			&:hover {
+				background-color: #111;
+				background-image: none;
+			}
+		}
+
+	}
 }
 
-.navbar-inner, .navbar .dropdown-menu, div.subnav,
-div.subnav .nav > li:first-child > a, div.subnav .nav > li:first-child > a:hover {
+div.subnav {
+
+	height: 54px;
+	background-color: $bodyBackground;
+	background-image: none;
+	@include box-shadow(none);
+	border: 2px solid $grayLighter;
+	border-left: none;
+	border-right: none;
 	@include border-radius(0);
+
+	&.subnav-fixed {
+		top: $navbarHeight;
+	}
+
+	.nav > li > a,
+	.nav > li:first-child > a,
+	.nav > li.active > a {
+		padding: 20px 15px;
+		border-left: none;
+		border-right: none;
+		background-color: transparent;
+		@include box-shadow(none);
+		font-family: $sansFontFamily;
+		color: $headingsColor;
+		font-size: 15px;
+		font-weight: bold;
+
+		&:hover {
+			padding: 20px 15px;
+			background-color: transparent;
+			@include box-shadow(none);
+			color: $headingsColor;
+		}
+	}
+
+	li.dropdown > .dropdown-toggle .caret ,
+	li.dropdown > .dropdown-toggle:hover .caret,
+	li.dropdown.open > .dropdown-toggle .caret {
+		border-top-color: $headingsColor;
+		border-bottom-color: $headingsColor;
+		opacity: 1;
+	}
+
+	li.dropdown.open .dropdown-toggle,
+	li.dropdown.open .dropdown-toggle:hover {
+		background-color: $bodyBackground;
+		color: $headingsColor;
+	}
 }
 
-.navbar .nav > li > a {
-	text-shadow: none;
+// NAV
+// -----------------------------------------------------
+
+// BUTTONS
+// -----------------------------------------------------
+
+[class^="icon-"], [class*=" icon-"] {
+	vertical-align: baseline;
+}
+
+.btn-inverse {
+	@include buttonBackground($grayDarker, $black);
 }
 
-.navbar .nav .active > a,
-.navbar .nav .active > a:hover {
-	color: $navbarLinkColor;
-	background-color: rgba(0, 0, 0, 0);
+// TABLES
+// -----------------------------------------------------
+
+.table-bordered {
+	@include border-radius(0);
+	@include box-shadow(none);
 }
 
-.navbar .nav .active > a:hover,
-.navbar .nav > li > a:hover,
-.navbar .nav-collapse.in .nav li > a:hover {
-	background-color: #EEEEEE;
+// FORMS
+// -----------------------------------------------------
+
+legend {
+	border-bottom: 2px solid $grayLighter;
+	font-family: $headingsFontFamily;
+	font-weight: $headingsFontWeight;
+	color: $headingsColor;
 }
 
-.dropdown.open .dropdown-toggle {
-	color: $textColor;
+// DROPDOWNS
+// -----------------------------------------------------
+
+// MISC
+// -----------------------------------------------------
+
+.well {
+	@include border-radius(0);
+	@include box-shadow(none);
 }
 
-.navbar .nav .dropdown-toggle .caret,
-.navbar .nav .open.dropdown .caret {
-	border-top-color: $navbarLinkColor;
-	opacity: 1;
+.hero-unit {
+	padding: 30px 60px;
+	border: 1px solid rgba(0,0,0,.05);
+	@include border-radius(0);
+	@include box-shadow(none);
+
+	h1 {
+		margin: 0 0 10px;
+		line-height: 1.2;
+	}
 }
 
-form.navbar-form, form.navbar-search {
-	border-top: 0px solid #eee;
-	border-bottom: 0px solid #eee;
+// a.thumbnail:hover {
+// 	.box-shadow(0 1px 3px 1px rgba(0, 0, 0, 0.3));
+// 	border-color: #ddd;
+// }
+
+.modal {
+ 	@include border-radius(0px);
+	background: $bodyBackground;
 }
 
-.navbar-search .search-query,
-.navbar-search .search-query:hover {
-	border: 1px solid $grayLighter;
-	color: $textColor;
-	@include placeholder($gray);
+.modal-header {
+	border-bottom: none;
 }
 
-div.subnav {
-	background-color: $bodyBackground;
-	background-image: none;
-	$shadow: 0 1px 2px rgba(0,0,0,.25);
-	@include box-shadow($shadow);
+.modal-footer {
+	border-top: none;
+	background: transparent;
+	@include box-shadow(none);
 }
 
-.navbar .nav-collapse.in .nav li > a,
-div.subnav .nav > li > a:hover,
-div.subnav .nav > .active > a,
-div.subnav .nav > .active > a:hover {
-	color: $textColor;
-	text-decoration: none;
-	font-weight: normal;
+.close,
+.close:hover {
+	border-bottom: none;
 }
 
-// BUTTONS
+// MEDIA QUERIES
 // -----------------------------------------------------
 
-.btn-primary {
-  @include buttonBackground(lighten($linkColor, .05), $linkColor);
-}
+@media (max-width: 768px) {
 
+	div.subnav {
 
-// MISC
-// -----------------------------------------------------
+		height: auto;
 
-code, pre, pre.prettyprint, .well, .form-actions {
-	background-color: $grayLighter;
-}
+		.nav > li.active > a {
+			border-top: none;
+		}
 
-.table-bordered, .well, .prettyprint {
-	@include border-radius(0);
+		.nav > li:hover > a,
+		.nav > li:first-child:hover > a,
+		.nav > li.active:hover > a,
+		.nav > li.dropdown.open .dropdown-toggle, 
+		.nav > li.dropdown.open .dropdown-toggle:hover {
+			background-color: $dropdownLinkBackgroundHover;
+		}
+	}
+
+	.nav-tabs .open .dropdown-toggle,
+	.nav-pills .open .dropdown-toggle,
+	.nav > li.dropdown.open.active > a:hover {
+		border-color: #e5e5e5;
+	}
 }