@pi0/framework7/src/components/list/list-ios.less

Full featured mobile HTML framework for building iOS & Android apps

.ios {
  @import (multiple) '../../less/colors-ios.less';
  @import (multiple) '../../less/vars-ios.less';
  .list {
    margin: 35px 0;
    font-size: 17px;
    .item-cell {
      width: 100%;
      min-width: 0;
      .ltr({
        margin-left: 15px;
        &:first-child {
          margin-left: 0;
        }
      });
      .rtl({
        margin-right: 15px;
        &:first-child {
          margin-right: 0;
        }
      });
    }
    ul {
      background: #fff;
      ul {
        .ltr({
          padding-left: 45px;
        });
        .rtl({
          padding-right: 45px;
        });
      }
    }
    .item-media {
      padding-top: 7px;
      i + i, i + img {
        .ltr({
          margin-left: 5px;
        });
        .rtl({
          margin-right: 5px;
        });
      }
    }
    .item-media + .item-inner {
      .ltr({
        margin-left: 15px;
      });
      .rtl({
        margin-right: 15px;
      });
    }
    .item-inner {
      min-height: 44px;
      .ltr({
        padding-right: 15px;
      });
      .rtl({
        padding-left: 15px;
      });
    }
    .item-after {
      color: #8e8e93;
      .ltr({
        padding-left: 5px;
      });
      .rtl({
        padding-right: 5px;
      });
    }
    .item-link, .list-button {
      color: inherit;
      .item-inner {
        .ltr({
          padding-right: 35px;
        });
        .rtl({
          padding-left: 35px;
        });
      }
      &.active-state {
        transition-duration: 0ms;
        background-color: #d9d9d9;
        .item-inner {
          .hairline-color(bottom, transparent);
        }
      }
    }
    .list-button {
      padding: 0 15px;
      text-align: center;
      color: @themeColor;
      line-height: 44px;
    }
    .item-content {
      min-height: 44px;
      .ltr({
        padding-left: 15px;
      });
      .rtl({
        padding-right: 15px;
      });
    }
    .item-subtitle {
      font-size: 15px;
    }
    .item-text {
      font-size: 15px;
      color: #8e8e93;
      line-height: 21px;
      max-height: 42px;
    }
    .item-header, .item-footer {
      font-weight: normal;
      font-size: 12px;
      line-height: 1.2;
      white-space: normal;
    }
    .item-footer {
      color: #8e8e93;
    }
  }
  .hairline-root('.simple-list li', bottom, @blockBorderColor);
  .simple-list {
    li {
      padding-left: 15px;
      padding-right: 15px;
      line-height: 44px;
      height: 44px;
    }
    li:after {
      left: 15px;
      right: 0;
      width: auto;
      .ltr({
        left: 15px;
        right: 0;
      });
      .rtl({
        right: 15px;
        left: 0;
      });
    }
  }
  .hairline-root('.links-list a', bottom, @blockBorderColor);
  .links-list {
    a {
      height: 44px;
      color: inherit;
      &.active-state {
        transition-duration: 0ms;
        background-color: #d9d9d9;
      }
    }
    a:after {
      width: auto;
    }
    .ltr({
      a {
        padding-left: 15px;
        padding-right: 35px;
      }
      a:after {
        left: 15px;
        right: 0;
      }
    });
    .rtl({
      a {
        padding-right: 15px;
        padding-left: 35px;
      }
      a:after {
        right: 15px;
        left: 0;
      }
    });
  }
  .media-list, li.media-item {
    .item-title {
      font-weight: 600;
    }
    .item-inner {
      padding-top: 10px;
      padding-bottom: 9px;
    }
    .item-media {
      padding-top: 9px;
      padding-bottom: 10px;
    }
    .ltr({
      .item-link .item-inner {
        padding-right: 15px;
      }
      .item-link .item-title-row {
        padding-right: 20px;
      }
    });
    .rtl({
      .item-link .item-inner {
        padding-left: 15px;
      }
      .item-link .item-title-row {
        padding-left: 20px;
      }
    });
  }

  .list .item-link .item-inner,
  .links-list a {
    .ltr({
      background-position: calc(~"100% - 15px") center;
    });
    .rtl({
      background-position: 15px center;
    });
  }

  .item-divider, .list-group-title {
    margin-top: -1px; //?
    padding: 4px 15px;
    background: #f7f7f7;
    color: #8e8e93;
  }
  .list-group-title {
    margin-top: 0;
  }

  .hairline-root('.item-divider', top, @blockBorderColor);
  .hairline-root('.list-group-title', top, @blockBorderColor);

  .hairline-root('.list .list-button', bottom, @blockBorderColor);
  .hairline-root('.list .item-inner', bottom, @blockBorderColor);
  .hairline-root('.list ul', top, @blockBorderColor);
  .hairline-root('.list ul', bottom, @blockBorderColor);
  .list.inset {
    margin-left: 15px;
    margin-right: 15px;
    border-radius: 7px;
    ul {
      border-radius: 7px;
    }
    li:first-child > a {
      border-radius: 7px 7px 0 0;
    }
    li:last-child > a {
      border-radius: 0 0 7px 7px;
    }
    li:first-child:last-child > a {
      border-radius: 7px;
    }
  }
  .list.tablet-inset {
    @media (min-width: 768px) {
      margin-left: 15px;
      margin-right: 15px;
      border-radius: 7px;
      li:first-child > a {
        border-radius: 7px 7px 0 0;
      }
      li:last-child > a {
        border-radius: 0 0 7px 7px;
      }
      li:first-child:last-child > a {
        border-radius: 7px;
      }
    }
  }

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

  .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;
    }
  });
}