jingrow/charts
1
0
Fork 0
Code Pull Requests Activity

feat: update variables

Browse Source
This commit is contained in:
Shivam Mishra 2020-10-26 15:00:48 +05:30
parent 8524e6cbd6
commit 03f6436be4
1 changed files with 30 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
src/css/charts.scss
View File

@ -1,15 +1,18 @@
:root {
--fr-label-color: #313b44;
--fr-axis-line-color: #f4f5f6;
--charts-label-color: #313b44;
--charts-axis-line-color: #f4f5f6;
--fr-stroke-width: 2px;
--fr-dataset-circle-stroke: #ffffff;
--fr-dataset-circle-stroke-width: var(--fr-stroke-width);
--charts-tooltip-title: var(--charts-label-color);
--charts-tooltip-label: var(--charts-label-color);
--charts-tooltip-value: #192734;
--charts-tooltip-bg: #ffffff;
--fr-tooltip-title: var(--fr-label-color);
--fr-tooltip-label: var(--fr-label-color);
--fr-tooltip-value: #192734;
--fr-tooltip-bg: #ffffff;
--charts-stroke-width: 2px;
--charts-dataset-circle-stroke: #ffffff;
--charts-dataset-circle-stroke-width: var(--charts-stroke-width);
--charts-legend-label: var(--charts-label-color);
--charts-legend-value: var(--charts-label-color);
}
.chart-container {
@ -21,35 +24,35 @@
.axis,
.chart-label {
fill: var(--fr-label-color);
fill: var(--charts-label-color);
line {
stroke: var(--fr-axis-line-color);
stroke: var(--charts-axis-line-color);
}
}
.dataset-units {
circle {
stroke: var(--fr-dataset-circle-stroke);
stroke-width: var(--fr-dataset-circle-stroke-width);
stroke: var(--charts-dataset-circle-stroke);
stroke-width: var(--charts-dataset-circle-stroke-width);
}
path {
fill: none;
stroke-opacity: 1;
stroke-width: var(--fr-stroke-width);
stroke-width: var(--charts-stroke-width);
}
}
.dataset-path {
stroke-width: var(--fr-stroke-width);
stroke-width: var(--charts-stroke-width);
}
.path-group {
path {
fill: none;
stroke-opacity: 1;
stroke-width: var(--fr-stroke-width);
stroke-width: var(--charts-stroke-width);
}
}
@ -70,12 +73,12 @@
}
.legend-dataset-label {
fill: var(--fr-tooltip-label);
fill: var(--charts-legend-label);
font-weight: 600;
}
.legend-dataset-value {
fill: var(--fr-tooltip-value);
fill: var(--charts-legend-value);
}
}
@ -85,7 +88,7 @@
padding: 10px;
font-size: 12px;
text-align: center;
background: var(--fr-tooltip-bg);
background: var(--charts-tooltip-bg);
box-shadow: 0px 1px 4px rgba(17, 43, 66, 0.1),
0px 2px 6px rgba(17, 43, 66, 0.08),
0px 40px 30px -30px rgba(17, 43, 66, 0.1);
@ -113,7 +116,7 @@
height: 12px;
width: 12px;
border-radius: 2px;
background: var(--fr-tooltip-bg);
background: var(--charts-tooltip-bg);
transform: rotate(45deg);
margin-top: -7px;
margin-left: -6px;
@ -128,11 +131,15 @@
display: block;
padding: 16px;
margin: 0;
color: var(--fr-tooltip-title);
color: var(--charts-tooltip-title);
font-weight: 600;
line-height: 1;
pointer-events: none;
text-transform: uppercase;
strong {
color: var(--charts-tooltip-value);
}
}
ul {
@ -170,11 +177,11 @@
max-width: 150px;
white-space: normal;
color: var(--fr-tooltip-label);
color: var(--charts-tooltip-label);
}
.tooltip-value {
color: var(--fr-tooltip-value);
color: var(--charts-tooltip-value);
}
}
}