/**
* 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 "mixins";
@import "fonts";
/***************
* TYPE DEFAULTS
***************/
button,
html,
input,
select,
textarea {
font-family: Roboto, "Helvetica Neue", sans-serif;
}
.mdi-set {
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
-webkit-font-feature-settings: "liga"; /* stylelint-disable-line property-no-vendor-prefix */
}
a {
font-weight: 400;
color: #106cc8;
text-decoration: none;
border-bottom: 1px solid rgba(64, 84, 178, .25);
transition: border-bottom .35s;
}
a:hover,
a:focus {
border-bottom: 1px solid #4054b2;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin-top: 1rem;
margin-bottom: 1rem;
}
h1 {
font-size: 3.4rem;
font-weight: 400;
line-height: 4rem;
}
h2 {
font-size: 2.4rem;
font-weight: 400;
line-height: 3.2rem;
}
h3 {
font-size: 2rem;
font-weight: 500;
letter-spacing: .005em;
}
h4 {
font-size: 1.6rem;
font-weight: 400;
line-height: 2.4rem;
letter-spacing: .01em;
}
p {
margin: .8em 0 1.6em;
font-size: 1.6rem;
font-weight: 400;
line-height: 1.6em;
letter-spacing: .01em;
}
strong {
font-weight: 500;
}
blockquote {
padding-left: 16px;
margin-left: 0;
font-style: italic;
border-left: 3px solid rgba(0, 0, 0, .12);
}
fieldset {
padding: 0;
margin: 0;
border: none;
}
/*********************************
* 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, .2);
}
md-toolbar:not(.md-hue-1),
.md-fab {
fill: #fff;
}
md-toolbar md-input-container .md-errors-spacer {
min-height: 0;
}
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-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: 0;
}
}
/***********************
* THINGSBOARD SPECIFIC
***********************/
$swift-ease-out-duration: .4s !default;
$swift-ease-out-timing-function: cubic-bezier(.25, .8, .25, 1) !default;
$input-label-float-offset: 6px !default;
$input-label-float-scale: .75 !default;
label {
&.tb-title {
padding-bottom: 15px;
font-size: 13px;
font-weight: 400;
color: #666;
pointer-events: none;
&.no-padding {
padding-bottom: 0;
}
&.tb-required::after {
font-size: 13px;
color: rgba(0, 0, 0, .54);
vertical-align: top;
content: " *";
}
&.tb-error {
color: rgb(221, 44, 0);
&.tb-required::after {
color: rgb(221, 44, 0);
}
}
}
}
.tb-noselect {
user-select: none;
}
.tb-readonly-label {
color: rgba(0, 0, 0, .54);
}
.tb-disabled-label {
color: rgba(0, 0, 0, .44);
}
/* stylelint-disable-next-line no-duplicate-selectors */
label {
&.tb-small {
font-size: 12px;
color: rgba(0, 0, 0, .54);
pointer-events: none;
}
}
div {
&.tb-small {
font-size: 14px;
color: rgba(0, 0, 0, .54);
}
}
.tb-hint {
padding-bottom: 15px;
font-size: 12px;
line-height: 14px;
color: #808080;
transition: all .3s cubic-bezier(.55, 0, .55, .2);
&.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 {
font-size: 10px;
color: rgba(0, 0, 0, .54);
vertical-align: top;
content: " *";
}
}
pre.tb-highlight {
display: block;
padding: 15px;
margin: 20px 0;
overflow-x: auto;
background-color: #f7f7f7;
code {
box-sizing: border-box;
display: inline-block;
padding: 0;
font-family: monospace;
font-size: 16px;
font-weight: 700;
color: #303030;
vertical-align: bottom;
}
}
.tb-notice {
padding: 15px;
font-size: 16px;
background-color: #f7f7f7;
border: 1px solid #ccc;
}
.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, .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;
display: flex;
height: calc(100% - 57px);
text-transform: uppercase;
}
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, .3) !important;
}
&.md-selected {
background-color: rgba(221, 221, 221, .5) !important;
}
&.tb-current,
&.tb-current:hover{
background-color: rgba(221, 221, 221, .65) !important;
}
}
}
}
tr {
td {
&.tb-action-cell {
width: 72px;
min-width: 72px;
max-width: 72px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
.md-button {
&.md-icon-button {
width: 36px;
height: 36px;
padding: 6px;
margin: 0;
}
}
.tb-spacer {
padding-left: 38px;
}
}
}
}
}
}
}
.tb-severity {
font-weight: 700;
&.tb-critical {
color: #f00 !important;
}
&.tb-major {
color: #ffa500 !important;
}
&.tb-minor {
color: #ffca3d !important;
}
&.tb-warning {
color: #abab00 !important;
}
&.tb-indeterminate {
color: #008000 !important;
}
}
.tb-card-description {
font-size: 13px;
color: rgba(0, 0, 0, .54);
@include line-clamp(2, 1.1);
}
/***********************
* Flow
***********************/
$previewSize: 100px !default;
.file-input {
display: none;
}
.tb-flow-drop {
position: relative;
height: $previewSize;
overflow: hidden;
border: dashed 2px;
label {
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
height: 100%;
font-size: 16px;
text-align: center;
@media (min-width: $layout-breakpoint-sm) {
font-size: 24px;
}
}
}
.tb-container {
position: relative;
padding: 10px 0;
margin-top: 32px;
}
/***********************
* Prompt
***********************/
.tb-prompt {
display: flex;
font-size: 18px;
font-weight: 400;
line-height: 18px;
color: rgba(0, 0, 0, .38);
text-transform: uppercase;
}
/***********************
* Errors
***********************/
.tb-error-messages {
height: 24px; //30px
}
.tb-error-message {
padding: 10px 0 0 10px;
margin-top: -6px;
overflow: hidden;
font-size: 12px;
line-height: 14px;
color: rgb(221, 44, 0);
}
.tb-error-message.ng-animate {
transition: all .3s cubic-bezier(.55, 0, .55, .2);
}
.tb-error-message.ng-enter-prepare,
.tb-error-message.ng-enter {
margin-top: -24px;
opacity: 0;
}
.tb-error-message.ng-enter.ng-enter-active {
margin-top: -6px;
opacity: 1;
}
.tb-error-message.ng-leave {
margin-top: -6px;
opacity: 1;
}
.tb-error-message.ng-leave.ng-leave-active {
margin-top: -24px;
opacity: 0;
}
/***********************
* Tabs
***********************/
md-tabs.tb-headless {
margin-top: -50px;
}
/***********************
* Buttons
***********************/
.md-button.tb-card-button {
width: 100%;
max-width: 240px;
height: 100%;
span {
height: 18px;
min-height: 18px;
max-height: 18px;
padding: 0 0 20px 0;
margin: auto;
font-size: 18px;
font-weight: 400;
line-height: 18px;
white-space: normal;
}
}
.md-button.tb-layout-button {
width: 100%;
max-width: 240px;
height: 100%;
span {
padding: 40px;
font-size: 18px;
font-weight: 400;
line-height: 18px;
white-space: normal;
}
}
.md-button.tb-add-new-widget {
padding-right: 12px;
font-size: 24px;
border-style: dashed;
border-width: 2px;
}
/***********************
* Header buttons
***********************/
section.tb-header-buttons {
position: absolute;
top: 86px;
right: 0;
z-index: 3;
pointer-events: none;
@media (min-width: $layout-breakpoint-sm) {
top: 86px;
}
}
section.tb-top-header-buttons {
top: 23px;
}
.tb-header-buttons .tb-btn-header {
position: relative !important;
display: inline-block !important;
animation: tbMoveFromTopFade .3s ease both;
}
.tb-header-buttons .tb-btn-header.ng-hide {
animation: tbMoveToTopFade .3s ease both;
}
/***********************
* Footer buttons
***********************/
section.tb-footer-buttons {
position: fixed;
right: 20px;
bottom: 20px;
z-index: 30;
pointer-events: none;
}
.tb-footer-buttons .tb-btn-footer {
position: relative !important;
display: inline-block !important;
animation: tbMoveFromBottomFade .3s ease both;
}
.tb-footer-buttons .tb-btn-footer.ng-hide {
animation: tbMoveToBottomFade .3s ease both;
}
._md-toast-open-bottom .tb-footer-buttons {
transition: all .4s cubic-bezier(.25, .8, .25, 1);
transform: translate3d(0, -42px, 0);
}
/***********************
* Icons
***********************/
.md-icon-button.tb-md-32 {
width: 32px;
min-width: 32px;
height: 32px;
min-height: 32px;
padding: 0 !important;
margin: 0 !important;
vertical-align: middle;
}
.material-icons.tb-md-20 {
width: 20px;
min-width: 20px;
height: 20px;
min-height: 20px;
font-size: 20px;
}
.material-icons.tb-md-96 {
width: 96px;
height: 96px;
font-size: 96px;
}
/***********************
* Layout
***********************/
.tb-absolute-fill {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.tb-progress-cover {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 6;
opacity: 1;
}
/***********************
* ACE
***********************/
.ace_editor {
font-size: 16px !important;
}