@arco-design/web-vue/lib/grid/style/col.less

Arco Design Vue 2.0: A Vue.js 3 UI Library

@import '../../style/theme/index.less';

@col-prefix-cls: ~'@{prefix}-col';

.@{col-prefix-cls} {
  box-sizing: border-box;

  .span(@span, @adaptation) when (@span > 0) and (@adaptation = '') {
    .span((@span - 1), @adaptation);

    &-@{span} {
      flex: 0 0 (100% / 24) * @span;
      width: (100% / 24) * @span;
    }
  }
  .span(@span, @adaptation) when (@span > 0) and (not(@adaptation = '')) {
    .span((@span - 1), @adaptation);

    &-@{adaptation}-@{span} {
      flex: 0 0 (100% / 24) * @span;
      width: (100% / 24) * @span;
    }
  }

  .span(24, '');

  .offset(@offset, @adaptation) when (@offset > 0) and (@adaptation = '') {
    .offset((@offset - 1), @adaptation);

    &-offset-@{offset} {
      margin-left: (100% / 24) * @offset;
    }
  }
  .offset(@offset, @adaptation) when (@offset > 0) and (not(@adaptation = '')) {
    .offset((@offset - 1), @adaptation);

    &-@{adaptation}-offset-@{offset} {
      margin-left: (100% / 24) * @offset;
    }
  }

  .offset(23, '');

  .order(@order, @adaptation) when (@order > 0) and (@adaptation = '') {
    .order((@order - 1), @adaptation);

    &-order-@{order} {
      order: @order;
    }
  }
  .order(@order, @adaptation) when (@order > 0) and (not(@adaptation = '')) {
    .order((@order - 1), @adaptation);

    &-@{adaptation}-order-@{order} {
      order: @order;
    }
  }

  .order(24, '');

  // adaptation
  .span(24, xs);
  .offset(23, xs);
  .order(24, xs);

  @media (min-width: 576px) {
    .span(24, sm);
    .offset(23, sm);
    .order(24, sm);
  }

  @media (min-width: 768px) {
    .span(24, md);
    .offset(23, md);
    .order(24, md);
  }

  @media (min-width: 992px) {
    .span(24, lg);
    .offset(23, lg);
    .order(24, lg);
  }

  @media (min-width: 1200px) {
    .span(24, xl);
    .offset(23, xl);
    .order(24, xl);
  }

  @media (min-width: 1600px) {
    .span(24, xxl);
    .offset(23, xxl);
    .order(24, xxl);
  }
}