Igor Kulikov
3 years ago
29 changed files with 530 additions and 517 deletions
@ -0,0 +1,264 @@ |
|||
/** |
|||
* Copyright © 2016-2023 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. |
|||
*/ |
|||
.tb-default, .tb-dark { |
|||
.tb-form-panel { |
|||
box-shadow: 0 0 10px 6px rgba(11, 17, 51, 0.04); |
|||
border-radius: 4px; |
|||
padding: 16px; |
|||
gap: 16px; |
|||
display: flex; |
|||
flex-direction: column; |
|||
color: rgba(0, 0, 0, 0.87); |
|||
letter-spacing: 0.15px; |
|||
position: relative; |
|||
&.no-padding-bottom { |
|||
padding-bottom: 0; |
|||
} |
|||
&.no-padding { |
|||
padding: 0; |
|||
} |
|||
&.stroked { |
|||
box-shadow: none; |
|||
border: 1px solid rgba(0, 0, 0, 0.12); |
|||
border-radius: 6px; |
|||
} |
|||
&.no-border { |
|||
box-shadow: none; |
|||
border-radius: 0; |
|||
} |
|||
&.tb-slide-toggle { |
|||
padding: 0; |
|||
gap: 0; |
|||
> .tb-form-panel-title { |
|||
padding-top: 16px; |
|||
padding-left: 16px; |
|||
} |
|||
> .mat-expansion-panel { |
|||
padding: 16px; |
|||
.mat-expansion-panel-header { |
|||
height: 32px; |
|||
.mat-slide { |
|||
margin: 0; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.mat-expansion-panel { |
|||
&.tb-settings { |
|||
box-shadow: none; |
|||
.mat-content { |
|||
overflow: visible; |
|||
} |
|||
> .mat-expansion-panel-header { |
|||
font-weight: 500; |
|||
font-size: 16px; |
|||
line-height: 24px; |
|||
letter-spacing: 0.25px; |
|||
padding: 0; |
|||
.mat-content { |
|||
flex: 0; |
|||
white-space: nowrap; |
|||
} |
|||
&.fill-width { |
|||
.mat-content { |
|||
flex: 1; |
|||
} |
|||
} |
|||
&:hover { |
|||
background: none; |
|||
} |
|||
.mat-expansion-indicator { |
|||
height: 32px; |
|||
padding: 2px; |
|||
} |
|||
} |
|||
> .mat-expansion-panel-header-description { |
|||
align-items: center; |
|||
} |
|||
> .mat-expansion-panel-content { |
|||
> .mat-expansion-panel-body { |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 16px; |
|||
padding: 16px 0 0 !important; |
|||
} |
|||
} |
|||
.tb-json-object-panel, .tb-css-content-panel { |
|||
margin: 0 0 8px; |
|||
} |
|||
} |
|||
.mat-expansion-panel-content { |
|||
font: inherit; |
|||
} |
|||
} |
|||
.mat-slide { |
|||
margin: 0; |
|||
&.margin { |
|||
margin: 8px 0; |
|||
} |
|||
.mdc-form-field>label { |
|||
font-weight: 400; |
|||
font-size: 16px; |
|||
line-height: 24px; |
|||
margin-left: 12px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.tb-form-panel-title { |
|||
font-weight: 500; |
|||
font-size: 16px; |
|||
} |
|||
.tb-form-panel-hint { |
|||
font-size: 12px; |
|||
color: #808080; |
|||
} |
|||
.tb-form-row { |
|||
height: 100%; |
|||
padding-top: 7px; |
|||
padding-bottom: 7px; |
|||
display: flex; |
|||
flex-direction: row; |
|||
align-items: center; |
|||
gap: 16px; |
|||
padding-left: 16px; |
|||
padding-right: 12px; |
|||
border: 1px solid rgba(0, 0, 0, 0.12); |
|||
border-radius: 6px; |
|||
&.same-padding { |
|||
padding-right: 16px; |
|||
} |
|||
&.space-between { |
|||
justify-content: space-between; |
|||
} |
|||
.mat-divider-vertical { |
|||
height: 56px; |
|||
margin-top: -7px; |
|||
margin-bottom: -7px; |
|||
} |
|||
.mat-mdc-form-field { |
|||
width: 106px; |
|||
&.medium-width { |
|||
width: 220px; |
|||
} |
|||
} |
|||
.fixed-title-width { |
|||
min-width: 200px; |
|||
} |
|||
.mat-slide:only-child { |
|||
margin: 8px 0; |
|||
} |
|||
} |
|||
|
|||
.tb-form-row .mat-mdc-form-field, .mat-mdc-form-field.tb-inline-field { |
|||
&.mat-form-field-appearance-fill { |
|||
.mdc-text-field--filled:not(.mdc-text-field--disabled) { |
|||
&:before { |
|||
opacity: 0; |
|||
} |
|||
.mdc-line-ripple::before { |
|||
border-bottom-color: rgba(0, 0, 0, 0.12); |
|||
} |
|||
} |
|||
.mat-mdc-form-field-focus-overlay { |
|||
opacity: 0; |
|||
} |
|||
} |
|||
.mat-mdc-text-field-wrapper { |
|||
&.mdc-text-field--outlined, &:not(.mdc-text-field--outlined) { |
|||
padding-right: 12px; |
|||
padding-left: 12px; |
|||
&:not(.mdc-text-field--focused):not(.mdc-text-field--disabled):not(:hover) { |
|||
.mdc-notched-outline__leading, .mdc-notched-outline__trailing { |
|||
border-color: rgba(0, 0, 0, 0.12); |
|||
} |
|||
} |
|||
.mat-mdc-form-field-infix { |
|||
padding-top: 8px; |
|||
padding-bottom: 8px; |
|||
min-height: 40px; |
|||
width: auto; |
|||
.mdc-text-field__input, .mat-mdc-select { |
|||
font-weight: 400; |
|||
font-size: 14px; |
|||
line-height: 20px; |
|||
} |
|||
} |
|||
.mat-mdc-form-field-icon-suffix { |
|||
height: 40px; |
|||
font-size: 14px; |
|||
line-height: 40px; |
|||
letter-spacing: 0.2px; |
|||
color: rgba(0, 0, 0, 0.38); |
|||
> button.mat-mdc-icon-button { |
|||
width: 40px; |
|||
height: 40px; |
|||
padding: 8px; |
|||
.mat-icon { |
|||
width: 20px; |
|||
height: 20px; |
|||
font-size: 20px; |
|||
} |
|||
} |
|||
> .mat-icon { |
|||
width: 20px; |
|||
height: 20px; |
|||
padding: 10px; |
|||
font-size: 20px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
&.center { |
|||
.mat-mdc-text-field-wrapper { |
|||
.mat-mdc-form-field-infix { |
|||
.mdc-text-field__input { |
|||
text-align: center; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
&.number { |
|||
.mat-mdc-text-field-wrapper { |
|||
padding-right: 4px; |
|||
.mat-mdc-form-field-infix { |
|||
input.mdc-text-field__input[type=number]::-webkit-inner-spin-button, |
|||
input.mdc-text-field__input[type=number]::-webkit-outer-spin-button { |
|||
opacity: 1; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
&.tb-chips { |
|||
.mat-mdc-text-field-wrapper { |
|||
&.mdc-text-field--outlined, &:not(.mdc-text-field--outlined) { |
|||
.mat-mdc-form-field-infix { |
|||
padding-top: 4px; |
|||
padding-bottom: 4px; |
|||
|
|||
.mdc-evolution-chip-set { |
|||
min-height: 32px; |
|||
|
|||
.mdc-evolution-chip { |
|||
height: 24px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
Loading…
Reference in new issue