dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: Improve filled text field style. Improve scrollbar style.

Browse Source
This commit is contained in:
Igor Kulikov 2023-03-30 18:15:38 +03:00
parent 7049f564b4
commit 9660a93bd9
3 changed files with 55 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
ui-ngx/src/styles.scss
View File

@ -568,10 +568,16 @@ mat-label {
.mat-toolbar.mat-mdc-table-toolbar .mat-mdc-form-field.mat-form-field-appearance-fill, .mat-toolbar.mat-mdc-table-toolbar .mat-mdc-form-field.mat-form-field-appearance-fill,
.mat-mdc-form-field.mat-form-field-appearance-fill.tb-appearance-transparent { .mat-mdc-form-field.mat-form-field-appearance-fill.tb-appearance-transparent {
.mdc-text-field--filled { .mdc-text-field--filled {
&:before {
content: none;
}
background-color: transparent; background-color: transparent;
padding: 0; padding: 0;
} }
.mat-mdc-form-field-focus-overlay { .mat-mdc-form-field-focus-overlay {
&:before {
content: none;
}
background-color: transparent; background-color: transparent;
} }
.mat-mdc-select-arrow-wrapper { .mat-mdc-select-arrow-wrapper {

36
ui-ngx/src/theme-overwrites.scss
View File

@ -22,13 +22,43 @@
@mixin _mat-form-field-overwrites($primary, $config-or-theme) { @mixin _mat-form-field-overwrites($primary, $config-or-theme) {
.mat-mdc-form-field.mat-form-field-appearance-fill { .mat-mdc-form-field.mat-form-field-appearance-fill {
.mdc-text-field--filled { .mdc-text-field--filled {
background-color: rgba(mat.get-color-from-palette($primary), 0.03); &:before {
content: "";
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background-color: mat.get-color-from-palette($primary);
opacity: 0.03;
}
background-color: transparent;
&:not(.mdc-text-field--disabled) { &:not(.mdc-text-field--disabled) {
background-color: rgba(mat.get-color-from-palette($primary), 0.06); &:before {
content: "";
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background-color: mat.get-color-from-palette($primary);
opacity: 0.06;
}
background-color: transparent;
} }
} }
.mat-mdc-form-field-focus-overlay { .mat-mdc-form-field-focus-overlay {
background-color: rgba(mat.get-color-from-palette($primary), 0.87); &:before {
content: "";
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background-color: mat.get-color-from-palette($primary);
opacity: 0.87;
}
background-color: transparent;
} }
} }
} }

16
ui-ngx/src/theme.scss
View File

@ -243,6 +243,22 @@ $tb-dark-theme: map_merge($tb-dark-theme, $color);
div.tb-dashboard-page.mobile-app { div.tb-dashboard-page.mobile-app {
@include mat-fab-toolbar-inverse-theme($tb-theme); @include mat-fab-toolbar-inverse-theme($tb-theme);
} }
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: rgba(203, 203, 203, 0.8);
&:hover {
background: rgba(165, 165, 165, 0.65);
}
}
} }
.tb-default { .tb-default {