thingsboard/ui/src/scss/main.scss

/**
 * Copyright © 2016-2017 The Thingsboard Authors
 *
 * 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.
 */
@import "~compass-sass-mixins/lib/compass";
@import "constants";
@import "animations";
@import "fonts";

/***************
 * TYPE DEFAULTS
 ***************/

button, html, input, select, textarea {
  font-family: Roboto, 'Helvetica Neue', sans-serif;
}

.mdi-set {
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
}

a {
  color: #106CC8;
  text-decoration: none;
  font-weight: 400;
  border-bottom: 1px solid rgba(64, 84, 178, 0.25);
  @include transition(border-bottom 0.35s);
}

a:hover, a:focus {
  border-bottom: 1px solid #4054B2;
}

h1, h2, h3, h4, h5, h6 {
  margin-bottom: 1rem;
  margin-top: 1rem;
}

h1 {
  font-size: 3.400rem;
  font-weight: 400;
  line-height: 4rem;
}

h2 {
  font-size: 2.400rem;
  font-weight: 400;
  line-height: 3.2rem;
}

h3 {
  font-size: 2.000rem;
  font-weight: 500;
  letter-spacing: 0.005em;
}

h4 {
  font-size: 1.600rem;
  font-weight: 400;
  letter-spacing: 0.010em;
  line-height: 2.4rem;
}

p {
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: 0.010em;
  line-height: 1.6em;
  margin: 0.8em 0 1.6em;
}

strong {
  font-weight: 500;
}

blockquote {
  border-left: 3px solid rgba(0, 0, 0, 0.12);
  font-style: italic;
  margin-left: 0;
  padding-left: 16px;
}

fieldset {
  border: none;
  padding: 0;
  margin: 0;
}

/*********************************
 * MATERIAL DESIGN CUSTOMIZATIONS
 ********************************/

a.md-button {
  border-bottom: none;
}

form {
  md-content {
    background-color: #fff;
  }
}

md-bottom-sheet .md-subheader {
  font-family: Roboto, 'Helvetica Neue', sans-serif;
}

.md-chips {
  font-family: Roboto, 'Helvetica Neue', sans-serif;
}

md-content.md-default-theme, md-content {
  background-color: $gray;
}

md-card {
  background-color: #fff;
  h2:first-of-type {
    margin-top: 0;
  }
}

.md-button:not([disabled]).md-icon-button:hover {
  background-color: rgba(158, 158, 158, 0.2);
}

md-toolbar:not(.md-hue-1),
.md-fab {
  fill: #fff;
}

md-toolbar md-input-container .md-errors-spacer {
  min-height: 0px;
}

md-toolbar {
  md-select.md-default-theme:not([disabled]):focus .md-select-value, md-select:not([disabled]):focus .md-select-value {
    color: #fff;
  }
}

md-menu-item {
  overflow: hidden;
  fill: #737373;
}

md-menu-item {
  .md-button {
    display: block;
    .tb-alt-text {
      float: right;
    }
  }
}

div.md-toast-text {
  width: 100%;
  max-width: 500px;
  max-height: inherit;
  word-wrap: break-word;
}

md-toast .md-button {
  min-width: 88px;
}

md-sidenav {
  overflow: hidden;
  fill: #737373;
}

.md-panel-outer-wrapper {
  overflow-y: auto;
}

.md-radio-interactive input, button {
  pointer-events: all;
}

.md-color-picker-input-container {
  md-input-container {
    margin-bottom: 0px;
  }
}

/***********************
 * THINGSBOARD SPECIFIC
 ***********************/

.tb-noselect {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

.tb-readonly-label {
  color: rgba(0,0,0,0.54);
}

.tb-disabled-label {
  color: rgba(0,0,0,0.44);
}

label {
  &.tb-small {
    pointer-events: none;
    color: rgba(0,0,0,0.54);
    font-size: 12px;
  }
}

div {
  &.tb-small {
    color: rgba(0,0,0,0.54);
    font-size: 14px;
  }
}

.md-caption {
  &.tb-required:after {
    content: ' *';
    font-size: 10px;
    vertical-align: top;
    color: rgba(0,0,0,0.54);
  }
}

pre.tb-highlight {
  background-color: #f7f7f7;
  display: block;
  margin: 20px 0;
  padding: 15px;
  overflow-x: auto;
  code {
    padding: 0;
    color: #303030;
    font-family: monospace;
    display: inline-block;
    box-sizing: border-box;
    vertical-align: bottom;
    font-size: 16px;
    font-weight: bold;
  }
}

.tb-notice {
  background-color: #f7f7f7;
  padding: 15px;
  border: 1px solid #ccc;
  font-size: 16px;
}

.tb-data-table {
  md-toolbar {
    z-index: 0;
  }
  span.no-data-found {
    position: relative;
    height: calc(100% - 57px);
    text-transform: uppercase;
    display: flex;
  }
  table.md-table {
    tbody {
      tr {
        td {
          &.tb-action-cell {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            min-width: 72px;
            max-width: 72px;
            width: 72px;
            .md-button {
              &.md-icon-button {
                margin: 0;
                padding: 6px;
                width: 36px;
                height: 36px;
              }
            }
            .tb-spacer {
              padding-left: 38px;
            }
          }
        }
      }
    }
  }
}

.tb-severity {
  font-weight: bold;
  &.tb-critical {
    color: red !important;
  }
  &.tb-major {
    color: orange !important;
  }
  &.tb-minor {
    color: #ffca3d !important;
  }
  &.tb-warning {
    color: #abab00 !important;
  }
  &.tb-indeterminate {
    color: green !important;
  }
}

/***********************
 * Flow
 ***********************/
$previewSize: 100px;

.file-input {
  display: none;
}

.tb-flow-drop {
  position: relative;
  border: dashed 2px;
  height: $previewSize;
  display: flex;
  align-items: center;
  overflow: hidden;
  label {
    width: 100%;
    font-size: 16px;
    text-align: center;
    @media (min-width: $layout-breakpoint-sm) {
      font-size: 24px;
    }
  }
}

.tb-container {
  position: relative;
  margin-top: 32px;
  padding: 10px 0;
}

/***********************
 * Prompt
 ***********************/

.tb-prompt {
  color: rgba(0,0,0,0.38);
  text-transform: uppercase;
  display: flex;
  font-size: 18px;
  font-weight: 400;
  line-height: 18px;
}

/***********************
 * Errors
 ***********************/

.tb-error-messages {
  height: 24px; //30px
}

.tb-error-message {
  font-size: 12px;
  line-height: 14px;
  overflow: hidden;
  padding: 10px 0px 0px 10px;
  color: rgb(221,44,0);
  margin-top: -6px;
}

.tb-error-message.ng-animate {
  @include transition(all .3s cubic-bezier(.55,0,.55,.2));
}

.tb-error-message.ng-enter-prepare, .tb-error-message.ng-enter {
  opacity:0;
  margin-top: -24px;
}

.tb-error-message.ng-enter.ng-enter-active {
  opacity:1;
  margin-top: -6px;
}

.tb-error-message.ng-leave {
  opacity:1;
  margin-top: -6px;
}
.tb-error-message.ng-leave.ng-leave-active {
  opacity:0;
  margin-top: -24px;
}

/***********************
 * Tabs
 ***********************/

md-tabs.tb-headless {
  margin-top: -50px;
}

/***********************
 * Buttons
 ***********************/

.md-button.tb-card-button {
  width: 100%;
  height: 100%;
  max-width: 240px;
  span {
    padding: 10px 10px 20px 10px;
    font-size: 18px;
    font-weight: 400;
    white-space: normal;
    line-height: 18px;
  }
}

.md-button.tb-layout-button {
  width: 100%;
  height: 100%;
  max-width: 240px;
  span {
    padding: 40px;
    font-size: 18px;
    font-weight: 400;
    white-space: normal;
    line-height: 18px;
  }
}

.md-button.tb-add-new-widget {
  border-style: dashed;
  border-width: 2px;
  font-size: 24px;
  padding-right: 12px;
}

/***********************
 * Header buttons
 ***********************/

section.tb-header-buttons {
  pointer-events: none;
  position: absolute;
  right: 0px;
  top: 86px;
  z-index: 3;
  @media (min-width: $layout-breakpoint-sm) {
    top: 86px;
  }
}

section.tb-top-header-buttons {
  top: 23px;
}

.tb-header-buttons .tb-btn-header {
  @include animation(tbMoveFromTopFade .3s ease both);
  position: relative !important;
  display: inline-block !important;
}

.tb-header-buttons .tb-btn-header.ng-hide {
  @include animation(tbMoveToTopFade .3s ease both);
}

/***********************
 * Footer buttons
 ***********************/

section.tb-footer-buttons {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 2;
  pointer-events: none;
}

.tb-footer-buttons .tb-btn-footer {
  @include animation(tbMoveFromBottomFade .3s ease both);
  position: relative !important;
  display: inline-block !important;
}

.tb-footer-buttons .tb-btn-footer.ng-hide {
  @include animation(tbMoveToBottomFade .3s ease both);
}

._md-toast-open-bottom .tb-footer-buttons {
  @include transition(all .4s cubic-bezier(.25, .8, .25, 1));
  @include transform(translate3d(0, -42px, 0));
}

/***********************
 * Icons
 ***********************/

.md-icon-button.tb-md-32 {
  vertical-align: middle;
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  margin: 0px !important;
  padding: 0px !important;
}

.material-icons.tb-md-20 {
  font-size: 20px;
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
}

.material-icons.tb-md-96 {
  font-size: 96px;
  width: 96px;
  height: 96px;
}

/***********************
 * Layout
 ***********************/

.tb-absolute-fill {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.tb-progress-cover {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
  opacity: 1;
}

/***********************
 * ACE
 ***********************/

.ace_editor {
  font-size: 16px !important;
}