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