1000 lines
21 KiB
SCSS
1000 lines
21 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";}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.hide-elements {p span.el { border: none; &:before, &:after {display: none}}}
|
|
&.hide-commas {p span.comma { border: none; &:before, &:after {display: none}}}
|
|
&.hide-whitespace {p span.whitespace { border: none; &:before, &:after {display: none}}}
|
|
}
|
|
|
|
/////////////////////////// InfluxQL window diagram ////////////////////////////
|
|
|
|
#influxql-window-diagram {
|
|
min-width: 520px;
|
|
overflow: scroll;
|
|
display: flex;
|
|
flex-direction: row;
|
|
|
|
#timerange-label {
|
|
position: relative;
|
|
width: .7rem;
|
|
margin: 10.5rem .5rem 6.5rem .5rem;
|
|
border-width: 1px 0 1px 1px;
|
|
border-style: solid;
|
|
border-color: rgba($article-text, .3);
|
|
|
|
&::before {
|
|
content: "Queried time range";
|
|
display: block;
|
|
position: absolute;
|
|
background: $article-bg;
|
|
padding: 0 .75rem;
|
|
font-weight: $medium;
|
|
font-size: .9rem;
|
|
color: rgba($article-text, .5);
|
|
transform: rotate(-90deg);
|
|
white-space: nowrap;
|
|
top: 13.5rem;
|
|
left: -4.7rem;
|
|
}
|
|
}
|
|
|
|
td {
|
|
font-weight: medium;
|
|
color: $article-bold;
|
|
|
|
span.exclude {
|
|
opacity: .35;
|
|
font-weight: normal;
|
|
}
|
|
}
|
|
|
|
.windows {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
padding: 4rem 0 2.5rem .25rem;
|
|
}
|
|
|
|
.window-hour {
|
|
justify-content: space-between;
|
|
height: 100%;
|
|
margin-bottom: .5rem;
|
|
border-left: 1px solid rgba($article-text, .3);
|
|
flex: 1 1 0;
|
|
position: relative;
|
|
|
|
&::before, &::after {
|
|
content: "";
|
|
position: absolute;
|
|
display: block;
|
|
width: 9px;
|
|
height: 1px;
|
|
left: -10px;
|
|
border-top: 1px solid rgba($article-text, .3);
|
|
}
|
|
&::before {top: 0}
|
|
&::after {bottom: -1px}
|
|
|
|
p {
|
|
white-space: nowrap;
|
|
margin-top: .55rem;
|
|
position: relative;
|
|
|
|
&::before {
|
|
content: "";
|
|
display: inline-block;
|
|
margin-right: .5rem;
|
|
width: 1rem;
|
|
height: 0;
|
|
border-top: 1px solid rgba($article-text, .3);
|
|
vertical-align: middle;
|
|
}
|
|
&::after {
|
|
content: "Predefined window boundary";
|
|
display: block;
|
|
position: absolute;
|
|
top: 1.25rem;
|
|
left: 1.5rem;
|
|
font-size: .9rem;
|
|
font-weight: $medium;
|
|
color: rgba($article-text, .5);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/////////////////////////// Scaling strategy diagrams //////////////////////////
|
|
|
|
.scaling-strategy {
|
|
margin: 2rem 0 3rem;
|
|
|
|
.node {
|
|
border: 2px solid $article-text;
|
|
border-radius: 6px;
|
|
height: 6rem;
|
|
width: 4rem;
|
|
}
|
|
|
|
.dashed {
|
|
border-style: dashed;
|
|
border-color: rgba($article-text, .5)
|
|
}
|
|
|
|
.outer {
|
|
height: auto;
|
|
width: fit-content;
|
|
position: relative;
|
|
}
|
|
|
|
.inner {
|
|
margin: 2rem 1.25rem -2px;
|
|
}
|
|
|
|
&.horizontal {
|
|
display: flex;
|
|
.node:not(:first-child) {margin-left: 1.25rem;}
|
|
}
|
|
}
|
|
|
|
////////////////////////////// QUERY PLAN DIAGRAM //////////////////////////////
|
|
|
|
#query-plan-diagram {
|
|
display: flex;
|
|
flex-direction: column;
|
|
font-size: 1rem;
|
|
margin: 3rem 0 3.5rem;
|
|
max-width: 800px;
|
|
|
|
.plan-column {
|
|
padding: 0 .5rem;
|
|
}
|
|
|
|
.plan-block {
|
|
background: $article-code-bg;
|
|
color: $article-code;
|
|
text-align: center;
|
|
padding: 1rem 1.5rem;
|
|
border-radius: $radius * 2;
|
|
}
|
|
.plan-arrow {
|
|
margin: .5rem auto;
|
|
height: 1.5rem;
|
|
width: 1px;
|
|
border-left: 1px solid $article-code;
|
|
position: relative;
|
|
|
|
&:before {
|
|
content: "\25B2";
|
|
position: absolute;
|
|
top: .25rem;
|
|
left: -.32rem;
|
|
color: $article-code;
|
|
line-height: 0;
|
|
}
|
|
&.split {
|
|
width: 50%;
|
|
margin-top: 2rem;
|
|
height: 1rem;
|
|
display: flex;
|
|
justify-content: center;
|
|
border-width: 1px 1px 0 1px;
|
|
border-style: solid;
|
|
border-color: $article-code;
|
|
|
|
&:before {
|
|
position: relative;
|
|
top: -1.25rem;
|
|
left: -0.26rem;
|
|
width: 0;
|
|
margin-left: .2rem;
|
|
}
|
|
&:after {
|
|
content: "";
|
|
display: block;
|
|
height: 1rem;
|
|
width: 0;
|
|
border-left: 1px solid $article-code;
|
|
margin: -1rem 0;
|
|
}
|
|
}
|
|
}
|
|
.plan-single-column {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
.plan-double-column {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
}
|
|
}
|
|
|
|
//////////////////////// SSO AUTHORIZATION FLOW DIAGRAM ////////////////////////
|
|
|
|
#sso-auth-flow {
|
|
max-width: 650px;
|
|
margin: 2rem auto;
|
|
|
|
.row {
|
|
display: flex;
|
|
|
|
&.left { justify-content: start;}
|
|
&.center { justify-content: center;}
|
|
&.right { justify-content: end;}
|
|
}
|
|
|
|
.auth-item {
|
|
margin: 1rem;
|
|
color: $g20-white;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
padding: 1.5rem 1.75rem;
|
|
background: linear-gradient(-135deg, $article-table-header);
|
|
border-radius: $radius * 2;
|
|
min-width: 220px;
|
|
min-height: 90px;
|
|
text-align: center;
|
|
font-weight: $medium;
|
|
}
|
|
|
|
#auth0, #idp {
|
|
&::after {
|
|
display: block;
|
|
margin-top: .25rem;
|
|
font-weight: normal;
|
|
font-style: italic;
|
|
font-size: 1rem;
|
|
opacity: .75;
|
|
}
|
|
}
|
|
|
|
#auth0::after {content: "Managed by InfluxData"}
|
|
#idp::after {content: "Managed by you"}
|
|
|
|
.arrow {
|
|
display: block;
|
|
width: 65px;
|
|
height: 65px;
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: $article-text;
|
|
border-style: dashed;
|
|
border-color: $article-text;
|
|
|
|
&.right, &.left {
|
|
&:before {
|
|
content: attr(step);
|
|
background: $article-bg;
|
|
font-size: .9rem;
|
|
width: 1.5rem;
|
|
height: 1.5rem;
|
|
border: 1px solid $article-text;
|
|
text-align: center;
|
|
line-height: 1.5rem;
|
|
border-radius: 50%;
|
|
}
|
|
&:after {
|
|
position: absolute;
|
|
line-height: 0;
|
|
font-size: 1.35rem;
|
|
}
|
|
}
|
|
|
|
&.right {
|
|
border-radius: 0 100% 0 0;
|
|
border-width: 2px 2px 0 0;
|
|
align-self: flex-end;
|
|
&:before {translate: 45% -45%; }
|
|
&:after {
|
|
content: "⏷";
|
|
bottom: 0;
|
|
right: -.4rem;
|
|
}
|
|
}
|
|
&.left {
|
|
border-radius: 0 0 0 100%;
|
|
border-width: 0 0 2px 2px;
|
|
align-self: flex-start;
|
|
&:before {translate: -45% 45%;}
|
|
&:after {
|
|
content: "⏶";
|
|
top: 0;
|
|
left: -.4rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// AUTH FLOW-SPECIFIC MEDIA QUERIES
|
|
|
|
@include media(small) {
|
|
#sso-auth-flow {
|
|
max-width: 350px;
|
|
margin: 6rem auto;
|
|
.row {
|
|
flex-direction: column;
|
|
margin: -50px 0;
|
|
}
|
|
.auth-item{
|
|
margin: .5rem 0;
|
|
}
|
|
.arrow {
|
|
width: 2rem;
|
|
height: 55px;
|
|
&.right, &.left {
|
|
border-width: 0 2px 0 0;
|
|
border-radius: 0;
|
|
}
|
|
&.right {
|
|
align-self: flex-start;
|
|
margin-left: 4rem;
|
|
&:before{translate: 60% -15%;}
|
|
}
|
|
&.left {
|
|
align-self: flex-end;
|
|
margin-right: 6rem;
|
|
&:before{translate: 60% 10%;}
|
|
&:after {
|
|
right: -.4rem;
|
|
left: unset;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
/////////////////////////// QUIX DOWNSAMPLING DIAGRAM //////////////////////////
|
|
|
|
#quix-downsample-pipeline {
|
|
margin: 3rem auto;
|
|
|
|
.logo-row {
|
|
display: flex;
|
|
|
|
&.top {
|
|
justify-content: flex-start;
|
|
margin-bottom: -2.6rem;
|
|
|
|
.quix-connector {margin-top: .5rem;}
|
|
}
|
|
&.bottom {
|
|
justify-content: flex-end;
|
|
margin-top: -2.6rem;
|
|
}
|
|
}
|
|
|
|
.influxdb-connector {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
width: 29%;
|
|
}
|
|
|
|
.influxdb-logo {
|
|
background: $influxdb-logo;
|
|
width: 175px;
|
|
height: 55px;
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
position: relative;
|
|
|
|
&:after {
|
|
content: attr(data-precision) " data db";
|
|
position: absolute;
|
|
bottom: -2px;
|
|
left: 45px;
|
|
width: 100%;
|
|
color: $article-text;
|
|
font-style: italic;
|
|
font-size: 1rem;
|
|
}
|
|
}
|
|
|
|
.quix-connector {
|
|
display: block;
|
|
height: 80px;
|
|
width: 20px;
|
|
position: relative;
|
|
|
|
&:before {
|
|
content: "";
|
|
display: block;
|
|
height: 100%;
|
|
width: 100%;
|
|
background-color: $article-text;
|
|
mask-image: url('/svgs/quix-connector-plug.svg');
|
|
mask-repeat: no-repeat;
|
|
background-size: contain;
|
|
}
|
|
|
|
&:after {
|
|
content: "Connector";
|
|
display: block;
|
|
position: absolute;
|
|
top: 1.5rem;
|
|
left: 1.75rem;
|
|
padding: .25rem .5rem;
|
|
color: $article-text;
|
|
font-size: 1rem;
|
|
font-style: italic;
|
|
background-color: $article-bg;
|
|
border-radius: $radius * 3;
|
|
border: 1.5px solid rgba($article-text, .5);
|
|
box-shadow: 2px 2px 6px $sidebar-search-shadow;
|
|
}
|
|
}
|
|
|
|
.quix-stream-container {
|
|
display: flex;
|
|
flex-direction: row;
|
|
border: 2px dashed $article-text;
|
|
background: rgba($article-text, .1);
|
|
border-radius: $radius * 4;
|
|
padding: 2.5rem;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.quix-stream-component {
|
|
padding: 1rem;
|
|
border-radius: $radius * 2;
|
|
border-style: dashed;
|
|
border-width: 2px;
|
|
position: relative;
|
|
|
|
p {
|
|
margin: 0;
|
|
line-height: 1.2rem;
|
|
font-size: 1rem;
|
|
text-align: center;
|
|
color: $article-bold;
|
|
}
|
|
|
|
&:before {
|
|
content: url('/svgs/quix-python-heart.svg');
|
|
display: block;
|
|
position: absolute;
|
|
width: 40px;
|
|
height: 40px;
|
|
top: -15px;
|
|
left: -15px;
|
|
filter:
|
|
drop-shadow( 2px 0px 0px $article-bg)
|
|
drop-shadow(-2px 0px 0px $article-bg)
|
|
drop-shadow( 0px 2px 0px $article-bg)
|
|
drop-shadow( 0px -2px 0px $article-bg);
|
|
}
|
|
|
|
&#source-producer {
|
|
background: rgba($b-dodger, .2);
|
|
border-color: $b-dodger
|
|
}
|
|
&#downsampling-process {
|
|
background: rgba($br-magenta, .2);
|
|
border-color: $br-magenta
|
|
}
|
|
&#sink-consumer {
|
|
background: rgba($y-tiger, .2);
|
|
border-color: $y-tiger
|
|
}
|
|
}
|
|
|
|
.arrow {
|
|
margin: .5rem .75rem .5rem .5rem;
|
|
height: 2px;
|
|
width: auto;
|
|
min-width: 25px;
|
|
background: $article-text;
|
|
position: relative;
|
|
|
|
&:after{
|
|
content: "▶";
|
|
position: absolute;
|
|
right: -4px;
|
|
top: -.48em;
|
|
font-size: .75rem;
|
|
color: $article-text;
|
|
}
|
|
}
|
|
|
|
.kafka-toggle {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
width: 60px;
|
|
min-width: 60px;
|
|
height: 40px;
|
|
border-radius: 20px;
|
|
background: $grey5;
|
|
position: relative;
|
|
|
|
&:after {
|
|
content: "TOPIC:\A" attr(topic);
|
|
position: absolute;
|
|
width: 215%;
|
|
color: $article-text;
|
|
text-align: center;
|
|
font-style: italic;
|
|
bottom: -42px;
|
|
font-size: .9rem;
|
|
left: -60%;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.toggle-icon {
|
|
display: block;
|
|
height: 34px;
|
|
width: 34px;
|
|
margin: 3px;
|
|
border-radius: 50%;
|
|
background: url('/svgs/apache-kafka-icon.svg');
|
|
background-color: #fff;
|
|
background-size: 86%;
|
|
background-position: 90%;
|
|
background-repeat: no-repeat;
|
|
}
|
|
}
|
|
|
|
#quix-brand-icons {
|
|
height: 50px;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
margin-top: -3rem;
|
|
|
|
& > * {
|
|
height: 45px;
|
|
display: inline-block;
|
|
background-color: $g0-obsidian;
|
|
border-radius: $radius * 3;
|
|
margin-right: .25rem;
|
|
box-shadow: 0 1px 10px rgba($g20-white, .1);
|
|
|
|
img {
|
|
margin: 0;
|
|
box-shadow: none;
|
|
border-radius: 0;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.quix-logo {
|
|
padding: .75rem;
|
|
}
|
|
|
|
.quix-streams-logo {
|
|
position: relative;
|
|
padding: .6rem;
|
|
|
|
&::after {
|
|
content: "Quix\A Streams";
|
|
display: inline-block;
|
|
white-space: pre-wrap;
|
|
font-size: .92rem;
|
|
font-weight: $medium;
|
|
color: $g20-white;
|
|
line-height: .9rem;
|
|
margin-left: .15rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
///////////////////////////////// MEDIA QUERIES ////////////////////////////////
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
|
|
@include media(large) {
|
|
#quix-downsample-pipeline {
|
|
max-width: 325px;
|
|
|
|
.logo-row .influxdb-connector {width: 100%;}
|
|
.quix-stream-container {flex-direction: column;}
|
|
.arrow {
|
|
margin: .5rem .5rem .75rem .5rem ;
|
|
width: 2px;
|
|
min-width: 2px;
|
|
height: auto;
|
|
min-height: 25px;
|
|
|
|
&:after{
|
|
content: "▼";
|
|
right: -4.25px;
|
|
bottom: -.5em;
|
|
top: unset;
|
|
font-size: 1rem;
|
|
}
|
|
}
|
|
|
|
.kafka-toggle {
|
|
margin-bottom: 1.5rem;
|
|
&:after {
|
|
content: "TOPIC: " attr(topic);
|
|
width: 400%;
|
|
bottom: -25px;
|
|
left: -150%;
|
|
}
|
|
}
|
|
|
|
#quix-brand-icons {
|
|
margin-top: 1.5rem;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
@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;
|
|
}
|
|
|
|
#influxql-window-diagram {
|
|
justify-content: flex-start;
|
|
min-width: 300px;
|
|
.window-hour{
|
|
width: 60px;
|
|
p {
|
|
transform: rotate(-90deg);
|
|
position: relative;
|
|
margin-top: 8.75rem;
|
|
font-size: .95rem;
|
|
|
|
&::before {
|
|
transform: rotate(90deg);
|
|
position: absolute;
|
|
top: -.5rem;
|
|
left: 4.5rem;
|
|
}
|
|
&::after {
|
|
left: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
};
|