Feature/upgrade angular material css vars to 2.0.0 (#200)
* Upgrade angular-material-css-vars * Update changelog
This commit is contained in:
Thomas
GitHub
parent
0d65136a9e
commit
fbe590ddb9
@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
||||
|
||||
- Upgraded `@angular/cdk` and `@angular/material` from version `11.0.4` to `12.0.6`
|
||||
- Upgraded `@nestjs` dependencies
|
||||
- Upgraded `angular-material-css-vars` from version `1.2.0` to `2.0.0`
|
||||
- Upgraded `Nx` from version `12.3.6` to `12.5.4`
|
||||
|
||||
## 1.23.1 - 03.07.2021
|
||||
|
||||
@ -7,10 +7,6 @@
|
||||
.create-account-box {
|
||||
cursor: pointer;
|
||||
font-size: 90%;
|
||||
|
||||
.link {
|
||||
color: rgba(var(--palette-primary-500), 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -5,10 +5,7 @@
|
||||
z-index: 999;
|
||||
|
||||
.mat-toolbar {
|
||||
background-color: rgba(
|
||||
var(--light-primary-text),
|
||||
var(--palette-foreground-disabled-alpha)
|
||||
);
|
||||
background-color: rgba(var(--light-disabled-text));
|
||||
|
||||
.spacer {
|
||||
flex: 1 1 auto;
|
||||
@ -28,11 +25,6 @@
|
||||
|
||||
:host-context(.is-dark-theme) {
|
||||
.mat-toolbar {
|
||||
background-color: rgba(
|
||||
39,
|
||||
39,
|
||||
39,
|
||||
var(--palette-foreground-disabled-alpha)
|
||||
);
|
||||
background-color: rgba(39, 39, 39, $alpha-disabled-text);
|
||||
}
|
||||
}
|
||||
|
||||
@ -8,7 +8,7 @@ import {
|
||||
ViewChild
|
||||
} from '@angular/core';
|
||||
import { UNKNOWN_KEY } from '@ghostfolio/common/config';
|
||||
import { getCssVariable, getTextColor } from '@ghostfolio/common/helper';
|
||||
import { getTextColor } from '@ghostfolio/common/helper';
|
||||
import { PortfolioPosition } from '@ghostfolio/common/interfaces';
|
||||
import { Currency } from '@prisma/client';
|
||||
import { Tooltip } from 'chart.js';
|
||||
@ -43,9 +43,7 @@ export class PortfolioProportionChartComponent
|
||||
private colorMap: {
|
||||
[symbol: string]: string;
|
||||
} = {
|
||||
[UNKNOWN_KEY]: `rgba(${getTextColor()}, ${getCssVariable(
|
||||
'--palette-foreground-divider-alpha'
|
||||
)})`
|
||||
[UNKNOWN_KEY]: `rgba(${getTextColor()}, 0.12)`
|
||||
};
|
||||
|
||||
public constructor() {
|
||||
|
||||
@ -1,12 +1,11 @@
|
||||
@import '~apps/client/src/styles/ghostfolio-style';
|
||||
|
||||
:host {
|
||||
display: block;
|
||||
|
||||
gf-position {
|
||||
&:nth-child(even) {
|
||||
background-color: rgba(
|
||||
var(--dark-primary-text),
|
||||
var(--palette-background-hover-alpha)
|
||||
);
|
||||
background-color: rgba(0, 0, 0, $alpha-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -14,10 +13,7 @@
|
||||
:host-context(.is-dark-theme) {
|
||||
gf-position {
|
||||
&:nth-child(even) {
|
||||
background-color: rgba(
|
||||
var(--light-primary-text),
|
||||
var(--palette-background-hover-alpha)
|
||||
);
|
||||
background-color: rgba(255, 255, 255, $alpha-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -7,10 +7,7 @@
|
||||
padding: 0.15rem 0.75rem;
|
||||
|
||||
&.mat-radio-checked {
|
||||
background-color: rgba(
|
||||
var(--dark-primary-text),
|
||||
var(--palette-foreground-divider-alpha)
|
||||
);
|
||||
background-color: rgba(var(--dark-dividers));
|
||||
}
|
||||
|
||||
::ng-deep {
|
||||
@ -33,15 +30,8 @@
|
||||
:host-context(.is-dark-theme) {
|
||||
.mat-radio-button {
|
||||
&.mat-radio-checked {
|
||||
background-color: rgba(
|
||||
var(--light-primary-text),
|
||||
var(--palette-foreground-divider-alpha)
|
||||
);
|
||||
border: 1px solid
|
||||
rgba(
|
||||
var(--light-primary-text),
|
||||
var(--palette-foreground-disabled-button-alpha)
|
||||
);
|
||||
background-color: rgba(var(--light-dividers));
|
||||
border: 1px solid rgba(var(--light-disabled-text));
|
||||
}
|
||||
|
||||
::ng-deep {
|
||||
|
||||
@ -43,10 +43,7 @@ body {
|
||||
}
|
||||
|
||||
hr {
|
||||
border-top-color: rgba(
|
||||
var(--light-primary-text),
|
||||
var(--palette-foreground-divider-alpha)
|
||||
);
|
||||
border-top-color: rgba(var(--light-dividers));
|
||||
}
|
||||
|
||||
ngx-skeleton-loader {
|
||||
@ -63,10 +60,7 @@ body {
|
||||
background: var(--dark-background);
|
||||
|
||||
&:not([class*='mat-elevation-z']) {
|
||||
border-color: rgba(
|
||||
var(--light-primary-text),
|
||||
var(--palette-foreground-divider-alpha)
|
||||
);
|
||||
border-color: rgba(var(--light-dividers));
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
@ -102,8 +96,7 @@ button:focus {
|
||||
}
|
||||
|
||||
hr {
|
||||
border-top: 1px solid
|
||||
rgba(var(--dark-primary-text), var(--palette-foreground-divider-alpha));
|
||||
border-top: 1px solid rgba(var(--dark-dividers));
|
||||
}
|
||||
|
||||
ion-icon {
|
||||
@ -138,8 +131,7 @@ ngx-skeleton-loader {
|
||||
|
||||
.mat-card {
|
||||
&:not([class*='mat-elevation-z']) {
|
||||
border: 1px solid
|
||||
rgba(var(--dark-primary-text), var(--palette-foreground-divider-alpha));
|
||||
border: 1px solid rgba(var(--dark-dividers));
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,6 +2,9 @@ $mat-css-dark-theme-selector: '.is-dark-theme';
|
||||
|
||||
@import '~angular-material-css-vars/public-util';
|
||||
|
||||
$alpha-disabled-text: 0.38;
|
||||
$alpha-hover: 0.04;
|
||||
|
||||
.gf-table {
|
||||
td {
|
||||
border: 0;
|
||||
|
||||
@ -26,11 +26,15 @@ export function getCssVariable(aCssVariable: string) {
|
||||
}
|
||||
|
||||
export function getTextColor() {
|
||||
return getCssVariable(
|
||||
const cssVariable = getCssVariable(
|
||||
window.matchMedia('(prefers-color-scheme: dark)').matches
|
||||
? '--light-primary-text'
|
||||
: '--dark-primary-text'
|
||||
);
|
||||
|
||||
const [r, g, b] = cssVariable.split(',');
|
||||
|
||||
return `${r}, ${g}, ${b}`;
|
||||
}
|
||||
|
||||
export function getToday() {
|
||||
|
||||
@ -71,7 +71,7 @@
|
||||
"@simplewebauthn/typescript-types": "3.0.0",
|
||||
"@stripe/stripe-js": "1.15.0",
|
||||
"alphavantage": "2.2.0",
|
||||
"angular-material-css-vars": "1.2.0",
|
||||
"angular-material-css-vars": "2.0.0",
|
||||
"bent": "7.3.12",
|
||||
"bootstrap": "4.6.0",
|
||||
"cache-manager": "3.4.3",
|
||||
|
||||
@ -3427,10 +3427,10 @@ alphavantage@2.2.0:
|
||||
dependencies:
|
||||
cross-fetch "^3.0.5"
|
||||
|
||||
angular-material-css-vars@1.2.0:
|
||||
version "1.2.0"
|
||||
resolved "https://registry.yarnpkg.com/angular-material-css-vars/-/angular-material-css-vars-1.2.0.tgz#edfa6dba8a862a250fb909112ebf588a1b0bd868"
|
||||
integrity sha512-n1QApHYOPjdSNVQROltWCk7gP/eSNh227EB4T8toAS2pNWEYVO2hCm/Vsg4VmhyGXyEhrnYfJJoUUok/jWjJSA==
|
||||
angular-material-css-vars@2.0.0:
|
||||
version "2.0.0"
|
||||
resolved "https://registry.yarnpkg.com/angular-material-css-vars/-/angular-material-css-vars-2.0.0.tgz#a7df8380e8f781c31eeea7171b1cbd5bb91b8e4e"
|
||||
integrity sha512-20zCLolohn0ihGsK0+WgEN370jk9NabOQcUBEt7se9DtKzIVhXyvCRDkkQBVxwdP6kw9+J+oA3pZ6szJka4yXw==
|
||||
dependencies:
|
||||
"@ctrl/tinycolor" "^2.6.0"
|
||||
tslib "^2.0.0"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user