Refactor hero-button as a scss component

This commit is contained in:
Juan Cruz Viotti 2016-03-30 14:11:18 -04:00
parent 01ec52f4d7
commit 5d52b19c2b
8 changed files with 114 additions and 94 deletions

View File

@ -5915,21 +5915,57 @@ button.close {
font-size: 11px;
margin-bottom: 0; }
/*
* Copyright 2016 Resin.io
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
button.btn {
padding: 10px;
padding-top: 11px;
border-radius: 2px;
border: none;
letter-spacing: 0.5px;
outline: none;
position: relative; }
button.btn[disabled] {
background-color: #313339;
color: #787c7f;
pointer-events: none; }
button.btn[disabled]:hover {
background-color: #36383e; }
.btn:not(.btn-link) {
min-width: 170px; }
.btn > .glyphicon {
top: 2px;
margin-right: 2px; }
/*
* Remove blue/orange outline
* !important is needed here for some reason
* despite the rule having top precedence.
*/
button.btn:focus {
outline: none !important; }
html {
background-color: #535760; }
hero-icon[disabled] .caption {
color: #787c7f; }
hero-button .btn {
min-width: 170px; }
hero-button .btn[disabled] {
background-color: #313339;
color: #787c7f;
pointer-events: none; }
hero-button .btn[disabled]:hover {
background-color: #36383e; }
hero-progress-button .bar {
background: #6ca1e0; }

View File

@ -1,58 +0,0 @@
<link rel="import" href="../../bower_components/polymer/polymer.html">
<dom-module id="hero-button">
<template>
<style>
:host ::content button.btn {
padding: 10px;
padding-top: 11px;
border-radius: 2px;
border: none;
letter-spacing: 0.5px;
outline: none;
position: relative;
}
:host ::content .glyphicon {
top: 2px;
margin-right: 2px;
}
/*
* Remove blue/orange outline
* !important is needed here for some reason
* despite the rule having top precedence.
*/
:host ::content button.btn:focus {
outline: none !important;
}
</style>
<button type="button" class="btn" disabled="{{disabled}}">
<content></content>
</button>
</template>
<script>
Polymer({
is: 'hero-button',
properties: {
disabled: {
type: String
},
type: {
type: String,
value: 'primary'
}
},
ready: function() {
'use strict';
this.querySelector('.btn').className += ` btn-${this.type}`;
}
});
</script>
</dom-module>

View File

@ -1,5 +1,4 @@
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="hero-button.html">
<!-- From http://tympanus.net/Development/ProgressButtonStyles/ -->
<dom-module id="hero-progress-button">
@ -27,12 +26,12 @@
}
</style>
<hero-button disabled="{{disabled}}">
<button class="btn btn-primary" disabled="{{disabled}}">
<span class="text">
<content></content>
</span>
<span class="bar"></span>
</hero-button>
</button>
</template>
<script>

View File

@ -8,7 +8,6 @@
<link rel="stylesheet" type="text/css" href="css/angular.css">
<link rel="import" href="components/hero-icon.html">
<link rel="import" href="components/hero-button.html">
<link rel="import" href="components/hero-progress-button.html">
<link rel="import" href="components/hero-tick.html">

View File

@ -6,7 +6,7 @@
<div class="space-vertical-large">
<div ng-hide="app.selection.hasImage()">
<hero-button ng-click="app.selectImage()">Select image</hero-button>
<button class="btn btn-primary" ng-click="app.selectImage()">Select image</button>
<p class="step-footer tiny">*supported files: .img, .iso, .zip</p>
</div>
<div ng-show="app.selection.hasImage()">
@ -30,8 +30,9 @@
<div ng-show="app.scanner.hasAvailableDrives() || !app.selection.hasImage()">
<div class="btn-group" uib-dropdown>
<hero-button ng-disabled="!app.selection.hasImage()"
uib-dropdown-toggle>Select drive</hero-button>
<button class="btn btn-primary"
ng-disabled="!app.selection.hasImage()"
uib-dropdown-toggle>Select drive</button>
<ul class="dropdown-menu">
<li ng-repeat="drive in app.scanner.drives">
@ -42,7 +43,7 @@
</div>
<div ng-hide="app.scanner.hasAvailableDrives() || !app.selection.hasImage()">
<hero-button type="danger">Connect a drive</hero-button>
<button class="btn btn-danger">Connect a drive</button>
</div>
</div>

View File

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

View File

@ -0,0 +1,56 @@
/*
* Copyright 2016 Resin.io
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
button.btn {
padding: 10px;
padding-top: 11px;
border-radius: 2px;
border: none;
letter-spacing: 0.5px;
outline: none;
position: relative;
&[disabled] {
background-color: $btn-disabled;
color: $color-disabled;
pointer-events: none;
&:hover {
background-color: lighten($btn-disabled, 2);
}
}
}
.btn:not(.btn-link) {
min-width: $btn-min-width;
}
.btn > .glyphicon {
top: 2px;
margin-right: 2px;
}
/*
* Remove blue/orange outline
* !important is needed here for some reason
* despite the rule having top precedence.
*/
button.btn:focus {
outline: none !important;
}

View File

@ -23,7 +23,6 @@ $font-size-base: 13px;
$cursor-disabled: initial;
$color-disabled: rgb(120, 124, 127);
$btn-disabled: rgb(49, 51, 57);
$btn-padding: 10px;
$btn-min-width: 170px;
$link-color: $gray-light;
$link-hover-decoration: none;
@ -33,6 +32,7 @@ $link-hover-decoration: none;
@import "./modules/space";
@import "./components/badge";
@import "./components/caption";
@import "./components/button";
// Prevent white flash when running application
html {
@ -43,20 +43,6 @@ hero-icon[disabled] .caption {
color: $color-disabled;
}
hero-button .btn {
min-width: $btn-min-width;
&[disabled] {
background-color: $btn-disabled;
color: $color-disabled;
pointer-events: none;
&:hover {
background-color: lighten($btn-disabled, 2);
}
}
}
hero-progress-button .bar {
background: lighten($brand-primary, 5);
}