Browser: Update UI with new components and elements (#5671)

browser/app/less/inc/buttons.less

@@ -1,22 +1,39 @@
+// Base
 .btn {
     border: 0;
-    padding: 5px 10px;
-    font-size: 12px;
-    line-height: 1.5;
-    border-radius: 2px;
+    border-radius: @border-radius-small;
     text-align: center;
     .transition(all);
     .transition-duration(300ms);
+    font-size: @font-size-small;
 
-    &:hover,
-    &:focus {
-        .opacity(0.9);
+    &:not(.btn--sm) {
+        padding: 0.5rem 0.75rem;
     }
 }
 
-/*-----------------------------------
-    Button Variants
-------------------------------------*/
+
+// Size
+.btn--sm {
+    padding: 0.35rem 0.5rem;
+    font-size: @font-size-extra-small;
+}
+
+
+// Link buttons
+.btn--link {
+    background-color: transparent;
+    text-transform: uppercase;
+    font-weight: @font-weight-bold;
+    color: @headings-color;;
+
+    &:hover {
+        background-color: @muted-bg;
+    }
+}
+
+
+// Variants
 .btn-variant(@bg-color, @color) {
     color: @color;
     background-color: @bg-color;
@@ -24,34 +41,18 @@
     &:hover,
     &:focus {
         color: @color;
-        background-color: darken(@bg-color, 6%);
+        background-color: darken(@bg-color, 5%);
     }
-
-
 }
 
-.btn-block {
-    display: block;
-    width: 100%;
-}
-
-.btn-white {
-    .btn-variant(#fff, darken(@text-color, 20%));
-}
-
-.btn-link {
-    .btn-variant(#eee, #545454);
-}
-
-.btn-danger {
+.btn--danger {
     .btn-variant(@red, @white);
 }
 
-.btn-primary {
+.btn--primary {
     .btn-variant(@blue, @white);
 }
 
-.btn-success {
+.btn--success {
     .btn-variant(@green, @white);
-}
-//-----------------------------------
+}