administrator/pas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WIP

Browse Source
This commit is contained in:
Marek Lesko
2025-10-22 14:44:25 +00:00
parent 498d2c7ade
commit 9d644a9b79
275 changed files with 35799 additions and 35712 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
Web/public/scss/override-component/_autocomplete.scss
View File

@@ -1,8 +1,8 @@
@use "sass:map";
@use "@angular/material" as mat;
@include mat.autocomplete-overrides(
(
container-elevation-shadow: var(--mat-sys-level2),
)
);
@use "sass:map";
@use "@angular/material" as mat;
@include mat.autocomplete-overrides(
(
container-elevation-shadow: var(--mat-sys-level2),
)
);

14
Web/public/scss/override-component/_badge.scss
View File

@@ -1,7 +1,7 @@
@use "sass:map";
@use "@angular/material" as mat;
@include mat.badge-overrides(
(
background-color: var(--mat-sys-primary),
)
);
@use "sass:map";
@use "@angular/material" as mat;
@include mat.badge-overrides(
(
background-color: var(--mat-sys-primary),
)
);

18
Web/public/scss/override-component/_button-toggle.scss
View File

@@ -1,9 +1,9 @@
@use "sass:map";
@use "@angular/material" as mat;
@use "../variables" as *;
@include mat.button-toggle-overrides(
(
shape: $border-radius,
)
);
@use "sass:map";
@use "@angular/material" as mat;
@use "../variables" as *;
@include mat.button-toggle-overrides(
(
shape: $border-radius,
)
);

272
Web/public/scss/override-component/_button.scss
View File

@@ -1,136 +1,136 @@
@use "sass:map";
@use "@angular/material" as mat;
@use "../variables" as *;
@include mat.button-overrides(
(
protected-hover-container-elevation-shadow: var(--mat-sys-level1),
filled-horizontal-padding: 15px,
outlined-horizontal-padding: 15px,
protected-horizontal-padding: 15px,
text-horizontal-padding: 15px,
filled-container-shape: var(--mat-sys-corner-small),
outlined-container-shape: var(--mat-sys-corner-small),
protected-container-shape: var(--mat-sys-corner-small),
text-container-shape: var(--mat-sys-corner-small),
)
);
@include mat.icon-button-overrides(
(
icon-color: $text-color,
)
);
// styles
html {
.mat-mdc-button-base.bg-light-primary:hover,
.mat-mdc-button-base.bg-light-secondary:hover,
.mat-mdc-button-base.bg-light-error:hover,
.mat-mdc-button-base.bg-light-warning:hover,
.mat-mdc-button-base.bg-light-success:hover {
color: $white !important;
}
.mat-mdc-button-base.bg-light-primary {
&:hover {
background-color: var(--mat-sys-primary) !important;
}
}
.mat-mdc-button-base.bg-light-secondary {
&:hover {
background-color: var(--mat-sys-secondary) !important;
}
}
.mat-mdc-button-base.bg-light-error {
&:hover {
background-color: var(--mat-sys-error) !important;
}
}
.mat-mdc-button-base.bg-light-warning {
&:hover {
background-color: $warning !important;
}
}
.mat-mdc-button-base.bg-light-success {
&:hover {
background-color: $success !important;
}
}
.mat-mdc-outlined-button:not(:disabled) {
border-color: inherit !important;
}
.mat-mdc-button-base.text-secondary:hover {
.mat-mdc-button-persistent-ripple::before {
background-color: $secondary;
}
}
.mat-mdc-button-base.text-error:hover {
.mat-mdc-button-persistent-ripple::before {
background-color: $error;
}
}
.mat-mdc-button-base.text-warning:hover {
.mat-mdc-button-persistent-ripple::before {
background-color: $warning;
}
}
.mat-mdc-button-base.text-success:hover {
.mat-mdc-button-persistent-ripple::before {
background-color: $success;
}
}
.mat-mdc-outlined-button:not(:disabled).mat-secondary {
color: var(--mat-sys-secondary);
border-color: var(--mat-sys-secondary);
&:hover {
.mat-mdc-button-persistent-ripple::before {
background-color: $secondary;
}
}
}
.mat-mdc-outlined-button:not(:disabled).mat-success {
color: $success;
border-color: $success;
&:hover {
.mat-mdc-button-persistent-ripple::before {
background-color: $success;
}
}
}
.mat-mdc-outlined-button:not(:disabled).mat-error {
color: $error;
border-color: $error;
&:hover {
.mat-mdc-button-persistent-ripple::before {
background-color: $error;
}
}
}
.mat-mdc-outlined-button:not(:disabled).mat-warning {
color: $warning;
border-color: $warning;
&:hover {
.mat-mdc-button-persistent-ripple::before {
background-color: $warning;
}
}
}
}
@use "sass:map";
@use "@angular/material" as mat;
@use "../variables" as *;
@include mat.button-overrides(
(
protected-hover-container-elevation-shadow: var(--mat-sys-level1),
filled-horizontal-padding: 15px,
outlined-horizontal-padding: 15px,
protected-horizontal-padding: 15px,
text-horizontal-padding: 15px,
filled-container-shape: var(--mat-sys-corner-small),
outlined-container-shape: var(--mat-sys-corner-small),
protected-container-shape: var(--mat-sys-corner-small),
text-container-shape: var(--mat-sys-corner-small),
)
);
@include mat.icon-button-overrides(
(
icon-color: $text-color,
)
);
// styles
html {
.mat-mdc-button-base.bg-light-primary:hover,
.mat-mdc-button-base.bg-light-secondary:hover,
.mat-mdc-button-base.bg-light-error:hover,
.mat-mdc-button-base.bg-light-warning:hover,
.mat-mdc-button-base.bg-light-success:hover {
color: $white !important;
}
.mat-mdc-button-base.bg-light-primary {
&:hover {
background-color: var(--mat-sys-primary) !important;
}
}
.mat-mdc-button-base.bg-light-secondary {
&:hover {
background-color: var(--mat-sys-secondary) !important;
}
}
.mat-mdc-button-base.bg-light-error {
&:hover {
background-color: var(--mat-sys-error) !important;
}
}
.mat-mdc-button-base.bg-light-warning {
&:hover {
background-color: $warning !important;
}
}
.mat-mdc-button-base.bg-light-success {
&:hover {
background-color: $success !important;
}
}
.mat-mdc-outlined-button:not(:disabled) {
border-color: inherit !important;
}
.mat-mdc-button-base.text-secondary:hover {
.mat-mdc-button-persistent-ripple::before {
background-color: $secondary;
}
}
.mat-mdc-button-base.text-error:hover {
.mat-mdc-button-persistent-ripple::before {
background-color: $error;
}
}
.mat-mdc-button-base.text-warning:hover {
.mat-mdc-button-persistent-ripple::before {
background-color: $warning;
}
}
.mat-mdc-button-base.text-success:hover {
.mat-mdc-button-persistent-ripple::before {
background-color: $success;
}
}
.mat-mdc-outlined-button:not(:disabled).mat-secondary {
color: var(--mat-sys-secondary);
border-color: var(--mat-sys-secondary);
&:hover {
.mat-mdc-button-persistent-ripple::before {
background-color: $secondary;
}
}
}
.mat-mdc-outlined-button:not(:disabled).mat-success {
color: $success;
border-color: $success;
&:hover {
.mat-mdc-button-persistent-ripple::before {
background-color: $success;
}
}
}
.mat-mdc-outlined-button:not(:disabled).mat-error {
color: $error;
border-color: $error;
&:hover {
.mat-mdc-button-persistent-ripple::before {
background-color: $error;
}
}
}
.mat-mdc-outlined-button:not(:disabled).mat-warning {
color: $warning;
border-color: $warning;
&:hover {
.mat-mdc-button-persistent-ripple::before {
background-color: $warning;
}
}
}
}

120
Web/public/scss/override-component/_card.scss
View File

@@ -1,60 +1,60 @@
@use "sass:map";
@use "@angular/material" as mat;
@use "../variables" as *;
@include mat.card-overrides(
(
elevated-container-color: $white,
title-text-size: 1.125rem,
subtitle-text-size: 14px,
title-text-line-height: 1.6rem,
title-text-weight: 600,
subtitle-text-weight: 400,
elevated-container-shape: var(--mat-sys-corner-small),
outlined-container-shape: var(--mat-sys-corner-small),
elevated-container-elevation: var(--mat-sys-level2),
)
);
// styles
html {
.mat-mdc-card {
margin-bottom: $card-spacer;
.mat-mdc-card-header {
padding: $card-spacer $card-spacer 0 !important;
}
.mat-mdc-card-header + .mat-mdc-card-content {
padding: 0 $card-spacer $card-spacer;
}
> .mat-mdc-card-content {
padding: $card-spacer !important;
}
.mdc-card__actions {
padding: $card-spacer !important;
}
}
.card-hover {
transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
&:hover {
scale: 1.01;
transition: all 0.1s ease-in 0s;
}
}
.cardBorder {
.mdc-card {
box-shadow: none !important;
border: 1px solid $borderColor !important;
&.shadow-none {
border: 0 !important;
}
}
}
}
@use "sass:map";
@use "@angular/material" as mat;
@use "../variables" as *;
@include mat.card-overrides(
(
elevated-container-color: $white,
title-text-size: 1.125rem,
subtitle-text-size: 14px,
title-text-line-height: 1.6rem,
title-text-weight: 600,
subtitle-text-weight: 400,
elevated-container-shape: var(--mat-sys-corner-small),
outlined-container-shape: var(--mat-sys-corner-small),
elevated-container-elevation: var(--mat-sys-level2),
)
);
// styles
html {
.mat-mdc-card {
margin-bottom: $card-spacer;
.mat-mdc-card-header {
padding: $card-spacer $card-spacer 0 !important;
}
.mat-mdc-card-header + .mat-mdc-card-content {
padding: 0 $card-spacer $card-spacer;
}
> .mat-mdc-card-content {
padding: $card-spacer !important;
}
.mdc-card__actions {
padding: $card-spacer !important;
}
}
.card-hover {
transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
&:hover {
scale: 1.01;
transition: all 0.1s ease-in 0s;
}
}
.cardBorder {
.mdc-card {
box-shadow: none !important;
border: 1px solid $borderColor !important;
&.shadow-none {
border: 0 !important;
}
}
}
}

46
Web/public/scss/override-component/_checkbox.scss
View File

@@ -1,23 +1,23 @@
@use "sass:map";
@use "@angular/material" as mat;
@include mat.checkbox-overrides(
(
unselected-focus-icon-color:
var(--mat-checkbox-unselected-hover-state-layer-color),
)
);
// styles
html {
.mdc-checkbox__background {
border-radius: 4px;
width: 21px;
height: 21px;
border: 1px solid var(--mat-sys-outline);
}
.mdc-checkbox .mdc-checkbox__native-control:focus ~ .mdc-checkbox__ripple {
background-color: var(--mat-checkbox-unselected-hover-state-layer-color);
}
}
@use "sass:map";
@use "@angular/material" as mat;
@include mat.checkbox-overrides(
(
unselected-focus-icon-color:
var(--mat-checkbox-unselected-hover-state-layer-color),
)
);
// styles
html {
.mdc-checkbox__background {
border-radius: 4px;
width: 21px;
height: 21px;
border: 1px solid var(--mat-sys-outline);
}
.mdc-checkbox .mdc-checkbox__native-control:focus ~ .mdc-checkbox__ripple {
background-color: var(--mat-checkbox-unselected-hover-state-layer-color);
}
}

16
Web/public/scss/override-component/_chip.scss
View File

@@ -1,8 +1,8 @@
@use "sass:map";
@use "@angular/material" as mat;
@include mat.chips-overrides(
(
focus-state-layer-color: var(--mat-option-focus-state-layer-color),
)
);
@use "sass:map";
@use "@angular/material" as mat;
@include mat.chips-overrides(
(
focus-state-layer-color: var(--mat-option-focus-state-layer-color),
)
);

22
Web/public/scss/override-component/_datepicker.scss
View File

@@ -1,11 +1,11 @@
@use "sass:map";
@use "@angular/material" as mat;
@include mat.datepicker-overrides(
(
calendar-container-background-color:
var(--mat-card-elevated-container-color),
calendar-container-touch-elevation-shadow: var(--mat-sys-level1),
calendar-container-elevation-shadow: var(--mat-sys-level1),
)
);
@use "sass:map";
@use "@angular/material" as mat;
@include mat.datepicker-overrides(
(
calendar-container-background-color:
var(--mat-card-elevated-container-color),
calendar-container-touch-elevation-shadow: var(--mat-sys-level1),
calendar-container-elevation-shadow: var(--mat-sys-level1),
)
);

30
Web/public/scss/override-component/_dialog.scss
View File

@@ -1,15 +1,15 @@
@use "sass:map";
@use "@angular/material" as mat;
@include mat.dialog-overrides(
(
container-shape: var(--mat-sys-corner-small),
subhead-size: 18px,
subhead-weight: 600,
content-padding: 20px 24px,
actions-padding: 20px 24px,
container-min-width: 300px,
subhead-tracking: unset,
supporting-text-tracking: unset,
)
);
@use "sass:map";
@use "@angular/material" as mat;
@include mat.dialog-overrides(
(
container-shape: var(--mat-sys-corner-small),
subhead-size: 18px,
subhead-weight: 600,
content-padding: 20px 24px,
actions-padding: 20px 24px,
container-min-width: 300px,
subhead-tracking: unset,
supporting-text-tracking: unset,
)
);

16
Web/public/scss/override-component/_drawer.scss
View File

@@ -1,8 +1,8 @@
@use "sass:map";
@use "@angular/material" as mat;
@include mat.sidenav-overrides(
(
container-shape: 0,
)
);
@use "sass:map";
@use "@angular/material" as mat;
@include mat.sidenav-overrides(
(
container-shape: 0,
)
);

16
Web/public/scss/override-component/_expansion.scss
View File

@@ -1,8 +1,8 @@
@use "sass:map";
@use "@angular/material" as mat;
@include mat.expansion-overrides(
(
container-background-color: var(--mat-card-elevated-container-color),
)
);
@use "sass:map";
@use "@angular/material" as mat;
@include mat.expansion-overrides(
(
container-background-color: var(--mat-card-elevated-container-color),
)
);

30
Web/public/scss/override-component/_fab.scss
View File

@@ -1,15 +1,15 @@
@use "sass:map";
@use "@angular/material" as mat;
@include mat.fab-overrides(
(
small-container-shape: 30px,
container-shape: 30px,
container-elevation-shadow: none,
small-container-elevation-shadow: none,
small-hover-container-elevation-shadow: var(--mat-sys-level3),
hover-container-elevation-shadow: var(--mat-sys-level3),
extended-hover-container-elevation-shadow: var(--mat-sys-level3),
extended-container-elevation-shadow: none,
)
);
@use "sass:map";
@use "@angular/material" as mat;
@include mat.fab-overrides(
(
small-container-shape: 30px,
container-shape: 30px,
container-elevation-shadow: none,
small-container-elevation-shadow: none,
small-hover-container-elevation-shadow: var(--mat-sys-level3),
hover-container-elevation-shadow: var(--mat-sys-level3),
extended-hover-container-elevation-shadow: var(--mat-sys-level3),
extended-container-elevation-shadow: none,
)
);

54
Web/public/scss/override-component/_form-field.scss
View File

@@ -1,27 +1,27 @@
@use "sass:map";
@use "@angular/material" as mat;
@include mat.form-field-overrides(
(
container-height: 37px,
outlined-container-shape: var(--mat-sys-corner-small),
container-vertical-padding: 6px,
)
);
// forms
html {
.hide-hint {
.mat-mdc-form-field-subscript-wrapper {
display: none;
}
}
.mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label {
top: calc(var(--mat-form-field-container-height) / 2.15);
}
.demo-inline-calendar-card {
width: 300px;
}
}
@use "sass:map";
@use "@angular/material" as mat;
@include mat.form-field-overrides(
(
container-height: 37px,
outlined-container-shape: var(--mat-sys-corner-small),
container-vertical-padding: 6px,
)
);
// forms
html {
.hide-hint {
.mat-mdc-form-field-subscript-wrapper {
display: none;
}
}
.mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label {
top: calc(var(--mat-form-field-container-height) / 2.15);
}
.demo-inline-calendar-card {
width: 300px;
}
}

44
Web/public/scss/override-component/_index.scss
View File

@@ -1,23 +1,23 @@
@use "autocomplete";
@use "badge";
@use "button";
@use "button-toggle";
@use "card";
@use "checkbox";
@use "chip";
@use "dialog";
@use "datepicker";
@use "fab";
@use "form-field";
@use "radio";
@use "list";
@use "menu";
@use "paginator";
@use "theme";
@use "table";
@use "tree";
@use "typography";
@use "stepper";
@use "expansion";
@use "drawer";
@use "autocomplete";
@use "badge";
@use "button";
@use "button-toggle";
@use "card";
@use "checkbox";
@use "chip";
@use "dialog";
@use "datepicker";
@use "fab";
@use "form-field";
@use "radio";
@use "list";
@use "menu";
@use "paginator";
@use "theme";
@use "table";
@use "tree";
@use "typography";
@use "stepper";
@use "expansion";
@use "drawer";
@use "progress";

24
Web/public/scss/override-component/_list.scss
View File

@@ -1,12 +1,12 @@
@use "sass:map";
@use "@angular/material" as mat;
@include mat.list-overrides(
(
list-item-hover-state-layer-color: var(--mat-sys-primary),
list-item-container-shape: var(--mat-sys-corner-small),
active-indicator-shape: var(--mat-sys-corner-small),
list-item-two-line-container-height: 70px,
list-item-three-line-container-height: 100px,
)
);
@use "sass:map";
@use "@angular/material" as mat;
@include mat.list-overrides(
(
list-item-hover-state-layer-color: var(--mat-sys-primary),
list-item-container-shape: var(--mat-sys-corner-small),
active-indicator-shape: var(--mat-sys-corner-small),
list-item-two-line-container-height: 70px,
list-item-three-line-container-height: 100px,
)
);

38
Web/public/scss/override-component/_menu.scss
View File

@@ -1,19 +1,19 @@
@use "sass:map";
@use "@angular/material" as mat;
@include mat.menu-overrides(
(
container-shape: var(--mat-sys-corner-small),
)
);
// styles
html {
.mat-mdc-menu-panel {
box-shadow: var(--mat-sys-level3) !important;
}
.mat-mdc-select-panel {
padding: 8px !important;
}
}
@use "sass:map";
@use "@angular/material" as mat;
@include mat.menu-overrides(
(
container-shape: var(--mat-sys-corner-small),
)
);
// styles
html {
.mat-mdc-menu-panel {
box-shadow: var(--mat-sys-level3) !important;
}
.mat-mdc-select-panel {
padding: 8px !important;
}
}

16
Web/public/scss/override-component/_paginator.scss
View File

@@ -1,8 +1,8 @@
@use "sass:map";
@use "@angular/material" as mat;
@include mat.paginator-overrides(
(
container-background-color: var(--mat-card-elevated-container-color),
)
);
@use "sass:map";
@use "@angular/material" as mat;
@include mat.paginator-overrides(
(
container-background-color: var(--mat-card-elevated-container-color),
)
);

14
Web/public/scss/override-component/_progress.scss
View File

@@ -1,7 +1,7 @@
html {
.mat-secondary {
.mdc-linear-progress__bar-inner {
border-color: var(--mat-sys-secondary);
}
}
}
html {
.mat-secondary {
.mdc-linear-progress__bar-inner {
border-color: var(--mat-sys-secondary);
}
}
}

28
Web/public/scss/override-component/_radio.scss
View File

@@ -1,14 +1,14 @@
@use "sass:map";
@use "@angular/material" as mat;
@include mat.radio-overrides(
(
unselected-icon-color: var(--mat-sys-outline-variant),
)
);
html {
.mat-mdc-radio-button .mdc-radio__outer-circle {
border-width: 1px;
}
}
@use "sass:map";
@use "@angular/material" as mat;
@include mat.radio-overrides(
(
unselected-icon-color: var(--mat-sys-outline-variant),
)
);
html {
.mat-mdc-radio-button .mdc-radio__outer-circle {
border-width: 1px;
}
}

16
Web/public/scss/override-component/_stepper.scss
View File

@@ -1,8 +1,8 @@
@use "sass:map";
@use "@angular/material" as mat;
@include mat.stepper-overrides(
(
container-color: var(--mat-card-elevated-container-color),
)
);
@use "sass:map";
@use "@angular/material" as mat;
@include mat.stepper-overrides(
(
container-color: var(--mat-card-elevated-container-color),
)
);

16
Web/public/scss/override-component/_table.scss
View File

@@ -1,8 +1,8 @@
@use "sass:map";
@use "@angular/material" as mat;
@include mat.table-overrides(
(
background-color: var(--mat-card-elevated-container-color),
)
);
@use "sass:map";
@use "@angular/material" as mat;
@include mat.table-overrides(
(
background-color: var(--mat-card-elevated-container-color),
)
);

50
Web/public/scss/override-component/_theme.scss
View File

@@ -1,25 +1,25 @@
@use "sass:map";
@use "@angular/material" as mat;
@use "../variables" as *;
html {
@include mat.theme(
(
color: mat.$azure-palette,
typography: $font-family,
)
);
@include mat.theme-overrides(
(
primary: rgb(93, 135, 255),
error: rgb(250, 137, 107),
body-medium-size: 14px,
body-large-size: 14px,
outline-variant: #d7dde2,
level1: 0px 12px 24px -4px rgb(145 158 171 / 30%),
level2: rgba(145, 158, 171, 0.12) 0px 1px 16px,
level3: 0px 12px 24px -4px rgb(145 158 171 / 30%),
)
);
}
@use "sass:map";
@use "@angular/material" as mat;
@use "../variables" as *;
html {
@include mat.theme(
(
color: mat.$azure-palette,
typography: $font-family,
)
);
@include mat.theme-overrides(
(
primary: rgb(93, 135, 255),
error: rgb(250, 137, 107),
body-medium-size: 14px,
body-large-size: 14px,
outline-variant: #d7dde2,
level1: 0px 12px 24px -4px rgb(145 158 171 / 30%),
level2: rgba(145, 158, 171, 0.12) 0px 1px 16px,
level3: 0px 12px 24px -4px rgb(145 158 171 / 30%),
)
);
}

16
Web/public/scss/override-component/_tree.scss
View File

@@ -1,8 +1,8 @@
@use "sass:map";
@use "@angular/material" as mat;
@include mat.tree-overrides(
(
container-background-color: var(--mat-card-elevated-container-color),
)
);
@use "sass:map";
@use "@angular/material" as mat;
@include mat.tree-overrides(
(
container-background-color: var(--mat-card-elevated-container-color),
)
);

18
Web/public/scss/override-component/_typography.scss
View File

@@ -1,9 +1,9 @@
@use "../variables" as *;
html {
.mdc-list-item__primary-text,
.mat-drawer-container,
.mat-drawer,
.text-body {
color: $text-color;
}
}
@use "../variables" as *;
html {
.mdc-list-item__primary-text,
.mat-drawer-container,
.mat-drawer,
.text-body {
color: $text-color;
}
}