etcher/lib/scss/main.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);
$badge-disabled: rgb(92, 94, 92);
$btn-padding: 10px;
$btn-min-width: 170px;
$link-color: $gray-light;
$link-hover-decoration: none;

@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap";

@import "./modules/space";

// 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;
}

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);
}

hero-progress-button[percentage="100"][active="false"] .bar {
  background-color: $brand-success;
}

hero-progress-button[percentage="100"][active="true"] .bar {
  background-color: $brand-warning;
}

hero-icon[disabled]  path {
  fill: $color-disabled;
}

.block {
  display: block;
}

.dropdown-menu {
  width: 170px;
}

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: 97px;

  &[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: 12px;
}

.tiny {
  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;
}

// Fix slighly checkbox vertical alignment issue
.checkbox input[type="checkbox"] {
  position: initial;
  margin-right: 2px;
}

.checkbox input[type="checkbox"]:not(:checked) + * {
  color: $gray-light;
}

.wrapper {
  height: 100%;
  margin: 20px 60px;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
}

.section-header {
  @extend .text-right;
  padding: 5px 8px;
  font-size: 15px;

  & > .btn {
    padding-left: 3px;
    padding-right: 3px;
  }
}