mirror of
https://github.com/balena-io/etcher.git
synced 2025-07-24 11:46:31 +00:00
Refactor hero-button as a scss component
This commit is contained in:
Juan Cruz Viotti
parent
01ec52f4d7
commit
5d52b19c2b
@ -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; }
|
||||
|
||||
|
||||
@ -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>
|
||||
@ -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>
|
||||
|
||||
@ -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">
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
56
lib/scss/components/_button.scss
Normal file
56
lib/scss/components/_button.scss
Normal 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;
|
||||
}
|
||||
@ -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);
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user