Skip to content
Snippets Groups Projects
Commit d3c45e4e authored by OZGCloud's avatar OZGCloud
Browse files

Merge branch 'master' of git.ozg-sh.de:mgm/goofy

parents 7857c40d 0c0cf703
No related branches found
No related tags found
No related merge requests found
Showing
with 92 additions and 54 deletions
@import "~@angular/material/theming";
@use '~@angular/material' as mat;
$grey: #777;
......@@ -9,11 +9,11 @@ $shadow-bottom: inset 0 -1px 0 rgba(#000, 0.08);
$header-height: 64px;
$navigation-width: 20px;
$primaryPalette: mat-palette($mat-blue, 700, 300, 900);
$accentPalette: mat-palette($mat-yellow, 600, 300, 800);
$warnPalette: mat-palette($mat-red, 500, 300, 800);
$primaryPalette: mat.define-palette(mat.$blue-palette, 700, 300, 900);
$accentPalette: mat.define-palette(mat.$yellow-palette, 600, 300, 800);
$warnPalette: mat.define-palette(mat.$red-palette, 500, 300, 800);
$goofyTheme: mat-light-theme((
$goofyTheme: mat.define-light-theme((
color: (
primary: $primaryPalette,
accent: $accentPalette,
......@@ -23,10 +23,10 @@ $goofyTheme: mat-light-theme((
// dark theme
$primaryDarkPalette: mat-palette($mat-yellow, 700, 300, 900);
$accentDarkPalette: mat-palette($mat-brown, 600, 300, 800);
$primaryDarkPalette: mat.define-palette(mat.$yellow-palette, 700, 300, 900);
$accentDarkPalette: mat.define-palette(mat.$brown-palette, 600, 300, 800);
$goofyDarkTheme: mat-dark-theme((
$goofyDarkTheme: mat.define-dark-theme((
color: (
primary: $primaryDarkPalette,
accent: $accentDarkPalette,
......
@use '~@angular/material' as mat;
@import "~material-design-icons-iconfont/dist/material-design-icons.css";
//@import url("https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined");
@import "~typeface-roboto/index.css";
......@@ -18,7 +19,7 @@
@import "~libs/user-profile/src/lib/user-profile-in-vorgang-container/user-profile-in-vorgang-container.theme";
@import "~libs/user-profile/src/lib/user-profile-search-container/user-profile-search-container.theme";
@include mat-core();
@include mat.core();
@mixin custom-components-theme($theme) {
@include navigation($theme);
......@@ -30,11 +31,11 @@
@include user-profile-icon($theme);
}
@include angular-material-theme($goofyTheme);
@include mat.all-component-themes($goofyTheme);
@include custom-components-theme($goofyTheme);
body.dark {
@include angular-material-color($goofyDarkTheme);
@include mat.all-component-colors($goofyDarkTheme);
@include custom-components-theme($goofyDarkTheme);
}
@use 'sass:map';
@use '~@angular/material' as mat;
goofy-client-navigation nav a {
&:hover,
&:focus-within {
......@@ -13,7 +16,8 @@ body.dark goofy-client-navigation nav a {
}
@mixin navigation($theme) {
$primary: map-get($theme, primary);
$color-config: mat.get-color-config($theme);
$primary: map.get($color-config, 'primary');
goofy-client-navigation {
a {
......@@ -21,12 +25,12 @@ body.dark goofy-client-navigation nav a {
&.active {
font-weight: 500;
color: mat-color($primary, darker);
background-color: mat-color($primaryPalette, 50);
color: mat.get-color-from-palette($primary, darker);
background-color: mat.get-color-from-palette($primaryPalette, 50);
&:hover,
&:focus-within {
background-color: mat-color($primaryPalette, 50);
background-color: mat.get-color-from-palette($primaryPalette, 50);
}
}
......
@use 'sass:map';
@use '~@angular/material' as mat;
@import "variables";
nav {
......@@ -66,7 +68,7 @@ ul {
width: 32px;
&.active {
background-color: mat-color($primaryPalette, 50);
background-color: mat.get-color-from-palette($primaryPalette, 50);
}
}
......
@use 'sass:map';
@use '~@angular/material' as mat;
@import "variables";
::ng-deep .mat-snack-bar-container {
......@@ -5,7 +7,7 @@
max-width: 90vw;
.mat-button {
color: mat-color($primaryPalette, lighter);
color: mat.get-color-from-palette($primaryPalette, lighter);
}
}
......@@ -14,5 +16,5 @@ button {
}
::ng-deep body.dark .mat-snack-bar-container .mat-button {
color: mat-color($primaryPalette);
color: mat.get-color-from-palette($primaryPalette);
}
@use 'sass:map';
@use '~@angular/material' as mat;
@mixin button-with-spinner($theme) {
$primary: map-get($theme, primary);
$color-config: mat.get-color-config($theme);
$primary: map.get($color-config, 'primary');
goofy-client-button-with-spinner .mat-primary svg path {
fill: mat-color($primary);
fill: mat.get-color-from-palette($primary);
}
}
@use 'sass:map';
@use '~@angular/material' as mat;
@mixin expansion-panel($theme) {
$primary: map-get($theme, primary);
$color-config: mat.get-color-config($theme);
$primary-palette: map.get($color-config, 'primary');
goofy-client-expansion-panel h3 {
color: mat-color($primary);
color: mat.get-color-from-palette($primary-palette);
}
}
......@@ -55,6 +59,6 @@ body.mat-typography goofy-client-expansion-panel {
.dark goofy-client-expansion-panel {
h3 {
color: mat-color($primaryPalette, lighter);
color: mat.get-color-from-palette($primaryPalette, lighter);
}
}
@use 'sass:map';
@use '~@angular/material' as mat;
@mixin user-profile-icon($theme) {
$primary: map-get($theme, primary);
$color-config: mat.get-color-config($theme);
$primary: map.get($color-config, 'primary');
goofy-client-user-profile-in-vorgang-container {
.user-profile-button {
&:focus-within {
.user-profile-icon {
box-shadow: 0 0 0 2px mat-color($primary);
box-shadow: 0 0 0 2px mat.get-color-from-palette($primary);
}
}
.user-profile-icon {
box-shadow: 0 0 0 1px mat-color($primary);
box-shadow: 0 0 0 1px mat.get-color-from-palette($primary);
}
}
}
......
@use 'sass:map';
@use '~@angular/material' as mat;
@mixin vorgang-detail-header($theme) {
$primary: map-get($theme, primary);
$color-config: mat.get-color-config($theme);
$primary: map.get($color-config, 'primary');
goofy-client-vorgang-detail-header h1 {
color: mat-color($primary);
color: mat.get-color-from-palette($primary);
}
}
@use 'sass:map';
@use '~@angular/material' as mat;
@import "variables";
:host {
......@@ -11,14 +13,14 @@
.dot {
border-radius: 50%;
background-color: mat-color($primaryPalette);
background-color: mat.get-color-from-palette($primaryPalette);
margin: 0 29px;
&.angenommen,
&.in_bearbeitung,
&.redirect, // TODO kann raus, wenn der forward status auf deutsch umgestellt wurde
&.weiterleiten {
background-color: mat-color($accentPalette, darker);
background-color: mat.get-color-from-palette($accentPalette, darker);
}
&.verworfen {
......
@use 'sass:map';
@use '~@angular/material' as mat;
goofy-client-vorgang-search-container {
.search-field {
box-shadow: 0 0 0 1px rgba(#000, 0.08);
......@@ -32,11 +35,12 @@ body.dark goofy-client-vorgang-search-container {
}
@mixin search-container($theme) {
$primary: map-get($theme, primary);
$color-config: mat.get-color-config($theme);
$primary: map.get($color-config, 'primary');
goofy-client-vorgang-search-container {
.search-icon {
color: mat-color($primary);
color: mat.get-color-from-palette($primary);
}
}
}
@use 'sass:map';
@use '~@angular/material' as mat;
@import "variables";
button {
......@@ -13,5 +15,5 @@ button {
}
.red:not(.erledigt) {
color: mat-color($warnPalette, darker);
color: mat.get-color-from-palette($warnPalette, darker);
}
@use 'sass:map';
@use '~@angular/material' as mat;
@mixin breadcrumb($theme) {
$primary: map-get($theme, primary);
$color-config: mat.get-color-config($theme);
$primary: map.get($color-config, 'primary');
goofy-client-breadcrumb a {
color: mat-color($primary);
color: mat.get-color-from-palette($primary);
}
}
@use 'sass:map';
@use '~@angular/material' as mat;
@import "variables";
:host {
......@@ -23,13 +25,13 @@
}
&.red:not(.erledigt) {
background-color: mat-color($warnPalette);
border-color: mat-color($warnPalette, darker);
background-color: mat.get-color-from-palette($warnPalette);
border-color: mat.get-color-from-palette($warnPalette, darker);
}
&.yellow:not(.erledigt) {
background-color: mat-color($accentPalette);
border-color: mat-color($accentPalette, darker);
background-color: mat.get-color-from-palette($accentPalette);
border-color: mat.get-color-from-palette($accentPalette, darker);
}
}
......
......@@ -530,12 +530,12 @@
}
},
"@angular/cdk": {
"version": "11.1.2",
"resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-11.1.2.tgz",
"integrity": "sha512-RnKvMWAIcWbWoUdBfAoOs4pQl6t5O+1OuPlBNK5aL2FYqoLv5U0fP88Rf7OhjPlD0ASsPGLG45t+dA5sUVZ46Q==",
"version": "12.1.1",
"resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-12.1.1.tgz",
"integrity": "sha512-MJENa8qmfLAr6t59u1+mEC2YPbCn4n3vsY6k8fKyf+ILXwwGHWNZlYblaRMBjrF/crSx1Kd5vb30RCqIcNTGsA==",
"requires": {
"parse5": "^5.0.0",
"tslib": "^2.0.0"
"tslib": "^2.2.0"
}
},
"@angular/cli": {
......@@ -787,19 +787,19 @@
"dev": true
},
"@angular/material": {
"version": "11.1.2",
"resolved": "https://registry.npmjs.org/@angular/material/-/material-11.1.2.tgz",
"integrity": "sha512-Fyjk6LUrJ+mJmRMrnM2L4Q9pijuhLa8q1G50mUYa81OJPWnhMRlzoM2dDHpS/ibIARpBc3QA8PmF3hUgyLxgMg==",
"version": "12.1.1",
"resolved": "https://registry.npmjs.org/@angular/material/-/material-12.1.1.tgz",
"integrity": "sha512-q2vhbVQfjr+88beqCotCVlaPRyy9y2O2asiR3+0BU9OJ1DjTo1QpBmMpck5InP7Es49t9RTk9RzzC0t18p45yA==",
"requires": {
"tslib": "^2.0.0"
"tslib": "^2.2.0"
}
},
"@angular/material-moment-adapter": {
"version": "11.2.3",
"resolved": "https://registry.npmjs.org/@angular/material-moment-adapter/-/material-moment-adapter-11.2.3.tgz",
"integrity": "sha512-koLpRU3Kiuxhoic+N0JjeJdqRG7fzZJDe83bwqQ991eCDdVbdMd0Xh7cEbFTjnWFQSHdqfMl2dZmHFpvJ46Xwg==",
"version": "12.1.1",
"resolved": "https://registry.npmjs.org/@angular/material-moment-adapter/-/material-moment-adapter-12.1.1.tgz",
"integrity": "sha512-YQs4BFiQ0rCYhWzcPJ6IS6zJRM+iKAjAEo/Z89G4tR1vekA4Fl95PBs9DVoCLS2uptOPL99tnUMqeNtFjUM6wQ==",
"requires": {
"tslib": "^2.0.0"
"tslib": "^2.2.0"
}
},
"@angular/platform-browser": {
......
......@@ -48,13 +48,13 @@
"private": true,
"dependencies": {
"@angular/animations": "12.0.0",
"@angular/cdk": "11.1.2",
"@angular/cdk": "12.1.1",
"@angular/common": "12.0.0",
"@angular/compiler": "12.0.0",
"@angular/core": "12.0.0",
"@angular/forms": "12.0.0",
"@angular/material": "11.1.2",
"@angular/material-moment-adapter": "11.2.3",
"@angular/material": "12.1.1",
"@angular/material-moment-adapter": "12.1.1",
"@angular/platform-browser": "12.0.0",
"@angular/platform-browser-dynamic": "12.0.0",
"@angular/router": "12.0.0",
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment