framework7/components/list-index/list-index-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-index {
    ul {
      color: @themeColor;
    }
    .list-index-skip-placeholder {
      &:after {
        content: '';
        width: 4px;
        height: 4px;
        margin-left: -2px;
        margin-top: -2px;
        background: @themeColor;
      }
    }
    .list-index-label {
      width: 56px;
      height: 56px;
      line-height: 56px;
      border-radius: 50% 50% 0 50%;
      background: @themeColor;
      font-size: 20px;
    }
  }

  .navbar ~ .list-index {
    top: @navbarSize;
    @media (min-width: 768px) {
      top: @navbarSizeTablet;
    }
  }
  .navbar ~ .toolbar:not(.toolbar-bottom-md) ~ .list-index,
  .navbar ~ .subnavbar ~ .list-index,
  .page-with-subnavbar .navbar ~ .list-index {
    top: @navbarSize + @toolbarSize;
  }
  .navbar ~ .tabbar-labels:not(.toolbar-bottom-md) ~ .list-index {
    top: @navbarSize + @tabbarLabelsSize;
  }

  .toolbar-bottom-md ~ .page > .list-index,
  .toolbar-bottom-md ~ * .page > .list-index,
  .toolbar-bottom-md ~ * .page > .list-index {
    bottom: @toolbarSize;
  }

  .tabbar-labels.toolbar-bottom-md ~ .page > .list-index,
  .tabbar-labels.toolbar-bottom-md ~ * .page > .list-index,
  .tabbar-labels.toolbar-bottom-md ~ .list-index {
    bottom: @tabbarLabelsBottomSize;
  }

  .safe-areas({
    .toolbar-bottom-md ~ .page > .list-index,
    .toolbar-bottom-md ~ * .page > .list-index,
    .toolbar-bottom-md ~ * .page > .list-index {
      bottom: ~"calc(@{toolbarSize} + constant(safe-area-inset-bottom))";
      bottom: ~"calc(@{toolbarSize} + env(safe-area-inset-bottom))";
    }

    .tabbar-labels.toolbar-bottom-md ~ .page > .list-index,
    .tabbar-labels.toolbar-bottom-md ~ * .page > .list-index,
    .tabbar-labels.toolbar-bottom-md ~ .list-index {
      bottom: ~"calc(@{tabbarLabelsBottomSize} + constant(safe-area-inset-bottom))";
      bottom: ~"calc(@{tabbarLabelsBottomSize} + env(safe-area-inset-bottom))";
    }
  });

  .color-theme-loop({
    .color-theme-@{colorThemeName} .list-index,
    .list-index.color-theme-@{colorThemeName} {
      ul {
        color: @colorThemeValue;
      }
      .list-index-skip-placeholder:after,
      .list-index-label {
        background-color: @colorThemeValue;
      }
    }
  });
  .color-loop({
    .list-index.color-@{colorName} {
      ul {
        color: @colorValue;
      }
      .list-index-skip-placeholder:after,
      .list-index-label {
        background-color: @colorValue;
      }
    }
  });
}