sogo/UI/WebServerResources/scss/components/list/list.scss

/// list.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*-
@import 'extends';

// List item label
md-list-item {
  .md-list-item-inner {
    flex-grow: 1; // use all column space
  }
  md-icon,
  .md-button md-icon {
    margin-left: 0;
  }
  .sg-item-name {
    font-size: sg-size(button);
    max-width: 75%; // leave some place for a secondary button
    text-transform: initial;
    overflow: hidden;
    align-items: flex-start;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .sg-inline-list-icon-label {
    text-transform: uppercase;
  }
}

// Add some padding to the first icon in a list item
//.md-list-item-inner {
//  > i:first-child {
//    margin-left: $mg;
//  }
//}

// The right tile for a list item.
// ----------------------------------------------------------------------------
.md-tile-right {
  padding-right: $item-padding-right;
}
// The right tile for a list item (avatar container)
// ----------------------------------------------------------------------------

.md-tile-left,
.md-tile-right {
  border-radius: 100%;
  padding: $layout-gutter-width;
  width: $sg-md-grid-pitch + $baseline-grid;
  height: $sg-md-grid-pitch + $baseline-grid;
  line-height: $sg-md-grid-pitch + $baseline-grid;
  background-clip: content-box;
}
.md-tile-right {
  margin-right: -$layout-gutter-width;
}
// Overqualifying to override a rule in source
div.md-tile-left {
  min-width: $sg-md-grid-pitch + $baseline-grid;
}

// Specific lists with a single subheader (sg-md-subheader--fixed) at the top
[id='messagesList'],
[id='contactsList'] {
  border-top: 44px solid transparent;   // padding for the header.subheader until md-subheader is fixed
}

.sg-section-list {
  md-list-item {
    transition: background-color $swift-ease-in-duration $swift-ease-in-timing-function,
                color 0.12s linear;
    &:hover:not([disabled]) {
      background-color: sg-color($sogoPaper, 300);
      color: sg-color($sogoBlue, 800);
      cursor: pointer;
    }
    &:active {
      color: sg-color($sogoBlue, 800);
    }
    &:focus,
    &.sg-active {
      background-color: sg-color($sogoBlue, 100);
    }
    .md-list-item-inner {
      .md-secondary {
        // Expect the container to include a sg-tile-icons
        right: 0px;
      }
    }
  }
}

.sg {
  &-tile-content {
    align-items: baseline;
    flex-direction: row;
    flex-wrap: wrap;
    flex: 1;
    justify-content: space-between;
    p {
      margin: $list-p-margin;
      font-size: sg-size(body);
    }
    .msg-date {
      float: right;
      font-size: sg-size(body);
      font-weight: $sg-font-light;
      line-height: $sg-line-height-2;
      margin-left: 1em;
    }
    .#{$md}-subhead-multi,
    .#{$md}-subhead-solo,
    .#{$md}-body-multi {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .#{$md}-subhead-multi {
      @extend .#{$md}-body-1;
      font-size: initial;
    }
    .#{$md}-body-multi {
      @extend .#{$md}-caption;
    }
  }
  // Small tile of vertically-aligned icons
  &-tile-icons {
    md-icon {
      font-size: $sg-font-size-1;
      color: $colorGray;
      margin: 2px;
    }
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    width: (2 * $mg);
    height:(7 * $line);
  }
}
.sg-avatars {
  margin: ($mg / 2) 0 0 ($mg / 2);
  img {
    border-radius: 100%;
    margin-right: ($mg / 2);
  }
}

// Avatar placeholder
// ------------------------------------
.md-tile-left:before {
  font-family: 'Material Icons';
  font-size: 40px;
  color: rgba(0, 0, 0, 0.26);
}
.md-tile-left-card:before {
  @extend .md-tile-left;
  content: "\e7fd"; // person
}
.md-tile-left-list:before {
  @extend .md-tile-left;
  content: "\e7ef"; // group
}
.md-tile-left-selected:before {
  @extend .md-tile-left;
  content: "\e5ca"; // check
}
.md-tile-left-accepted:before {
  @extend .md-tile-left;
  background-color: rgba(0, 255, 0, 0.3) !important;
  content: "\e5ca"; // check
  color: rgba(0, 0, 0, 0.5);
}
.md-tile-left-declined:before {
  @extend .md-tile-left;
  background-color: rgba(255, 0, 0, 0.3) !important;
  content: "\e15b"; // remove
  color: rgba(0, 0, 0, 0.5);
}
.md-tile-left-delegated:before {
  @extend .md-tile-left;
  background-color: rgba(192, 192, 192, 0.3) !important;
  content: "\e5c8"; // arrow-forward
  color: rgba(0, 0, 0, 0.5);
}
.md-tile-left-needs-action:before {
  @extend .md-tile-left;
  background-color: rgba(255, 255, 0, 0.3) !important;
  content: "?";
}
.md-tile-left-tentative:before {
  @extend .md-tile-left;
  background-color: rgba(255, 255, 0, 0.3) !important;
  content: "\e7fd"; // person
}
.sg-avatar {
  @extend .md-tile-left-card;
  margin-right: 0;
  margin-left: 0;
}
.sg-list-avatar {
  @extend .md-tile-left-list;
  margin-right: 0;
  margin-left: 0;
}
.sg-selected-avatar {
  @extend .md-tile-left-selected;
  margin-right: 0;
  margin-left: 0;
}
.sg-accepted {
  @extend .md-tile-left-accepted;
  margin-right: 0;
  margin-left: 0;
}
.sg-declined {
  @extend .md-tile-left-declined;
  margin-right: 0;
  margin-left: 0;
}
.sg-delegated {
  @extend .md-tile-left-delegated;
  margin-right: 0;
  margin-left: 0;
}
.sg-needs-action {
  @extend .md-tile-left-needs-action;
  margin-right: 0;
  margin-left: 0;
}
.sg-tentative {
  @extend .md-tile-left-tentative;
  margin-right: 0;
  margin-left: 0;
}