The bootstrap startup side using United theme now, also convert less …

…to sass as example http://bootswatch.com/united/
Eric-Guo · May 29, 2012 · fc2e5c2 · fc2e5c2
1 parent 69c2f26
commit fc2e5c2
Show file tree

Hide file tree

Showing 4 changed files with 285 additions and 8 deletions.
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -57,7 +57,7 @@ GEM
       mime-types (~> 1.16)
       treetop (~> 1.4.8)
     mime-types (1.18)
-    multi_json (1.3.5)
+    multi_json (1.3.6)
     polyglot (0.3.3)
     rack (1.4.1)
     rack-cache (1.2)

diff --git a/app/assets/stylesheets/app_bootstrap.css.scss b/app/assets/stylesheets/app_bootstrap.css.scss
@@ -1,9 +1,5 @@
-// change colors
-$navbarBackground: #686868;
-
-// change grid
-$gridColumnWidth: 70px;
-$gridGutterWidth: 10px;
+@import "variables-united";
+@import "bootswatch-united";
 
 // import original bootstrap
 @import "bootstrap";
@@ -17,4 +13,4 @@ body {
 }
 .sidebar-nav {
   padding: 8px 0;
-}
+}
diff --git a/app/assets/stylesheets/bootswatch-united.scss b/app/assets/stylesheets/bootswatch-united.scss
@@ -0,0 +1,82 @@
+// Bootswatch.less
+// Swatch: United
+// Version: 2.0.3
+// -----------------------------------------------------
+@import "variables-united";
+
+// TYPOGRAPHY
+// -----------------------------------------------------
+@import url(https://fonts.googleapis.com/css?family=Ubuntu);
+
+// NAVBAR
+// -----------------------------------------------------
+
+.navbar {
+
+	.nav > li > a {
+		border-right: 1px solid #C03D14;
+		border-left: 1px solid #E6633A;
+
+		&:hover {
+			background-color: $linkColorHover;
+		}
+	}
+
+	.nav .active > a,
+	.nav .active > a:hover {
+	  background-color: rgba(0,0,0,.2);
+	}
+
+	.divider-vertical {
+		background-color: inherit;
+		border-right: 0px solid #CE4213;
+	}
+
+	.navbar-text {
+		padding: 9px 10px 11px;
+		line-height: 19px;
+		color: $white;
+	}
+
+	.navbar-search .search-query {
+		border: 1px solid darken($navbarBackground, 15%);
+	}
+
+	.nav-collapse.in > .nav li > a {
+		color: $white;
+		border-left: 0px solid $orange;
+		border-right: 0px solid $orange;
+
+		&:hover {
+			background-color: $linkColorHover;
+		}
+	}
+
+	.nav-collapse.in .navbar-form,
+	.nav-collapse.in .navbar-search {
+		border-top: 0px solid $orange;
+		border-bottom: 0px solid $orange;
+	}
+}
+
+// BUTTONS
+// -----------------------------------------------------
+
+// FORMS
+// -----------------------------------------------------
+
+
+// MISC
+// -----------------------------------------------------
+
+.alert {
+	text-shadow: none;
+}
+
+.hero-unit {
+    border: 1px solid rgba(0,0,0,.05);
+
+	h1 {
+		line-height: 1.6em;
+	}
+}
diff --git a/app/assets/stylesheets/variables-united.scss b/app/assets/stylesheets/variables-united.scss
@@ -0,0 +1,199 @@
+// Variables.less
+// Variables to customize the look and feel of Bootstrap
+// Swatch: United
+// Version: 2.0.3
+// -----------------------------------------------------
+
+// GLOBAL VALUES
+// --------------------------------------------------
+
+
+// Grays
+// -------------------------
+$black:                 #000;
+$grayDarker:            #222;
+$grayDark:              #333;
+$gray:                  #555;
+$grayLight:             #999;
+$grayLighter:           #F5F5F5;
+$white:                 #fff;
+
+
+// Accent colors
+// -------------------------
+$blue:                  #19B6EE;
+$blueDark:              #0064cd;
+$green:                 #38B44A;
+$red:                   #DF382C;
+$yellow:                #EFB73E;
+$orange:                #DD4814;
+$pink:                  #c3325f;
+$purple:                #772953;
+
+
+// Scaffolding
+// -------------------------
+$bodyBackground:        $white;
+$textColor:             $grayDark;
+
+
+// Links
+// -------------------------
+$linkColor:             $orange;
+$linkColorHover:        darken($linkColor, 15%);
+
+
+// Typography
+// -------------------------
+$sansFontFamily:        "Ubuntu", Tahoma, sans-serif;
+$serifFontFamily:       Georgia, "Times New Roman", Times, serif;
+$monoFontFamily:        Menlo, Monaco, Consolas, "Courier New", monospace;
+
+$baseFontSize:          13px;
+$baseFontFamily:        $sansFontFamily;
+$baseLineHeight:        18px;
+$altFontFamily:         $serifFontFamily;
+
+$headingsFontFamily:    inherit; // empty to use BS default, $baseFontFamily
+$headingsFontWeight:    bold;    // instead of browser default, bold
+$headingsColor:         inherit; // empty to use BS default, $textColor
+
+
+// Tables
+// -------------------------
+$tableBackground:                   transparent; // overall background-color
+$tableBackgroundAccent:             #f9f9f9; // for striping
+$tableBackgroundHover:              #f5f5f5; // for hover
+$tableBorder:                       #ddd; // table and cell border
+
+
+// Buttons
+// -------------------------
+$btnBackground:                     $white;
+$btnBackgroundHighlight:            darken($white, 10%);
+$btnBorder:                         darken($white, 20%);
+
+$btnPrimaryBackground:              $linkColor;
+$btnPrimaryBackgroundHighlight:     adjust-hue($btnPrimaryBackground, 15%);
+
+$btnInfoBackground:                 lighten($purple, 15%);
+$btnInfoBackgroundHighlight:        $purple;
+
+$btnSuccessBackground:              #62c462;
+$btnSuccessBackgroundHighlight:     #51a351;
+
+$btnWarningBackground:              lighten($orange, 15%);
+$btnWarningBackgroundHighlight:     $orange;
+
+$btnDangerBackground:               #ee5f5b;
+$btnDangerBackgroundHighlight:      #bd362f;
+
+$btnInverseBackground:              $gray;
+$btnInverseBackgroundHighlight:     $grayDarker;
+
+
+// Forms
+// -------------------------
+$inputBackground:               $white;
+$inputBorder:                   #ccc;
+$inputBorderRadius:             3px;
+$inputDisabledBackground:       $grayLighter;
+$formActionsBackground:         transparent;
+
+// Dropdowns
+// -------------------------
+$dropdownBackground:            $white;
+$dropdownBorder:                rgba(0,0,0,.2);
+$dropdownLinkColor:             $linkColor;
+$dropdownLinkColorHover:        $white;
+$dropdownLinkBackgroundHover:   $linkColor;
+
+
+
+
+// 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;
+$zindexFixedNavbar:     1030;
+$zindexModalBackdrop:   1040;
+$zindexModal:           1050;
+
+
+// Sprite icons path
+$iconSpritePath:          image-path("glyphicons-halflings.png");
+$iconWhiteSpritePath:     image-path("glyphicons-halflings-white.png");
+
+// Input placeholder text color
+$placeholderText:       $grayLight;
+
+// Hr border color
+$hrBorder:                $grayLighter;
+
+
+// Navbar
+// -------------------------
+$navbarHeight:                    40px;
+$navbarBackground:                $orange;
+$navbarBackgroundHighlight:       #CE4213;
+
+$navbarText:                      $white;
+$navbarLinkColor:                 $white;
+$navbarLinkColorHover:            $white;
+$navbarLinkColorActive:           $navbarLinkColorHover;
+$navbarLinkBackgroundHover:       transparent;
+$navbarLinkBackgroundActive:      $navbarBackground;
+
+$navbarSearchBackground:          lighten($navbarBackground, 25%);
+$navbarSearchBackgroundFocus:     $white;
+$navbarSearchBorder:              darken($navbarSearchBackground, 30%);
+$navbarSearchPlaceholderColor:    #ccc;
+$navbarBrandColor:                $navbarLinkColor;
+
+
+// Hero unit
+// -------------------------
+$heroUnitBackground:              $grayLighter;
+$heroUnitHeadingColor:            inherit;
+$heroUnitLeadColor:               inherit;
+
+
+// Form states and alerts
+// -------------------------
+$warningText:             #ECA918;
+$warningBackground:       lighten($warningText, 40%);
+$warningBorder:           darken(adjust-hue($warningBackground, -10), 3%);
+
+$errorText:               #DF382C;
+$errorBackground:         lighten($errorText, 40%);
+$errorBorder:             darken(adjust-hue($errorBackground, -10), 3%);
+
+$successText:             #38B44A;
+$successBackground:       lighten($successText, 40%);
+$successBorder:           darken(adjust-hue($successBackground, -10), 5%);
+
+$infoText:                $purple;
+$infoBackground:          lighten($purple, 50%);
+$infoBorder:              darken(adjust-hue($infoBackground, -10), 7%);
+
+
+
+// GRID
+// --------------------------------------------------
+
+// Default 940px grid
+// -------------------------
+$gridColumns:             12;
+$gridColumnWidth:         70px;
+$gridGutterWidth:         10px;
+$gridRowWidth:            ($gridColumns * $gridColumnWidth) + ($gridGutterWidth * ($gridColumns - 1));
+
+// Fluid grid
+$fluidGridColumnWidth:    6.382978723%;
+$fluidGridGutterWidth:    2.127659574%;