improved styling for query controls

3 files changed, 228 insertions, 90 deletions

diff --git a/src/fauxton/app/templates/documents/doc.html b/src/fauxton/app/templates/documents/doc.html
index 81c74c4bc..d6577af78 100644
--- a/src/fauxton/app/templates/documents/doc.html
+++ b/src/fauxton/app/templates/documents/doc.html
@@ -35,7 +35,7 @@ the License.
   <textarea class="doc-code"><%- JSON.stringify(doc.attributes, null, "  ") %></textarea>
   <br />
   <p>
-    <button class="save-doc button" type="button">Save</button>
+    <button class="save-doc btn btn-success btn-large save" type="button">Save</button>
   </p>
 
 </div>
diff --git a/src/fauxton/app/templates/documents/view_editor.html b/src/fauxton/app/templates/documents/view_editor.html
index 3f0d9593f..b58420832 100644
--- a/src/fauxton/app/templates/documents/view_editor.html
+++ b/src/fauxton/app/templates/documents/view_editor.html
@@ -91,11 +91,10 @@ the License.
             </div>
           </div>
           <div class="control-group">
-            <hr />
             <div class="controls">
-              <button class="btn btn-success save">Save</button>
+              <button class="btn btn-success btn-large save">Save</button>
               <% if (!this.newView) { %>
-              <button class="btn btn-danger delete">Delete</button>
+              <button class="btn btn-danger btn-large delete">Delete</button>
               <% } %>
             </div>
           </div>
@@ -108,80 +107,79 @@ the License.
     </div>
     <div class="tab-pane" id="query">
       <div class="advanced-options well">
-        <form class="view-query-update">
-          <div class="row-fluid">
-            <div class="controls controls-row">
-              <input name="key" class="span6" type="text" placeholder="Key">
-              <input name="keys" class="span6" type="text" placeholder="Keys">
+        <form class="view-query-update custom-inputs">
+          <div class="controls-group">
+            <div class="row-fluid">
+              <div class="controls controls-row">
+                <input name="key" class="span6" type="text" placeholder="Key">
+                <input name="keys" class="span6" type="text" placeholder="Keys">
+              </div>
             </div>
-          </div>
-          <div class="row-fluid">
-            <div class="controls controls-row">
-              <input name="startkey" class="span6" type="text" placeholder="Start Key">
-              <input name="endkey" class="span6" type="text" placeholder="End Key">
+            <div class="row-fluid">
+              <div class="controls controls-row">
+                <input name="startkey" class="span6" type="text" placeholder="Start Key">
+                <input name="endkey" class="span6" type="text" placeholder="End Key">
+              </div>
             </div>
           </div>
-          <div class="row-fluid">
-            <div class="controls controls-row">
-
-              <label class="checkbox inline">
-                <input name="include_docs" type="checkbox" value="true"> Include Docs
-              </label>
-
-              <% if (hasReduce) { %>
-              <label class="checkbox inline">
-                <input name="reduce" type="checkbox" value="true"> Reduce
-              </label>
-
-              <label class="checkbox inline">
-                Group Level:
-                <select disabled name="group_level" class="input-small">
-                  <option value="0">None</option>
-                  <option value="1">1</option>
-                  <option value="2">2</option>
-                  <option value="3">3</option>
-                  <option value="4">4</option>
-                  <option value="5">5</option>
-                  <option value="6">6</option>
-                  <option value="7">7</option>
-                  <option value="8">8</option>
-                  <option value="9">9</option>
-                  <option value="999" selected="selected">exact</option>
-                </select>
-              </label>
-              <% } %>
-            </div>
-            <div class="controls controls-row">
-              <label class="checkbox inline">
-                <input name="stale" type="checkbox" value="ok"> Stale
-              </label>
-              <label class="checkbox inline">
-                <input name="descending" type="checkbox" value="true"> Descending
-              </label>
-              <label class="checkbox inline">
-                Limit:
-                <select name="limit" class="input-small">
-                  <option>5</option>
-                  <option selected="selected">10</option>
-                  <option>25</option>
-                  <option>50</option>
-                  <option>100</option>
-                </select>
-              </label>
-            </div>
-            <div class="controls controls-row">
-              <label class="checkbox inline">
-                <input name="inclusive_end" type="checkbox" value="false"> Disable Inclusive End
-              </label>
-              <label class="checkbox inline">
-                <input name="update_seq" type="checkbox" value="true"> Include Update Sequence
-              </label>
+          <div class="controls-group">
+            <div class="row-fluid">
+              <div class="controls controls-row">
+                <div class="checkbox inline">  
+                  <input id="check1" type="checkbox" name="include_docs" value="true">  
+                  <label name="include_docs" for="check1">Include Docs</label>  
+                  <% if (hasReduce) { %>
+                  <input id="check2" name="reduce" type="checkbox" value="true">
+                  <label for="check2">Reduce</label>  
+                </div> 
+                <label id="select1" class="drop-down inline">
+                  Group Level:
+                  <select id="select1" disabled name="group_level" class="input-small">
+                    <option value="0">None</option>
+                    <option value="1">1</option>
+                    <option value="2">2</option>
+                    <option value="3">3</option>
+                    <option value="4">4</option>
+                    <option value="5">5</option>
+                    <option value="6">6</option>
+                    <option value="7">7</option>
+                    <option value="8">8</option>
+                    <option value="9">9</option>
+                    <option value="999" selected="selected">exact</option>
+                  </select>
+                </label>
+                <% } %>
+                <div class="checkbox inline">  
+                  <input id="check3" name="stale" type="checkbox" value="ok">
+                  <label for="check3">Stale</label>
+                  <input id="check4" name="descending" type="checkbox" value="true">  
+                  <label for="check4">Descending</label>  
+                </div> 
+                <label class="drop-down inline">
+                  Limit:
+                  <select name="limit" class="input-small">
+                    <option>5</option>
+                    <option selected="selected">10</option>
+                    <option>25</option>
+                    <option>50</option>
+                    <option>100</option>
+                  </select>
+                </label>
+                <div class="checkbox inline">  
+                  <input id="check5" name="inclusive_end" type="checkbox" value="false">
+                  <label for="check5">Disable Inclusive End</label>
+                  <input id="check6" name="update_seq" type="checkbox" value="true">  
+                  <label for="check6">Descending</label>  
+                </div>
+              </div>
             </div>
           </div>
-          <div class="row-fluid">
-            <div class="controls controls-row">
-              <button type="submit" class="btn btn-primary">Query</button>
-              <button class="btn btn-info preview">Preview</button>
+          <div class="controls-group">
+            <div class="row-fluid">
+              <div class="controls controls-row">
+                <button type="submit" class="btn btn-primary btn-large">Query</button>
+                <button class="btn btn-info btn-large preview">Preview</button>
+              </div>
             </div>
           </div>
         </form>
diff --git a/src/fauxton/assets/less/fauxton.less b/src/fauxton/assets/less/fauxton.less
index 49c973a09..fcaf884ce 100644
--- a/src/fauxton/assets/less/fauxton.less
+++ b/src/fauxton/assets/less/fauxton.less
@@ -74,7 +74,7 @@
 
 /*buttons */
 @redButton: @red;
-@linkColor: @darkRed;
+@linkColor: @red;
 
 @boxShadow: 2px 2px rgba(0,0,0,0.2);
 @boxShadowOff: 2px 2px rgba(0,0,0,0);
@@ -207,6 +207,7 @@ a:hover{
 
   .navbar {
     .brand {
+      .box-sizing(content-box);
       .hide-text;
       .customTransition(left, 1s, 0.805, 0.005, 0.165, 0.985);
       margin: 10px 0 6px;
@@ -214,6 +215,7 @@ a:hover{
       height: 40px;
       padding: 10px;
       .icon{
+        .box-sizing(content-box);
         background: url(../img/minilogo.png) no-repeat 0 0;
         display: block;
         height: 100%;
@@ -430,7 +432,6 @@ a:hover{
 }
 
 #breadcrumbs {
-   
    padding: 15px 20px;
    .breadcrumb {
     margin-bottom: 0;
@@ -447,6 +448,9 @@ a:hover{
       color: @breadcrumbText;
       font-size: 18px;
       text-shadow: none;
+      &.active{
+        color: #333;
+      }
       a{
         color: @breadcrumbText;
       }
@@ -568,16 +572,20 @@ footer#mainFooter{
   padding: 0 20px;
 }
 
-.nav-tabs > li > a {
+.nav-tabs > li{
+  margin-right: 2px;
+  > a {
+  color: #333;
   border-color: #eeeeee #eeeeee #dddddd;
   text-decoration: none;
   background-color: #eeeeee;
   border-radius: 0;
   border-left: none;
   border-right: none;
-  &.fonticon:before{
-    margin-right: 6px;
-    font-size: 16px;
+    &.fonticon:before{
+      margin-right: 6px;
+      font-size: 16px;
+    }
   }
 }
 
@@ -597,6 +605,18 @@ footer#mainFooter{
   margin-top: 70px;
 }
 
+.well { 
+  .controls-group {
+  &:first-child, &:last-child{
+    margin-top: 24px;
+  }
+  margin-bottom: 8px;
+  }
+  .controls-row {
+    margin-bottom: 8px;
+  }
+}
+
 /*TABLE STYLES*/
 table.databases {clear: both;}
 thead {border-bottom: 2px solid @redButton;}
@@ -678,10 +698,12 @@ tbody {padding-top: 10px;}
 
 input[type=text], input[type=password],
 .navbar-form input{
-  padding: 7px;
-  margin-top: -5px;
-  border: 1px solid @inputBorder;
   .border-radius(0);
+  padding: 12px;
+  margin-top: -4px;
+  border: 1px solid #ccc;
+  height: auto;
+  font-size: 16px;
 }
 
 
@@ -689,19 +711,128 @@ input[type=checkbox]{
 
 }
 label.fonticon-search {
+  .box-sizing(content-box);
   position: relative;
   &:before {
+    .transition(all .25s linear);
+    font-size: 16px;
     position: absolute;
-    right: -35px;
+    right: -47px;
     background-color: #E1E1E1;
-    height: 18px;
-    width: 18px;
-    border: 1px solid @inputBorder;
-    padding: 8px;
-    top: -5px;
+    height: 46px;
+    width: 48px;
+    border: 1px solid #cccccc;
+    padding: 14px;
+    top: -4px;
   }
+  &:hover{
+    color:white;
+    &:before {
+      background-color: @red;
+    }
+  }
+}
+
+*, *:before, *:after {
+  .box-sizing(border-box);
+}
+
+input[type="checkbox"], input[type="radio"] {
+  box-sizing: border-box;
+  padding: 0;
+}
+
+input[type="file"], input[type="checkbox"], input[type="radio"], select {
+  margin: 0 0 1em 0;
+}
+
+.well select {
+  margin: 0;
 }
 
+form.custom .hidden-field {
+  margin-left: -99999px;
+  position: absolute;
+  visibility: hidden;
+}
+
+label{
+  padding-left: 25px;  
+  margin-right: 15px; 
+  display: inline-block;  
+  cursor: pointer;  
+  position: relative;  
+  font-size: 14px;  
+}
+
+.custom-inputs{
+
+  input[type=radio], 
+  input[type=checkbox] {  
+    display: none;  
+  } 
+
+  .checkbox label:before {  
+    border-radius: 3px;  
+  }  
+
+  .controls > .radio:first-child, .controls > .checkbox:first-child {
+    padding-top: 15px;
+  }
+
+  .radio.inline, .checkbox.inline {
+    display: inline-block;
+    padding-top: 15px;
+    margin-bottom: 12px;
+    vertical-align: middle;
+  }
+
+  input[type=checkbox]:checked + label:before {  
+    /*content: "\2713"; */
+    content: "\00d7"; 
+    text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);  
+    font-size: 16px;
+    background-color: @red;  
+    color: white;  
+    text-align: center;  
+    line-height: 15px;  
+  }  
+
+  label:before {  
+    content: "";  
+    display: inline-block;  
+
+    width: 16px;  
+    height: 16px;  
+
+    margin-right: 10px;  
+    position: absolute;  
+    left: 0;  
+    bottom: 1px;  
+    background-color: #aaa;  
+    box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);  
+  }  
+
+  .radio label:before {  
+    border-radius: 8px;  
+  }  
+
+  input[type=radio]:checked + label:before {  
+    content: "\2022";  
+    color: #f3f3f3;  
+    font-size: 30px;  
+    text-align: center;  
+    line-height: 18px;  
+  }
+
+  label.drop-down{
+    &:before{
+    display: none;
+    }
+  }
+}
+
+
 .form-actions {
   background: none;
   border: none;
@@ -783,11 +914,20 @@ div.spinner {
   .input-append.input-prepend {
     margin-bottom: 0px;
     .add-on {
+      margin-top: -4px;
+      background: none;
+      padding: 14px 12px 32px 12px;
       border: none;
-      padding-right: 25px;
     }
     .btn:last-child{
-      margin-left: 15px;
+      margin-left: -1px;
+      margin-top: -4px;
+      background: none;
+      padding: 13px 12px 11px 12px;
+      &:hover{
+        background-color: @red;
+        color: white;
+      }
     }
   }
 }