114 lines
3.2 KiB
SCSS
114 lines
3.2 KiB
SCSS
/* You can add global styles to this file, and also import other style files */
|
|
@use '@angular/material' as mat;
|
|
|
|
html {
|
|
@include mat.theme((density: -5));
|
|
}
|
|
|
|
html,
|
|
body {
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
font-family: Roboto, "Helvetica Neue", sans-serif;
|
|
}
|
|
|
|
:root {
|
|
|
|
/*form field*/
|
|
@include mat.form-field-overrides((container-text-size: 0.875rem,
|
|
container-text-line-height:1.7, // line height should be atleast 1.5 times text size
|
|
outlined-label-text-size:0.875rem));
|
|
|
|
/* list */
|
|
@include mat.list-overrides((list-item-label-text-size:0.875rem,
|
|
list-item-label-text-line-height:1.7, // line height should be atleast 1.5 times text size
|
|
));
|
|
|
|
/*select*/
|
|
@include mat.select-overrides((trigger-text-size:0.875rem,
|
|
trigger-text-line-height:1.7, // line height should be atleast 1.5 times text size
|
|
));
|
|
|
|
/*select options*/
|
|
--mat-option-label-text-size: 0.875rem;
|
|
|
|
/* stepper */
|
|
@include mat.stepper-overrides((header-height:50px,
|
|
header-hover-state-layer-color:var(--mat-sys-primary),
|
|
header-focus-state-layer-color:var(--mat-sys-primary),
|
|
));
|
|
|
|
.mat-step-header:hover:not([aria-disabled]),
|
|
.mat-step-header:hover[aria-disabled=false] {
|
|
|
|
.mat-step-icon {
|
|
color: var(--mat-sys-on-primary-container);
|
|
background-color: var(--mat-sys-primary-container);
|
|
}
|
|
|
|
.mat-step-label {
|
|
color: var(--mat-sys-on-primary);
|
|
}
|
|
}
|
|
|
|
.mat-step-header:focus:not([aria-disabled]),
|
|
.mat-step-header:focus[aria-disabled=false] {
|
|
|
|
.mat-step-icon {
|
|
color: var(--mat-sys-on-primary-container);
|
|
background-color: var(--mat-sys-primary-container);
|
|
}
|
|
|
|
.mat-step-label {
|
|
color: var(--mat-sys-on-primary);
|
|
}
|
|
}
|
|
|
|
/* expansion panel */
|
|
@include mat.expansion-overrides((header-hover-state-layer-color:var(--mat-sys-primary),
|
|
header-focus-state-layer-color:var(--mat-sys-primary),
|
|
));
|
|
|
|
.mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:not([aria-disabled=true]):hover {
|
|
.mat-expansion-panel-header-title {
|
|
color: var(--mat-sys-on-primary);
|
|
}
|
|
|
|
.mat-expansion-indicator svg {
|
|
fill: var(--mat-sys-on-primary);
|
|
}
|
|
}
|
|
|
|
/* button */
|
|
@include mat.button-overrides((protected-container-color: var(--custom-button-background-color),
|
|
protected-container-elevation-shadow:var(--custom-button-hover-color),
|
|
protected-label-text-color:var(--custom-button-color)));
|
|
|
|
/* Nav bar */
|
|
.navbar-menu {
|
|
.mat-mdc-button:hover>.mat-mdc-button-persistent-ripple::before {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.profile-container {
|
|
.profile-button:hover>.mat-mdc-button-persistent-ripple::before {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
/* Table */
|
|
@include mat.table-overrides((header-headline-color:var(--mat-sys-on-primary),
|
|
));
|
|
|
|
.mat-mdc-table .mat-mdc-header-cell {
|
|
background: var(--mat-sys-primary);
|
|
}
|
|
|
|
/* Sort */
|
|
@include mat.sort-overrides((arrow-color: var(--mat-sys-on-primary),
|
|
));
|
|
} |