mirror of
https://github.com/bitwarden/web
synced 2025-12-14 07:13:23 +00:00
vault layout
This commit is contained in:
Kyle Spearrin
@@ -39,35 +39,140 @@
|
|||||||
</nav>
|
</nav>
|
||||||
<div class="container page-content">
|
<div class="container page-content">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-3">
|
<div class="col-4">
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-header">
|
<div class="card-header">
|
||||||
Navigation
|
Filters
|
||||||
</div>
|
</div>
|
||||||
<div class="list-group list-group-flush">
|
|
||||||
<a href="#" class="list-group-item list-group-item-action">
|
|
||||||
Item 1
|
|
||||||
</a>
|
|
||||||
<a href="#" class="list-group-item list-group-item-action active">
|
|
||||||
Item 2
|
|
||||||
</a>
|
|
||||||
<a href="#" class="list-group-item list-group-item-action">
|
|
||||||
Item 3
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-6">
|
|
||||||
<h1>My Vault</h1>
|
|
||||||
<p>Stuff</p>
|
|
||||||
</div>
|
|
||||||
<div class="col-3">
|
|
||||||
<div class="card">
|
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
All Items
|
<input type="search" class="form-control" id="search" placeholder="Search vault">
|
||||||
|
<ul class="fa-ul">
|
||||||
|
<li>
|
||||||
|
<a href="#">
|
||||||
|
<i class="fa-li fa fa-fw fa-th"></i>All Items
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="#">
|
||||||
|
<i class="fa-li fa fa-fw fa-star"></i>Favorites
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<h3>Types</h3>
|
||||||
|
<ul class="fa-ul">
|
||||||
|
<li>
|
||||||
|
<a href="#">
|
||||||
|
<i class="fa-li fa fa-fw fa-globe"></i>Login
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="#">
|
||||||
|
<i class="fa-li fa fa-fw fa-credit-card"></i>Card
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="#">
|
||||||
|
<i class="fa-li fa fa-fw fa-id-card-o"></i>Identity
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="#">
|
||||||
|
<i class="fa-li fa fa-fw fa-sticky-note-o"></i>
|
||||||
|
Secure Note
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<h3>Folders</h3>
|
||||||
|
<ul class="fa-ul">
|
||||||
|
<li>
|
||||||
|
<a href="#">
|
||||||
|
<i class="fa-li fa fa-fw fa-caret-right"></i>
|
||||||
|
Folder 1
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="#">
|
||||||
|
<i class="fa-li fa fa-fw fa-caret-right"></i>
|
||||||
|
Folder 1
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="#">
|
||||||
|
<i class="fa-li fa fa-fw fa-caret-right"></i>
|
||||||
|
Folder 1
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="#">
|
||||||
|
<i class="fa-li fa fa-fw fa-caret-right"></i>
|
||||||
|
Folder 1
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="#">
|
||||||
|
<i class="fa-li fa fa-fw fa-caret-right"></i>
|
||||||
|
Folder 1
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="#">
|
||||||
|
<i class="fa-li fa fa-fw fa-caret-right"></i>
|
||||||
|
Folder 1
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<h3>Collections</h3>
|
||||||
|
<ul class="fa-ul">
|
||||||
|
<li>
|
||||||
|
<a href="#">
|
||||||
|
<i class="fa-li fa fa-fw fa-caret-right"></i>
|
||||||
|
Collection 1
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="#">
|
||||||
|
<i class="fa-li fa fa-fw fa-caret-right"></i>
|
||||||
|
Collection 1
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="#">
|
||||||
|
<i class="fa-li fa fa-fw fa-caret-right"></i>
|
||||||
|
Collection 1
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="col-8">
|
||||||
|
<table class="table table-hover table-sm">
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<div class="dropdown">
|
||||||
|
<button class="btn btn-outline-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true"
|
||||||
|
aria-expanded="false">
|
||||||
|
<i class="fa fa-cog"></i>
|
||||||
|
</button>
|
||||||
|
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
|
||||||
|
<a class="dropdown-item" href="#">Action</a>
|
||||||
|
<a class="dropdown-item" href="#">Another action</a>
|
||||||
|
<a class="dropdown-item" href="#">Something else here</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<input type="checkbox">
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<a href="#">Google</a>
|
||||||
|
<small class="text-muted">MyUsername</small>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="container footer text-muted">
|
<div class="container footer text-muted">
|
||||||
|
|||||||
@@ -72,3 +72,31 @@ body {
|
|||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
padding-left: calc(#{$list-group-item-padding-x} - 3px);
|
padding-left: calc(#{$list-group-item-padding-x} - 3px);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
app-vault {
|
||||||
|
.table {
|
||||||
|
line-height: 1;
|
||||||
|
|
||||||
|
tr:first-child {
|
||||||
|
td {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
td {
|
||||||
|
vertical-align: middle;
|
||||||
|
|
||||||
|
a {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
td:first-child {
|
||||||
|
width: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
td:nth-child(2) {
|
||||||
|
width: 40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user