update to bootstrap 2.1.0

amelia/bootswatch.less

 // Bootswatch.less
 // Swatch: Amelia
-// Version: 2.0.4
+// Version: 2.1.0
 // -----------------------------------------------------
 
 // TYPOGRAPHY
@@ -9,7 +9,8 @@
 @import url('https://fonts.googleapis.com/css?family=Lobster');
 @import url('https://fonts.googleapis.com/css?family=Cabin:400,700');
 
-.navbar .brand, legend {
+.navbar .brand,
+legend {
 	font-family: @headingsFontFamily;
 }
 
@@ -38,6 +39,7 @@ hr {
 }
 
 .page-header {
+	margin: 30px 0 15px;
 	border-bottom: 0px solid transparent;
 }
 
@@ -53,12 +55,13 @@ footer.footer {
 // -----------------------------------------------------
 
 .navbar {
+
 	.navbar-inner {
 		.border-radius(0);
 	}
 
 	.brand {
-		padding: 12px 20px 14px;
+		padding: 15px 20px 14px;
 		font-size: 24px;
 		font-weight: normal;
 	}
@@ -69,21 +72,78 @@ footer.footer {
 		text-shadow: none;
 	}
 
+	.nav > .active > a,
+	.nav > .active > a:hover,
+	.navbar .nav > .active > a:focus {
+		.box-shadow(none);
+	}
+
 	.navbar-search {
 		margin-top: 10px;
 	}
 
 	.navbar-search .search-query {
-		border: 2px solid lighten(@navbarBackground, 10%);
 		.border-radius(0);
-		.box-shadow(none);
+		padding-top: 5px;
+		padding-bottom: 5px;
+	}
 
-		&:focus, &.focus {
-			background-color: @grayLighter;
-			border-color: @grayLighter;
-			text-shadow: none;
-			padding: 4px 9px;
+	.navbar-text {
+		margin: 17px 15px 14px;
+		line-height: 20px;
+	}
+
+	.btn,
+	.btn-group {
+		padding: 4px;
+	}
+
+	.nav-collapse.collapse {
+
+		.nav li > a {
+			color: @textColor;
+			.border-radius(0);
+
+			&:hover {
+				background-color: lighten(@navbarBackground, 10%);
+			}
+		}
+
+		.dropdown-menu li > a:hover,
+		.dropdown-menu li > a:focus,
+		.dropdown-submenu:hover > a {
+			background-image: none;
+		}
+
+		.navbar-form,
+		.navbar-search {
 			.box-shadow(none);
+			border: none;
+		}
+
+		.navbar-search .search-query {
+			border: 2px solid @textColor;
+		}
+
+		.nav-header {
+			color: rgba(255, 255, 255, 0.5);
+		}
+	}
+
+	&-inverse {
+
+		.dropdown-menu li > a:hover,
+		.dropdown-menu li > a:focus,
+		.dropdown-submenu:hover > a {
+			background-image: none;
+			background-color: @yellow;
+		}
+
+		.nav-collapse.collapse {
+
+			.nav li > a:hover {
+				background-color: lighten(@navbarInverseBackground, 10%);
+			}
 		}
 	}
 }
@@ -135,27 +195,6 @@ div.subnav-fixed {
 	top: 50px;
 }
 
-.navbar .nav-collapse.in {
-
-	.nav li > a {
-		color: @textColor;
-		.border-radius(0);
-	}
-
-	li > a:hover {
-		background-color: lighten(@navbarBackground, 10%);
-	}
-
-	.navbar-form, .navbar-search {
-		.box-shadow(none);
-		border-color: lighten(@navbarBackground, 10%);
-	}
-
-	.navbar-search .search-query {
-		border: 2px solid @textColor;
-	}
-}
-
 // BUTTONS
 // -----------------------------------------------------
 
@@ -192,22 +231,12 @@ div.subnav-fixed {
 
 .btn-group .btn:first-child {
 	margin-left: 0;
-     -webkit-border-top-left-radius: 0;
-         -moz-border-radius-topleft: 0;
-             border-top-left-radius: 0;
-  -webkit-border-bottom-left-radius: 0;
-      -moz-border-radius-bottomleft: 0;
-          border-bottom-left-radius: 0;
+	.border-radius(0);
 }
 
 .btn-group .btn:last-child,
 .btn-group .dropdown-toggle {
-     -webkit-border-top-right-radius: 0;
-         -moz-border-radius-topright: 0;
-             border-top-right-radius: 0;
-  -webkit-border-bottom-right-radius: 0;
-      -moz-border-radius-bottomright: 0;
-          border-bottom-right-radius: 0;
+     .border-radius(0);
 }
 
 .btn-group .dropdown-toggle,
@@ -240,6 +269,10 @@ div.subnav-fixed {
   .buttonBackgroundCustom(@btnInverseBackground);
 }
 
+.btn-link {
+	.buttonBackgroundCustom(@btnPrimaryBackground);
+}
+
 .btn-small {
 	padding: 13px 16px 12px;
 }
@@ -269,6 +302,21 @@ div.subnav-fixed {
 	.border-radius(0);
 }
 
+.table tbody {
+
+	tr.success td {
+		background-color: @green;
+	}
+
+	tr.error td {
+		background-color: @red;
+	}
+
+	tr.info td {
+		background-color: @blue;
+	}
+}
+
 // FORMS
 // -----------------------------------------------------
 
@@ -320,9 +368,10 @@ input, textarea, .search-query, .uneditable-input,
 	color: lighten(@green, 20%);
 }
 
-.input-prepend .add-on, .input-append .add-on {
-	height: 25px;
-	padding-top: 9px;
+.input-prepend .add-on,
+.input-append .add-on {
+	height: 20px;
+	padding-top: 4px;
 	background-color: @grayLighter;
 	border-color: transparent;
 	.border-radius(0);
@@ -330,6 +379,11 @@ input, textarea, .search-query, .uneditable-input,
 	text-shadow: none;
 }
 
+.input-append .btn,
+.input-prepend .btn {
+	padding: 4px 10px;
+}
+
 // NAVIGATION
 // -----------------------------------------------------
 
@@ -348,30 +402,39 @@ input, textarea, .search-query, .uneditable-input,
 		text-shadow: none;
 	}
 
+	.active {
+		color: @white;
+	}
+
 	.divider {
 		color: @linkColor;
 	}
 }
 
-.pager > li > a {
+.pager {
+
+	li > a {
 		background-color: #3CB9C6;
 
 		&:hover {
 			background-color: #8AD5DC;
 		}
+	}
+
+	.disabled a,
+	.disabled a:hover {
+		background-color: #3CB9C6;
+		color: @white;
+	}
 }
 
 .pagination {
 
 	ul  {
-		background-color: #3CB9C6;
+		background-color: @paginationBackground;
 		background-image: none;
 	}
 
-	li a {
-		border: 0px solid transparent;
-	}
-
 	.disabled a, .disabled a:hover {
 		color: @textColor;
 	}
@@ -471,6 +534,11 @@ input, textarea, .search-query, .uneditable-input,
 		background-color: #8AD5DC;
 		text-shadow: none;
 	}
+
+	.divider {
+		background-color: rgba(255, 255, 255, 0.3);
+		border-bottom: none;
+	}
 }
 
 // MODALS
@@ -508,7 +576,6 @@ code, pre {
 }
 
 .well {
-	background-color: #3CB9C6;
 	background-image: none;
 }
 
@@ -549,8 +616,20 @@ code, pre {
 	.bar {
 		.box-shadow(none);
 		background-image: none;
+		background-color: @yellow;
+
+		&-success {
+			background-color: @green;
+		}
+
+		&-warning {
 			background-color: @orange;
 		}
+
+		&-error {
+			background-color: @red;
+		}
+	}
 }
 
 .progress-danger .bar {

amelia/index.html

@@ -36,6 +36,7 @@
   </head>
 
   <body class="preview" data-spy="scroll" data-target=".subnav" data-offset="50">
+    <script src="../js/bsa.js"></script>
 
 
   <!-- Navbar
@@ -62,8 +63,18 @@
 <!-- Masthead
 ================================================== -->
 <header class="jumbotron subhead" id="overview">
+  <div class="row">
+    <div class="span6">
       <h1>Amelia</h1>
       <p class="lead">A preview of changes in this swatch.</p>
+    </div>
+    <div class="span6">
+      <div class="bsa well">
+          <div id="bsap_1277971" class="bsarocks bsap_c466df00a3cd5ee8568b5c4983b6bb19"></div>
+          <div class="clearfix"><a href="http://adpacks.com" id="bsap_aplink">via Ad Packs</a></div>
+      </div>
+    </div>
+  </div>
   <div class="subnav">
     <ul class="nav nav-pills">
       <li><a href="#typography">Typography</a></li>
@@ -128,7 +139,7 @@
 ================================================== -->
 <section id="navbar">
   <div class="page-header">
-    <h1>Navbar</h1>
+    <h1>Navbars</h1>
   </div>
   <div class="navbar">
     <div class="navbar-inner">
@@ -178,6 +189,54 @@
     </div><!-- /navbar-inner -->
   </div><!-- /navbar -->
 
+  <div class="navbar navbar-inverse">
+    <div class="navbar-inner">
+      <div class="container" style="width: auto;">
+        <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
+          <span class="icon-bar"></span>
+          <span class="icon-bar"></span>
+          <span class="icon-bar"></span>
+        </a>
+        <a class="brand" href="#">Project name</a>
+        <div class="nav-collapse">
+          <ul class="nav">
+            <li class="active"><a href="#">Home</a></li>
+            <li><a href="#">Link</a></li>
+            <li><a href="#">Link</a></li>
+            <li><a href="#">Link</a></li>
+            <li class="dropdown">
+              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
+              <ul class="dropdown-menu">
+                <li><a href="#">Action</a></li>
+                <li><a href="#">Another action</a></li>
+                <li><a href="#">Something else here</a></li>
+                <li class="divider"></li>
+                <li><a href="#">Separated link</a></li>
+              </ul>
+            </li>
+          </ul>
+          <form class="navbar-search pull-left" action="">
+            <input type="text" class="search-query span2" placeholder="Search">
+          </form>
+          <ul class="nav pull-right">
+            <li><a href="#">Link</a></li>
+            <li class="divider-vertical"></li>
+            <li class="dropdown">
+              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
+              <ul class="dropdown-menu">
+                <li><a href="#">Action</a></li>
+                <li><a href="#">Another action</a></li>
+                <li><a href="#">Something else here</a></li>
+                <li class="divider"></li>
+                <li><a href="#">Separated link</a></li>
+              </ul>
+            </li>
+          </ul>
+        </div><!-- /.nav-collapse -->
+      </div>
+    </div><!-- /navbar-inner -->
+  </div><!-- /navbar -->
+
 </section>
 
 

amelia/variables.less

-// Variables.less
-// Variables to customize the look and feel of Bootstrap
+//
+// Variables
 // Swatch: Amelia
-// Version: 2.0.4
-// -----------------------------------------------------
+// Version: 2.1.0
+// --------------------------------------------------
+
 
-// GLOBAL VALUES
+// Global values
 // --------------------------------------------------
 
 
@@ -104,12 +105,17 @@
 // -------------------------
 @dropdownBackground:            @white;
 @dropdownBorder:                rgba(0,0,0,.2);
-@dropdownLinkColor:             @bodyBackground;
-@dropdownLinkColorHover:        @white;
-@dropdownLinkBackgroundHover:   rgba(0, 57, 59, 0.9);
 @dropdownDividerTop:            #e5e5e5;
 @dropdownDividerBottom:         @white;
 
+@dropdownLinkColor:             @grayDark;
+
+@dropdownLinkColorHover:        @white;
+@dropdownLinkBackgroundHover:   @red;
+
+@dropdownLinkColorActive:       @dropdownLinkColor;
+@dropdownLinkBackgroundActive:  @red;
+
 
 
 // COMPONENT VARIABLES
@@ -143,11 +149,19 @@
 @hrBorder:                transparent;
 
 
+// Wells
+// -------------------------
+@wellBackground:                  #3CB9C6;
+
+
 // Navbar
 // -------------------------
+@navbarCollapseWidth:             979px;
+
 @navbarHeight:                    50px;
 @navbarBackground:                #AD1D28;
 @navbarBackgroundHighlight:       #AD1D28;
+@navbarBorder:                    darken(@navbarBackground, 12%);
 
 @navbarText:                      @white;
 @navbarLinkColor:                 @white;
@@ -156,12 +170,34 @@
 @navbarLinkBackgroundHover:       lighten(@navbarBackground, 10%);
 @navbarLinkBackgroundActive:      lighten(@navbarBackground, 10%);
 
-@navbarSearchBackground:          rgba(0, 0, 0, 0);
-@navbarSearchBackgroundFocus:     lighten(@navbarBackground, 25%);
-@navbarSearchBorder:              darken(@navbarSearchBackground, 30%);
-@navbarSearchPlaceholderColor:    @textColor;
 @navbarBrandColor:                @navbarLinkColor;
 
+// Inverted navbar
+@navbarInverseBackground:                @yellow;
+@navbarInverseBackgroundHighlight:       @yellow;
+@navbarInverseBorder:                    rgba(0, 0, 0, 0.1);
+
+@navbarInverseText:                      @white;
+@navbarInverseLinkColor:                 @white;
+@navbarInverseLinkColorHover:            @white;
+@navbarInverseLinkColorActive:           @white;
+@navbarInverseLinkBackgroundHover:       rgba(255, 255, 255, 0.2);
+@navbarInverseLinkBackgroundActive:      rgba(255, 255, 255, 0.2);
+
+@navbarInverseSearchBackground:          lighten(@navbarInverseBackground, 25%);
+@navbarInverseSearchBackgroundFocus:     @white;
+@navbarInverseSearchBorder:              @navbarInverseBackground;
+@navbarInverseSearchPlaceholderColor:    @white;
+
+@navbarInverseBrandColor:                @navbarInverseLinkColor;
+
+
+// Pagination
+// -------------------------
+@paginationBackground:                #3CB9C6;
+@paginationBorder:                    transparent;
+@paginationActiveBackground:          rgba(255, 255, 255, 0.4);
+
 
 // Hero unit
 // -------------------------
@@ -189,10 +225,28 @@
 @infoBorder:              darken(spin(@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;
@@ -200,7 +254,26 @@
 @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);

cerulean/bootswatch.less

 // Bootswatch.less
 // Swatch: Cerulean
-// Version: 2.0.4
+// Version: 2.1.0
 // -----------------------------------------------------
 
 // IMPORTS
@@ -15,32 +15,43 @@
 
 	font-family: @headingsFontFamily;
 
-	.navbar-inner {
-		#gradient > .vertical-three-colors(@navbarBackground, @navbarBackground, 90%, @navbarBackgroundHighlight);
+	.brand {
+		padding: 16px 20px 14px;
+		text-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
 	}
 
-	.brand {
-		padding: 15px 20px;
+	li {
+		line-height: 20px;
 	}
 
 	.nav > li > a {
 		padding: 16px 10px 14px;
+		text-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
 	}
 
-	.nav li.dropdown.active > .dropdown-toggle,
-	.nav li.dropdown.active.open > .dropdown-toggle {
-		background-color: @navbarLinkBackgroundActive;
+	.search-query {
+		border: 1px solid darken(@linkColor, 10%);
 	}
 
-	.nav-collapse.in > .nav > li .dropdown-menu a {
-		color: @white;
-
-		&:hover {
-			color: @white;
+	.btn-navbar:hover {
+	    background-color: darken(@white, 20%);
 	}
+
+	.navbar-text {
+		padding: 19px 10px 18px;
+		line-height: 13px;
+		color: rgba(0, 0, 0, 0.5);
+		text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.25);
 	}
 
-	.nav-collapse.in .nav li > a {
+	// .nav li.dropdown.active > .dropdown-toggle,
+	// .nav li.dropdown.active.open > .dropdown-toggle {
+	// 	background-color: @navbarLinkBackgroundActive;
+	// }
+
+	.nav-collapse.collapse {
+
+		.nav li > a {
 			color: @white;
 
 			&:hover {
@@ -48,19 +59,43 @@
 			}
 		}
 
-	.search-query {
-		border: 1px solid darken(@linkColor, 10%);
+		.nav .active > a {
+			.box-shadow(none);
+			background-color: #2B7CAC;
 		}
 
-	.btn-navbar:hover {