jeans/etcher
jeans/etcher
1
0
Fork 0
mirror of https://github.com/balena-io/etcher.git synced 2025-04-24 23:37:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor badge as a scss component

Browse Source
This commit is contained in:
Juan Cruz Viotti 2016-03-30 13:47:36 -04:00
parent a252b3a7e7
commit d47eaa8a2a
7 changed files with 68 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
build/css/main.css
View File

@ -5854,6 +5854,9 @@ button.close {
margin-top: 15px;
margin-bottom: 15px; }
.space-top-medium {
margin-top: 15px; }
.space-vertical-large {
margin-top: 30px;
margin-bottom: 30px; }
@ -5864,16 +5867,37 @@ button.close {
.space-right-tiny {
margin-right: 5px; }
html {
/*
* 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.
*/
.badge {
border: 2px solid;
border-radius: 50%;
padding: 7px 10px;
position: relative;
z-index: 10;
letter-spacing: 0;
background-color: #535760; }
hero-badge .badge {
background-color: #535760; }
hero-badge[disabled] .badge {
.badge[disabled] {
background-color: #5c5e5c;
color: #787c7f; }
html {
background-color: #535760; }
hero-icon[disabled] hero-caption {
color: #787c7f; }

24
lib/components/hero-badge.html
View File

@ -1,24 +0,0 @@
<link rel="import" href="../../bower_components/polymer/polymer.html">
<dom-module id="hero-badge">
<template>
<style is="custom-style">
:host ::content .badge {
border: 2px solid;
border-radius: 50%;
padding: 7px 10px;
position: relative;
z-index: 10;
letter-spacing: 0;
}
</style>
<span class="badge">
<content></content>
</span>
</template>
<script>
Polymer({ is: 'hero-badge' });
</script>
</dom-module>

1
lib/index.html
View File

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

7
lib/partials/main.html
View File

@ -2,7 +2,7 @@
<div class="col-xs">
<div class="box text-center">
<hero-icon path="images/image.svg" label="SELECT IMAGE"></hero-icon>
<hero-badge class="block space-vertical-medium">1</hero-badge>
<span class="badge space-top-medium">1</span>
<div class="space-vertical-large">
<div ng-hide="app.selection.hasImage()">
@ -22,7 +22,8 @@
<div class="step-border-right" ng-disabled="!app.selection.hasImage() || !app.selection.hasDrive()"></div>
<hero-icon path="images/drive.svg" ng-disabled="!app.selection.hasImage()" label="SELECT DRIVE"></hero-icon>
<hero-badge class="block space-vertical-medium" ng-disabled="!app.selection.hasImage()">2</hero-badge>
<span class="badge space-top-medium" ng-disabled="!app.selection.hasImage()">2</span>
<div class="space-vertical-large">
<div ng-hide="app.selection.hasDrive()">
@ -53,7 +54,7 @@
<div class="col-xs">
<div class="box text-center">
<hero-icon path="images/burn.svg" ng-disabled="!app.selection.hasImage() || !app.selection.hasDrive()" label="BURN IMAGE"></hero-icon>
<hero-badge class="block space-vertical-medium" ng-disabled="!app.selection.hasImage() || !app.selection.hasDrive()">3</hero-badge>
<span class="badge space-top-medium" ng-disabled="!app.selection.hasImage() || !app.selection.hasDrive()">3</span>
<div class="space-vertical-large">
<hero-progress-button percentage="{{ app.writer.state.progress }}" ng-attr-active="{{ app.writer.isBurning() }}"

30
lib/scss/components/_badge.scss Normal file
View File

@ -0,0 +1,30 @@
/*
* 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.
*/
.badge {
border: 2px solid;
border-radius: 50%;
padding: 7px 10px;
position: relative;
z-index: 10;
letter-spacing: 0;
background-color: $body-bg;
}
.badge[disabled] {
background-color: #5c5e5c;
color: $color-disabled;
}

11
lib/scss/main.scss
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);
$badge-disabled: rgb(92, 94, 92);
$btn-padding: 10px;
$btn-min-width: 170px;
$link-color: $gray-light;
@ -32,21 +31,13 @@ $link-hover-decoration: none;
@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
@import "./modules/space";
@import "./components/badge";
// Prevent white flash when running application
html {
background-color: $body-bg;
}
hero-badge .badge {
background-color: $body-bg;
}
hero-badge[disabled] .badge {
background-color: $badge-disabled;
color: $color-disabled;
}
hero-icon[disabled] hero-caption {
color: $color-disabled;
}

4
lib/scss/modules/_space.scss
View File

@ -27,6 +27,10 @@ $spacing-tiny: 5px;
margin-bottom: $spacing-medium;
}
.space-top-medium {
margin-top: $spacing-medium;
}
.space-vertical-large {
margin-top: $spacing-large;
margin-bottom: $spacing-large;