yunser-ui-vue/src/grid/grid.less

material design ui for vue2

.row {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: flex-start;
    > [class*="col-"] {
        box-sizing: border-box;
    }
}
@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;

@media all and (max-width: 600px) {
  .row {
      .col-auto {
          width: 100%;
      }
      .-(@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% - 16px*@{n-1}) / @{n})";
              width: ~"calc((100% - 16px*@{n-1}) / @{n})";
          }
          &.no-gutter {
              .col-@{className} {
                  width: ~"@{divider}%";
              }
          }
          .-((@i - 1));
      } .-;
      .--(@j: 1) when (@j < length(@cols)) {
          @divider: e(extract(@cols, @j));
          @className: `Math.floor(@{divider})`;
          .col-auto:nth-last-child(@{j}), .col-auto:nth-last-child(@{j}) ~ .col-auto {
              @j-1: @j - 1;
              width: 100% / @j;
              width: ~"-webkit-calc((100% - 16px*@{j-1}) / @{j})";
              width: ~"calc((100% - 16px*@{j-1}) / @{j})";
          }
          &.no-gutter {
              .col-auto:nth-last-child(@{j}), .col-auto:nth-last-child(@{j}) ~ .col-auto {
                  width: 100% / @j;
              }
          }
          .--((@j + 1));
      } .--;

  }
}

@media all and (max-width: 992px) and (min-width: 601px) {
    .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% - 16px*@{n-1}) / @{n})";
                width: ~"calc((100% - 16px*@{n-1}) / @{n})";
            }
            &.no-gutter {
                .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-auto {
                @j-1: @j - 1;
                width: 100% / @j;
                width: ~"-webkit-calc((100% - 16px*@{j-1}) / @{j})";
                width: ~"calc((100% - 16px*@{j-1}) / @{j})";
            }
            &.no-gutter {
                .tablet-auto:nth-last-child(@{j}), .tablet-auto:nth-last-child(@{j}) ~ .tablet-auto {
                    width: 100% / @j;
                }
            }
            .--((@j + 1));
        } .--;
    }
}


@media all and (min-width: 993px) {
    .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% - 16px*@{n-1}) / @{n})";
                width: ~"calc((100% - 16px*@{n-1}) / @{n})";
            }
            &.no-gutter {
                .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-auto {
                @j-1: @j - 1;
                width: 100% / @j;
                width: ~"-webkit-calc((100% - 16px*@{j-1}) / @{j})";
                width: ~"calc((100% - 16px*@{j-1}) / @{j})";
            }
            &.no-gutter {
                .desktop-auto:nth-last-child(@{j}), .desktop-auto:nth-last-child(@{j}) ~ .desktop-auto {
                    width: 100% / @j;
                }
            }
            .--((@j + 1));
        } .--;
    }
}