First version
This commit is contained in:
Eden Kirin
97
experiment/index.html
Normal file
97
experiment/index.html
Normal file
@ -0,0 +1,97 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Document</title>
|
||||||
|
<link rel="stylesheet" href="dist/style.css">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<h1>Sidebar menu structure playground</h1>
|
||||||
|
|
||||||
|
<div class="wrapper">
|
||||||
|
<section class="tree-structure">
|
||||||
|
<ul class="subnav">
|
||||||
|
<li><a href="#">First Level</a></li>
|
||||||
|
<li>
|
||||||
|
<a href="#">First Level</a>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#">Second Level</a></li>
|
||||||
|
<li>
|
||||||
|
<a href="#">Second Level</a>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#">Third Level</a></li>
|
||||||
|
<li><a href="#">Third Level</a></li>
|
||||||
|
<li><a href="#">Third Level</a></li>
|
||||||
|
<li><a href="#">Third Level</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="#">Second Level</a>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#">Third Level</a></li>
|
||||||
|
<li><a href="#">Third Level</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li><a href="#">Second Level</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li><a href="#">First Level</a></li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="tree-structure">
|
||||||
|
<ul class="subnav">
|
||||||
|
<li><a href="#">First Level</a></li>
|
||||||
|
<li>
|
||||||
|
<a href="#">First Level</a>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#">Second Level</a></li>
|
||||||
|
<li>
|
||||||
|
<a href="#">Second Level</a>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#">Third Level</a></li>
|
||||||
|
<li><a href="#">Third Level</a></li>
|
||||||
|
<li><a href="#">Third Level</a></li>
|
||||||
|
<li><a href="#">Third Level</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="#">Second Level</a>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#">Third Level</a></li>
|
||||||
|
<li><a href="#">Third Level</a></li>
|
||||||
|
<li><a href="#">Third Level</a></li>
|
||||||
|
<li><a href="#">Third Level</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li><a href="#">Second Level</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="tree-structure">
|
||||||
|
<ul class="subnav">
|
||||||
|
<li><a href="#">First Level</a></li>
|
||||||
|
<li>
|
||||||
|
<a href="#">First Level</a>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#">Second Level</a></li>
|
||||||
|
<li><a href="#">Second Level</a></li>
|
||||||
|
<li><a href="#">Second Level</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<section class="example">
|
||||||
|
<img src="img/expected.png" alt="">
|
||||||
|
</section>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
134
experiment/style.scss
Normal file
134
experiment/style.scss
Normal file
@ -0,0 +1,134 @@
|
|||||||
|
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;
|
||||||
|
column-gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
section.tree-structure {
|
||||||
|
background-color: rgb(195, 253, 234);
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
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;
|
||||||
|
$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);
|
||||||
|
}
|
||||||
|
|
||||||
|
// level one
|
||||||
|
padding-left: $left-padding-unit;
|
||||||
|
|
||||||
|
// 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// single item: just a dot
|
||||||
|
&:first-of-type:last-of-type {
|
||||||
|
> a {
|
||||||
|
&::before {
|
||||||
|
background-image: $dot-img;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
3
img/menu-icons/call-center.svg
Normal file
3
img/menu-icons/call-center.svg
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 141 127">
|
||||||
|
<path fill="currentColor" d="M82.9599 104.78C104.298 99.0623 120.01 79.5897 120.01 56.4475C120.01 28.815 97.6097 6.41449 69.9773 6.41449C42.3448 6.41449 19.9442 28.815 19.9442 56.4475H13.5297C13.5297 25.2724 38.8022 0 69.9773 0C101.152 0 126.425 25.2724 126.425 56.4475C126.425 72.2328 119.945 86.5047 109.501 96.7488C109.502 96.7493 109.503 96.7497 109.504 96.7502C102.664 103.458 94.1243 108.438 84.5907 110.985C84.4656 111.019 84.3403 111.052 84.2149 111.084C84.186 111.092 84.157 111.099 84.1281 111.107C83.7961 111.192 83.463 111.275 83.1287 111.355L83.1238 111.376C81.7702 117.385 76.4006 121.874 69.9825 121.874C62.543 121.874 56.5121 115.843 56.5121 108.404C56.5121 100.964 62.543 94.9331 69.9825 94.9331C76.1666 94.9331 81.3774 99.1003 82.9599 104.78ZM88.0737 116.664C98.4876 113.539 107.766 107.788 115.138 100.179C125.272 106.924 133.81 115.878 140.063 126.353H78.5507C82.7513 124.344 86.1347 120.904 88.0737 116.664ZM0.0634766 126.353H61.4153C54.7215 123.153 50.0976 116.318 50.0976 108.404C50.0976 97.4214 59.0004 88.5186 69.9825 88.5186C76.7005 88.5186 82.6321 91.847 86.2307 96.94C89.9727 95.4372 93.4579 93.4305 96.6026 91.0041L96.4951 90.9671C106.566 83.1016 113.041 70.8454 113.041 57.0768C113.041 33.3413 93.799 14.0998 70.0635 14.0998C46.328 14.0998 27.0864 33.3413 27.0864 57.0768C27.0864 70.8454 33.561 83.1016 43.6319 90.9671C25.2648 97.2639 9.86029 109.941 0.0634766 126.353Z"></path>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.4 KiB |
6
img/menu-icons/dashboard.svg
Normal file
6
img/menu-icons/dashboard.svg
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44">
|
||||||
|
<rect height="20" width="20"></rect>
|
||||||
|
<rect height="20" width="20" y="24"></rect>
|
||||||
|
<rect height="20" width="20" x="24"></rect>
|
||||||
|
<rect height="20" width="20" x="24" y="24"></rect>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 260 B |
3
img/menu-icons/events.svg
Normal file
3
img/menu-icons/events.svg
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||||
|
<path fill="currentColor" d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"></path>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 495 B |
3
img/menu-icons/machines.svg
Normal file
3
img/menu-icons/machines.svg
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35 48">
|
||||||
|
<path d="M0,0v48h35V0H0z M31.1,35.9H3.7V30h27.4V35.9z M31.1,27.2H3.7v-5.9h27.4V27.2z M31.1,18.4H3.7v-5.9h27.4V18.4z M31.1,9.7 H3.7V3.8h27.4V9.7z"></path>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 226 B |
3
img/menu-icons/reports.svg
Normal file
3
img/menu-icons/reports.svg
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||||
|
<path fill="currentColor" d="M332.8 320h38.4c6.4 0 12.8-6.4 12.8-12.8V172.8c0-6.4-6.4-12.8-12.8-12.8h-38.4c-6.4 0-12.8 6.4-12.8 12.8v134.4c0 6.4 6.4 12.8 12.8 12.8zm96 0h38.4c6.4 0 12.8-6.4 12.8-12.8V76.8c0-6.4-6.4-12.8-12.8-12.8h-38.4c-6.4 0-12.8 6.4-12.8 12.8v230.4c0 6.4 6.4 12.8 12.8 12.8zm-288 0h38.4c6.4 0 12.8-6.4 12.8-12.8v-70.4c0-6.4-6.4-12.8-12.8-12.8h-38.4c-6.4 0-12.8 6.4-12.8 12.8v70.4c0 6.4 6.4 12.8 12.8 12.8zm96 0h38.4c6.4 0 12.8-6.4 12.8-12.8V108.8c0-6.4-6.4-12.8-12.8-12.8h-38.4c-6.4 0-12.8 6.4-12.8 12.8v198.4c0 6.4 6.4 12.8 12.8 12.8zM496 384H64V80c0-8.84-7.16-16-16-16H16C7.16 64 0 71.16 0 80v336c0 17.67 14.33 32 32 32h464c8.84 0 16-7.16 16-16v-32c0-8.84-7.16-16-16-16z"></path>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 775 B |
102
index.html
102
index.html
@ -10,87 +10,53 @@
|
|||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<h1>Sidebar menu structure playground</h1>
|
<section class="sidebar">
|
||||||
|
<nav class="main">
|
||||||
<div class="wrapper">
|
<ul>
|
||||||
<section class="tree-structure">
|
<li><a href="#" class="icon icon-dashboard">Dashboard</a></li>
|
||||||
<ul class="subnav">
|
<li><a href="#" class="icon icon-machines">Machines</a></li>
|
||||||
<li><a href="#">First Level</a></li>
|
<li><a href="#" class="icon icon-events">Events</a></li>
|
||||||
|
<li><a href="#" class="icon icon-reports">Reports</a></li>
|
||||||
<li>
|
<li>
|
||||||
<a href="#">First Level</a>
|
<a href="#" class="icon icon-call-center">Call Center</a>
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="#">Second Level</a></li>
|
<li><a href="#">Ticket Stream</a></li>
|
||||||
<li>
|
<li><a href="#">Configuration</a></li>
|
||||||
<a href="#">Second Level</a>
|
|
||||||
<ul>
|
|
||||||
<li><a href="#">Third Level</a></li>
|
|
||||||
<li><a href="#">Third Level</a></li>
|
|
||||||
<li><a href="#">Third Level</a></li>
|
|
||||||
<li><a href="#">Third Level</a></li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="#">Second Level</a>
|
|
||||||
<ul>
|
|
||||||
<li><a href="#">Third Level</a></li>
|
|
||||||
<li><a href="#">Third Level</a></li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<li><a href="#">Second Level</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
<li><a href="#">First Level</a></li>
|
|
||||||
</ul>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="tree-structure">
|
|
||||||
<ul class="subnav">
|
|
||||||
<li><a href="#">First Level</a></li>
|
|
||||||
<li>
|
<li>
|
||||||
<a href="#">First Level</a>
|
<a href="#" class="icon icon-warehouse-management">Warehouse Management</a>
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="#">Second Level</a></li>
|
<li><a href="#">Product Warehouse</a></li>
|
||||||
<li>
|
<li>
|
||||||
<a href="#">Second Level</a>
|
<a href="#">Spare part Warehouse</a>
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="#">Third Level</a></li>
|
<li>
|
||||||
<li><a href="#">Third Level</a></li>
|
<a href="#">Warehouse Documents</a>
|
||||||
<li><a href="#">Third Level</a></li>
|
<ul>
|
||||||
<li><a href="#">Third Level</a></li>
|
<li>
|
||||||
|
<a href="#">Automatic Orders</a>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#">Ordering Triggers</a></li>
|
||||||
|
<li><a href="#">Ordering Rules</a></li>
|
||||||
|
<li><a href="#">Run Scheduler</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="#">Rpoerting</a>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#">Inventory Report</a></li>
|
||||||
|
<li><a href="#">Spare Part Moves</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
|
||||||
<a href="#">Second Level</a>
|
|
||||||
<ul>
|
|
||||||
<li><a href="#">Third Level</a></li>
|
|
||||||
<li><a href="#">Third Level</a></li>
|
|
||||||
<li><a href="#">Third Level</a></li>
|
|
||||||
<li><a href="#">Third Level</a></li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<li><a href="#">Second Level</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</section>
|
</nav>
|
||||||
|
|
||||||
<section class="tree-structure">
|
|
||||||
<ul class="subnav">
|
|
||||||
<li><a href="#">First Level</a></li>
|
|
||||||
<li>
|
|
||||||
<a href="#">First Level</a>
|
|
||||||
<ul>
|
|
||||||
<li><a href="#">Second Level</a></li>
|
|
||||||
<li><a href="#">Second Level</a></li>
|
|
||||||
<li><a href="#">Second Level</a></li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<section class="example">
|
|
||||||
<img src="img/expected.png" alt="">
|
|
||||||
</section>
|
</section>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
|
|||||||
208
style.scss
208
style.scss
@ -1,134 +1,114 @@
|
|||||||
body {
|
body {
|
||||||
font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana,
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
|
||||||
sans-serif;
|
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||||
font-size: 14pt;
|
font-size: 16px;
|
||||||
padding: 1rem 5rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrapper {
|
section.sidebar {
|
||||||
display: flex;
|
width: 320px;
|
||||||
column-gap: 1rem;
|
background-color: #f8f9fa;
|
||||||
|
border: 1px solid #cdcdcd;
|
||||||
}
|
}
|
||||||
|
|
||||||
section.tree-structure {
|
// ----------------------------------------------------------------------------------
|
||||||
background-color: rgb(195, 253, 234);
|
|
||||||
flex-grow: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
section.example {
|
$text-color: #1f1f1f;
|
||||||
margin-top: 5rem;
|
$border-color: #cdcdcd;
|
||||||
img {
|
$subnav-indent: 16px;
|
||||||
max-width: 100%;
|
$icon-width: 50px;
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// ------------------------------------------------
|
nav.main {
|
||||||
|
li > a {
|
||||||
$border-img: url("../img/border.png");
|
display: block;
|
||||||
$dot-img: url("../img/dot.png");
|
padding: 15px 0;
|
||||||
$border_width: 20px;
|
text-decoration: none;
|
||||||
$border-margin-right: 15px;
|
color: $text-color;
|
||||||
$left-padding-unit: 16px;
|
border-top: 1px solid $border-color;
|
||||||
|
|
||||||
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);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// level one
|
// level 0: main items
|
||||||
padding-left: $left-padding-unit;
|
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 {
|
&::before {
|
||||||
background-color: transparent;
|
content: "";
|
||||||
align-self: flex-end;
|
position: absolute;
|
||||||
height: 30px;
|
top: 0;
|
||||||
background-image: $border-img, $dot-img;
|
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
|
// subnav level 1
|
||||||
&:last-of-type {
|
> ul {
|
||||||
margin: 0;
|
// padding-left: $subnav-indent;
|
||||||
> a {
|
> li {
|
||||||
&::before {
|
a {
|
||||||
background-color: transparent;
|
padding-left: $subnav-indent;
|
||||||
align-self: flex-start;
|
border: none;
|
||||||
height: 30px;
|
&:hover {
|
||||||
background-image: $border-img, $dot-img;
|
background-color: rgba($text-color, 0.03);
|
||||||
background-position: bottom center;
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// single item: just a dot
|
// subnav level 2
|
||||||
&:first-of-type:last-of-type {
|
> ul {
|
||||||
> a {
|
// padding-left: $subnav-indent;
|
||||||
&::before {
|
> li {
|
||||||
background-image: $dot-img;
|
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