ptut-vhost/webpack/scss/container/svg.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
}
}