123 lines
3.0 KiB
SCSS
123 lines
3.0 KiB
SCSS
svg {
|
|
|
|
&[id^='geo-s2-cells-'] {
|
|
max-width: 250px;
|
|
.geo-cell{fill:rgba($svg-geo-s2-cell, 0.25);stroke:$svg-geo-s2-cell;stroke-width:3;stroke-linejoin:round;stroke-miterlimit:10;}
|
|
.geo-region{fill:rgba($svg-geo-region, 0.35);stroke:$svg-geo-region;stroke-width:3;stroke-linejoin:round;stroke-miterlimit:10;}
|
|
.geo-point{fill:$svg-geo-point;}
|
|
}
|
|
|
|
&#timed-moving-average {
|
|
margin: 1rem 0 3rem;
|
|
max-width: 425px;
|
|
.st0 {stroke: $article-text;}
|
|
.st1 {fill: $article-text;}
|
|
.st2 {font-family: $proxima; font-weight: $medium}
|
|
}
|
|
|
|
//////////////////////////////// Join Diagram ////////////////////////////////
|
|
&#join-diagram {
|
|
$fill-color: rgba($article-text, .35);
|
|
display: block;
|
|
max-width: 250px;
|
|
margin: 1rem 0 2rem;
|
|
|
|
&.center {margin: 0 auto 2rem auto;}
|
|
&.small {max-width: 125px; path{stroke-width: 3;} }
|
|
|
|
path {
|
|
stroke: $article-text;
|
|
stroke-width:2;
|
|
stroke-miterlimit:10;
|
|
fill: none;
|
|
}
|
|
&.inner {path { &#center {fill:$fill-color; }}}
|
|
&.left {path { &#left, &#center {fill:$fill-color; }}}
|
|
&.right {path { &#center, &#right {fill:$fill-color; }}}
|
|
&.full {path { &#left, &#center, &#right {fill:$fill-color; }}}
|
|
}
|
|
|
|
////////////////// InfluxDB v3 storage architecture diagram //////////////////
|
|
|
|
&#influxdb-v3-storage-architecture {
|
|
margin: 2rem 0 3rem;
|
|
max-width: 750px;
|
|
|
|
.shape {
|
|
fill:none;
|
|
stroke: $article-text;
|
|
stroke-width: 1.5;
|
|
stroke-miterlimit :10;
|
|
|
|
&.op70 {opacity: 0.7}
|
|
&.op50 {opacity: 0.5}
|
|
&.op25 {opacity: 0.25}
|
|
|
|
&.dashed {
|
|
stroke-width: 1;
|
|
stroke-dasharray:4,3;
|
|
}
|
|
}
|
|
.title {
|
|
fill: $product-enterprise;
|
|
font-weight: $medium;
|
|
font-size:20px;
|
|
}
|
|
.text {
|
|
fill: $article-text;
|
|
font-size: 18px;
|
|
&.small {font-size: 16px;}
|
|
&.bold {
|
|
font-weight: $medium;
|
|
color: $article-bold;
|
|
}
|
|
&.italic {font-style: italic;}
|
|
}
|
|
.diagram-line {
|
|
fill: none;
|
|
stroke: $nav-active;
|
|
stroke-width: 1.5;
|
|
stroke-miterlimit: 10;
|
|
&.dashed {stroke-dasharray:2,4;}
|
|
}
|
|
.arrow {fill: $nav-active;}
|
|
}
|
|
}
|
|
|
|
@include media(small) {
|
|
svg {
|
|
&#join-diagram {margin: 1rem auto 2rem; }
|
|
}
|
|
}
|
|
|
|
//////////////////////////// Styles for SVG legends ////////////////////////////
|
|
|
|
span.key-geo-cell {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
margin: 0 .5rem .25rem 0;
|
|
width: 1.1em;
|
|
height: 1.1em;
|
|
border: 2px solid $svg-geo-s2-cell;
|
|
background: rgba($svg-geo-s2-cell, .25);
|
|
border-radius: 2px;
|
|
}
|
|
span.key-geo-region {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
margin: 0 .5rem .25rem 0;
|
|
width: 1.1em;
|
|
height: 1.1em;
|
|
border: 2px solid $svg-geo-region;
|
|
background: rgba($svg-geo-region, .35);
|
|
border-radius: 2px;
|
|
}
|
|
span.key-geo-point {
|
|
display: inline-block;
|
|
margin: 0 .7rem 0 .25rem;
|
|
width: .65rem;
|
|
height: .65rem;
|
|
border-radius: 50%;
|
|
background: $svg-geo-point;
|
|
}
|