refactor fluid layout to be more specific to not interfere with modal content while adding right sidebar option

2 files changed, 59 insertions, 52 deletions

diff --git a/lib/patterns.less b/lib/patterns.less
index 1b27b7184..8ceffaa99 100644
--- a/lib/patterns.less
+++ b/lib/patterns.less
@@ -54,54 +54,53 @@
   }
 
   // Search Form
-  form {
-    float: left;
-    margin: 5px 0 0 0;
+  .form-search {
     position: relative;
-    .opacity(100);
+    margin-top: 5px;
+    margin-bottom: 0;
+    input {
+      background-color: #444;
+      background-color: rgba(255,255,255,.3);
+      #font > .sans-serif(13px, normal, 1);
+      padding: 4px 9px;
+      color: @white;
+      color: rgba(255,255,255,.75);
+      border: 1px solid #111;
+      .border-radius(4px);
+      @shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.25);
+      .box-shadow(@shadow);
+      .transition(none);
+
+      // Placeholder text gets special styles; can't be bundled together though for some reason
+      &:-moz-placeholder {
+        color: @grayLighter;
+      }
+      &::-webkit-input-placeholder {
+        color: @grayLighter;
+      }
+      // Hover states
+      &:hover {
+        background-color: @grayLight;
+        background-color: rgba(255,255,255,.5);
+        color: @white;
+      }
+      // Focus states (we use .focused since IE8 and down doesn't support :focus)
+      &:focus,
+      &.focused {
+        outline: 0;
+        background-color: @white;
+        color: @grayDark;
+        text-shadow: 0 1px 0 @white;
+        border: 0;
+        padding: 5px 10px;
+        .box-shadow(0 0 3px rgba(0,0,0,.15));
+      }
+    }
   }
   // Todo: remove from v2.0 when ready, added for legacy
-  form.pull-right {
+  .pull-right {
     float: right;
   }
-  input {
-    background-color: #444;
-    background-color: rgba(255,255,255,.3);
-    #font > .sans-serif(13px, normal, 1);
-    padding: 4px 9px;
-    color: @white;
-    color: rgba(255,255,255,.75);
-    border: 1px solid #111;
-    .border-radius(4px);
-    @shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.25);
-    .box-shadow(@shadow);
-    .transition(none);
-
-    // Placeholder text gets special styles; can't be bundled together though for some reason
-    &:-moz-placeholder {
-      color: @grayLighter;
-    }
-    &::-webkit-input-placeholder {
-      color: @grayLighter;
-    }
-    // Hover states
-    &:hover {
-      background-color: @grayLight;
-      background-color: rgba(255,255,255,.5);
-      color: @white;
-    }
-    // Focus states (we use .focused since IE8 and down doesn't support :focus)
-    &:focus,
-    &.focused {
-      outline: 0;
-      background-color: @white;
-      color: @grayDark;
-      text-shadow: 0 1px 0 @white;
-      border: 0;
-      padding: 5px 10px;
-      .box-shadow(0 0 3px rgba(0,0,0,.15));
-    }
-  }
 }
 
 // gradient is applied to it's own element because overflow visible is not honored by ie when filter is present
diff --git a/lib/scaffolding.less b/lib/scaffolding.less
index b6852535c..00a8ee3b3 100644
--- a/lib/scaffolding.less
+++ b/lib/scaffolding.less
@@ -24,20 +24,28 @@ body {
 }
 
 // Fluid layouts (left aligned, with sidebar, min- & max-width content)
-.container-fluid {
+.fluid-container {
   position: relative;
   min-width: 940px;
   padding-left: 20px;
   padding-right: 20px;
   .clearfix();
-  > .sidebar {
-    float: left;
-    width: 220px;
-  }
-  // TODO in v2: rename this and .popover .content to be more specific
-  > .content {
-    margin-left: 240px;
-  }
+}
+// Sidebars (left and right options)
+.fluid-sidebar-left,
+.fluid-sidebar-right {
+  width: 220px;
+}
+.fluid-sidebar-left   { float: left; }
+.fluid-sidebar-right  { float: right; }
+// The main content area
+.fluid-content {
+  margin-left: 240px;
+}
+// Reverse layout for sidebar on right
+.fluid-container.reverse .fluid-content {
+  margin-left: 0;
+  margin-right: 240px;
 }