bootswatch-rails 0.1.0 → 0.2.0

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

@@ -0,0 +1,302 @@
+// Variables to customize the look and feel of Bootstrap
+// Swatch: Cosmo
+// Version: 2.0.2
+// -----------------------------------------------------
+
+
+// Global values
+// --------------------------------------------------
+
+
+// Grays
+// -------------------------
+$black:                 #000;
+$grayDarker:            #080808;
+$grayDark:              #999;
+$gray:                  #bbb;
+$grayLight:             #dfdfdf;
+$grayLighter:           #eee;
+$white:                 #fff;
+
+
+// Accent colors
+// -------------------------
+$blue:                  #007FFF;
+$blueDark:              #1F26B6;
+$green:                 #3FB618;
+$red:                   #FF0039;
+$yellow:                #FFA500;
+$orange:                #FF7518;
+$pink:                  #E671B8;
+$purple:                #9954BB;
+
+
+// Scaffolding
+// -------------------------
+$bodyBackground:        $white;
+$textColor:             #555;
+
+
+// Links
+// -------------------------
+$linkColor:             $blue;
+$linkColorHover:        darken($linkColor, 0.1);
+
+
+// Typography
+// -------------------------
+$sansFontFamily:        "Open Sans", Calibri, Candara, Arial, sans-serif;
+$serifFontFamily:       Georgia, "Times New Roman", Times, serif;
+$monoFontFamily:        Monaco, Menlo, Consolas, "Courier New", monospace;
+
+$baseFontSize:          14px;
+$baseFontFamily:        $sansFontFamily;
+$baseLineHeight:        20px;
+$altFontFamily:         $serifFontFamily;
+
+$headingsFontFamily:    inherit; // empty to use BS default, $baseFontFamily
+$headingsFontWeight:    300;    // instead of browser default, bold
+$headingsColor:         $grayDarker; // 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:           1px 6px;   // 24px
+
+$baseBorderRadius:      0px;
+$borderRadiusLarge:     0px;
+$borderRadiusSmall:     0px;
+
+
+// Tables
+// -------------------------
+$tableBackground:                   transparent; // overall background-color
+$tableBackgroundAccent:             #f9f9f9; // for striping
+$tableBackgroundHover:              #E8F8FD; // for hover
+$tableBorder:                       #ddd; // table and cell border
+
+// Buttons
+// -------------------------
+$btnBackground:                     $grayLighter;
+$btnBackgroundHighlight:            darken($grayLighter, 0.15);
+$btnBorder:                         #bbb;
+
+$btnPrimaryBackground:              lighten($blue, 0.05);
+$btnPrimaryBackgroundHighlight:     darken($blue, 0.05);
+
+$btnInfoBackground:                 lighten($purple, 0.05);
+$btnInfoBackgroundHighlight:        darken($purple, 0.05);
+
+$btnSuccessBackground:              lighten($green, 0.05);
+$btnSuccessBackgroundHighlight:     darken($green, 0.05);
+
+$btnWarningBackground:              lighten($orange, 0.05);
+$btnWarningBackgroundHighlight:     darken($orange, 0.05);
+
+$btnDangerBackground:               lighten($red, 0.05);
+$btnDangerBackgroundHighlight:      darken($red, 0.05);
+
+$btnInverseBackground:              lighten($black, 0.05);
+$btnInverseBackgroundHighlight:     darken($black, 0.05);
+
+
+// Forms
+// -------------------------
+$inputBackground:               $white;
+$inputBorder:                   $gray;
+$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;
+$dropdownLinkColorActive:       $dropdownLinkColor;
+
+$dropdownLinkBackgroundActive:  $blue;
+$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:           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:         $gray;
+
+
+// Hr border color
+// -------------------------
+$hrBorder:                $grayLighter;
+
+
+// Horizontal forms & lists
+// -------------------------
+$horizontalComponentOffset:       180px;
+
+
+// Wells
+// -------------------------
+$wellBackground:                  $grayLighter;
+
+
+// Navbar
+// -------------------------
+$navbarCollapseWidth:             979px;
+$navbarCollapseDesktopWidth:      $navbarCollapseWidth + 1;
+
+$navbarHeight:                    50px;
+$navbarBackground:                #0062ff;
+$navbarBackgroundHighlight:       $navbarBackground;
+$navbarBorder:                    transparent;
+
+$navbarText:                      $white;
+$navbarLinkColor:                 $white;
+$navbarLinkColorHover:            $gray;
+$navbarLinkColorActive:           $white;
+$navbarLinkBackgroundHover:       rgba(0, 0, 0, 0.05);
+$navbarLinkBackgroundActive:      transparent;
+
+$navbarBrandColor:                $navbarLinkColor;
+
+// Inverted navbar
+$navbarInverseBackground:                $blue;
+$navbarInverseBackgroundHighlight:       $navbarInverseBackground;
+$navbarInverseBorder:                    transparent;
+
+$navbarInverseText:                      $white;
+$navbarInverseLinkColor:                 $white;
+$navbarInverseLinkColorHover:            $white;
+$navbarInverseLinkColorActive:           $navbarInverseLinkColorHover;
+$navbarInverseLinkBackgroundHover:       rgba(0, 0, 0, 0.05);
+$navbarInverseLinkBackgroundActive:      $navbarInverseBackground;
+
+$navbarInverseSearchBackground:          lighten($navbarInverseBackground, 0.25);
+$navbarInverseSearchBackgroundFocus:     $white;
+$navbarInverseSearchBorder:              $navbarInverseBackground;
+$navbarInverseSearchPlaceholderColor:    $grayDark;
+
+$navbarInverseBrandColor:                $navbarInverseLinkColor;
+
+
+// Pagination
+// -------------------------
+$paginationBackground:                $grayLight;
+$paginationBorder:                    transparent;
+$paginationActiveBackground:          $blue;
+
+
+// Hero unit
+// -------------------------
+$heroUnitBackground:              $grayLighter;
+$heroUnitHeadingColor:            inherit;
+$heroUnitLeadColor:               inherit;
+
+
+// Form states and alerts
+// -------------------------
+$warningText:             $white;
+$warningBackground:       $orange;
+$warningBorder:           transparent;
+
+$errorText:               $white;
+$errorBackground:         $red;
+$errorBorder:             transparent;
+
+$successText:             $white;
+$successBackground:       $green;
+$successBorder:           transparent;
+
+$infoText:                $white;
+$infoBackground:          $purple;
+$infoBorder:              transparent;
+
+
+// Tooltips and popovers
+// -------------------------
+$tooltipColor:            #fff;
+$tooltipBackground:       #000;
+$tooltipArrowWidth:       5px;
+$tooltipArrowColor:       $tooltipBackground;
+
+$popoverBackground:       $orange;
+$popoverArrowWidth:       15px;
+$popoverArrowColor:       $orange;
+$popoverTitleBackground:  $orange;
+
+// Special enhancement for popovers
+$popoverArrowOuterWidth:  $popoverArrowWidth + 1;
+$popoverArrowOuterColor:  transparent;
+
+
+
+// GRID
+// --------------------------------------------------
+
+
+// Default 940px grid
+// -------------------------
+$gridColumns:             12;
+$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:    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/cyborg/_bootswatch.scss

@@ -272,7 +272,7 @@ div.subnav .nav .dropdown.open {
 .btn {
 	@include border-radius(3px);
 	@include box-shadow(1px 1px 2px #111);
-	@include buttonBackground(darken($gray, 20%), darken($gray, 30%));
+	@include buttonBackground(darken($gray, .2), darken($gray, .3));
 	color: $white;
 	text-shadow: none;
 
@@ -283,27 +283,27 @@ div.subnav .nav .dropdown.open {
 }
 
 .btn-primary {
-  @include buttonBackground($blueDark, darken($blueDark, 10%));
+  @include buttonBackground($blueDark, darken($blueDark, .1));
 }
 
 .btn-warning {
-  @include buttonBackground(lighten($orange, 10%), $orange);
+  @include buttonBackground(lighten($orange, .1), $orange);
 }
 
 .btn-danger {
-  @include buttonBackground(lighten($red, 10%), $red);
+  @include buttonBackground(lighten($red, .1), $red);
 }
 
 .btn-success {
-  @include buttonBackground(lighten($green, 10%), $green);
+  @include buttonBackground(lighten($green, .1), $green);
 }
 
 .btn-info {
-  @include buttonBackground(darken($gray, 40%), darken($gray, 50%));
+  @include buttonBackground(darken($gray, .4), darken($gray, .5));
 }
 
 .btn-inverse {
-  @include buttonBackground(lighten($purple, 5%), $purple);
+  @include buttonBackground(lighten($purple, .05), $purple);
 }
 
 .btn-group .btn:first-child {
@@ -415,27 +415,27 @@ code, pre, pre.prettyprint {
 	color: $grayLighter;
 }
 
-.label, .alert { background-color: darken($gray, 20%); }
+.label, .alert { background-color: darken($gray, .2); }
 
-.label:hover { background-color: darken($gray, 30%); }
+.label:hover { background-color: darken($gray, .3); }
 
 
 .label-important, .alert-danger,
 .alert-error { background-color: $red; }
 
-.label-important:hover { background-color: darken($red, 10%); }
+.label-important:hover { background-color: darken($red, .1); }
 
-.label-warning   { background-color: darken($orange, 10%); }
+.label-warning   { background-color: darken($orange, .1); }
 
-.label-warning:hover { background-color: darken($orange, 20%); }
+.label-warning:hover { background-color: darken($orange, .2); }
 
-.label-success, .alert-success { background-color: darken($green, 3%); }
+.label-success, .alert-success { background-color: darken($green, .03); }
 
-.label-success:hover { background-color: darken($green, 13%); }
+.label-success:hover { background-color: darken($green, .13); }
 
-.label-info, .alert-info { background-color: darken($blueDark, 10%); }
+.label-info, .alert-info { background-color: darken($blueDark, .1); }
 
-.label-info:hover { background-color: darken($blueDark, 20%); }
+.label-info:hover { background-color: darken($blueDark, .2); }
 
 .alert,
 .alert .alert-heading,

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

@@ -67,11 +67,11 @@ $tableBorder:                       #222; // table and cell border
 // Buttons
 // -------------------------
 $btnBackground:                     $white;
-$btnBackgroundHighlight:            darken($white, 10%);
+$btnBackgroundHighlight:            darken($white, .1);
 $btnBorder:                         rgba(0, 0, 0, 0);
 
 $btnPrimaryBackground:              $blueDark;
-$btnPrimaryBackgroundHighlight:     darken($blueDark, 10%);
+$btnPrimaryBackgroundHighlight:     darken($blueDark, .1);
 
 $btnInfoBackground:                 #5bc0de;
 $btnInfoBackgroundHighlight:        #2f96b4;
@@ -79,7 +79,7 @@ $btnInfoBackgroundHighlight:        #2f96b4;
 $btnSuccessBackground:              #62c462;
 $btnSuccessBackgroundHighlight:     #51a351;
 
-$btnWarningBackground:              lighten($orange, 15%);
+$btnWarningBackground:              lighten($orange, .15);
 $btnWarningBackgroundHighlight:     $orange;
 
 $btnDangerBackground:               #ee5f5b;
@@ -145,9 +145,9 @@ $navbarLinkColorActive:           $navbarLinkColorHover;
 $navbarLinkBackgroundHover:       transparent;
 $navbarLinkBackgroundActive:      $navbarBackground;
 
-$navbarSearchBackground:          lighten($navbarBackground, 25%);
+$navbarSearchBackground:          lighten($navbarBackground, .25);
 $navbarSearchBackgroundFocus:     $white;
-$navbarSearchBorder:              darken($navbarSearchBackground, 30%);
+$navbarSearchBorder:              darken($navbarSearchBackground, .3);
 $navbarSearchPlaceholderColor:    #ccc;
 
 
@@ -160,21 +160,21 @@ $heroUnitLeadColor:               inherit;
 
 // Form states and alerts
 // -------------------------
-$warningText:             darken(#c09853, 10%);
+$warningText:             darken(#c09853, .1);
 $warningBackground:       $grayLighter;
 $warningBorder:           transparent;
 
 $errorText:               #b94a48;
 $errorBackground:         $grayLighter;
-$errorBorder:             darken(adjust-hue($errorBackground, -10), 3%);
+$errorBorder:             darken(adjust-hue($errorBackground, -10), .03);
 
 $successText:             #468847;
 $successBackground:       $grayLighter;
-$successBorder:           darken(adjust-hue($successBackground, -10), 5%);
+$successBorder:           darken(adjust-hue($successBackground, -10), .05);
 
 $infoText:                $blueDark;
 $infoBackground:          $grayLighter;
-$infoBorder:              darken(adjust-hue($infoBackground, -10), 7%);
+$infoBorder:              darken(adjust-hue($infoBackground, -10), .07);
 
 
 

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

@@ -109,7 +109,7 @@ div.subnav .nav > .active > a:hover {
 // -----------------------------------------------------
 
 .btn-primary {
-  @include buttonBackground(lighten($linkColor, 5%), $linkColor);
+  @include buttonBackground(lighten($linkColor, .05), $linkColor);
 }