bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-22 03:03:43 +00:00
Code Issues Releases Wiki Activity

new layout for tabs and header

Browse Source
This commit is contained in:
Kyle Spearrin
2016-09-07 23:07:07 -04:00
parent 5d55b28ba9
commit 583c6fcad6
7 changed files with 178 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

136
src/popup/less/popup.less
View File

@@ -1,3 +1,137 @@
body {
@import "../../../node_modules/bootstrap/less/bootstrap.less";
@font-family: "Open Sans", sans-serif;
@brand-primary: #3c8dbc;
body {
font-family: @font-family;
width: 320px;
height: 568px;
}
.header {
min-height: 44px;
max-height: 44px;
background-color: @brand-primary;
color: white;
font-family: @font-family;
text-align: center;
position: absolute;
top: 0;
left: 0;
right: 0;
overflow: hidden;
a {
color: white !important;
text-decoration: none;
&:hover {
background-color: rgba(255, 255, 255, 0.1);
}
}
.title {
font-weight: bold;
display: block;
padding: 12px 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.left {
float: left;
display: block;
padding: 12px 10px;
}
.right {
float: right;
display: block;
padding: 12px 10px;
}
}
.content {
position: absolute;
top: 44px;
bottom: 55px;
left: 0;
right: 0;
overflow: auto;
}
.tabs {
width: 100%;
height: 55px;
background-color: #f5f5f5;
border-top: 1px solid #ddd;
position: absolute;
bottom: 0;
left: 0;
right: 0;
overflow: hidden;
ul {
width: 100%;
list-style: none;
padding: 0;
margin: 0;
li {
width: 25%;
float: left;
display: inline-block;
padding: 0;
margin: 0;
a {
text-align: center;
display: block;
padding: 7px 0;
text-decoration: none;
color: #777;
font-size: 12px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
&:hover {
background-color: rgba(255, 255, 255, 0.8);
}
i {
display: block;
margin-bottom: 2px;
}
}
&.active {
a {
color: @brand-primary;
}
}
}
}
}
.list {
.list-item {
display: block;
padding: 10px 10px;
background-color: white;
border-bottom: 1px solid #ddd;
color: #333;
text-decoration: none;
&:last-child {
border: none;
}
.text {
display: block;
}
.detail {
font-size: 12px;
color: #777;
display: block;
}
}
}