248 lines
6.3 KiB
SCSS
248 lines
6.3 KiB
SCSS
/**
|
|
* 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 '~@mat-datetimepicker/core/datetimepicker/datetimepicker-theme.scss';
|
|
@import './scss/constants';
|
|
|
|
@include mat.core();
|
|
|
|
$tb-primary-color: #305680;
|
|
$tb-secondary-color: #527dad;
|
|
$tb-hue3-color: #a7c1de;
|
|
|
|
$tb-dark-primary-color: #9fa8da;
|
|
|
|
$tb-mat-indigo: (
|
|
50: #e8eaf6,
|
|
100: #c5cae9,
|
|
200: #9fa8da,
|
|
300: #7986cb,
|
|
400: #5c6bc0,
|
|
500: $tb-primary-color,
|
|
600: $tb-secondary-color,
|
|
700: #303f9f,
|
|
800: #283593,
|
|
900: #1a237e,
|
|
A100: $tb-hue3-color,
|
|
A200: #536dfe,
|
|
A400: #3d5afe,
|
|
A700: #304ffe,
|
|
contrast: (
|
|
50: rgba(black, 0.87),
|
|
100: rgba(black, 0.87),
|
|
200: rgba(black, 0.87),
|
|
300: white,
|
|
400: white,
|
|
500: white,
|
|
600: white,
|
|
700: white,
|
|
800: white,
|
|
900: white,
|
|
A100: rgba(black, 0.87),
|
|
A200: white,
|
|
A400: white,
|
|
A700: white,
|
|
)
|
|
);
|
|
|
|
$tb-primary: mat.define-palette($tb-mat-indigo);
|
|
$tb-accent: mat.define-palette(mat.$deep-orange-palette);
|
|
|
|
$background: (background: map_get(mat.$grey-palette, 200));
|
|
|
|
$tb-theme-background: map_merge(mat.$light-theme-background-palette, $background);
|
|
|
|
$tb-mat-theme: mat.define-light-theme(
|
|
$tb-primary,
|
|
$tb-accent
|
|
);
|
|
|
|
$tb-theme: map_merge($tb-mat-theme, (background: $tb-theme-background));
|
|
|
|
$primary: mat.get-color-from-palette($tb-primary);
|
|
$accent: mat.get-color-from-palette($tb-accent);
|
|
|
|
$tb-dark-mat-indigo: (
|
|
50: #e8eaf6,
|
|
100: #c5cae9,
|
|
200: #9fa8da,
|
|
300: #7986cb,
|
|
400: #5c6bc0,
|
|
500: $tb-dark-primary-color,
|
|
600: $tb-secondary-color,
|
|
700: #303f9f,
|
|
800: $tb-primary-color,
|
|
900: #1a237e,
|
|
A100: $tb-hue3-color,
|
|
A200: #536dfe,
|
|
A400: #3d5afe,
|
|
A700: #304ffe,
|
|
contrast: (
|
|
50: rgba(black, 0.87),
|
|
100: rgba(black, 0.87),
|
|
200: rgba(black, 0.87),
|
|
300: rgba(black, 0.87),
|
|
400: rgba(black, 0.87),
|
|
500: map_get($tb-mat-indigo, 900),
|
|
600: white,
|
|
700: white,
|
|
800: white,
|
|
900: white,
|
|
A100: rgba(black, 0.87),
|
|
A200: rgba(black, 0.87),
|
|
A400: rgba(black, 0.87),
|
|
A700: rgba(black, 0.87),
|
|
)
|
|
);
|
|
|
|
$tb-dark-primary: mat.define-palette($tb-dark-mat-indigo);
|
|
|
|
$tb-dark-theme-background: (
|
|
status-bar: black,
|
|
app-bar: map_get($tb-dark-mat-indigo, 900),
|
|
background: map_get($tb-dark-mat-indigo, 800),
|
|
hover: rgba(white, 0.04),
|
|
card: map_get($tb-dark-mat-indigo, 800),
|
|
dialog: map_get($tb-dark-mat-indigo, 800),
|
|
disabled-button: rgba(white, 0.12),
|
|
raised-button: map-get($tb-dark-mat-indigo, 50),
|
|
focused-button: rgba(white, 0.12),
|
|
selected-button: map_get($tb-dark-mat-indigo, 900),
|
|
selected-disabled-button: map_get($tb-dark-mat-indigo, 800),
|
|
disabled-button-toggle: black,
|
|
unselected-chip: map_get($tb-dark-mat-indigo, 700),
|
|
disabled-list-option: black,
|
|
tooltip: map_get(mat.$grey-palette, 700),
|
|
);
|
|
|
|
@function get-tb-dark-theme($primary, $accent, $warn: mat.define-palette(mat.$red-palette)) {
|
|
@return (
|
|
primary: $primary,
|
|
accent: $accent,
|
|
warn: $warn,
|
|
is-dark: true,
|
|
foreground: mat.$dark-theme-foreground-palette,
|
|
background: $tb-dark-theme-background,
|
|
);
|
|
}
|
|
|
|
$tb-dark-theme: get-tb-dark-theme(
|
|
$tb-dark-primary,
|
|
$tb-accent
|
|
);
|
|
|
|
@mixin mat-fab-toolbar-theme($theme) {
|
|
$primary: map-get($theme, primary);
|
|
$accent: map-get($theme, accent);
|
|
$warn: map-get($theme, warn);
|
|
$background: map-get($theme, background);
|
|
$foreground: map-get($theme, foreground);
|
|
|
|
mat-fab-toolbar {
|
|
.mat-fab-toolbar-background {
|
|
background: mat.get-color-from-palette($background, app-bar);
|
|
color: mat.get-color-from-palette($foreground, text);
|
|
}
|
|
&.mat-primary {
|
|
.mat-fab-toolbar-background {
|
|
background: mat.get-color-from-palette($primary);
|
|
color: mat.get-color-from-palette($primary, default-contrast);
|
|
}
|
|
}
|
|
&.mat-accent {
|
|
.mat-fab-toolbar-background {
|
|
background: mat.get-color-from-palette($accent);
|
|
color: mat.get-color-from-palette($accent, default-contrast);
|
|
}
|
|
}
|
|
&.mat-warn {
|
|
.mat-fab-toolbar-background {
|
|
background: mat.get-color-from-palette($warn);
|
|
color: mat.get-color-from-palette($warn, default-contrast);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin _mat-toolbar-inverse-color($palette) {
|
|
background: mat.get-color-from-palette($palette, default-contrast);
|
|
color: rgba(black, 0.87);
|
|
}
|
|
|
|
@mixin mat-fab-toolbar-inverse-theme($theme) {
|
|
$primary: map-get($theme, primary);
|
|
$accent: map-get($theme, accent);
|
|
$warn: map-get($theme, warn);
|
|
$background: map-get($theme, foreground);
|
|
$foreground: map-get($theme, background);
|
|
|
|
mat-fab-toolbar {
|
|
.mat-fab-toolbar-background {
|
|
background: mat.get-color-from-palette($background, app-bar);
|
|
color: mat.get-color-from-palette($foreground, text);
|
|
}
|
|
&.mat-primary {
|
|
.mat-fab-toolbar-background {
|
|
@include _mat-toolbar-inverse-color($primary);
|
|
}
|
|
}
|
|
mat-toolbar {
|
|
&.mat-primary {
|
|
@include _mat-toolbar-inverse-color($primary);
|
|
button.mat-icon-button {
|
|
mat-icon {
|
|
color: mat.get-color-from-palette($primary);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.mat-fab {
|
|
&.mat-primary {
|
|
background: mat.get-color-from-palette($primary, default-contrast);
|
|
color: mat.get-color-from-palette($primary);
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
@mixin tb-components-theme($theme) {
|
|
$primary: map-get($theme, primary);
|
|
|
|
mat-toolbar{
|
|
&.mat-hue-3 {
|
|
background-color: mat.get-color-from-palette($primary, 'A100');
|
|
}
|
|
}
|
|
|
|
@include mat-fab-toolbar-theme($tb-theme);
|
|
|
|
div.tb-dashboard-page.mobile-app {
|
|
@include mat-fab-toolbar-inverse-theme($tb-theme);
|
|
}
|
|
}
|
|
|
|
.tb-default {
|
|
@include mat.all-component-themes($tb-theme);
|
|
@include mat-datetimepicker-theme($tb-theme);
|
|
@include tb-components-theme($tb-theme);
|
|
}
|
|
|
|
.tb-dark {
|
|
@include mat.all-component-themes($tb-dark-theme);
|
|
}
|
|
|