mirror of
https://github.com/balena-io/etcher.git
synced 2025-04-21 13:57:17 +00:00
3392a5eca1
* Extend ProgressButton to support a striped progress bar This feature will be used to implement the burn validation step. * Implement alert-ribbon CSS component This component will be used to inform an error situation to the user during the burn/check processes. * Add "Enable write validation on success" setting * Implement write validation support Signed-off-by: Juan Cruz Viotti <jviottidc@gmail.com> Fixes: https://github.com/resin-io/etcher/issues/45
156 lines
3.0 KiB
SCSS
156 lines
3.0 KiB
SCSS
/*
|
|
* 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.
|
|
*/
|
|
|
|
$icon-font-path: "../../node_modules/bootstrap-sass/assets/fonts/bootstrap/";
|
|
$body-bg: rgb(83, 87, 96);
|
|
$text-color: white;
|
|
$brand-primary: rgb(87, 147, 219);
|
|
$gray-light: #ddd;
|
|
$font-size-base: 13px;
|
|
$cursor-disabled: initial;
|
|
$color-disabled: rgb(120, 124, 127);
|
|
$btn-disabled: rgb(49, 51, 57);
|
|
$btn-min-width: 170px;
|
|
$link-color: $gray-light;
|
|
$link-hover-decoration: none;
|
|
$btn-default-bg: #ececec;
|
|
$btn-default-color: #b3b3b3;
|
|
$brand-warning: rgb(233, 152, 82);
|
|
$alert-warning-bg: $brand-warning;
|
|
$alert-warning-text: #fff;
|
|
$alert-padding: 13px;
|
|
|
|
@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
|
|
|
|
@import "./modules/bootstrap";
|
|
@import "./modules/space";
|
|
@import "./components/badge";
|
|
@import "./components/caption";
|
|
@import "./components/button";
|
|
@import "./components/tick";
|
|
@import "../browser/components/progress-button/styles/progress-button";
|
|
@import "./components/modal";
|
|
@import "./components/alert-ribbon";
|
|
|
|
hero-icon[disabled] .caption {
|
|
color: $color-disabled;
|
|
}
|
|
|
|
hero-icon[disabled] path {
|
|
fill: $color-disabled;
|
|
}
|
|
|
|
.block {
|
|
display: block;
|
|
}
|
|
|
|
body {
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.content {
|
|
height: 100%;
|
|
}
|
|
|
|
.relative {
|
|
position: relative;
|
|
}
|
|
|
|
.soft {
|
|
color: $gray-light;
|
|
}
|
|
|
|
.section-footer {
|
|
position: fixed;
|
|
bottom: 20px;
|
|
left: 0;
|
|
right: 0;
|
|
color: $color-disabled;
|
|
margin: 0 60px;
|
|
padding-top: 15px;
|
|
border-top: 2px solid darken($color-disabled, 8%);
|
|
|
|
// Override default column padding
|
|
// set by flexboxgrid.
|
|
.col-xs {
|
|
padding: 0;
|
|
}
|
|
|
|
// Align icon to the left
|
|
hero-icon .icon {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
.step-border {
|
|
height: 2px;
|
|
background-color: $text-color;
|
|
position: absolute;
|
|
width: 230px;
|
|
top: 95px;
|
|
|
|
&[disabled] {
|
|
background-color: $color-disabled;
|
|
}
|
|
}
|
|
|
|
.step-border-left {
|
|
@extend .step-border;
|
|
left: -120px;
|
|
}
|
|
|
|
.step-border-right {
|
|
@extend .step-border;
|
|
right: -120px;
|
|
}
|
|
|
|
.step-footer {
|
|
margin-top: 10px;
|
|
margin-bottom: -40px;
|
|
color: lighten($color-disabled, 5%);
|
|
font-size: 10px;
|
|
}
|
|
|
|
.separator-xs {
|
|
flex-grow: 0;
|
|
background-color: darken($color-disabled, 8%);
|
|
padding: 0px;
|
|
min-width: 2px;
|
|
}
|
|
|
|
.button-label {
|
|
margin: 0 auto $spacing-medium;
|
|
|
|
// Keep some spacing at the sides
|
|
max-width: $btn-min-width - 5px;
|
|
}
|
|
|
|
.wrapper {
|
|
height: 100%;
|
|
margin: 20px 60px;
|
|
}
|
|
|
|
.section-header {
|
|
@extend .text-right;
|
|
padding: 5px 8px;
|
|
font-size: 15px;
|
|
|
|
& > .btn {
|
|
padding-left: 3px;
|
|
padding-right: 3px;
|
|
}
|
|
}
|