thingsboard/ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.scss

127 lines
2.6 KiB
SCSS

/**
* 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.
*/
@import "../../../../../../scss/constants";
@import "../../../../../../theme";
:host-context(.tb-fullscreen-dialog .mat-mdc-dialog-container) {
width: 800px;
height: 100%;
max-width: 100%;
max-height: 100vh;
display: flex;
flex-direction: column;
.tb-title {
font-size: 16px;
line-height: 24px;
&.tb-required::after {
font-size: initial;
content: "*";
}
&.tb-error {
color: var(--mdc-theme-error, #f44336);
&.tb-required::after {
color: var(--mdc-theme-error, #f44336);
}
}
}
.tb-mat-error {
font-size: 13px;
}
.tb-hint {
padding: 0 0 8px;
}
.tb-hint-available-params {
border-radius: 6px;
background-color: rgba(48, 86, 128, 0.04);
margin-bottom: 8px;
padding: 8px 16px;
.content {
vertical-align: middle;
}
}
.delivery-methods-container {
margin-bottom: 20px;
display: flex;
flex-wrap: wrap;
gap: 8px;
.delivery-method-container {
display: inline-flex;
flex: 1 1 calc(50% - 8px);
padding: 16px 12px;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 6px;
.delivery-method {
width: 100%;
height: 100%;
}
}
}
.additional-config-group {
padding: 16px 16px 4px;
margin-bottom: 12px;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 6px;
width: 100%;
height: 100%;
.toggle {
margin-bottom: 12px;
}
}
}
:host ::ng-deep {
.mat-mdc-dialog-content {
display: flex;
flex-direction: column;
height: 100%;
padding: 0 !important;
.mat-stepper-horizontal {
display: flex;
height: 100%;
overflow: hidden;
.mat-horizontal-stepper-wrapper {
flex: 1 1 100%;
}
.mat-horizontal-content-container {
height: 550px;
max-height: 100%;
width: 100%;;
overflow-y: auto;
scrollbar-gutter: stable;
@media #{$mat-gt-sm} {
min-width: 500px;
}
}
}
}
}