mirror of
https://github.com/bitwarden/browser.git
synced 2025-02-11 00:31:45 +01:00
list style cleanup
This commit is contained in:
Kyle Spearrin
parent
26a0b704a0
commit
0d3f631503
@ -11,20 +11,18 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<div class="list">
|
<div class="list">
|
||||||
<div class="list-section" style="padding-top: 0; padding-bottom: 0;">
|
<a *ngFor="let cipher of ciphers" appStopClick (click)="cipherClicked(cipher)"
|
||||||
<a *ngFor="let cipher of ciphers" appStopClick (click)="cipherClicked(cipher)"
|
href="#" title="{{'viewItem' | i18n}}">
|
||||||
href="#" class="list-section-item condensed" title="{{'viewItem' | i18n}}">
|
<app-vault-icon [cipher]="cipher"></app-vault-icon>
|
||||||
<app-vault-icon [cipher]="cipher"></app-vault-icon>
|
<span class="text">
|
||||||
<span class="text">
|
{{cipher.name}}
|
||||||
{{cipher.name}}
|
<i class="fa fa-share-alt text-muted" *ngIf="cipher.organizationId"
|
||||||
<i class="fa fa-share-alt text-muted" *ngIf="cipher.organizationId"
|
title="{{'shared' | i18n}}"></i>
|
||||||
title="{{'shared' | i18n}}"></i>
|
<i class="fa fa-paperclip text-muted" *ngIf="cipher.attachments"
|
||||||
<i class="fa fa-paperclip text-muted" *ngIf="cipher.attachments"
|
title="{{'attachments' | i18n}}"></i>
|
||||||
title="{{'attachments' | i18n}}"></i>
|
</span>
|
||||||
</span>
|
<span class="detail">{{cipher.subTitle}}</span>
|
||||||
<span class="detail">{{cipher.subTitle}}</span>
|
</a>
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
|
|||||||
@ -340,271 +340,72 @@ textarea {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.list > a {
|
||||||
|
display: block;
|
||||||
|
padding: 3px 10px;
|
||||||
|
background-color: white;
|
||||||
|
text-decoration: none;
|
||||||
|
color: $text-color;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
|
||||||
.list {
|
&:after {
|
||||||
.list-grouped {
|
content: "";
|
||||||
.list-grouped-header {
|
display: table;
|
||||||
background-color: transparent;
|
clear: both;
|
||||||
padding: 10px 10px;
|
|
||||||
color: $gray-light;
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
|
|
||||||
small {
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.list-section {
|
&:before {
|
||||||
padding-bottom: 10px;
|
content: "";
|
||||||
|
position: absolute;
|
||||||
&:first-child {
|
right: 0;
|
||||||
padding-top: 10px;
|
bottom: 0;
|
||||||
}
|
height: 1px;
|
||||||
|
width: calc(100% - 10px);
|
||||||
.list-section-header {
|
border-bottom: 1px solid $border-color;
|
||||||
background-color: transparent;
|
|
||||||
padding: 5px 10px;
|
|
||||||
color: $gray-light;
|
|
||||||
text-transform: uppercase;
|
|
||||||
font-size: ($font-size-base - 1);
|
|
||||||
|
|
||||||
label {
|
|
||||||
font-weight: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
span {
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.list-section-items {
|
|
||||||
border-top: 1px solid $border-color-dark;
|
|
||||||
border-bottom: 1px solid $border-color-dark;
|
|
||||||
}
|
|
||||||
|
|
||||||
.list-section-footer {
|
|
||||||
padding: 5px 10px;
|
|
||||||
font-size: $font-size-small;
|
|
||||||
color: $gray-light;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.list-grouped-item, .list-section-item {
|
&:last-child:before {
|
||||||
|
border: none;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover, &:focus, &.active {
|
||||||
|
background-color: $list-item-hover;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(:hover):focus {
|
||||||
|
border-left: 5px solid $brand-primary;
|
||||||
|
padding-left: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text, .detail {
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
display: block;
|
display: block;
|
||||||
padding: 10px 10px;
|
|
||||||
background-color: white;
|
|
||||||
text-decoration: none;
|
|
||||||
color: $text-color;
|
color: $text-color;
|
||||||
position: relative;
|
|
||||||
z-index: 1;
|
|
||||||
|
|
||||||
&:not(.pre) {
|
|
||||||
&:after {
|
|
||||||
content: "";
|
|
||||||
display: table;
|
|
||||||
clear: both;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.text-primary {
|
|
||||||
color: $brand-primary !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.text-danger {
|
|
||||||
color: $brand-danger !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:not(.wrap) {
|
|
||||||
.text, .detail {
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:before {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
height: 1px;
|
|
||||||
width: calc(100% - 10px);
|
|
||||||
border-bottom: 1px solid $border-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
&:before {
|
|
||||||
border: none;
|
|
||||||
height: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover, &:focus, &.active {
|
|
||||||
background-color: $list-item-hover;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:not(:hover):focus {
|
|
||||||
border-left: 5px solid $brand-primary;
|
|
||||||
padding-left: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.leading-icon {
|
|
||||||
font-size: 35px;
|
|
||||||
float: left;
|
|
||||||
display: inline-block;
|
|
||||||
margin: 0 8px 5px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text {
|
|
||||||
display: block;
|
|
||||||
color: $text-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.detail {
|
|
||||||
font-size: $font-size-small;
|
|
||||||
color: $gray-light;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.item-label {
|
|
||||||
font-size: $font-size-small;
|
|
||||||
color: $gray-light;
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
font-weight: normal;
|
|
||||||
margin-bottom: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.list-section-item-table {
|
|
||||||
display: table;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-button {
|
|
||||||
padding: 8px 10px 8px 5px;
|
|
||||||
display: table-cell;
|
|
||||||
width: 20px;
|
|
||||||
vertical-align: middle;
|
|
||||||
|
|
||||||
&.text-danger {
|
|
||||||
color: $brand-danger !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-button-content {
|
|
||||||
display: table-cell;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
.field-type {
|
|
||||||
margin: 5px 0 0 27px;
|
|
||||||
width: calc(100% - 27px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
float: left;
|
|
||||||
height: 36px;
|
|
||||||
width: 34px;
|
|
||||||
margin-left: -5px;
|
|
||||||
color: $text-muted;
|
|
||||||
|
|
||||||
img {
|
|
||||||
border-radius: $border-radius;
|
|
||||||
max-height: 20px;
|
|
||||||
max-width: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.single-line {
|
|
||||||
height: initial;
|
|
||||||
display: block;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-buttons {
|
|
||||||
float: right;
|
|
||||||
|
|
||||||
.btn-list {
|
|
||||||
float: left;
|
|
||||||
cursor: pointer;
|
|
||||||
padding: 10px 8px;
|
|
||||||
background: none;
|
|
||||||
border: none;
|
|
||||||
color: $brand-primary;
|
|
||||||
|
|
||||||
&:hover, &:focus {
|
|
||||||
color: darken($brand-primary, 10%);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.disabled {
|
|
||||||
color: $list-icon-color;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: $list-icon-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
padding-right: 2px !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.fa-chevron-right, .right-icon {
|
|
||||||
float: right;
|
|
||||||
margin-top: 4px;
|
|
||||||
color: $list-icon-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.item-sub-label {
|
|
||||||
float: right;
|
|
||||||
display: block;
|
|
||||||
margin-right: 15px;
|
|
||||||
color: $gray-light;
|
|
||||||
}
|
|
||||||
|
|
||||||
small.item-sub-label {
|
|
||||||
margin-top: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.condensed {
|
|
||||||
padding: 3px 10px;
|
|
||||||
|
|
||||||
.action-buttons {
|
|
||||||
.btn-list {
|
|
||||||
padding: 8px 5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:not(:hover):focus {
|
|
||||||
padding-left: 5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.wrap {
|
|
||||||
overflow-wrap: break-word;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.flex {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flex-grow {
|
|
||||||
flex-grow: 1;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.list-no-selection {
|
.detail {
|
||||||
.list-grouped-item:not(.list-allow-selection), .list-section-item:not(.list-allow-selection) {
|
font-size: $font-size-small;
|
||||||
&:hover {
|
color: $gray-light;
|
||||||
background-color: white;
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
float: left;
|
||||||
|
height: 36px;
|
||||||
|
width: 34px;
|
||||||
|
margin-left: -5px;
|
||||||
|
color: $text-muted;
|
||||||
|
|
||||||
|
img {
|
||||||
|
border-radius: $border-radius;
|
||||||
|
max-height: 20px;
|
||||||
|
max-width: 20px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user