@angular2-material/list/list.css

Angular 2 Material list

/**
 * This mixin will ensure that lines that overflow the container will
 * hide the overflow and truncate neatly with an ellipsis.
 */
/**
 * This mixin provides all md-line styles, changing secondary font size
 * based on whether the list is in dense mode.
 */
/**
 * This mixin provides base styles for the wrapper around md-line
 * elements in a list.
 */
/**
 * This mixin normalizes default element styles, e.g. font weight for heading text.
 */
/*  Normal list variables */
/* Dense list variables */
/*
This mixin provides all list-item styles, changing font size and height
based on whether the list is in dense mode.
*/
/*
This mixin provides all subheader styles, adjusting heights and padding
based on whether the list is in dense mode.
*/
md-list, md-nav-list {
  padding-top: 8px;
  display: block; }
  md-list [md-subheader], md-nav-list [md-subheader] {
    display: block;
    box-sizing: border-box;
    height: 48px;
    padding: 16px;
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.54); }
    md-list [md-subheader]:first-child, md-nav-list [md-subheader]:first-child {
      margin-top: -8px; }
  md-list md-list-item .md-list-item, md-list a[md-list-item] .md-list-item, md-nav-list md-list-item .md-list-item, md-nav-list a[md-list-item] .md-list-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-family: Roboto, "Helvetica Neue", sans-serif;
    box-sizing: border-box;
    font-size: 16px;
    height: 48px;
    padding: 0 16px;
    color: black; }
  md-list md-list-item.md-list-avatar .md-list-item, md-list a[md-list-item].md-list-avatar .md-list-item, md-nav-list md-list-item.md-list-avatar .md-list-item, md-nav-list a[md-list-item].md-list-avatar .md-list-item {
    height: 56px; }
  md-list md-list-item.md-2-line .md-list-item, md-list a[md-list-item].md-2-line .md-list-item, md-nav-list md-list-item.md-2-line .md-list-item, md-nav-list a[md-list-item].md-2-line .md-list-item {
    height: 72px; }
  md-list md-list-item.md-3-line .md-list-item, md-list a[md-list-item].md-3-line .md-list-item, md-nav-list md-list-item.md-3-line .md-list-item, md-nav-list a[md-list-item].md-3-line .md-list-item {
    height: 88px; }
  md-list md-list-item .md-list-text, md-list a[md-list-item] .md-list-text, md-nav-list md-list-item .md-list-text, md-nav-list a[md-list-item] .md-list-text {
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    padding: 0 16px; }
    md-list md-list-item .md-list-text > *, md-list a[md-list-item] .md-list-text > *, md-nav-list md-list-item .md-list-text > *, md-nav-list a[md-list-item] .md-list-text > * {
      margin: 0;
      padding: 0;
      font-weight: normal;
      font-size: inherit; }
    md-list md-list-item .md-list-text:empty, md-list a[md-list-item] .md-list-text:empty, md-nav-list md-list-item .md-list-text:empty, md-nav-list a[md-list-item] .md-list-text:empty {
      display: none; }
    md-list md-list-item .md-list-text:first-child, md-list a[md-list-item] .md-list-text:first-child, md-nav-list md-list-item .md-list-text:first-child, md-nav-list a[md-list-item] .md-list-text:first-child {
      padding: 0; }
  md-list md-list-item [md-list-avatar], md-list a[md-list-item] [md-list-avatar], md-nav-list md-list-item [md-list-avatar], md-nav-list a[md-list-item] [md-list-avatar] {
    width: 40px;
    height: 40px;
    border-radius: 50%; }
  md-list md-list-item [md-list-icon], md-list a[md-list-item] [md-list-icon], md-nav-list md-list-item [md-list-icon], md-nav-list a[md-list-item] [md-list-icon] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    padding: 4px; }
  md-list md-list-item [md-line], md-list a[md-list-item] [md-line], md-nav-list md-list-item [md-line], md-nav-list a[md-list-item] [md-line] {
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
    display: block;
    box-sizing: border-box; }
    md-list md-list-item [md-line]:nth-child(n+2), md-list a[md-list-item] [md-line]:nth-child(n+2), md-nav-list md-list-item [md-line]:nth-child(n+2), md-nav-list a[md-list-item] [md-line]:nth-child(n+2) {
      font-size: 14px; }

md-list[dense], md-nav-list[dense] {
  padding-top: 4px;
  display: block; }
  md-list[dense] [md-subheader], md-nav-list[dense] [md-subheader] {
    display: block;
    box-sizing: border-box;
    height: 40px;
    padding: 16px;
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.54); }
    md-list[dense] [md-subheader]:first-child, md-nav-list[dense] [md-subheader]:first-child {
      margin-top: -4px; }
  md-list[dense] md-list-item .md-list-item, md-list[dense] a[md-list-item] .md-list-item, md-nav-list[dense] md-list-item .md-list-item, md-nav-list[dense] a[md-list-item] .md-list-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-family: Roboto, "Helvetica Neue", sans-serif;
    box-sizing: border-box;
    font-size: 13px;
    height: 40px;
    padding: 0 16px;
    color: black; }
  md-list[dense] md-list-item.md-list-avatar .md-list-item, md-list[dense] a[md-list-item].md-list-avatar .md-list-item, md-nav-list[dense] md-list-item.md-list-avatar .md-list-item, md-nav-list[dense] a[md-list-item].md-list-avatar .md-list-item {
    height: 48px; }
  md-list[dense] md-list-item.md-2-line .md-list-item, md-list[dense] a[md-list-item].md-2-line .md-list-item, md-nav-list[dense] md-list-item.md-2-line .md-list-item, md-nav-list[dense] a[md-list-item].md-2-line .md-list-item {
    height: 60px; }
  md-list[dense] md-list-item.md-3-line .md-list-item, md-list[dense] a[md-list-item].md-3-line .md-list-item, md-nav-list[dense] md-list-item.md-3-line .md-list-item, md-nav-list[dense] a[md-list-item].md-3-line .md-list-item {
    height: 76px; }
  md-list[dense] md-list-item .md-list-text, md-list[dense] a[md-list-item] .md-list-text, md-nav-list[dense] md-list-item .md-list-text, md-nav-list[dense] a[md-list-item] .md-list-text {
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    padding: 0 16px; }
    md-list[dense] md-list-item .md-list-text > *, md-list[dense] a[md-list-item] .md-list-text > *, md-nav-list[dense] md-list-item .md-list-text > *, md-nav-list[dense] a[md-list-item] .md-list-text > * {
      margin: 0;
      padding: 0;
      font-weight: normal;
      font-size: inherit; }
    md-list[dense] md-list-item .md-list-text:empty, md-list[dense] a[md-list-item] .md-list-text:empty, md-nav-list[dense] md-list-item .md-list-text:empty, md-nav-list[dense] a[md-list-item] .md-list-text:empty {
      display: none; }
    md-list[dense] md-list-item .md-list-text:first-child, md-list[dense] a[md-list-item] .md-list-text:first-child, md-nav-list[dense] md-list-item .md-list-text:first-child, md-nav-list[dense] a[md-list-item] .md-list-text:first-child {
      padding: 0; }
  md-list[dense] md-list-item [md-list-avatar], md-list[dense] a[md-list-item] [md-list-avatar], md-nav-list[dense] md-list-item [md-list-avatar], md-nav-list[dense] a[md-list-item] [md-list-avatar] {
    width: 40px;
    height: 40px;
    border-radius: 50%; }
  md-list[dense] md-list-item [md-list-icon], md-list[dense] a[md-list-item] [md-list-icon], md-nav-list[dense] md-list-item [md-list-icon], md-nav-list[dense] a[md-list-item] [md-list-icon] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    padding: 4px; }
  md-list[dense] md-list-item [md-line], md-list[dense] a[md-list-item] [md-line], md-nav-list[dense] md-list-item [md-line], md-nav-list[dense] a[md-list-item] [md-line] {
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
    display: block;
    box-sizing: border-box; }
    md-list[dense] md-list-item [md-line]:nth-child(n+2), md-list[dense] a[md-list-item] [md-line]:nth-child(n+2), md-nav-list[dense] md-list-item [md-line]:nth-child(n+2), md-nav-list[dense] a[md-list-item] [md-line]:nth-child(n+2) {
      font-size: 13px; }

md-divider {
  display: block;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  margin: 0; }

md-nav-list a {
  text-decoration: none;
  color: inherit; }

md-nav-list .md-list-item {
  cursor: pointer; }
  md-nav-list .md-list-item:hover, md-nav-list .md-list-item.md-list-item-focus {
    outline: none;
    background: rgba(0, 0, 0, 0.04); }

/*# sourceMappingURL=list.css.map */