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,9 +11,8 @@
|
|||||||
</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="#" class="list-section-item condensed" title="{{'viewItem' | i18n}}">
|
href="#" 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}}
|
||||||
@ -25,7 +24,6 @@
|
|||||||
<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">
|
||||||
<button (click)="addCipher()" class="block primary" title="{{'addItem' | i18n}}">
|
<button (click)="addCipher()" class="block primary" title="{{'addItem' | i18n}}">
|
||||||
|
|||||||
@ -340,90 +340,20 @@ textarea {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.list > a {
|
||||||
.list {
|
|
||||||
.list-grouped {
|
|
||||||
.list-grouped-header {
|
|
||||||
background-color: transparent;
|
|
||||||
padding: 10px 10px;
|
|
||||||
color: $gray-light;
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
|
|
||||||
small {
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
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 {
|
|
||||||
display: block;
|
display: block;
|
||||||
padding: 10px 10px;
|
padding: 3px 10px;
|
||||||
background-color: white;
|
background-color: white;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: $text-color;
|
color: $text-color;
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
|
|
||||||
&:not(.pre) {
|
|
||||||
&:after {
|
&:after {
|
||||||
content: "";
|
content: "";
|
||||||
display: table;
|
display: table;
|
||||||
clear: both;
|
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 {
|
&:before {
|
||||||
content: "";
|
content: "";
|
||||||
@ -435,12 +365,10 @@ textarea {
|
|||||||
border-bottom: 1px solid $border-color;
|
border-bottom: 1px solid $border-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:last-child {
|
&:last-child:before {
|
||||||
&:before {
|
|
||||||
border: none;
|
border: none;
|
||||||
height: 0;
|
height: 0;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
&:hover, &:focus, &.active {
|
&:hover, &:focus, &.active {
|
||||||
background-color: $list-item-hover;
|
background-color: $list-item-hover;
|
||||||
@ -451,14 +379,10 @@ textarea {
|
|||||||
padding-left: 5px;
|
padding-left: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.leading-icon {
|
.text, .detail {
|
||||||
font-size: 35px;
|
white-space: nowrap;
|
||||||
float: left;
|
overflow: hidden;
|
||||||
display: inline-block;
|
text-overflow: ellipsis;
|
||||||
margin: 0 8px 5px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text {
|
|
||||||
display: block;
|
display: block;
|
||||||
color: $text-color;
|
color: $text-color;
|
||||||
}
|
}
|
||||||
@ -466,42 +390,6 @@ textarea {
|
|||||||
.detail {
|
.detail {
|
||||||
font-size: $font-size-small;
|
font-size: $font-size-small;
|
||||||
color: $gray-light;
|
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 {
|
.icon {
|
||||||
@ -519,93 +407,6 @@ textarea {
|
|||||||
max-height: 20px;
|
max-height: 20px;
|
||||||
max-width: 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 {
|
|
||||||
.list-grouped-item:not(.list-allow-selection), .list-section-item:not(.list-allow-selection) {
|
|
||||||
&:hover {
|
|
||||||
background-color: white;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user