2018-07-26 16:40:34 +02:00
|
|
|
@import '~@angular/material/theming';
|
|
|
|
|
|
|
|
/** Custom component theme. Only lives in a specific scope */
|
|
|
|
@mixin app-site-theme($theme) {
|
|
|
|
$primary: map-get($theme, primary);
|
|
|
|
$accent: map-get($theme, accent);
|
|
|
|
$warn: map-get($theme, accent);
|
|
|
|
$foreground: map-get($theme, foreground);
|
|
|
|
$background: map-get($theme, background);
|
|
|
|
|
|
|
|
app-site {
|
2018-07-31 15:46:55 +02:00
|
|
|
/** adjust the color of the main container to our theme */
|
|
|
|
.main-container {
|
|
|
|
background-color: mat-color($background, background);
|
|
|
|
}
|
|
|
|
|
2018-07-26 16:40:34 +02:00
|
|
|
/** change the nav-toolbar to the darker nuance of the current theme*/
|
|
|
|
.nav-toolbar {
|
|
|
|
background-color: mat-color($primary, darker);
|
|
|
|
}
|
|
|
|
|
|
|
|
/** make the .user-menu expansion panel look like the nav-toolbar above */
|
|
|
|
.user-menu {
|
|
|
|
background-color: mat-color($primary, darker);
|
2018-07-31 15:46:55 +02:00
|
|
|
color: mat-color($background, raised-button);
|
2018-07-26 16:40:34 +02:00
|
|
|
min-height: 64px;
|
|
|
|
|
|
|
|
.mat-expansion-indicator:after {
|
2018-07-31 15:46:55 +02:00
|
|
|
color: mat-color($background, raised-button);
|
2018-07-26 16:40:34 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2018-07-31 15:46:55 +02:00
|
|
|
/** style and align the nav icons the icons*/
|
2018-07-26 16:40:34 +02:00
|
|
|
.main-nav {
|
|
|
|
.ng-fa-icon {
|
2018-07-31 15:46:55 +02:00
|
|
|
color: mat-color($foreground, icon);
|
2018-07-26 16:40:34 +02:00
|
|
|
min-width: 20px; //puts the text to the right on the same leve
|
|
|
|
margin-right: 10px; // the distance from the icon to the text
|
|
|
|
}
|
|
|
|
span {
|
2018-07-31 15:46:55 +02:00
|
|
|
color: mat-color($foreground, text);
|
2018-07-26 16:40:34 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|