/**
* Copyright © 2016-2018 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
***********************/
$swift-ease-out-duration: 0.4s !default;
$swift-ease-out-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
$input-label-float-offset: 6px !default;
$input-label-float-scale: 0.75 !default;
label {
&.tb-title {
pointer-events: none;
color: #666;
font-size: 13px;
font-weight: 400;
padding-bottom: 15px;
&.no-padding {
padding-bottom: 0px;
}
&.tb-required:after {
content: ' *';
font-size: 13px;
vertical-align: top;
color: rgba(0,0,0,0.54);
}
&.tb-error {
color: rgb(221,44,0);
&.tb-required:after {
color: rgb(221,44,0);
}
}
}
}
.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;
}
}
.tb-hint {
font-size: 12px;
line-height: 14px;
transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
color: grey;
padding-bottom: 15px;
&.ng-hide, &.ng-enter, &.ng-leave.ng-leave-active {
bottom: 26px;
opacity: 0;
}
&.ng-leave, &.ng-enter.ng-enter-active {
bottom: 7px;
opacity: 1;
}
}
.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;
}
md-toolbar.md-table-toolbar.md-default-theme:not(.md-menu-toolbar).md-default .md-button[disabled],
md-toolbar.md-table-toolbar:not(.md-menu-toolbar).md-default .md-button[disabled] {
color: rgba(0,0,0,0.38);
}
md-toolbar.md-default-theme:not(.md-menu-toolbar) .md-button[disabled] md-icon,
md-toolbar:not(.md-menu-toolbar) .md-button[disabled] md-icon {
color: rgba(0,0,0,.28);
}
span.no-data-found {
position: relative;
height: calc(100% - 57px);
text-transform: uppercase;
display: flex;
}
table.md-table {
&.md-row-select td.md-cell,
&.md-row-select th.md-column {
&:first-child {
width: 20px;
padding: 0 0 0 12px;
}
&:nth-child(2) {
padding: 0 12px;
}
&:nth-child(n+3):nth-last-child(n+2) {
padding: 0 28px 0 0;
}
}
&:not(.md-row-select) td.md-cell,
&:not(.md-row-select) th.md-column {
&:first-child {
padding: 0 12px;
}
&:nth-child(n+2):nth-last-child(n+2) {
padding: 0 28px 0 0;
}
}
td.md-cell,
th.md-column {
&:last-child {
padding: 0 12px 0 0;
}
}
}
table.md-table, table.md-table.md-row-select {
tbody {
&.md-body {
tr {
&.md-row:not([disabled]) {
outline: none;
&:hover {
background-color: rgba(221, 221, 221, 0.3) !important;
}
&.md-selected {
background-color: rgba(221, 221, 221, 0.5) !important;
}
&.tb-current, &.tb-current:hover{
background-color: rgba(221, 221, 221, 0.65) !important;
}
}
}
}
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;
overflow: hidden;
label {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
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: 0 0 20px 0;
font-size: 18px;
font-weight: 400;
white-space: normal;
line-height: 18px;
max-height: 18px;
min-height: 18px;
height: 18px;
margin: auto;
}
}
.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: 13;
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;
}