OpenSlides/client/src/app/site/site.component.scss-theme.scss

85 lines
2.5 KiB
SCSS
Raw Normal View History

@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);
2018-08-03 11:05:21 +02:00
/** the name of the selector */
app-site {
2018-08-03 11:05:21 +02:00
mat-sidenav-container {
/** nav panel on the left */
mat-sidenav {
/** rules for icons in the whole site-view */
.ng-fa-icon {
min-width: 20px; //puts the text to the right on the same level
margin-right: 10px; // the distance from the icon to the text
}
}
}
/** adjust the color of the main container to our theme */
.main-container {
background-color: mat-color($background, background);
}
/** change the nav-toolbar to the darker nuance of the current theme*/
.nav-toolbar {
2018-08-03 11:05:21 +02:00
height: 80px;
background-color: mat-color($primary, darker);
2018-08-03 11:05:21 +02:00
mat-toolbar-row {
height: 80px;
}
}
/** make the .user-menu expansion panel look like the nav-toolbar above */
.user-menu {
background-color: mat-color($primary, darker);
color: mat-color($background, raised-button);
2018-08-03 11:05:21 +02:00
min-height: 48px;
/** color of the divider just above the log out button */
mat-divider {
border-top-color: rgba(255, 255, 255, 0.25);
}
fa-icon {
color: mat-color($background, raised-button);
}
span {
color: mat-color($background, raised-button);
}
.mat-expansion-indicator:after {
color: mat-color($background, raised-button);
}
}
/** style and align the nav icons the icons*/
.main-nav {
2018-08-03 11:05:21 +02:00
fa-icon {
color: mat-color($foreground, icon);
}
span {
font-weight: bold;
color: mat-color($foreground, text);
}
}
/** style the active link */
.active {
.ng-fa-icon {
color: mat-color($primary);
}
span {
color: mat-color($primary);
}
}
}
}