Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2024-12-26 17:08:33 +01:00
Code Issues Projects Releases Wiki Activity

style homepage

Browse Source
This commit is contained in:
Kyle Spearrin 2018-04-14 14:16:21 -04:00
parent 5958fa1fc4
commit 423c4e06c7
2 changed files with 75 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/popup/accounts/home.component.html
View File

@ -1,15 +1,11 @@
<div class="home-page">
<a routerLink="/environment" class="settings-icon">
<i class="fa fa-cog fa-lg"></i><span>&nbsp;{{'settings' | i18n}}</span>
</a>
<img src="../images/logo@2x.png" alt="bitwarden" class="img-responsive" />
<p>{{'loginOrCreateNewAccount' | i18n}}</p>
<div class="bottom-buttons">
<a class="btn btn-lg btn-primary btn-block" routerLink="/register">
<strong>{{'createAccount' | i18n}}</strong>
</a>
<a class="btn btn-lg btn-link btn-block" routerLink="/login">
{{'login' | i18n}}
</a>
<div class="center-content">
<div class="content">
<img src="../images/logo@2x.png" alt="bitwarden" class="img-responsive" />
<p class="lead text-center">{{'loginOrCreateNewAccount' | i18n}}</p>
<a class="btn primary block" routerLink="/login"><b>{{'login' | i18n}}</b></a>
<a class="btn block" routerLink="/register">{{'createAccount' | i18n}}</a>
</div>
</div>
<a routerLink="/environment" class="settings-icon">
<i class="fa fa-cog fa-lg"></i><span>&nbsp;{{'settings' | i18n}}</span>
</a>

66
src/popup/scss/pages.scss
View File

@ -15,3 +15,69 @@ app-password-generator .password-block {
text-align: center;
margin: 20px;
}
app-home {
position: fixed;
height: 100%;
width: 100%;
.center-content {
margin-top: -50px;
height: calc(100% + 50px);
}
img {
width: 282px;
margin: 0 auto;
}
p.lead {
margin: 30px 0;
}
.btn + .btn {
margin-top: 10px;
}
a.settings-icon {
color: #bbbbbb;
position: absolute;
top: 10px;
left: 10px;
span {
visibility: hidden;
}
&:hover {
color: $brand-primary;
text-decoration: none;
span {
visibility: visible;
}
}
}
}
body.body-sm, body.body-xs {
app-home {
.center-content {
margin-top: 0;
height: 100%;
}
p.lead {
margin: 15px 0;
}
}
}
body.body-full {
app-home {
.center-content {
margin-top: -80px;
height: calc(100% + 80px);
}
}
}