157 lines
3.8 KiB
SCSS
157 lines
3.8 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;
|
|
li {
|
|
position: relative;
|
|
margin: 0;
|
|
line-height: 2rem;
|
|
border-left: 1px solid $article-code;
|
|
&:before {
|
|
content: "";
|
|
display: inline-block;
|
|
width: 1rem;
|
|
height: .25rem;
|
|
margin-right: .55rem;
|
|
border-top: 1px solid $article-code;
|
|
}
|
|
&:last-child {
|
|
border: none;
|
|
&:after {
|
|
content: "";
|
|
position: absolute;
|
|
margin: 0;
|
|
padding: 0;
|
|
left: 0;
|
|
top: 0;
|
|
height: 1.1rem;
|
|
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)}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
///////////////////////////////// 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;}
|
|
}
|
|
}
|
|
};
|