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

Full featured mobile HTML framework for building iOS & Android apps

/* === Grid === */
.ios {
  @cols: 5, 10, 15, 20, 25, 30, 100/3, 35, 40, 45, 50, 55, 60, 65, 100*(2/3), 70, 75, 80, 85, 90, 95, 100;
  .row {
    .-(@i: length(@cols)) when (@i > 0) {
      @divider: e(extract(@cols, @i));
      @className: `Math.floor(@{divider})`;
      @n: `100/parseFloat(@{divider})`;
      @n-1: @n - 1;
      .col-@{className} {
        width: ~"@{divider}%";
        width: ~"-webkit-calc((100% - 15px*@{n-1}) / @{n})";
        width: ~"calc((100% - 15px*@{n-1}) / @{n})";
      }
      &.no-gap {
        .col-@{className} {
          width: ~"@{divider}%";
        }
      }
      .-((@i - 1));
    }
    .-;

    .--(@j: 1) when (@j < length(@cols)) {
      @divider: e(extract(@cols, @j));
      @className: `Math.floor(@{divider})`;
      .col:nth-last-child(@{j}), .col:nth-last-child(@{j}) ~ .col {
        @j-1: @j - 1;
        width: 100% / @j;
        width: ~"-webkit-calc((100% - 15px*@{j-1}) / @{j})";
        width: ~"calc((100% - 15px*@{j-1}) / @{j})";
      }
      &.no-gap {
        .col:nth-last-child(@{j}), .col:nth-last-child(@{j}) ~ .col {
          width: 100% / @j;
        }
      }
      .--((@j + 1));
    }
    .--;
  }

  @media all and (min-width:768px) {
    .row {
      .-(@i: length(@cols)) when (@i > 0) {
        @divider: e(extract(@cols, @i));
        @className: `Math.floor(@{divider})`;
        @n: `100/parseFloat(@{divider})`;
        @n-1: @n - 1;
        .tablet-@{className} {
          width: ~"@{divider}%";
          width: ~"-webkit-calc((100% - 15px*@{n-1}) / @{n})";
          width: ~"calc((100% - 15px*@{n-1}) / @{n})";
        }
        &.no-gap {
          .tablet-@{className} {
            width: ~"@{divider}%";
          }
        }
        .-((@i - 1));
      }
      .-;
      .--(@j: 1) when (@j < length(@cols)) {
        .tablet-auto:nth-last-child(@{j}), .tablet-auto:nth-last-child(@{j}) ~ .col {
          @j-1: @j - 1;
          width: 100% / @j;
          width: ~"-webkit-calc((100% - 15px*@{j-1}) / @{j})";
          width: ~"calc((100% - 15px*@{j-1}) / @{j})";
        }
        &.no-gap {
          .tablet-auto:nth-last-child(@{j}), .tablet-auto:nth-last-child(@{j}) ~ .tablet-auto {
            width: 100% / @j;
          }
        }
        .--((@j + 1));
      }
      .--;
    }
  }
  @media all and (min-width:1025px) {
    .row {
      .-(@i: length(@cols)) when (@i > 0) {
        @divider: e(extract(@cols, @i));
        @className: `Math.floor(@{divider})`;
        @n: `100/parseFloat(@{divider})`;
        @n-1: @n - 1;
        .desktop-@{className} {
          width: ~"@{divider}%";
          width: ~"-webkit-calc((100% - 15px*@{n-1}) / @{n})";
          width: ~"calc((100% - 15px*@{n-1}) / @{n})";
        }
        &.no-gap {
          .desktop-@{className} {
            width: ~"@{divider}%";
          }
        }
        .-((@i - 1));
      }
      .-;
      .--(@j: 1) when (@j < length(@cols)) {
        .desktop-auto:nth-last-child(@{j}), .desktop-auto:nth-last-child(@{j}) ~ .col {
          @j-1: @j - 1;
          width: 100% / @j;
          width: ~"-webkit-calc((100% - 15px*@{j-1}) / @{j})";
          width: ~"calc((100% - 15px*@{j-1}) / @{j})";
        }
        &.no-gap {
          .desktop-auto:nth-last-child(@{j}), .desktop-auto:nth-last-child(@{j}) ~ .desktop-auto {
            width: 100% / @j;
          }
        }
        .--((@j + 1));
      }
      .--;
    }
  }
}