127 lines
1.8 KiB
SCSS
127 lines
1.8 KiB
SCSS
/* COULEUR POUR LE GRAPH SVG */
|
|
$svg-blue: #3366CC;
|
|
$svg-red: #DC3912;
|
|
$svg-yellow: #FF9900;
|
|
$svg-green: #109618;
|
|
$svg-purple: #990099;
|
|
$svg-lightblue: #0099C6;
|
|
$svg-lightred: #DD4477;
|
|
$svg-lightyellow: #F1CA3A;
|
|
$svg-lightgreen: #AAAA11;
|
|
$svg-lightpurple: #994499;
|
|
|
|
svg {
|
|
|
|
width: 100%;
|
|
height: 30vh;
|
|
margin: 10px;
|
|
-webkit-touch-callout: none; /* iOS Safari */
|
|
-webkit-user-select: none; /* Safari */
|
|
-moz-user-select: none; /* Firefox */
|
|
user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
|
|
|
|
path {
|
|
fill: none;
|
|
fill-rule: evenodd;
|
|
|
|
stroke: rgb(0, 0, 0);
|
|
stroke-width: 1px;
|
|
stroke-linecap: butt;
|
|
stroke-linejoin: miter;
|
|
stroke-opacity: 1;
|
|
|
|
&.precision {
|
|
stroke-width: 0.2px;
|
|
}
|
|
}
|
|
|
|
rect.hiding {
|
|
width: 0;
|
|
}
|
|
|
|
rect {
|
|
transition: width 0.75s;
|
|
cursor: pointer;
|
|
|
|
color: rgb(0, 0, 0);
|
|
clip-rule: nonzero;
|
|
display: inline;
|
|
overflow: visible;
|
|
visibility: visible;
|
|
opacity: 1;
|
|
isolation: auto;
|
|
mix-blend-mode: normal;
|
|
|
|
color-interpolation: sRGB;
|
|
color-interpolation-filters: linearRGB;
|
|
|
|
fill-opacity: 1;
|
|
fill-rule: nonzero;
|
|
|
|
stroke: none;
|
|
stroke-width: 1px;
|
|
stroke-linecap: butt;
|
|
stroke-linejoin: miter;
|
|
stroke-miterlimit: 4;
|
|
stroke-dasharray: none;
|
|
stroke-dashoffset: 0;
|
|
stroke-opacity: 1;
|
|
|
|
color-rendering: auto;
|
|
image-rendering: auto;
|
|
shape-rendering: auto;
|
|
text-rendering: auto;
|
|
}
|
|
|
|
text {
|
|
text-anchor: end;
|
|
|
|
&.precision {
|
|
text-anchor: middle;
|
|
fill: #666666;
|
|
font-size: 13px;
|
|
}
|
|
}
|
|
|
|
.blue {
|
|
fill: $svg-blue
|
|
}
|
|
|
|
.red {
|
|
fill: $svg-red
|
|
}
|
|
|
|
.yellow {
|
|
fill: $svg-yellow
|
|
}
|
|
|
|
.green {
|
|
fill: $svg-green
|
|
}
|
|
|
|
.purple {
|
|
fill: $svg-purple
|
|
}
|
|
|
|
.lightblue {
|
|
fill: $svg-lightblue
|
|
}
|
|
|
|
.lightred {
|
|
fill: $svg-lightred
|
|
}
|
|
|
|
.lightyellow {
|
|
fill: $svg-lightyellow
|
|
}
|
|
|
|
.lightgreen {
|
|
fill: $svg-lightgreen
|
|
}
|
|
|
|
.lightpurple {
|
|
fill: $svg-lightpurple
|
|
}
|
|
}
|
|
|