134 lines
2.8 KiB
SCSS
134 lines
2.8 KiB
SCSS
body {
|
|
font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana,
|
|
sans-serif;
|
|
font-size: 14pt;
|
|
padding: 1rem 5rem;
|
|
}
|
|
|
|
.wrapper {
|
|
display: flex;
|
|
}
|
|
|
|
ul {
|
|
list-style-type: none;
|
|
}
|
|
|
|
section.tree-structure {
|
|
width: 50%;
|
|
background-color: aquamarine;
|
|
}
|
|
|
|
section.tree-structure-expected {
|
|
width: 50%;
|
|
padding: 0 2rem 0 2rem;
|
|
.selected-first {
|
|
color: green;
|
|
}
|
|
.selected-last {
|
|
color: red;
|
|
}
|
|
.not-selected {
|
|
color: black;
|
|
}
|
|
}
|
|
|
|
section.example {
|
|
margin-top: 5rem;
|
|
img {
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
|
|
$border-img: url("../img/border.png");
|
|
$dot-img: url("../img/dot.png");
|
|
$border_width: 20px;
|
|
$border-margin-right: 15px;
|
|
|
|
ul.level-one li {
|
|
padding-left: 16px;
|
|
background-color: rgb(242, 242, 168);
|
|
}
|
|
|
|
ul.level-two li {
|
|
padding-left: 32px;
|
|
background-color: rgb(199, 167, 255);
|
|
}
|
|
|
|
ul.level-three li {
|
|
padding-left: 32px;
|
|
background-color: rgb(174, 249, 174);
|
|
}
|
|
|
|
ul.subnav {
|
|
padding-left: 0;
|
|
|
|
li {
|
|
a {
|
|
display: flex;
|
|
padding: 0;
|
|
cursor: pointer;
|
|
height: 56px;
|
|
align-items: center;
|
|
text-decoration: none;
|
|
|
|
&::before {
|
|
content: " ";
|
|
display: inline-block;
|
|
width: $border_width;
|
|
margin-right: $border-margin-right;
|
|
height: 100%;
|
|
background-image: $border-img;
|
|
background-repeat: no-repeat;
|
|
background-position: top center;
|
|
}
|
|
}
|
|
}
|
|
|
|
> li {
|
|
&:first-of-type {
|
|
> a {
|
|
height: 57px;
|
|
&::before {
|
|
align-self: flex-end;
|
|
height: 30px;
|
|
background-image: $border-img, $dot-img;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:last-of-type {
|
|
margin: 0;
|
|
> a {
|
|
&::before {
|
|
align-self: flex-start;
|
|
height: 30px;
|
|
background-image: $border-img, $dot-img;
|
|
background-position: bottom center;
|
|
}
|
|
}
|
|
}
|
|
|
|
// single item - just a dot
|
|
&:first-of-type:last-of-type {
|
|
> a {
|
|
&::before {
|
|
background-image: $dot-img;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
ul.level-two :not(:last-of-type) li {
|
|
display: flex;
|
|
padding-left: 0;
|
|
&::before {
|
|
content: " ";
|
|
width: $border_width;
|
|
margin-right: $border-margin-right;
|
|
background-image: $border-img;
|
|
background-repeat: repeat-y;
|
|
background-position: top center;
|
|
}
|
|
}
|
|
}
|