Fix for the buttons and the footer

3 files changed, 60 insertions, 6 deletions

diff --git a/src/fauxton/app/templates/fauxton/api_bar.html b/src/fauxton/app/templates/fauxton/api_bar.html
index a1a31a64e..cbed3d568 100644
--- a/src/fauxton/app/templates/fauxton/api_bar.html
+++ b/src/fauxton/app/templates/fauxton/api_bar.html
@@ -17,7 +17,6 @@ the License.
   <span class="fonticon-plus icon"></span>
 </button>
 <div class="api-navbar" style="display: none">
-  <div class="container">
     <div class="input-prepend input-append">
       <span class="add-on">
         API reference
@@ -28,5 +27,4 @@ the License.
       <input type="text" class="input-xxlarge" value="<%= endpoint %>">
       <a href="<%= endpoint %>" target="_blank" class="btn">Show me</a>
     </div>
-  </div>
 </div>
diff --git a/src/fauxton/assets/less/fauxton.less b/src/fauxton/assets/less/fauxton.less
index 4292ff9ea..d2bd3eb85 100644
--- a/src/fauxton/assets/less/fauxton.less
+++ b/src/fauxton/assets/less/fauxton.less
@@ -33,9 +33,10 @@ body {
 footer {
   position: fixed;
   bottom: 0;
-  padding: 20px;
   font-size: 10px;
   margin-left: @navWidth;
+  padding: 5px 10px;
+  background-color: #F2F2F2;
 }
 
 .hide-text {
@@ -617,10 +618,55 @@ tbody {padding-top: 10px;}
   }
 }
 
-a.button, a.button:visited, a.button:active {
-  &.cancel-button{
-    color: @fontGrey;
+
+.button-style{
+  background-color: @redButton;
+  color: #fff;
+  padding: 10px 15px;
+  &:before{
+    padding-right: 5px;
+  }
+  &.outlineGray{
+    border: 1px solid @grayLight;
+    background-color: transparent;
+    color: @grayDark;
+    &:hover{
+      border: 1px solid @orange;
+    }
+  }
+  &.green{
+    background-color: @green;
+  }
+
+  &.round-btn {
+    .border-radius(@radius);
   }
+  .icon {
+    margin-right: 10px;
+    font-size: 20px;
+  }
+  &:hover {
+    color: #fff;
+    text-decoration: none;
+    background-color: @orange;
+  }
+  a&,
+  a&:visited,
+  a&:active{
+    color: #fff;
+  }
+  &:disabled {
+    opacity: 0.5;
+  }
+}
+
+
+
+
+a.button, 
+a.button:visited, 
+a.button:active {
+  .button-style;
 }
 
 .select{
diff --git a/src/fauxton/assets/less/variables.less b/src/fauxton/assets/less/variables.less
index f81b063d4..bf97b5d7f 100644
--- a/src/fauxton/assets/less/variables.less
+++ b/src/fauxton/assets/less/variables.less
@@ -60,6 +60,16 @@
 /*buttons */
 @redButton: @red;
 @linkColor: @red;
+@blue:                  #049cdb;
+@blueDark:              #0064cd;
+@green:                 #7FA30C;
+//@red:                   #9d261d;
+@yellow:                #ffcc00;
+@pink:                  #c3325f;
+@purple:                #7a43b6;
+
+
+
 
 @boxShadow: 2px 2px rgba(0,0,0,0.2);
 @boxShadowOff: 2px 2px rgba(0,0,0,0);