framework7/components/list/list-md.less

Full featured mobile HTML framework for building iOS & Android apps

.md {
  @import (multiple) '../../less/colors-md.less';
  @import (multiple) '../../less/vars-md.less';
  .list {
    margin: 32px 0;
    font-size: 16px;
    .item-cell {
      width: 100%;
      min-width: 0;
      .ltr({
        margin-left: 16px;
        &:first-child {
          margin-left: 0;
        }
      });
      .rtl({
        margin-right: 16px;
        &:first-child {
          margin-right: 0;
        }
      });
    }
    .ltr({
      .ripple-wave + .item-cell {
        margin-left: 0;
      }
    });
    ul {
      ul {
        .ltr({
          padding-left: 56px;
        });
        .rtl({
          padding-right: 56px;
        });
      }
    }
    .item-media {
      padding-top: 8px;
      min-width: 40px;
      i + i, i + img {
        .ltr({
          margin-left: 8px;
        });
        .rtl({
          margin-right: 8px;
        });
      }
    }
    .item-media + .item-inner {
      .ltr({
        margin-left: 16px;
      });
      .rtl({
        margin-right: 16px;
      });
    }
    .item-inner {
      min-height: 48px;
      .ltr({
        padding-right: 16px;
      });
      .rtl({
        padding-left: 16px;
      });
    }
    .item-after {
      color: #757575;
      font-size: 14px;
      .ltr({
        padding-left: 8px;
      });
      .rtl({
        padding-right: 8px;
      });
    }
    .item-link, .list-button {
      color: inherit;
      .item-inner {
        .ltr({
          padding-right: 42px;
        });
        .rtl({
          padding-left: 42px;
        });
      }
      &.active-state {
        background-color: rgba(0,0,0,0.1);
      }
    }
    .list-button {
      padding: 0 16px;
      font-size: 16px;
      line-height: 48px;
    }
    .item-content {
      min-height: 48px;
      .ltr({
        padding-left: 16px;
      });
      .rtl({
        padding-right: 16px;
      });
    }
    .item-subtitle {
      font-size: 14px;
    }
    .item-text {
      font-size: 14px;
      color: #757575;
      line-height: 20px;
      max-height: 40px;
    }
    .item-header, .item-footer {
      font-weight: normal;
      font-size: 12px;
      line-height: 1.2;
      white-space: normal;
    }
    .item-footer {
      color: rgba(0,0,0,0.5);
    }
  }
  .list .item-link.no-chevron .item-inner,
  .list.no-chevron .item-link .item-inner,
  .list .no-chevron .item-link .item-inner,
  .no-chevron .list .item-link .item-inner {
    .ltr({
      padding-right: 16px;
    });
    .rtl({
      padding-left: 16px;
    });
  }
  .hairline-root('.simple-list li', bottom, @blockBorderColor);
  .simple-list {
    li {
      padding-left: 16px;
      padding-right: 16px;
      line-height: 48px;
      height: 48px;
    }
    li:after {
      width: auto;
      .ltr({
        left: 16px;
        right: 0;
      });
      .rtl({
        left: 0;
        right: 16px;
      });
    }
  }
  .hairline-root('.links-list a', bottom, @blockBorderColor);
  .links-list {
    a {
      height: 48px;
      color: inherit;
      &.active-state {
        background-color: rgba(0,0,0,0.1);
      }
    }
    a:after {
      width: auto;
    }
    .ltr({
      a {
        padding-left: 16px;
        padding-right: 42px;
      }
      a:after {
        left: 16px;
        right: 0;
      }
    });
    .rtl({
      a {
        padding-right: 16px;
        padding-left: 42px;
      }
      a:after {
        right: 16px;
        left: 0;
      }
    });
  }
  .links-list.no-chevron a,
  .no-chevron .links-list a,
  .links-list a.no-chevron,
  .links-list .no-chevron a {
    .ltr({
      padding-right: 16px;
    });
    .rtl({
      padding-left: 16px;
    });
  }

  .media-list, li.media-item {
    .item-inner {
      padding-top: 14px;
      padding-bottom: 14px;
    }
    .ltr({
      .item-link .item-inner {
        padding-right: 16px;
      }
      .item-link .item-title-row {
        padding-right: 26px;
      }
    });
    .rtl({
      .item-link .item-inner {
        padding-left: 16px;
      }
      .item-link .item-title-row {
        padding-left: 26px;
      }
    });
    .item-media {
      padding-top: 14px;
      padding-bottom: 14px;
    }
  }

  .media-list.chevron-center .item-link .item-inner,
  .media-list .chevron-center .item-link .item-inner,
  .media-list .item-link.chevron-center .item-inner,
  li.media-item.chevron-center .item-link .item-inner,
  li.media-item .item-link.chevron-center .item-inner,
  li.media-item .chevron-center .item-link .item-inner {
    .ltr({
      padding-right: 42px;
    });
    .rtl({
      padding-left: 42px;
    });
  }

  .media-list.no-chevron .item-link .item-title-row,
  .no-chevron .media-list .item-link .item-title-row,
  .media-list .no-chevron .item-link .item-title-row,
  li.media-item.no-chevron .item-link .item-title-row,
  .no-chevron li.media-item .item-link .item-title-row,
  .media-list.chevron-center .item-title-row,
  .media-list .chevron-center .item-title-row,
  li.media-item.chevron-center .item-title-row,
  li.media-item .chevron-center .item-title-row {
    .ltr({
      padding-right: 0 !important;
    });
    .rtl({
      padding-left: 0 !important;
    });
  }
  .list .item-link .item-inner,
  .links-list a {
    .ltr({
      background-position: calc(~"100% - 16px") center;
    });
    .rtl({
      background-position: 16px center;
    });
  }
  .item-divider, .list-group-title {
    .hairline-remove(top);
    .hairline-remove(bottom);
    padding: 0 16px;
    background: #f4f4f4;
    color: rgba(0,0,0,0.54);
    height: 48px;
    line-height: 48px;
    box-sizing: border-box;
    font-size: 14px;
  }
  .list-group-title {
    margin-top: 0;
  }
  .hairline-root('.list .item-inner', bottom, @blockBorderColor);
  .hairline-root('.list ul', top, @blockBorderColor);
  .hairline-root('.list ul', bottom, @blockBorderColor);
  .list.inset {
    margin-left: 16px;
    margin-right: 16px;
    border-radius: 4px;
    ul {
      border-radius: 4px;
    }
    li:first-child > a {
      border-radius: 4px 4px 0 0;
    }
    li:last-child > a {
      border-radius: 0 0 4px 4px;
    }
    li:first-child:last-child > a {
      border-radius: 4px;
    }
  }
  .list.tablet-inset {
    @media (min-width: 768px) {
      margin-left: 16px;
      margin-right: 16px;
      border-radius: 4px;
      li:first-child > a {
        border-radius: 4px 4px 0 0;
      }
      li:last-child > a {
        border-radius: 0 0 4px 4px;
      }
      li:first-child:last-child > a {
        border-radius: 4px;
      }
    }
  }

  // Last-childs
  li {
    li:last-child, &:last-child li {
      .item-inner {
        .hairline(bottom, @blockBorderColor);
      }
    }
  }

  .safe-areas-landscape({
    .safe-area-left({
      .list:not(.inset):not(.tablet-inset):not(.no-ios-edges):not(.no-ios-left-edge) {
        &.simple-list li {
          padding-left: ~"calc(16px + constant(safe-area-inset-left))";
          padding-left: ~"calc(16px + env(safe-area-inset-left))";
        }
        .item-divider, .list-group-title {
          padding-left: ~"calc(16px + constant(safe-area-inset-left))";
          padding-left: ~"calc(16px + env(safe-area-inset-left))";
        }
      }
      .list.inset:not(.no-ios-edges):not(.no-ios-left-edge) {
        margin-left: ~"calc(16px + constant(safe-area-inset-left))";
        margin-left: ~"calc(16px + env(safe-area-inset-left))";
        .block-header, .block-footer {
          padding-left: 15px;
        }
      }
      .list.tablet-inset:not(.no-ios-edges):not(.no-ios-left-edge) {
        @media (min-width: 768px) {
          margin-left: ~"calc(16px + constant(safe-area-inset-left))";
          margin-left: ~"calc(16px + env(safe-area-inset-left))";
          .block-header, .block-footer {
            padding-left: 15px;
          }
        }
      }
      .ltr({
        .list:not(.inset):not(.tablet-inset):not(.no-ios-edges):not(.no-ios-left-edge) {
          .item-content {
            padding-left: ~"calc(16px + constant(safe-area-inset-left))";
            padding-left: ~"calc(16px + env(safe-area-inset-left))";
          }
          &.simple-list {
            li:after {
              left: ~"calc(16px + constant(safe-area-inset-left))";
              left: ~"calc(16px + env(safe-area-inset-left))";
            }
          }
          &.links-list {
            a {
              padding-left: ~"calc(16px + constant(safe-area-inset-left))";
              padding-left: ~"calc(16px + env(safe-area-inset-left))";
            }
            a:after{
              left: ~"calc(16px + constant(safe-area-inset-left))";
              left: ~"calc(16px + env(safe-area-inset-left))";
            }
          }
        }
      });
      .rtl({
        .list:not(.inset):not(.tablet-inset):not(.no-ios-edges):not(.no-ios-left-edge) {
          .item-link .item-inner,
          &.links-list a {
            background-position: ~"calc(16px + constant(safe-area-inset-left))" center;
            background-position: ~"calc(16px + env(safe-area-inset-left))" center;
          }
          .item-inner {
            padding-left: ~"calc(16px + constant(safe-area-inset-left))";
            padding-left: ~"calc(16px + env(safe-area-inset-left))";
          }
          .item-link .item-inner {
            padding-left: ~"calc(42px + constant(safe-area-inset-left))";
            padding-left: ~"calc(42px + env(safe-area-inset-left))";
          }
          &.media-list, li.media-item {
            .item-link .item-inner {
              padding-left: ~"calc(16px + constant(safe-area-inset-left))";
              padding-left: ~"calc(16px + env(safe-area-inset-left))";
            }
          }
          &.links-list {
            a {
              padding-left: ~"calc(42px + constant(safe-area-inset-left))";
              padding-left: ~"calc(42px + env(safe-area-inset-left))";
            }
          }

          &.media-list.chevron-center .item-link .item-inner,
          &.media-list .chevron-center .item-link .item-inner,
          &.media-list .item-link.chevron-center .item-inner,
          li.media-item.chevron-center .item-link .item-inner,
          li.media-item .item-link.chevron-center .item-inner,
          li.media-item .chevron-center .item-link .item-inner {
            padding-left: ~"calc(42px + constant(safe-area-inset-left))";
            padding-left: ~"calc(42px + env(safe-area-inset-left))";
          }

          .item-link.no-chevron .item-inner,
          &.no-chevron .item-link .item-inner,
          .no-chevron .item-link .item-inner,
          &.links-list.no-chevron a,
          &.links-list a.no-chevron,
          &.links-list .no-chevron a {
            padding-left: ~"calc(16px + constant(safe-area-inset-left))";
            padding-left: ~"calc(16px + env(safe-area-inset-left))";
          }

          &.media-list.no-chevron .item-link .item-title-row,
          &.media-list .no-chevron .item-link .item-title-row,
          li.media-item.no-chevron .item-link .item-title-row,
          &.no-chevron li.media-item .item-link .item-title-row {
            padding-left: 0;
          }
        }
      });
    });
    .safe-area-right({
      .list.inset:not(.no-ios-edges):not(.no-ios-right-edge) {
        margin-right: ~"calc(16px + constant(safe-area-inset-right))";
        margin-right: ~"calc(16px + env(safe-area-inset-right))";
        .block-header, .block-footer {
          padding-right: 16px;
        }
      }
      .list.tablet-inset:not(.no-ios-edges):not(.no-ios-right-edge) {
        @media (min-width: 768px) {
          margin-right: ~"calc(16px + constant(safe-area-inset-right))";
          margin-right: ~"calc(16px + env(safe-area-inset-right))";
        }
        .block-header, .block-footer {
          padding-right: 16px;
        }
      }
      .list:not(.inset):not(.tablet-inset):not(.no-ios-edges):not(.no-ios-right-edge) {
        .item-divider, .list-group-title {
          padding-right: ~"calc(16px + constant(safe-area-inset-right))";
          padding-right: ~"calc(16px + env(safe-area-inset-right))";
        }
        &.simple-list li {
          padding-right: ~"calc(16px + constant(safe-area-inset-right))";
          padding-right: ~"calc(16px + env(safe-area-inset-right))";
        }
      }
      .ltr({
        .list:not(.inset):not(.tablet-inset):not(.no-ios-edges):not(.no-ios-right-edge) {
          .item-link .item-inner,
          &.links-list a {
            background-position: calc(~"100% - 16px - constant(safe-area-inset-right)") center;
            background-position: calc(~"100% - 16px - env(safe-area-inset-right)") center;
          }
          .item-inner {
            padding-right: ~"calc(16px + constant(safe-area-inset-right))";
            padding-right: ~"calc(16px + env(safe-area-inset-right))";
          }
          .item-link .item-inner {
            padding-right: ~"calc(42px + constant(safe-area-inset-right))";
            padding-right: ~"calc(42px + env(safe-area-inset-right))";
          }
          &.media-list, li.media-item {
            .item-link .item-inner {
              padding-right: ~"calc(16px + constant(safe-area-inset-right))";
              padding-right: ~"calc(16px + env(safe-area-inset-right))";
            }
          }
          &.links-list {
            a {
              padding-right: ~"calc(42px + constant(safe-area-inset-right))";
              padding-right: ~"calc(42px + env(safe-area-inset-right))";
            }
          }

          &.media-list.chevron-center .item-link .item-inner,
          &.media-list .chevron-center .item-link .item-inner,
          &.media-list .item-link.chevron-center .item-inner,
          li.media-item.chevron-center .item-link .item-inner,
          li.media-item .item-link.chevron-center .item-inner,
          li.media-item .chevron-center .item-link .item-inner {
            padding-right: ~"calc(42px + constant(safe-area-inset-right))";
            padding-right: ~"calc(42px + env(safe-area-inset-right))";
          }

          .item-link.no-chevron .item-inner,
          &.no-chevron .item-link .item-inner,
          .no-chevron .item-link .item-inner,
          &.links-list.no-chevron a,
          &.links-list a.no-chevron,
          &.links-list .no-chevron a {
            padding-right: ~"calc(16px + constant(safe-area-inset-right))";
            padding-right: ~"calc(16px + env(safe-area-inset-right))";
          }

          &.media-list.no-chevron .item-link .item-title-row,
          &.media-list .no-chevron .item-link .item-title-row,
          li.media-item.no-chevron .item-link .item-title-row,
          &.no-chevron li.media-item .item-link .item-title-row {
            padding-right: 0;
          }
        }
      });
      .rtl({
        .list:not(.inset):not(.tablet-inset):not(.no-ios-edges):not(.no-ios-right-edge) {
          .item-content {
            padding-right:  ~"calc(16px + constant(safe-area-inset-right))";
            padding-right:  ~"calc(16px + env(safe-area-inset-right))";
          }
          &.simple-list {
            li:after {
              right: ~"calc(16px + constant(safe-area-inset-right))";
              right: ~"calc(16px + env(safe-area-inset-right))";
            }
          }
          &.links-list {
            a {
              padding-right: ~"calc(16px + constant(safe-area-inset-right))";
              padding-right: ~"calc(16px + env(safe-area-inset-right))";
            }
            a:after {
              right: ~"calc(16px + const(safe-area-inset-right))";
              right: ~"calc(16px + env(safe-area-inset-right))";
            }
          }
        }
      });
    });
  });

  // Dark Theme
  & when (@includeDarkTheme) {
    .theme-dark {
      .list, .list& {
        ul {
          .hairline-color(top, @blockBorderColorDark);
          .hairline-color(bottom, @blockBorderColorDark);
        }
        li {
          li:last-child, &:last-child li {
            .item-inner {
              .hairline-color(bottom, @blockBorderColorDark);
            }
          }
        }
      }
      .item-divider {
        .hairline-color(top, @blockBorderColorDark);
      }
      .list-group-title {
        .hairline-color(top, @blockBorderColorDark);
      }
      .list-button {
        .hairline-color(bottom, @blockBorderColorDark);
      }
      .item-inner {
        .hairline-color(bottom, @blockBorderColorDark);
      }
      .item-divider, .list-group-title {
        background-color: #111;
        color: #fff;
      }
      .links-list a,
      .simple-list li,
      .links-list a, .links-list& a
      .simple-list li, .simple-list& li {
        .hairline-color(bottom, @blockBorderColorDark);
      }
      .list .item-link,
      .list& .item-link,
      .list .list-button,
      .list& .list-button,
      .links-list a,
      .links-list& a {
        &.active-state {
          background-color: rgba(255,255,255,0.05);
        }
      }
      .item-after, .item-text {
        color: rgba(255,255,255,0.54);
      }
    }
  }

  .color-theme-loop({
    .color-theme-@{colorThemeName} {
      .list-button {
        color: @colorThemeValue;
      }
    }
  });
  .color-loop({
    .list .list-button.color-@{colorName},
    .list li.color-@{colorName} .list-button,
    .links-list li.color-@{colorName} a,
    .simple-list li.color-@{colorName},
    .links-list a.color-@{colorName},
    .list .item-link.color-@{colorName},
    .list li.color-@{colorName} .item-link {
      color: @colorValue;
    }
  });
}