keeweb/app/styles/areas/_list.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;
      // @include size(100%);
    }
  }

  &__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% - 1px);
    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: 16px;
      height: 16px;
      &--custom {
        @include filter(grayscale(1));
        vertical-align: text-bottom;
        // TODO: find more suitable colors
        &.yellow { @include filter(grayscale(1) sepia(1) hue-rotate(20deg) brightness(0.4) saturate(3) brightness(2)); }
        &.green { @include filter(grayscale(1) sepia(1) hue-rotate(70deg) brightness(.5) saturate(2) brightness(1.3)); }
        &.red { @include filter(grayscale(1) sepia(1) hue-rotate(320deg) brightness(0.6) saturate(4) brightness(1)); }
        &.orange { @include filter(grayscale(1) sepia(1) hue-rotate(340deg) brightness(.4) saturate(3) brightness(1.8)); }
        &.blue { @include filter(grayscale(1) sepia(1) hue-rotate(170deg) brightness(0.3) saturate(3) brightness(2)); }
        &.violet { @include filter(grayscale(1) sepia(1) hue-rotate(240deg) brightness(0.8) saturate(2.7) brightness(.9)); }
      }
    }

    &-title {
      margin-left: 2px;
    }

    &-descr {
      font-size: .8em;
      @include th { color: muted-color(); }
      display: block;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }
}