Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2024-11-23 11:56:00 +01:00
Code Issues Projects Releases Wiki Activity

box styling on view page

Browse Source
This commit is contained in:
Kyle Spearrin 2018-01-23 22:57:24 -05:00
parent d3fdaed4c2
commit a816961dff
3 changed files with 108 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/vault/groupings.component.html
View File

@ -4,7 +4,7 @@
<li><a href="#"><i class="fa fa-fw fa-spinner"></i> All Items</a></li> <li><a href="#"><i class="fa fa-fw fa-spinner"></i> All Items</a></li>
<li><a href="#"><i class="fa fa-fw fa-star"></i> Favorites</a></li> <li><a href="#"><i class="fa fa-fw fa-star"></i> Favorites</a></li>
</ul> </ul>
<h2><i class="fa fa-tags"></i> Types</h2> <h2><i class="fa fa-tag"></i> Types</h2>
<ul> <ul>
<li><a href="#"><i class="fa fa-fw fa-globe"></i> Login</a></li> <li><a href="#"><i class="fa fa-fw fa-globe"></i> Login</a></li>
<li><a href="#"><i class="fa fa-fw fa-credit-card"></i> Card</a></li> <li><a href="#"><i class="fa fa-fw fa-credit-card"></i> Card</a></li>

41
src/app/vault/view.component.html
View File

@ -1,17 +1,32 @@
<div class="content"> <div class="content">
<div>Something Something Something Something Something Something</div> <div class="inner-content">
<div>Something</div><div>Something</div><div>Something</div><div>Something</div> <div class="box">
<div>Something</div><div>Something</div><div>Something</div><div>Something</div> <div class="box-header">
<div>Something</div><div>Something</div><div>Something</div><div>Something</div> Item Information
<div>Something</div><div>Something</div><div>Something</div><div>Something</div> </div>
<div>Something</div><div>Something</div><div>Something</div><div>Something</div> <div class="box-content">
<div>Something</div><div>Something</div><div>Something</div><div>Something</div> <div class="box-content-row">
<div>Something</div><div>Something</div><div>Something</div><div>Something</div> <span class="row-label">Name</span>
<div>Something</div><div>Something</div><div>Something</div><div>Something</div> Google
<div>Something</div><div>Something</div><div>Something</div><div>Something</div> </div>
<div>Something</div><div>Something</div><div>Something</div><div>Something</div> <div class="box-content-row">
<div>Something</div><div>Something</div><div>Something</div><div>Something</div> <span class="row-label">URI</span>
<div>Something</div><div>Something</div><div>Something</div><div>Something</div> https://google.com
</div>
<div class="box-content-row">
<span class="row-label">Username</span>
hello@bitwarden.com
</div>
<div class="box-content-row">
<span class="row-label">Password</span>
JKsiuhfLKJDOsudfhjksdfjk
</div>
</div>
<div class="box-footer">
Some footer information.
</div>
</div>
</div>
</div> </div>
<div class="footer"> <div class="footer">
Edit Edit

83
src/scss/styles.scss
View File

@ -87,10 +87,6 @@ a {
max-width: 250px; max-width: 250px;
border-right: 1px solid $border-color-dark; border-right: 1px solid $border-color-dark;
.inner-content {
padding: 10px 15px;
}
h2 { h2 {
font-size: $font-size-base; font-size: $font-size-base;
font-weight: bold; font-weight: bold;
@ -149,6 +145,10 @@ a {
#categories, #items, #details { #categories, #items, #details {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.inner-content {
padding: 10px 15px;
}
} }
.header { .header {
@ -558,3 +558,78 @@ a {
} }
} }
} }
.box {
min-width: 400px;
max-width: 550px;
width: 100%;
margin: 0 auto;
.box-header {
margin: 0 10px 5px 10px;
color: $gray-light;
text-transform: uppercase;
}
.box-content {
background: $background-color;
border-radius: 5px;
.box-content-row {
padding: 10px 15px;
position: relative;
z-index: 1;
&:before {
content: "";
position: absolute;
right: 0;
bottom: 0;
height: 1px;
width: calc(100% - 10px);
border-bottom: 1px solid $border-color;
}
&:first-child {
padding-top: 20px;
}
&:last-child {
padding-bottom: 20px;
&:before {
border: none;
height: 0;
}
}
&:after {
content: "";
display: table;
clear: both;
}
&:hover, &:focus, &.active {
background-color: $background-color-alt;
}
.row-label {
font-size: $font-size-small;
color: $text-muted;
display: block;
width: 100%;
font-weight: normal;
margin-bottom: 5px;
}
input {
}
}
}
.box-footer {
margin: 5px 10px;
font-size: $font-size-small;
color: $text-muted;
}
}