mirror of
https://github.com/Jackzmc/storage.git
synced 2025-05-07 08:43:20 +00:00
Switch to <a> for sidebar
This commit is contained in:
parent
86bcabd1fc
commit
de9a0225a7
2 changed files with 39 additions and 20 deletions
|
@ -5,28 +5,33 @@
|
|||
color: hsl(0, 0%, 48%);
|
||||
padding-left: 8px;
|
||||
}
|
||||
.sidebar-list {
|
||||
ul.sidebar-list {
|
||||
/* margin-top: 2px; */
|
||||
padding-top: 10px;
|
||||
padding-left: 5px;
|
||||
margin-bottom: 25px;
|
||||
width: 100%;
|
||||
}
|
||||
.sidebar-list li button {
|
||||
padding-left: 8px;
|
||||
ul.sidebar-list li {
|
||||
cursor: pointer;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
padding-right: 5px;
|
||||
border-radius: 2.5px;
|
||||
/* margin-top: 4px; */
|
||||
width: 100%;
|
||||
}
|
||||
ul.sidebar-list li a {
|
||||
padding-left: 8px;
|
||||
text-align: left;
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
}
|
||||
ul.sidebar-list li:hover,
|
||||
ul.sidebar-list li.is-active {
|
||||
background-color: rgb(235, 235, 235);
|
||||
}
|
||||
.sidebar i {
|
||||
padding-right: 4px;
|
||||
}
|
||||
.sidebar-list li button:hover, .sidebar-list li button.is-active {
|
||||
background-color: lightgray;
|
||||
}
|
||||
|
||||
.sidebar-column {
|
||||
height: 100%;
|
||||
|
|
|
@ -1,18 +1,18 @@
|
|||
<aside class="sidebar pl-0 mb-0">
|
||||
<p class="sidebar-header">Workspace</p>
|
||||
<ul class="sidebar-list">
|
||||
<li class="is-active"><button><i class="fa fa-file"></i> Files</button></li>
|
||||
<li><button><i class="fas fa-heart"></i> Favorites</button></li>
|
||||
<li><button><i class="fas fa-clock"></i> Activities</button></li>
|
||||
<li class="is-active"><a href="#"><i class="fa fa-file"></i> Files</a></li>
|
||||
<li><a href="#"><i class="fas fa-heart"></i> Favorites</a></li>
|
||||
<li><a href="#"><i class="fas fa-clock"></i> Activities</a></li>
|
||||
</ul>
|
||||
<p class="sidebar-header">Help</p>
|
||||
<ul class="sidebar-list">
|
||||
<li><button>Help</button></li>
|
||||
<li><button>About</button></li>
|
||||
<li><a href="#">Help</a></li>
|
||||
<li><a href="#">About</a></li>
|
||||
</ul>
|
||||
</aside>
|
||||
|
||||
<style>
|
||||
{{!-- <style>
|
||||
.sidebar {
|
||||
|
||||
}
|
||||
|
@ -20,13 +20,26 @@
|
|||
color: hsl(0, 0%, 48%);
|
||||
padding-left: 8px;
|
||||
}
|
||||
.sidebar-list {
|
||||
ul.sidebar-list {
|
||||
/* margin-top: 2px; */
|
||||
padding-top: 10px;
|
||||
padding-left: 5px;
|
||||
margin-bottom: 25px;
|
||||
li a {
|
||||
padding-left: 8px;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
padding-right: 5px;
|
||||
border-radius: 2.5px;
|
||||
/* margin-top: 4px; */
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
li a:hover, li a.is-active {
|
||||
background-color: lightgray;
|
||||
}
|
||||
}
|
||||
.sidebar-list li button {
|
||||
ul.sidebar-list li a {
|
||||
padding-left: 8px;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
|
@ -35,11 +48,12 @@
|
|||
/* margin-top: 4px; */
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
ul.sidebar-list li a:hover, ul.sidebar-list li a.is-active {
|
||||
background-color: lightgray;
|
||||
}
|
||||
.sidebar i {
|
||||
margin-left: 2px;
|
||||
}
|
||||
.sidebar-list li button:hover, .sidebar-list li button.is-active {
|
||||
background-color: lightgray;
|
||||
}
|
||||
</style>
|
||||
|
||||
</style> --}}
|
Loading…
Add table
Add a link
Reference in a new issue