Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-16 15:40:11 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(dashboard): improve charts and other cards for correct theme switching

Browse source
This commit is contained in:
KostyaDanovsky 2017-08-07 16:12:38 +03:00
parent 3880ab3d74
commit f630a1d540
20 changed files with 280 additions and 138 deletions
Download patch file Download diff file Expand all files Collapse all files

18
src/app/@theme/styles/theme.cosmic.ts
View file

@ -12,18 +12,24 @@ export const COSMIC_THEME = {
],
solar: {
color: '#19977E',
shadowColor: 'rgba(0, 217, 119, 0.3)',
gradientLeft: '#7bff24',
gradientRight: '#2ec7fe',
shadowColor: '#19977E',
radius: ['70%', '90%'],
},
traffic: {
colorBlack: '#000000',
tooltipBg: 'rgba(0, 255, 170, 0.35)',
lineBg: 'rgba(146, 141, 255, 0.5)',
shadowLineBg: '#bdbaff',
shadowLineDarkBg: '#a695ff',
tooltipBorderColor: '#00d977',
tooltipExtraCss: 'box-shadow: 0px 2px 46px 0 rgba(0, 255, 170, 0.35); border-radius: 10px; padding: 4px 16px;',
tooltipTextColor: '#ffffff',
lineBg: '#d1d1ff',
lineShadowBlur: '14',
itemColor: '#BEBBFF',
itemBorderColor: '#ffffff',
itemEmphasisBorderColor: '#ffffff',
shadowLineDarkBg: '#655ABD',
shadowLineShadow: 'rgba(33, 7, 77, 0.5)',
gradFrom: 'rgba(118, 89, 255, 0.4)',
gradTo: 'rgba(164, 84, 255, 0.5)',
@ -34,7 +40,7 @@ export const COSMIC_THEME = {
tooltipLineColor: 'rgba(255, 255, 255, 0.1)',
tooltipLineWidth: '1',
tooltipBorderColor: '#00d977',
tooltipExtraCss: 'box-shadow: 0px 2px 46px 0 rgba(0, 255, 170, 0.35);border-radius: 10px;padding: 8px 24px;',
tooltipExtraCss: 'box-shadow: 0px 2px 46px 0 rgba(0, 255, 170, 0.35); border-radius: 10px; padding: 8px 24px;',
tooltipTextColor: '#ffffff',
xAxisColor: 'rgba(161, 161 ,229, 0.3)',

30
src/app/@theme/styles/theme.default.ts
View file

@ -6,21 +6,27 @@ export const DEFAULT_THEME = {
temperature: ['#42db7d'],
solar: {
color: '#19977E',
shadowColor: 'rgba(0, 217, 119, 0.3)',
gradientLeft: '#7bff24',
gradientRight: '#2ec7fe',
gradientLeft: '#42db7d',
gradientRight: '#42db7d',
shadowColor: 'rgba(0, 0, 0, 0)',
radius: ['80%', '90%'],
},
traffic: {
colorBlack: '#000000',
tooltipBg: 'rgba(0, 255, 170, 0.35)',
lineBg: 'rgba(146, 141, 255, 0.5)',
shadowLineBg: '#bdbaff',
shadowLineDarkBg: '#a695ff',
shadowLineShadow: 'rgba(33, 7, 77, 0.5)',
gradFrom: 'rgba(118, 89, 255, 0.4)',
gradTo: 'rgba(164, 84, 255, 0.5)',
tooltipBg: '#ffffff',
tooltipBorderColor: '#c0c8d1',
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
tooltipTextColor: '#222222',
lineBg: '#c0c8d1',
lineShadowBlur: '1',
itemColor: '#bcc3cc',
itemBorderColor: '#bcc3cc',
itemEmphasisBorderColor: '#42db7d',
shadowLineDarkBg: 'rgba(0, 0, 0, 0)',
shadowLineShadow: 'rgba(0, 0, 0, 0)',
gradFrom: '#ebeef2',
gradTo: '#ebeef2',
},
electricity: {
@ -28,7 +34,7 @@ export const DEFAULT_THEME = {
tooltipLineColor: 'rgba(0, 0, 0, 0)',
tooltipLineWidth: '0',
tooltipBorderColor: '#ebeef2',
tooltipExtraCss: 'border-radius: 10px;padding: 8px 24px;',
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
tooltipTextColor: '#222222',
xAxisColor: 'rgba(0, 0, 0, 0)',

5
src/app/pages/dashboard/contacts/contacts.component.scss
View file

@ -20,7 +20,10 @@
justify-content: space-between;
color: nb-theme(color-fg);
padding: 1rem;
border-bottom: 1px solid nb-theme(separator);
&:not(:last-child) {
border-bottom: 1px solid nb-theme(separator);
}
}
.i-contact {

2
src/app/pages/dashboard/electricity/electricity-chart/electricity-chart.component.ts
View file

@ -35,7 +35,7 @@ export class ElectricityChartComponent implements AfterViewInit {
// }
this.data = points.map((p, index) => ({
label: (index % 3 === 2) ? `${Math.round(index / 3)}` : '',
label: (index % 5 === 3) ? `${Math.round(index / 5)}` : '',
value: p,
}));
}

9
src/app/pages/dashboard/electricity/electricity.component.scss
View file

@ -55,8 +55,8 @@
position: absolute;
content: '';
width: 100%;
height: 0.25rem;
border-radius: 0.125rem;
height: 5px;
border-radius: 2.5px;
bottom: 0;
left: 0;
background: nb-theme(color-success);
@ -92,6 +92,7 @@
align-items: center;
justify-content: space-between;
padding: 1rem;
color: nb-theme(color-fg);
&:not(:first-child) {
border-top: 1px solid nb-theme(separator);
@ -171,10 +172,10 @@
.stats-block {
margin-right: 3rem;
color: nb-theme(color-fg);
.subtitle {
font-size: 1.125rem;
font-weight: nb-theme(font-weight-light);
font-size: 1.125rem;
}
.value {

2
src/app/pages/dashboard/rooms/room-selector/room-selector.component.html
View file

@ -4,7 +4,7 @@
<defs>
<filter id="f2" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur result="blurOut" in="StrokePaint" stdDeviation="3" />
<feGaussianBlur result="blurOut" in="StrokePaint" stdDeviation="3"/>
</filter>
<pattern id="New_Pattern_Swatch_1" data-name="New Pattern Swatch 1" width="60" height="60"

50
src/app/pages/dashboard/rooms/room-selector/room-selector.component.scss
View file

@ -16,7 +16,7 @@
.stroke-pattern {
fill: none;
stroke: #a1a1e5;
stroke: #bdc4cd;
stroke-miterlimit: 10;
opacity: 0.1;
stroke-width: 1px;
@ -24,14 +24,14 @@
.stroked-element {
stroke-width: 4px;
stroke: #a1a1e5;
stroke: #bdc4cd;
stroke-miterlimit: 10;
fill: url('#New_Pattern_Swatch_1');
}
.room-border {
stroke-width: 4px;
stroke: #a1a1e5;
stroke: #bdc4cd;
stroke-miterlimit: 10;
fill: none;
transition: stroke 0.4s ease-out;
@ -54,26 +54,18 @@
.room-text {
cursor: pointer;
user-select: none;
fill: #fff;
fill: nb-theme(color-fg);
}
.selected-room {
z-index: 40;
.room-bg {
//stroke: rgba(0, 255, 170, 1);
fill: rgba(0, 255, 170, 0.2);
filter: url('#f2');
}
.room-bg-border-grad {
stroke: rgba(0, 255, 170, 1);
filter: url('#f2');
.room-text {
fill: nb-theme(color-fg-heading);
font-weight: nb-theme(font-weight-bold);
}
.room-border {
stroke: #00f9a6;
}
.room-border-glow {
filter: url('#f2');
stroke: nb-theme(color-success);
}
}
@ -86,4 +78,30 @@
color: nb-theme(color-fg-heading);
padding: 1.25rem;
}
@include nb-for-theme(cosmic) {
.stroke-pattern, .stroked-element, .room-border {
stroke: #a1a1e5;
}
.room-text {
fill: nb-theme(color-fg-heading);
}
.selected-room {
.room-text {
font-weight: nb-theme(font-weight-normal);
}
.room-bg {
fill: rgba(0, 255, 170, 0.2);
filter: url('#f2');
}
.room-border {
stroke: #00f9a6;
}
.room-border-glow {
filter: url('#f2');
}
}
}
}

86
src/app/pages/dashboard/security-cameras/security-cameras.component.scss
View file

@ -46,8 +46,7 @@
a.active {
background-color: nb-theme(color-bg-active);
color: nb-theme(color-fg-highlight);
text-shadow: 0 0 12px rgba(nb-theme(color-fg-highlight), 0.4);
color: nb-theme(color-fg-heading);
border: none;
}
}
@ -56,38 +55,6 @@
display: flex;
flex-wrap: wrap;
height: 100%;
.camera {
position: relative;
background-position: center;
background-size: cover;
height: 50%;
width: 50%;
span {
position: absolute;
bottom: 0;
width: 100%;
color: white;
background: rgba(88, 73, 184, 0.5);
font-size: 1rem;
padding: 0.5rem 1rem;
}
}
.camera::before {
background-color: black;
content: '';
position: absolute;
width: 100%;
height: 100%;
opacity: 0.2;
transition: 0.1s;
}
.camera:hover::before {
opacity: 0;
}
}
.cameras.single-view {
@ -101,6 +68,40 @@
}
}
.camera {
position: relative;
background-position: center;
background-size: cover;
height: 50%;
width: 50%;
span {
position: absolute;
bottom: 0;
width: 100%;
color: white;
background: rgba(0, 0, 0, 0.4);
font-family: nb-theme(font-family-secondary);
font-size: 1rem;
font-weight: nb-theme(font-weight-bold);
padding: 0.5rem 1rem;
}
&::before {
background-color: rgba(255, 255, 255, 0.1);
content: '';
position: absolute;
width: 100%;
height: 100%;
opacity: 1;
transition: 0.2s;
}
&:hover::before {
opacity: 0;
}
}
nb-action {
i {
color: nb-theme(color-fg);
@ -115,4 +116,21 @@
text-transform: uppercase;
}
}
@include nb-for-theme(cosmic) {
.cameras-filter a.active {
color: nb-theme(color-fg-highlight);
text-shadow: 0 0 12px rgba(nb-theme(color-fg-highlight), 0.4);
}
.camera {
span {
background: rgba(88, 73, 184, 0.5);
}
&::before {
background-color: rgba(0, 0, 0, 0.2);
}
}
}
}

2
src/app/pages/dashboard/security-cameras/security-cameras.component.ts
View file

@ -1,4 +1,4 @@
import { Component, OnInit } from '@angular/core';
import { Component } from '@angular/core';
@Component({
selector: 'ngx-security-cameras',

36
src/app/pages/dashboard/solar/solar.component.scss
View file

@ -4,6 +4,7 @@
display: flex;
height: 100%;
color: nb-theme(color-fg);
.echart {
flex: 1;
@ -11,6 +12,29 @@
width: 40%;
}
.date {
font-size: 1.25rem;
font-weight: nb-theme(font-weight-bolder);
margin-bottom: 0.5rem;
}
.value {
font-family: nb-theme(font-secondary);
font-size: 2rem;
font-weight: nb-theme(font-weight-bold);
color: nb-theme(color-fg-heading);
}
.details {
font-size: 1.25rem;
font-weight: nb-theme(font-weight-bold);
line-height: 1;
span {
font-size: 1rem;
font-weight: nb-theme(font-weight-light);
}
}
.text-hint {
font-size: 1rem;
}
@ -21,4 +45,16 @@
flex: 1;
align-self: center;
}
@include nb-for-theme(cosmic) {
color: nb-theme(color-fg-heading);
.value {
color: nb-theme(color-success);
}
.details span {
color: nb-theme(color-fg);
}
}
}

34
src/app/pages/dashboard/solar/solar.component.ts
View file

@ -1,4 +1,4 @@
import { Component, Input } from '@angular/core';
import { AfterViewInit, Component, Input } from '@angular/core';
import { NbThemeService } from '@nebular/theme';
declare const echarts: any;
@ -10,25 +10,23 @@ declare const echarts: any;
<div echarts [options]="option" class="echart">
</div>
<div class="info">
<h5 class="mb-3">June 7, 2017</h5>
<h2 class="text-success">6. 421 kWh</h2>
<h5><span class="text-hint">out of</span> 8.421 kWh</h5>
<div class="date">June 7, 2017</div>
<div class="value">6. 421 kWh</div>
<div class="details"><span>out of</span> 8.421 kWh</div>
</div>
`,
})
export class SolarComponent {
export class SolarComponent implements AfterViewInit {
@Input() chartValue: number;
option: any = {};
@Input('chartValue')
set chartValue(value: number) {
this.option.series[0].data[0].value = value;
this.option.series[0].data[1].value = 100 - value;
this.option.series[1].data[0].value = value;
constructor(private theme: NbThemeService) {
}
constructor(private theme: NbThemeService) {
this.theme.getJsTheme().subscribe(config => {
ngAfterViewInit() {
this.theme.getJsTheme().delay(1).subscribe(config => {
const solarTheme: any = config.variables.solar;
@ -44,10 +42,10 @@ export class SolarComponent {
hoverAnimation: false,
type: 'pie',
center: ['35%', '50%'],
radius: ['70%', '90%'],
radius: solarTheme.radius,
data: [
{
value: 72,
value: this.chartValue,
name: ' ',
label: {
normal: {
@ -75,7 +73,7 @@ export class SolarComponent {
color: solarTheme.gradientRight,
},
]),
shadowColor: solarTheme.gradientLeft,
shadowColor: solarTheme.shadowColor,
shadowBlur: 0,
shadowOffsetX: 0,
shadowOffsetY: 3,
@ -84,7 +82,7 @@ export class SolarComponent {
hoverAnimation: false,
},
{
value: 28,
value: 100 - this.chartValue,
name: ' ',
tooltip: {
show: false,
@ -108,10 +106,10 @@ export class SolarComponent {
hoverAnimation: false,
type: 'pie',
center: ['35%', '50%'],
radius: ['70%', '90%'],
radius: solarTheme.radius,
data: [
{
value: 72,
value: this.chartValue,
name: ' ',
label: {
normal: {

46
src/app/pages/dashboard/status-card/status-card.component.scss
View file

@ -13,15 +13,20 @@
box-shadow: $bevel, $shadow;
transition: all 0.1s ease-out;
$border-radius: nb-theme(card-border-radius);
.icon-container {
height: 100%;
padding: 0.625rem;
border-right: 1px solid nb-theme(separator);
}
.icon {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 7rem;
font-size: 4em;
border-radius: $border-radius 0 0 $border-radius;
width: 5.75rem;
height: 4.75rem;
font-size: 3.5rem;
border-radius: nb-theme(card-border-radius);
transition: all 0.1s ease-out, color 0s;
color: nb-theme(color-white);
@ -46,7 +51,7 @@
&:hover {
background: lighten(nb-theme(card-bg), 5%);
.icon-container {
.icon {
&.primary {
background-image: btn-hero-primary-light-gradient();
}
@ -66,7 +71,7 @@
box-shadow: none;
background: nb-theme(card-bg);
.icon-container {
.icon {
&.primary, &.success, &.info, &.warning {
box-shadow: none;
}
@ -89,6 +94,10 @@
color: nb-theme(card-fg);
.icon-container {
border-right: 1px solid nb-theme(separator);
}
.icon {
color: nb-theme(card-fg);
&.primary, &.success, &.info, &.warning {
@ -97,9 +106,6 @@
}
}
.details {
border-left: 1px solid nb-theme(separator);
}
.title {
color: nb-theme(card-fg);
}
@ -128,4 +134,24 @@
color: nb-theme(card-fg);
}
}
@include nb-for-theme(cosmic) {
nb-card {
.icon-container {
padding: 0;
border-right: none;
}
.icon {
width: 7rem;
height: 100%;
font-size: 4em;
border-radius: nb-theme(card-border-radius) 0 0 nb-theme(card-border-radius);
}
.status {
font-weight: nb-theme(font-weight-light);
}
}
}
}

6
src/app/pages/dashboard/status-card/status-card.component.ts
View file

@ -5,8 +5,10 @@ import { Component, Input } from '@angular/core';
styleUrls: ['./status-card.component.scss'],
template: `
<nb-card (click)="on = !on" [ngClass]="{'off': !on}">
<div class="icon-container {{ type }}">
<ng-content></ng-content>
<div class="icon-container">
<div class="icon {{ type }}">
<ng-content></ng-content>
</div>
</div>
<div class="details">

4
src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.html
View file

@ -26,9 +26,7 @@
</g>
<circle [attr.cx]="styles.thumbPosition.x" [attr.cy]="styles.thumbPosition.y" [attr.r]="pinRadius"
[attr.stroke-width]="1 / scaleFactor" fill="#FFFFFF" stroke="none"></circle>
<circle [attr.cx]="styles.thumbPosition.x" [attr.cy]="styles.thumbPosition.y" [attr.r]="pinDashRadius"
[attr.stroke-width]="2 / scaleFactor" fill="none" stroke="#FFFFFF" stroke-linecap="round" stroke-dasharray="1, 6" *ngIf="pinDashRadius"></circle>
[attr.stroke-width]="thumbBorder / scaleFactor" class="circle"></circle>
</g>
</svg>
</div>

21
src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.scss
View file

@ -12,6 +12,11 @@
z-index: 2;
}
.circle {
fill: nb-theme(color-bg);
stroke: nb-theme(color-success);
}
.temperature-bg {
position: absolute;
width: 88%;
@ -47,12 +52,11 @@
display: flex;
align-items: center;
justify-content: center;
box-shadow: nb-theme(card-shadow);
cursor: pointer;
font-size: 2.5rem;
color: nb-theme(color-fg-heading);
text-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
transition: all 0.1s ease-out;
border: 2px solid nb-theme(separator);
&:hover {
background-color: lighten(nb-theme(card-bg), 5%);
@ -68,4 +72,17 @@
text-shadow: none;
}
}
@include nb-for-theme(cosmic) {
.circle {
fill: nb-theme(color-fg-heading);
stroke: nb-theme(color-fg-heading);
}
.power-bg {
border: none;
box-shadow: nb-theme(card-shadow);
text-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
}
}
}

9
src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.ts
View file

@ -18,8 +18,8 @@ export class TemperatureDraggerComponent implements AfterViewInit, OnChanges {
@Input() disableArcColor: string = '#999999';
@Input() bottomAngle: number = 90;
@Input() arcThickness: number = 18; // CSS pixels
@Input() thumbRadius: number = 15; // CSS pixels
@Input() thumbDashRadius: number = null;
@Input() thumbRadius: number = 16; // CSS pixels
@Input() thumbBorder: number = 3;
@Input() maxLeap: number = 0.4;
value: number = 50;
@ -61,7 +61,6 @@ export class TemperatureDraggerComponent implements AfterViewInit, OnChanges {
translateYValue = 0;
thickness = 6;
pinRadius = 10;
pinDashRadius = null;
colors: any = [];
styles = {
@ -133,7 +132,7 @@ export class TemperatureDraggerComponent implements AfterViewInit, OnChanges {
const svgBoundingRect = this.svgRoot.nativeElement.getBoundingClientRect();
const svgAreaFactor = svgBoundingRect.height && svgBoundingRect.width / svgBoundingRect.height || 1;
const svgHeight = VIEW_BOX_SIZE / svgAreaFactor;
const thumbMaxRadius = Math.max(this.thumbRadius, this.thumbDashRadius);
const thumbMaxRadius = this.thumbRadius + this.thumbBorder;
const thumbMargin = 2 * thumbMaxRadius > this.arcThickness
? (thumbMaxRadius - this.arcThickness / 2) / this.scaleFactor
: 0;
@ -151,7 +150,6 @@ export class TemperatureDraggerComponent implements AfterViewInit, OnChanges {
} else {
this.radius = VIEW_BOX_SIZE / 2 - thumbMargin;
}
} else {
this.radius = (svgHeight - 2 * thumbMargin) / (1 + Math.cos(halfAngle));
}
@ -163,7 +161,6 @@ export class TemperatureDraggerComponent implements AfterViewInit, OnChanges {
this.thickness = this.arcThickness / this.scaleFactor;
this.pinRadius = this.thumbRadius / this.scaleFactor;
this.pinDashRadius = this.thumbDashRadius && this.thumbDashRadius / this.scaleFactor;
}
private calculateClipPathSettings() {

4
src/app/pages/dashboard/temperature/temperature.component.html
View file

@ -51,8 +51,8 @@
</ngx-temperature-dragger>
</div>
<div [(ngModel)]="humidityMode" ngbRadioGroup class="btn-group btn-group-block btn-group-divided-hidden"
data-toggle="buttons">
<div [(ngModel)]="humidityMode" ngbRadioGroup data-toggle="buttons"
class="btn-group btn-divided-group btn-outline-divided-group btn-group-full-width">
<label class="btn btn-icon">
<input type="radio" value="cool"/><i class="ion-ios-snowy"></i>
</label>

15
src/app/pages/dashboard/temperature/temperature.component.scss
View file

@ -104,8 +104,7 @@
&.active {
border-color: nb-theme(color-fg-highlight);
box-shadow: 0 2px 12px 0 rgba(nb-theme(color-fg-highlight), 0.25);
background-color: rgba(nb-theme(color-fg-highlight), 0.25);
color: nb-theme(color-success);
}
i {
@ -125,4 +124,16 @@
font-size: 1.75rem;
}
}
@include nb-for-theme(cosmic) {
.btn-icon {
border-color: nb-theme(form-control-border-color);
&.active {
border-color: nb-theme(color-fg-highlight);
box-shadow: 0 2px 12px 0 rgba(nb-theme(color-fg-highlight), 0.25);
background-color: rgba(nb-theme(color-fg-highlight), 0.25);
}
}
}
}

28
src/app/pages/dashboard/traffic/traffic-chart.component.ts
View file

@ -62,12 +62,16 @@ export class TrafficChartComponent implements AfterViewInit {
axisPointer: {
type: 'shadow',
},
textStyle: {
color: trafficTheme.tooltipTextColor,
fontSize: 16,
},
position: 'top',
backgroundColor: trafficTheme.tooltipBg,
borderColor: config.variables.colorSuccess,
borderColor: trafficTheme.tooltipBorderColor,
borderWidth: 3,
formatter: '{c0} MB',
extraCssText: `box-shadow: 0px 2px 46px 0 ${trafficTheme.tooltipBg};border-radius: 10px;padding: 5px 20px;`,
extraCssText: trafficTheme.tooltipExtraCss,
},
series: [
{
@ -78,7 +82,7 @@ export class TrafficChartComponent implements AfterViewInit {
silent: true,
itemStyle: {
normal: {
color: trafficTheme.lineBg,
color: trafficTheme.shadowLineDarkBg,
},
emphasis: {
color: 'rgba(0,0,0,0)',
@ -89,7 +93,7 @@ export class TrafficChartComponent implements AfterViewInit {
lineStyle: {
normal: {
width: 2,
color: trafficTheme.lineBg,
color: trafficTheme.shadowLineDarkBg,
},
},
data: points.map(p => p - 15),
@ -101,26 +105,22 @@ export class TrafficChartComponent implements AfterViewInit {
sampling: 'average',
itemStyle: {
normal: {
color: trafficTheme.shadowLineBg,
borderColor: 'white',
color: trafficTheme.itemColor,
borderColor: trafficTheme.itemBorderColor,
borderWidth: 2,
shadowColor: trafficTheme.shadowLineShadow,
shadowOffsetX: 0,
shadowOffsetY: -3,
shadowBlur: 10,
},
emphasis: {
color: 'white',
borderColor: 'rgba(0,0,0,0)',
borderWidth: 5,
borderColor: trafficTheme.itemEmphasisBorderColor,
borderWidth: 2,
},
},
lineStyle: {
normal: {
width: 2,
color: trafficTheme.lineBg,
shadowColor: trafficTheme.shadowLineDarkBg,
shadowBlur: 14,
shadowColor: trafficTheme.lineBg,
shadowBlur: trafficTheme.lineShadowBlur,
},
},
areaStyle: {

11
src/app/pages/dashboard/weather/weather.component.scss
View file

@ -50,9 +50,14 @@
.icon {
font-size: 10rem;
line-height: 10rem;
text-shadow: 0 3px 0 #665ebd,
0 4px 10px rgba(33, 7, 77, 0.5),
0 2px 10px #928dff;
color: nb-theme(color-success);
@include nb-for-theme(cosmic) {
color: nb-theme(color-fg);
text-shadow: 0 3px 0 #665ebd,
0 4px 10px rgba(33, 7, 77, 0.5),
0 2px 10px #928dff;
}
}
}