First version
This commit is contained in:
Eden Kirin
208
style.scss
208
style.scss
@ -1,134 +1,114 @@
|
||||
body {
|
||||
font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana,
|
||||
sans-serif;
|
||||
font-size: 14pt;
|
||||
padding: 1rem 5rem;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
|
||||
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
display: flex;
|
||||
column-gap: 1rem;
|
||||
section.sidebar {
|
||||
width: 320px;
|
||||
background-color: #f8f9fa;
|
||||
border: 1px solid #cdcdcd;
|
||||
}
|
||||
|
||||
section.tree-structure {
|
||||
background-color: rgb(195, 253, 234);
|
||||
flex-grow: 1;
|
||||
}
|
||||
// ----------------------------------------------------------------------------------
|
||||
|
||||
section.example {
|
||||
margin-top: 5rem;
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
$text-color: #1f1f1f;
|
||||
$border-color: #cdcdcd;
|
||||
$subnav-indent: 16px;
|
||||
$icon-width: 50px;
|
||||
|
||||
// ------------------------------------------------
|
||||
|
||||
$border-img: url("../img/border.png");
|
||||
$dot-img: url("../img/dot.png");
|
||||
$border_width: 20px;
|
||||
$border-margin-right: 15px;
|
||||
$left-padding-unit: 16px;
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
ul.subnav {
|
||||
// debug colors: level one
|
||||
> li {
|
||||
// background-color: rgb(242, 242, 168);
|
||||
}
|
||||
> li > ul > li {
|
||||
// background-color: rgb(199, 167, 255);
|
||||
}
|
||||
> li > ul > li > ul > li {
|
||||
// background-color: rgb(174, 249, 174);
|
||||
nav.main {
|
||||
li > a {
|
||||
display: block;
|
||||
padding: 15px 0;
|
||||
text-decoration: none;
|
||||
color: $text-color;
|
||||
border-top: 1px solid $border-color;
|
||||
}
|
||||
|
||||
// level one
|
||||
padding-left: $left-padding-unit;
|
||||
// level 0: main items
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
> li {
|
||||
a.icon {
|
||||
position: relative;
|
||||
padding-left: $icon-width;
|
||||
|
||||
// level two
|
||||
> li > ul {
|
||||
padding-left: $left-padding-unit * 2;
|
||||
}
|
||||
|
||||
// level three
|
||||
> li > ul > li > ul {
|
||||
padding-left: $left-padding-unit * 2;
|
||||
}
|
||||
|
||||
li {
|
||||
a {
|
||||
display: flex;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
height: 56px;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
|
||||
// default: just border line
|
||||
&::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;
|
||||
}
|
||||
}
|
||||
|
||||
// first item: dot + line down
|
||||
&:first-of-type {
|
||||
> a {
|
||||
height: 57px;
|
||||
&::before {
|
||||
background-color: transparent;
|
||||
align-self: flex-end;
|
||||
height: 30px;
|
||||
background-image: $border-img, $dot-img;
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: $icon-width;
|
||||
height: 100%;
|
||||
background-position: center center;
|
||||
background-size: 22px 22px;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
&.icon-dashboard::before {
|
||||
background-image: url("/img/menu-icons/dashboard.svg");
|
||||
}
|
||||
&.icon-machines::before {
|
||||
background-image: url("/img/menu-icons/machines.svg");
|
||||
}
|
||||
&.icon-events::before {
|
||||
background-image: url("/img/menu-icons/events.svg");
|
||||
}
|
||||
&.icon-reports::before {
|
||||
background-image: url("/img/menu-icons/reports.svg");
|
||||
}
|
||||
&.icon-call-center::before {
|
||||
background-image: url("/img/menu-icons/call-center.svg");
|
||||
}
|
||||
&.icon-warehouse-management::before {
|
||||
background-image: url("/img/menu-icons/dashboard.svg");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// last item: dot + line up
|
||||
&:last-of-type {
|
||||
margin: 0;
|
||||
> a {
|
||||
&::before {
|
||||
background-color: transparent;
|
||||
align-self: flex-start;
|
||||
height: 30px;
|
||||
background-image: $border-img, $dot-img;
|
||||
background-position: bottom center;
|
||||
}
|
||||
}
|
||||
}
|
||||
// subnav level 1
|
||||
> ul {
|
||||
// padding-left: $subnav-indent;
|
||||
> li {
|
||||
a {
|
||||
padding-left: $subnav-indent;
|
||||
border: none;
|
||||
&:hover {
|
||||
background-color: rgba($text-color, 0.03);
|
||||
}
|
||||
}
|
||||
|
||||
// single item: just a dot
|
||||
&:first-of-type:last-of-type {
|
||||
> a {
|
||||
&::before {
|
||||
background-image: $dot-img;
|
||||
// subnav level 2
|
||||
> ul {
|
||||
// padding-left: $subnav-indent;
|
||||
> li {
|
||||
a {
|
||||
color: blue;
|
||||
}
|
||||
// subnav level 3
|
||||
> ul {
|
||||
// padding-left: $subnav-indent;
|
||||
> li {
|
||||
a {
|
||||
color: red;
|
||||
}
|
||||
// subnav level 4
|
||||
> ul {
|
||||
// padding-left: $subnav-indent;
|
||||
> li {
|
||||
a {
|
||||
color: green;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// level three item: insert extra line left to connect level two items
|
||||
> li > ul :not(:last-of-type) li {
|
||||
display: flex;
|
||||
margin-left: -$left-padding-unit * 2;
|
||||
&::before {
|
||||
content: " ";
|
||||
width: $border_width;
|
||||
margin-right: $border-margin-right;
|
||||
background-image: $border-img;
|
||||
background-repeat: repeat-y;
|
||||
background-position: top center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user