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

more list styling throughout vault

Browse Source
This commit is contained in:
Kyle Spearrin
2016-09-09 00:46:12 -04:00
parent 50a05b522e
commit ac0ceac647
9 changed files with 362 additions and 221 deletions
Download Patch File Download Diff File Expand all files Collapse all files

228
src/popup/less/components.less Normal file
View File

@@ -0,0 +1,228 @@
@import (reference) "../../../node_modules/bootstrap/less/mixins.less";
@import (reference) "../../../node_modules/bootstrap/less/variables.less";
@import (reference) "variables.less";
.header {
min-height: 44px;
max-height: 44px;
background-color: @brand-primary;
color: white;
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;
}
}
.tabs {
width: 100%;
height: 55px;
background-color: white;
border-top: 1px solid @border-color-dark;
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: @gray-light;
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 {
border-top: 1px solid @border-color;
&:first-child {
border: none;
}
}
.list-item-header {
background-color: transparent;
padding: 10px 10px;
color: @gray-light;
+ .list-item {
border: none;
}
}
.list-section {
padding-bottom: 10px;
&:first-child {
padding-top: 10px;
}
.list-section-header {
background-color: transparent;
padding: 5px 10px;
color: @gray-light;
text-transform: uppercase;
label {
font-weight: normal;
}
}
.list-section-items {
border-top: 1px solid @border-color-dark;
border-bottom: 1px solid @border-color-dark;
.list-section-item {
border-bottom: 1px solid @border-color;
&:last-child {
border: none;
}
}
}
.list-section-footer {
padding: 5px 10px;
font-size: @font-size-small;
color: @gray-light;
}
}
.list-item, .list-section-item {
display: block;
padding: 10px 10px;
background-color: white;
text-decoration: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: @text-color;
&:hover {
background-color: @list-item-hover;
}
&.list-item-condensed {
padding: 3px 10px;
}
.text {
display: block;
color: @text-color;
}
.detail {
font-size: @font-size-small;
color: @gray-light;
display: block;
}
label, .item-label {
font-size: @font-size-small;
color: @gray-light;
display: block;
width: 100%;
font-weight: normal;
}
input:not([type="checkbox"]), select, textarea {
border: none;
width: 100%;
background-color: transparent;
&:focus {
outline: none;
}
}
&.list-section-item-checkbox {
label {
font-size: @font-size-base;
color: @text-color;
display: inline;
width: initial;
font-weight: normal;
}
input[type="checkbox"] {
float: right;
}
}
}
&.list-no-selection {
.list-item, .list-section-item {
&:hover {
background-color: white;
}
}
}
}

143
src/popup/less/popup.less
View File

@@ -1,151 +1,26 @@
@import "../../../node_modules/bootstrap/less/bootstrap.less";
@font-family: "Open Sans", sans-serif;
@brand-primary: #3c8dbc;
@import "variables.less";
@import "components.less";
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;
}
background-color: @background-color;
}
.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;
overflow: auto;
ul {
width: 100%;
list-style: none;
padding: 0;
margin: 0;
&.content-tabs {
bottom: 55px;
}
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;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
&:last-child {
border: none;
}
.text {
display: block;
}
.detail {
font-size: 12px;
color: #777;
display: block;
}
}
.list-divider {
background-color: #eeeeee;
padding: 10px 10px;
border-bottom: 1px solid #ddd;
&.content-no-header {
top: 0;
}
}

10
src/popup/less/variables.less Normal file
View File

@@ -0,0 +1,10 @@
@import (reference) "../../../node_modules/bootstrap/less/mixins.less";
@import (reference) "../../../node_modules/bootstrap/less/variables.less";
@font-family-sans-serif: "Open Sans", sans-serif;
@text-color: #000000;
@brand-primary: #3c8dbc;
@background-color: #efeff4;
@border-color: #f0f0f0;
@border-color-dark: #ddd;
@list-item-hover: #fbfbfb;