72 lines
1.2 KiB
SCSS
72 lines
1.2 KiB
SCSS
|
@import "constants";
|
||
|
|
|
||
|
|
.export-template-preview {
|
||
|
|
// From https://codepen.io/myramoki/pen/xZJjrr
|
||
|
|
.tree {
|
||
|
|
margin-left: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tree,
|
||
|
|
.tree ul {
|
||
|
|
padding: 0;
|
||
|
|
list-style: none;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tree ul {
|
||
|
|
margin: 0 0 0 0.5em; // (indentation/2)
|
||
|
|
}
|
||
|
|
|
||
|
|
.tree:before,
|
||
|
|
.tree ul:before {
|
||
|
|
content: "";
|
||
|
|
display: block;
|
||
|
|
width: 0;
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
bottom: 0;
|
||
|
|
left: 4px;
|
||
|
|
border-left: 1px dashed;
|
||
|
|
}
|
||
|
|
|
||
|
|
ul.tree:before {
|
||
|
|
border-left: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tree li {
|
||
|
|
margin: 0;
|
||
|
|
padding: 0 1.5em; // indentation + .5em
|
||
|
|
line-height: 2em; // default list item's `line-height`
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tree > li {
|
||
|
|
padding-left: 0; // Don't indent first level
|
||
|
|
}
|
||
|
|
|
||
|
|
.tree li:before {
|
||
|
|
content: "";
|
||
|
|
display: block;
|
||
|
|
width: 10px; // same with indentation
|
||
|
|
height: 0;
|
||
|
|
border-top: 1px dashed;
|
||
|
|
margin-top: -1px; // border top width
|
||
|
|
position: absolute;
|
||
|
|
top: 1em; // (line-height/2)
|
||
|
|
left: 4px;
|
||
|
|
}
|
||
|
|
|
||
|
|
ul.tree > li:before {
|
||
|
|
border-top: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tree li:last-child:before {
|
||
|
|
background: var(
|
||
|
|
--background-alt-blue-france
|
||
|
|
); // same with body background
|
||
|
|
height: auto;
|
||
|
|
top: 1em; // (line-height/2)
|
||
|
|
bottom: 0;
|
||
|
|
}
|
||
|
|
}
|