0f55527d6a
Also: Set linting output to "stylish" (more readable error messages in terminal output) Remove 2nd linting output rename "appOsPerms" to just "osPerms" including filename and classname rename all selectors from "app" to "os"
85 lines
2.5 KiB
SCSS
85 lines
2.5 KiB
SCSS
@import '~@angular/material/theming';
|
|
|
|
/** Custom component theme. Only lives in a specific scope */
|
|
@mixin os-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);
|
|
|
|
/** the name of the selector */
|
|
os-site {
|
|
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 {
|
|
height: 80px;
|
|
background-color: mat-color($primary, darker);
|
|
|
|
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);
|
|
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 {
|
|
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);
|
|
}
|
|
}
|
|
}
|
|
}
|