jingrow/charts
1
0
Fork 0
Code Pull Requests Activity

chore: switch style variables from scss to css

Browse Source
This commit is contained in:
Arjun Choudhary 2022-11-22 12:25:15 +05:30
parent 5945cea9e0
commit baff0ec35c
1 changed files with 60 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

92
src/css/charts.scss
View File

@ -1,65 +1,88 @@
$label-color: #313B44; :root {
$axis-line-color: #E2E6E9; --charts-label-color: #313b44;
--charts-axis-line-color: #f4f5f6;
$tooltip-title: $label-color; --charts-tooltip-title: var(--charts-label-color);
$tooltip-label: $label-color; --charts-tooltip-label: var(--charts-label-color);
$tooltip-value: #192734; --charts-tooltip-value: #192734;
--charts-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 { .chart-container {
position: relative; /* for absolutely positioned tooltip */ position: relative;
/* for absolutely positioned tooltip */
/* https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/ */ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
font-family: -apple-system, BlinkMacSystemFont, "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', "Helvetica Neue", sans-serif;
'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
.axis, .chart-label { .axis,
fill: $label-color; .chart-label {
fill: var(--charts-label-color);
line { line {
stroke: $axis-line-color; stroke: var(--charts-axis-line-color);
} }
} }
.dataset-units { .dataset-units {
circle { circle {
stroke: #fff; stroke: var(--charts-dataset-circle-stroke);
stroke-width: 2; stroke-width: var(--charts-dataset-circle-stroke-width);
} }
path { path {
fill: none; fill: none;
stroke-opacity: 1; stroke-opacity: 1;
stroke-width: 2px; stroke-width: var(--charts-stroke-width);
} }
} }
.dataset-path { .dataset-path {
stroke-width: 2px; stroke-width: var(--charts-stroke-width);
} }
.path-group { .path-group {
path { path {
fill: none; fill: none;
stroke-opacity: 1; stroke-opacity: 1;
stroke-width: 2px; stroke-width: var(--charts-stroke-width);
} }
} }
line.dashed { line.dashed {
stroke-dasharray: 5, 3; stroke-dasharray: 5, 3;
} }
.axis-line { .axis-line {
.specific-value { .specific-value {
text-anchor: start; text-anchor: start;
} }
.y-line { .y-line {
text-anchor: end; text-anchor: end;
} }
.x-line { .x-line {
text-anchor: middle; text-anchor: middle;
} }
} }
.legend-dataset-text {
fill: #6c7680; .legend-dataset-label {
fill: var(--charts-legend-label);
font-weight: 600; font-weight: 600;
} }
.legend-dataset-value {
fill: var(--charts-legend-value);
}
} }
.graph-svg-tip { .graph-svg-tip {
@ -68,8 +91,10 @@ $tooltip-value: #192734;
padding: 10px; padding: 10px;
font-size: 12px; font-size: 12px;
text-align: center; text-align: center;
background: #FFFFFF; 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); 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);
border-radius: 6px; border-radius: 6px;
ul { ul {
@ -94,7 +119,7 @@ $tooltip-value: #192734;
height: 12px; height: 12px;
width: 12px; width: 12px;
border-radius: 2px; border-radius: 2px;
background: white; background: var(--charts-tooltip-bg);
transform: rotate(45deg); transform: rotate(45deg);
margin-top: -7px; margin-top: -7px;
margin-left: -6px; margin-left: -6px;
@ -104,16 +129,20 @@ $tooltip-value: #192734;
text-align: left; text-align: left;
padding: 0px; padding: 0px;
pointer-events: none; pointer-events: none;
.title { .title {
display: block; display: block;
padding: 16px; padding: 16px;
margin: 0; margin: 0;
color: $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 {
@ -147,17 +176,16 @@ $tooltip-value: #192734;
.tooltip-label { .tooltip-label {
margin-top: 4px; margin-top: 4px;
font-size: 11px; font-size: 11px;
max-width: 100px; line-height: 1.25;
max-width: 150px;
white-space: normal;
color: $tooltip-label; color: var(--charts-tooltip-label);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
.tooltip-value { .tooltip-value {
color: $tooltip-value; color: var(--charts-tooltip-value);
} }
} }
} }
} }