356 lines
8.0 KiB
SCSS
356 lines
8.0 KiB
SCSS
///////////////////////////// File System Diagrams /////////////////////////////
|
|
|
|
.fs-diagram {
|
|
display: inline-block;
|
|
margin: 1rem 0 2rem;
|
|
padding: 1.5rem 2.5rem 1.5rem 1.5rem;
|
|
font-family: $code;
|
|
border-radius: $radius;
|
|
box-shadow: 1px 3px 10px $article-shadow;
|
|
& > ul { padding: 0; margin: 0;
|
|
li { line-height: 2rem; color: $article-code; }
|
|
ul {
|
|
padding-left: 2rem;
|
|
margin: 0;
|
|
|
|
li {
|
|
position: relative;
|
|
margin: 0 0 0 -1.45rem;
|
|
padding-left: 1.45rem;
|
|
line-height: 2.5rem;
|
|
border-left: 1px solid $article-code;
|
|
&:before {
|
|
content: "";
|
|
display: inline-block;
|
|
width: 1rem;
|
|
height: .25rem;
|
|
margin-right: .55rem;
|
|
margin-left: -1.45rem;
|
|
border-top: 1px solid $article-code;
|
|
}
|
|
&:last-child {
|
|
border: none;
|
|
&:after {
|
|
content: "";
|
|
position: absolute;
|
|
margin: 0;
|
|
padding: 0;
|
|
left: 0;
|
|
top: 0;
|
|
height: 1.4rem;
|
|
border-left: 1px solid $article-code;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
ul { list-style: none; }
|
|
}
|
|
|
|
///////////////////////////////// Shard diagram ////////////////////////////////
|
|
#shard-diagram, #data-retention {
|
|
display: flex;
|
|
flex-direction: column;
|
|
max-width: 550px;
|
|
margin: 2.5rem auto 3rem;
|
|
|
|
p {margin-bottom: 0; line-height: 1.25em;}
|
|
|
|
.periods {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
}
|
|
.timeline {
|
|
display: flex;
|
|
flex-direction: row;
|
|
margin-top: .25rem;
|
|
padding: 0 .5rem;
|
|
|
|
.interval {
|
|
border-top: 1px solid $article-text;
|
|
border-right: 1px solid $article-text;
|
|
height: .75rem;
|
|
flex-grow: 1;
|
|
&:first-child {
|
|
border-left: 1px solid $article-text;
|
|
}
|
|
}
|
|
|
|
.one-quarter {width: 25%; height: .75rem;}
|
|
.three-quarters {width: 75%; height: .75rem;}
|
|
.border-left {border-left: 1px solid $article-text;}
|
|
.retention-label {
|
|
position: relative;
|
|
&:before {
|
|
content: "";
|
|
display: inline-block;
|
|
width: .65rem;
|
|
margin-right: .5rem;
|
|
border-top: 1px solid $article-text;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
.deleted-label {
|
|
color: $r-ruby;
|
|
text-align: center;
|
|
font-size: .9rem;
|
|
}
|
|
}
|
|
.shard-groups {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-around;
|
|
margin-top: .25rem;
|
|
padding: .5rem;
|
|
line-height: 1rem;
|
|
|
|
.shard-group {
|
|
margin: 0 .25rem;
|
|
text-align: center;
|
|
padding: .5rem;
|
|
border-radius: .5rem;
|
|
background: $html-diagram-shard-group-bg;
|
|
flex-grow: 1;
|
|
box-shadow: 2px 2px 8px $article-shadow;
|
|
p:first-child {margin-bottom: .75rem;}
|
|
|
|
.shard {
|
|
display: block;
|
|
margin-top: .5rem;
|
|
padding: .65rem 1rem;
|
|
color: #fff;
|
|
border-radius: .25rem;
|
|
@include gradient($article-table-header, 90deg);
|
|
background-attachment: fixed;
|
|
}
|
|
|
|
&.deleted {
|
|
opacity: .3;
|
|
.shard {@include gradient($grad-red-dark)}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
///////////////// Data model table in InfluxDB 2.4+ get started ////////////////
|
|
|
|
.series-diagram {
|
|
display: flex;
|
|
width: fit-content;
|
|
max-width: 100%;
|
|
margin: 1rem 3.25rem 1.75rem 0;
|
|
padding-right: 1.5rem;
|
|
border-right: 2px solid $tooltip-bg;
|
|
|
|
table {margin: 0;}
|
|
|
|
&:after {
|
|
content: "Series";
|
|
top: 4rem;
|
|
right: -3.5rem;
|
|
}
|
|
|
|
&:last-child {margin-bottom: 3rem;}
|
|
|
|
}
|
|
|
|
table tr.point{
|
|
border: 2px solid $tooltip-bg;
|
|
|
|
&:after {
|
|
content: "Point";
|
|
bottom: -.8rem;
|
|
left: 1rem;
|
|
}
|
|
}
|
|
|
|
.series-diagram, table tr.point {
|
|
position: relative;
|
|
&:after {
|
|
color: $tooltip-text;
|
|
background: $tooltip-bg;
|
|
border-radius: $radius;
|
|
position: absolute;
|
|
font-size: .9rem;
|
|
font-weight: $medium;
|
|
padding: .2rem .5rem;
|
|
line-height: .9rem;
|
|
}
|
|
}
|
|
|
|
.sql table {
|
|
|
|
tr.points {
|
|
position: relative;
|
|
td:first-child{
|
|
&:before, &:after {
|
|
display: block;
|
|
border-radius: $radius;
|
|
position: absolute;
|
|
font-size: .9rem;
|
|
font-weight: $medium;
|
|
padding: .2rem .5rem;
|
|
line-height: .9rem;
|
|
z-index: 1;
|
|
top: -.25rem;
|
|
opacity: 0;
|
|
transition: opacity .2s, top .2s;
|
|
}
|
|
&:before {
|
|
content: "Point 1";
|
|
color: $g20-white;
|
|
background: $br-new-magenta;
|
|
}
|
|
&:after {
|
|
content: "Point 2";
|
|
color: $tooltip-text;
|
|
background: $tooltip-bg;
|
|
left: 5rem;
|
|
}
|
|
}
|
|
|
|
&:hover { td:first-child {
|
|
&:before, &:after {
|
|
opacity: 1;
|
|
top: -.65rem;
|
|
}
|
|
}}
|
|
}
|
|
span.point{
|
|
position: relative;
|
|
display: inline-block;
|
|
|
|
&.one:before{
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 2px;
|
|
border-top: 2px solid $br-new-magenta;
|
|
bottom: -2px;
|
|
}
|
|
&.two:after{
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 2px;
|
|
border-top: 2px solid $tooltip-bg;
|
|
bottom: -8px;
|
|
}
|
|
}
|
|
}
|
|
|
|
////////////// Line protocol anatomy in InfluxDB 2.4+ get started //////////////
|
|
|
|
#line-protocol-anatomy {
|
|
overflow: scroll;
|
|
margin: 3rem 0 2.5rem;
|
|
|
|
p {
|
|
padding: 3rem 0 2rem;
|
|
white-space: nowrap;
|
|
font-family: $code;
|
|
overflow: visible;
|
|
text-align: center;
|
|
|
|
span{
|
|
padding: .75rem 0 .75rem;
|
|
&.el {
|
|
position: relative;
|
|
border-top: 2px solid $tooltip-bg;
|
|
|
|
&:before{
|
|
display: block;
|
|
position: absolute;
|
|
font-family: $proxima;
|
|
font-size: .95rem;
|
|
color: $tooltip-bg;
|
|
font-weight: $medium;
|
|
top: -2.75rem;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
&:after{
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
height: 1rem;
|
|
width: 2px;
|
|
top: -1rem;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background: $tooltip-bg;
|
|
}
|
|
&.measurement:before{content: "measurement"}
|
|
&.tagset:before{content: "tag set"}
|
|
&.fieldset:before{content: "field set"}
|
|
&.timestamp:before{content: "timestamp"}
|
|
}
|
|
|
|
&.whitespace, &.comma{
|
|
position: relative;
|
|
border-bottom: 2px solid $tooltip-bg;
|
|
|
|
&:before{
|
|
white-space: nowrap;
|
|
display: block;
|
|
position: absolute;
|
|
font-family: $proxima;
|
|
font-size: .95rem;
|
|
color: $tooltip-bg;
|
|
font-weight: $medium;
|
|
bottom: -2.75rem;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
&:after{
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
height: 1rem;
|
|
width: 2px;
|
|
bottom: -1rem;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background: $tooltip-bg;
|
|
}
|
|
&.whitespace:before{content: attr(data-whitespace) " whitespace";}
|
|
&.comma:before{content: attr(data-whitespace) "1st comma";}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
///////////////////////////////// MEDIA QUERIES ////////////////////////////////
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
|
|
@include media(small) {
|
|
#shard-diagram {
|
|
flex-direction: row;
|
|
.periods {flex-direction: column; margin-right: .5rem; }
|
|
.timeline {
|
|
flex-direction: column;
|
|
padding: .5rem 0;
|
|
.interval {
|
|
width: .75rem;
|
|
border-top: none;
|
|
border-right: none;
|
|
border-left: 1px solid $article-text;
|
|
border-bottom: 1px solid $article-text;
|
|
&:first-child{ border-top: 1px solid $article-text; }
|
|
}
|
|
}
|
|
.shard-groups {
|
|
flex-direction: column;
|
|
.shard-group { margin: .25rem 0;}
|
|
}
|
|
}
|
|
|
|
.series-diagram {
|
|
width: auto;
|
|
}
|
|
};
|