Merge pull request #225 from resin-io/feat/extensible-buttons

Make button element more extensible

build/css/main.css

@@ -2846,7 +2846,7 @@ select[multiple].input-lg,
     outline: 5px auto -webkit-focus-ring-color;
     outline-offset: -2px; }
   .btn:hover, .progress-button:hover, .btn:focus, .progress-button:focus, .btn.focus, .focus.progress-button {
-    color: #333;
+    color: #9a9a9a;
     text-decoration: none; }
   .btn:active, .progress-button:active, .btn.active, .active.progress-button {
     outline: 0;
@@ -2868,28 +2868,28 @@ fieldset[disabled] a.progress-button {
   pointer-events: none; }
 
 .btn-default {
-  color: #333;
-  background-color: #fff;
+  color: #9a9a9a;
+  background-color: #f3f3f3;
   border-color: #ccc; }
   .btn-default:focus, .btn-default.focus {
-    color: #333;
-    background-color: #e6e6e6;
+    color: #9a9a9a;
+    background-color: #dadada;
     border-color: #8c8c8c; }
   .btn-default:hover {
-    color: #333;
-    background-color: #e6e6e6;
+    color: #9a9a9a;
+    background-color: #dadada;
     border-color: #adadad; }
   .btn-default:active, .btn-default.active,
   .open > .btn-default.dropdown-toggle {
-    color: #333;
-    background-color: #e6e6e6;
+    color: #9a9a9a;
+    background-color: #dadada;
     border-color: #adadad; }
     .btn-default:active:hover, .btn-default:active:focus, .btn-default:active.focus, .btn-default.active:hover, .btn-default.active:focus, .btn-default.active.focus,
     .open > .btn-default.dropdown-toggle:hover,
     .open > .btn-default.dropdown-toggle:focus,
     .open > .btn-default.dropdown-toggle.focus {
-      color: #333;
-      background-color: #d4d4d4;
+      color: #9a9a9a;
+      background-color: #c8c8c8;
       border-color: #8c8c8c; }
   .btn-default:active, .btn-default.active,
   .open > .btn-default.dropdown-toggle {
@@ -2898,11 +2898,11 @@ fieldset[disabled] a.progress-button {
   fieldset[disabled] .btn-default:hover,
   fieldset[disabled] .btn-default:focus,
   fieldset[disabled] .btn-default.focus {
-    background-color: #fff;
+    background-color: #f3f3f3;
     border-color: #ccc; }
   .btn-default .badge {
-    color: #fff;
-    background-color: #333; }
+    color: #f3f3f3;
+    background-color: #9a9a9a; }
 
 .btn-primary, .progress-button--primary {
   color: #fff;
@@ -6011,7 +6011,7 @@ html {
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-button.btn, button.progress-button {
+.btn, .progress-button {
   padding: 10px;
   padding-top: 11px;
   border-radius: 2px;
@@ -6019,16 +6019,20 @@ button.btn, button.progress-button {
   letter-spacing: 0.5px;
   outline: none;
   position: relative; }
-  button.btn[disabled], button[disabled].progress-button {
+  .btn[disabled], [disabled].progress-button {
     background-color: #313339;
     color: #787c7f;
     pointer-events: none; }
-    button.btn[disabled]:hover, button[disabled].progress-button:hover {
+    .btn[disabled]:hover, [disabled].progress-button:hover {
       background-color: #36383e; }
 
-.btn:not(.btn-link), .progress-button:not(.btn-link) {
+.btn-brick {
   min-width: 170px; }
 
+.btn-sm, .btn-group-sm > .btn, .btn-group-sm > .progress-button {
+  font-size: 10px;
+  padding: 4px 12px; }
+
 .btn > .glyphicon, .progress-button > .glyphicon, .btn > .tick, .progress-button > .tick {
   top: 2px;
   margin-right: 2px; }

lib/partials/main.html

@@ -6,7 +6,7 @@
 
       <div class="space-vertical-large">
         <div ng-hide="app.selection.hasImage()">
-          <button class="btn btn-primary" ng-click="app.selectImage()">Select image</button>
+          <button class="btn btn-primary btn-brick" ng-click="app.selectImage()">Select image</button>
           <p class="step-footer">*supported files: .img, .iso, .zip</p>
         </div>
         <div ng-show="app.selection.hasImage()">
@@ -30,7 +30,7 @@
 
           <div ng-show="app.scanner.hasAvailableDrives() || !app.selection.hasImage()">
             <div class="btn-group" uib-dropdown>
-              <button class="btn btn-primary"
+              <button class="btn btn-primary btn-brick"
                 ng-disabled="!app.selection.hasImage()"
                 uib-dropdown-toggle>Select drive</button>
 
@@ -43,7 +43,7 @@
           </div>
 
           <div ng-hide="app.scanner.hasAvailableDrives() || !app.selection.hasImage()">
-            <button class="btn btn-danger">Connect a drive</button>
+            <button class="btn btn-danger btn-brick">Connect a drive</button>
           </div>
 
         </div>
@@ -58,7 +58,7 @@
       <span class="badge space-top-medium" ng-disabled="!app.selection.hasImage() || !app.selection.hasDrive()">3</span>
 
       <div class="space-vertical-large">
-        <progress-button percentage="app.writer.state.progress" ng-attr-active="{{ app.writer.isBurning() }}"
+        <progress-button class="btn-brick" percentage="app.writer.state.progress" ng-attr-active="{{ app.writer.isBurning() }}"
           ng-click="app.burn(app.selection.getImage(), app.selection.getDrive())"
           ng-disabled="!app.selection.hasImage() || !app.selection.hasDrive()">
             <span ng-show="app.writer.state.progress == 100 && app.writer.isBurning()">Finishing...</span>

lib/partials/success.html

@@ -11,7 +11,7 @@
           <div class="box">
             <p class="soft button-label">Would you like to burn the same image?</p>
 
-            <button class="btn btn-primary" ng-click="finish.restart({ preserveImage: true })">
+            <button class="btn btn-primary btn-brick" ng-click="finish.restart({ preserveImage: true })">
               Use <b>same</b> image
             </button>
           </div>
@@ -23,7 +23,7 @@
           <div class="box">
             <p class="soft button-label">Would you like to burn a new image?</p>
 
-            <button class="btn btn-primary" ng-click="finish.restart()">
+            <button class="btn btn-primary btn-brick" ng-click="finish.restart()">
               Use <b>new</b> image
             </button>
           </div>

lib/scss/components/_button.scss

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-button.btn {
+.btn {
   padding: 10px;
   padding-top: 11px;
 
@@ -37,10 +37,15 @@ button.btn {
   }
 }
 
-.btn:not(.btn-link) {
+.btn-brick {
   min-width: $btn-min-width;
 }
 
+.btn-sm {
+  font-size: 10px;
+  padding: 4px 12px;
+}
+
 .btn > .glyphicon {
   top: 2px;
   margin-right: 2px;

lib/scss/main.scss

@@ -26,6 +26,8 @@ $btn-disabled: rgb(49, 51, 57);
 $btn-min-width: 170px;
 $link-color: $gray-light;
 $link-hover-decoration: none;
+$btn-default-bg: rgb(243, 243, 243);
+$btn-default-color: #9a9a9a;
 
 @import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap";