mirror of https://github.com/keeweb/keeweb.git
134 lines
3.3 KiB
SCSS
134 lines
3.3 KiB
SCSS
.list {
|
|
@include flex(1);
|
|
@include display(flex);
|
|
@include align-items(stretch);
|
|
@include flex-direction(column);
|
|
@include justify-content(flex-start);
|
|
overflow: hidden;
|
|
|
|
&__header {
|
|
}
|
|
|
|
&__items {
|
|
@include flex(1);
|
|
@include display(flex);
|
|
@include align-items(stretch);
|
|
@include flex-direction(column);
|
|
@include scrollbar-on-hover;
|
|
overflow: hidden;
|
|
position: relative;
|
|
>.scroller {
|
|
@include flex(1);
|
|
@include align-self(stretch);
|
|
position: relative;
|
|
.app__list-wrap--table & {
|
|
@include scrollbar-full-width-hack();
|
|
@-moz-document url-prefix() { @include scrollbar-padding-hack(); }
|
|
@at-root { _:-ms-lang(x), .app__list-wrap--table .list__items>.scroller { @include scrollbar-padding-hack(); } }
|
|
}
|
|
@include mobile { width: 100% !important; }
|
|
}
|
|
}
|
|
|
|
&__search {
|
|
padding: $small-spacing;
|
|
|
|
&-header {
|
|
@include display(flex);
|
|
@include align-items(stretch);
|
|
@include flex-direction(row);
|
|
@include justify-content(flex-start);
|
|
}
|
|
&-field-wrap {
|
|
@include flex(1);
|
|
position: relative;
|
|
}
|
|
&-field {
|
|
width: 100%;
|
|
}
|
|
&-icon-search {
|
|
@include th { color: muted-color(); }
|
|
position: absolute;
|
|
top: .6em;
|
|
right: .5em;
|
|
cursor: pointer;
|
|
&:hover {
|
|
@include th { color: medium-color(); }
|
|
}
|
|
}
|
|
&-btn-new {
|
|
@include icon-btn;
|
|
margin-left: $small-spacing;
|
|
}
|
|
&-btn-sort {
|
|
@include icon-btn;
|
|
}
|
|
&-btn-menu {
|
|
display: none;
|
|
@include mobile {
|
|
display: block;
|
|
@include area-selectable;
|
|
padding: .7em .6em 0;
|
|
height: 1.6em;
|
|
margin-right: $base-padding-h;
|
|
>i {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&__table {
|
|
width: calc(100% - 2px);
|
|
td, th {
|
|
padding: $base-padding;
|
|
text-align: left;
|
|
}
|
|
}
|
|
|
|
&__item {
|
|
padding: $base-padding-px;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
@include area-selectable(right);
|
|
&--active, &--active:hover {
|
|
@include nomobile { @include area-selected(right); }
|
|
}
|
|
|
|
&:not(.list__item--table) {
|
|
height: 32px;
|
|
}
|
|
|
|
&--expired {
|
|
.list__item-title, .list__item-descr { text-decoration: line-through; }
|
|
}
|
|
|
|
&-icon {
|
|
width: 14px;
|
|
height: 14px;
|
|
&--custom {
|
|
vertical-align: text-bottom;
|
|
&.yellow { @include filter(grayscale(1) sepia(1) hue-rotate(20deg) brightness(1.17) saturate(5.7)); }
|
|
&.green { @include filter(grayscale(1) sepia(1) hue-rotate(55deg) brightness(1.01) saturate(4.9)); }
|
|
&.red { @include filter(grayscale(1) sepia(1) hue-rotate(316deg) brightness(1.1) saturate(6)); }
|
|
&.orange { @include filter(grayscale(1) sepia(1) hue-rotate(355deg) brightness(0.92) saturate(5)); }
|
|
&.blue { @include filter(grayscale(1) sepia(1) hue-rotate(180deg) brightness(0.9) saturate(5)); }
|
|
&.violet { @include filter(grayscale(1) sepia(1) hue-rotate(238deg) brightness(1) saturate(6.2)); }
|
|
}
|
|
}
|
|
|
|
&-title {
|
|
margin-left: 2px;
|
|
}
|
|
|
|
&-descr {
|
|
font-size: .8em;
|
|
@include th { color: muted-color(); }
|
|
display: block;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
}
|