Andrew Shvayka
4 years ago
committed by
GitHub
GitHub
10 changed files with 704 additions and 53 deletions
@ -0,0 +1,185 @@ |
|||
/** |
|||
* Copyright © 2016-2022 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. |
|||
*/ |
|||
|
|||
@use '~@angular/material' as mat; |
|||
@import '../theme.scss'; |
|||
|
|||
$tb-warn: mat.get-color-from-palette(map-get($tb-theme, warn), text); |
|||
|
|||
:host { |
|||
.tb-layout-fixed-container { |
|||
width: 100%; |
|||
min-width: 368px; |
|||
padding: 8px 8px 8px 0; |
|||
min-height: 48px; |
|||
} |
|||
|
|||
.tb-hint-group { |
|||
padding: 0; |
|||
margin-top: -14px; |
|||
display: block; |
|||
} |
|||
|
|||
.tb-layout-preview { |
|||
width: 120%; |
|||
background-color: rgba(mat.get-color-from-palette($tb-primary, 50), 0.6); |
|||
padding: 35px; |
|||
|
|||
&-container { |
|||
width: 75%; |
|||
|
|||
button.tb-fixed-layout-button { |
|||
background-color: transparent; |
|||
color: #000000; |
|||
cursor: pointer; |
|||
|
|||
.mat-icon { |
|||
color: rgba(0, 0, 0, 0.38); |
|||
} |
|||
|
|||
&:hover { |
|||
background-color: rgba(211, 211, 211, 0.6); |
|||
} |
|||
} |
|||
|
|||
div { |
|||
transition-duration: 0.5s; |
|||
transition-property: max-width; |
|||
position: relative; |
|||
|
|||
.mat-icon-button { |
|||
align-self: end; |
|||
} |
|||
} |
|||
|
|||
.tb-layout-preview-element { |
|||
position: absolute; |
|||
z-index: 99; |
|||
|
|||
.mat-icon { |
|||
font-size: 20px; |
|||
width: 20px; |
|||
height: 20px; |
|||
line-height: 20px; |
|||
color: rgba(255, 255, 255, 0.76); |
|||
|
|||
&:hover { |
|||
transform: rotate(180deg); |
|||
transition: transform 0.5s; |
|||
} |
|||
} |
|||
} |
|||
|
|||
&-main { |
|||
min-width: 25%; |
|||
} |
|||
|
|||
/* remove arrows from input for Chrome, Safari, Edge, Opera */ |
|||
input::-webkit-outer-spin-button, |
|||
input::-webkit-inner-spin-button { |
|||
-webkit-appearance: none; |
|||
margin: 0; |
|||
} |
|||
|
|||
/* remove arrows from input for Firefox */ |
|||
input[type=number] { |
|||
-moz-appearance: textfield; |
|||
} |
|||
|
|||
.tb-layout-preview-input { |
|||
margin: 80px 0 0; |
|||
|
|||
input { |
|||
border: 1px solid #778899; |
|||
background-color: transparent; |
|||
color: #ffffff; |
|||
border-radius: 4px; |
|||
text-align: center; |
|||
outline: none; |
|||
width: 37px; |
|||
height: 28px; |
|||
font-size: 14px; |
|||
|
|||
&:invalid { |
|||
outline: 2px solid $tb-warn; |
|||
border: 1px solid transparent; |
|||
background-color: rgba($tb-warn, 0.2); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
:host ::ng-deep { |
|||
.mat-slider-wrapper { |
|||
.mat-slider-thumb-container { |
|||
.mat-slider-thumb-label { |
|||
width: 35px; |
|||
height: 35px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.mat-button-toggle-group { |
|||
width: 100%; |
|||
min-width: 354px; |
|||
border: 2px solid rgba(0, 0, 0, 0.06); |
|||
|
|||
.mat-button-toggle-checked { |
|||
background: rgba(0, 0, 0, 0.06); |
|||
} |
|||
|
|||
.mat-button-toggle { |
|||
border: none !important; |
|||
} |
|||
} |
|||
|
|||
/* Make mat-slider tooltip always visible */ |
|||
.mat-slider-thumb-label { |
|||
transform: rotate(45deg) !important; |
|||
border-radius: 50% 50% 0 !important; |
|||
} |
|||
|
|||
.mat-slider-thumb { |
|||
transform: scale(0) !important; |
|||
} |
|||
|
|||
.mat-slider-thumb-label-text { |
|||
opacity: 1 !important; |
|||
} |
|||
} |
|||
|
|||
::ng-deep { |
|||
/* Alarm tooltip with side-to-side movement */ |
|||
.tb-layout-error-tooltip-right { |
|||
background-color: $tb-warn !important; |
|||
margin: 5px 0 0 105px; |
|||
width: 160px; |
|||
text-align: center; |
|||
} |
|||
|
|||
.tb-layout-error-tooltip-main { |
|||
background-color: $tb-warn !important; |
|||
margin: 5px 105px 0 0; |
|||
width: 160px; |
|||
text-align: center; |
|||
} |
|||
|
|||
.tb-layout-button-tooltip { |
|||
margin: 30px 40px -35px -50px; |
|||
} |
|||
} |
|||
Loading…
Reference in new issue