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;
      .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;
        max-width: 100% !important;
      }
    }
  }

  &__search {
    padding: $small-spacing;

    &-header {
      @include display(flex);
      @include align-items(stretch);
      @include flex-direction(row);
      @include justify-content(flex-start);
      @include flex-wrap(wrap);
    }
    &-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;
        }
      }
    }
    &-adv {
      @include flex(100%);
      @include display(flex);
      @include align-items(stretch);
      @include flex-direction(row);
      @include flex-wrap(wrap);
      &-text {
        @include flex(100%);
      }
    }
    &-check {
      @include flex(50%);
    }
  }

  &__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;
    }
  }
}