150 lines
4.6 KiB
SCSS
150 lines
4.6 KiB
SCSS
body {
|
|
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;
|
|
}
|
|
|
|
section.sidebar {
|
|
width: 320px;
|
|
background-color: #f8f9fa;
|
|
border-left: 1px solid #cdcdcd;
|
|
border-right: 1px solid #cdcdcd;
|
|
}
|
|
|
|
// ----------------------------------------------------------------------------------
|
|
|
|
$text-color: #1f1f1f;
|
|
$border-color: #cdcdcd;
|
|
$subnav-indent: 10px;
|
|
$icon-width: 50px;
|
|
$level-one-indent: $icon-width;
|
|
$border-img: url("../img/border.png");
|
|
$dot-img: url("../img/dot.png");
|
|
|
|
nav.main {
|
|
li {
|
|
border-bottom: 1px solid $border-color;
|
|
&:first-of-type {
|
|
border-top: 1px solid $border-color;
|
|
}
|
|
}
|
|
|
|
li > a {
|
|
display: block;
|
|
padding: 15px 0;
|
|
text-decoration: none;
|
|
color: $text-color;
|
|
&:hover {
|
|
background-color: rgba($text-color, 0.03);
|
|
}
|
|
}
|
|
|
|
// level 0: main items
|
|
ul {
|
|
list-style-type: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
> li {
|
|
a.icon {
|
|
position: relative;
|
|
padding-left: $icon-width;
|
|
|
|
&::before {
|
|
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");
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// subnav level 1
|
|
ul.subnav {
|
|
border-top: 1px solid $border-color;
|
|
// reset parent borders
|
|
li {
|
|
border-bottom: none;
|
|
&:first-of-type {
|
|
border-top: none;
|
|
}
|
|
}
|
|
|
|
> li {
|
|
// default: just border line
|
|
background-image: $border-img;
|
|
background-repeat: repeat-y;
|
|
background-position: $level-one-indent / 2 center;
|
|
|
|
a {
|
|
padding-left: $level-one-indent;
|
|
}
|
|
|
|
// subnav level 2
|
|
> ul {
|
|
> li {
|
|
background-image: $border-img;
|
|
background-repeat: repeat-y;
|
|
background-position: $subnav-indent * 5 center;
|
|
a {
|
|
color: blue;
|
|
padding-left: $subnav-indent * 7;
|
|
}
|
|
&:first-child a {
|
|
// reset parent properties
|
|
border: none;
|
|
}
|
|
// subnav level 3
|
|
> ul {
|
|
> li {
|
|
background-image: $border-img;
|
|
background-repeat: repeat-y;
|
|
background-position: $subnav-indent * 7 center;
|
|
a {
|
|
color: red;
|
|
padding-left: $subnav-indent * 9;
|
|
}
|
|
// subnav level 4
|
|
> ul {
|
|
> li {
|
|
background-image: $border-img;
|
|
background-repeat: repeat-y;
|
|
background-position: $subnav-indent * 9 center;
|
|
a {
|
|
color: green;
|
|
padding-left: $subnav-indent * 11;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|