amazeui/less/grid.less

Sleek, intuitive, and powerful front-end framework for faster and easier web development.

// Name:            Grid
//
// Description:     Mobile first 12 列网格系统，基于浮动布局；相对定位实现 push / pull
//
//                  Breakpoint:
//                    sm: <= 640px
//                    md: 641px <= 1024px
//                    lg: >1024px
//
// Component:       `.am-g`
//
// Sub-objects:     `.am-u-{point}-{n}`
//
// =============================================================================

/* ==========================================================================
   Component: Grid
 ============================================================================ */

// Mixins
// =============================================================================

.reset-order(@point) {
  .@{ns}u-@{point}-reset-order {
    margin-left: 0;
    margin-right: 0;
    left: auto;
    right: auto;
    float: left;
  }
}

.col-basic() {
  [class*="@{ns}u-"] {
    width: 100%;
    padding-left: @grid-gutter;
    padding-right: @grid-gutter;
    float: left;
    position: relative;

    // Float the last col to right
    & + &:last-child {
      float: right;
    }

    // Not float the last col
    & + &.@{ns}u-end {
      float: left;
    }

    @media @medium-up {
      & {
        padding-left: @grid-gutter-md;
        padding-right: @grid-gutter-md;
      }
    }
  }

  // [class*="@{ns}u-pull-"],
  // [class*="@{ns}u-push-"] {
  //  position: relative;
  // }

  [class*="@{ns}u-pull-"] {
    left: auto;
  }

  [class*="@{ns}u-push-"] {
    right: auto;
  }
}

.col-misc(@point) {
  [class*="@{ns}u-"] {
    // 居中的网格
    &.@{ns}u-@{point}-centered {
      margin-left: auto;
      margin-right: auto;
      float: none;

      &:last-child {
        float: none;
      }
    }

    &.@{ns}u-@{point}-uncentered {
      margin-left: 0;
      margin-right: 0;
      float: left;

      &:last-child {
        float: left;
      }
    }
  }
}

// calc grid: width, push, pull, offset
.calc-grid-col (@point: sm, @type, @n: @grid-columns, @i: 1) when
  (@type = width) and (@i =< @n) {
  .@{ns}u-@{point}-@{i} {
    width: (@i * 100% / @n);
  }
}

.calc-grid-col (@point: sm, @type, @n: @grid-columns, @i: 1) when
  (@type = push) and (@i = 1) {
  .@{ns}u-@{point}-push-0 {
    left: 0;
  }
}

.calc-grid-col (@point: sm, @type, @n: @grid-columns, @i: 1) when
  (@type = push) and (@i < @n) {
  .@{ns}u-@{point}-push-@{i} {
    left: @i * (100% / @n);
  }
}

.calc-grid-col (@point: sm, @type, @n: @grid-columns, @i: 1) when
  (@type = pull) and (@i = 1) {
  .@{ns}u-@{point}-pull-0 {
    right: 0;
  }
}

.calc-grid-col (@point: sm, @type, @n: @grid-columns, @i: 1) when
  (@type = pull) and (@i < @n) {
  .@{ns}u-@{point}-pull-@{i} {
    right: @i * (100% / @n);
  }
}

.calc-grid-col (@point: sm, @type, @n: @grid-columns, @i: 1) when
  (@type = offset) and (@i = 1) {
  .@{ns}u-@{point}-offset-0 {
    margin-left: 0;
  }
}

.calc-grid-col (@point: sm, @type, @n: @grid-columns, @i: 1) when
  (@type = offset) and (@i < @n) {
  .@{ns}u-@{point}-offset-@{i} {
    margin-left: @i * (100% / @grid-columns);
  }
}

.loop-cols (@point: sm, @type, @n: @grid-columns, @i: 1) when (@i =< @n) {
  .calc-grid-col(@point, @type, @n, @i);
  .loop-cols(@point, @type, @grid-columns, (@i + 1));
}

.make-cols(@point) {
  .loop-cols(@point, width);
  .loop-cols(@point, pull);
  .loop-cols(@point, push);
  .loop-cols(@point, offset);
  .reset-order(@point);
  .col-misc(@point);
}


// Container
.@{ns}container {
  .grid-container();

  > .@{ns}g {
    width: auto;
    margin-left: -@grid-gutter;
    margin-right: -@grid-gutter;

    @media @medium-up {
      margin-left: -@grid-gutter-md;
      margin-right: -@grid-gutter-md;
    }
  }
}

.@{ns}g {
  margin: 0 auto;
  width: 100%;
  .clearfix();

  // Nested grid
  & & {
    margin-left: -@grid-gutter;
    margin-right: -@grid-gutter;
    width: auto;

    &.@{ns}g-collapse {
      margin-left: 0;
      margin-right: 0;
      width: auto;
    }

    // Increasing gutter for medium and large screen
    @media @medium-up {
      margin-left: -@grid-gutter-md;
      margin-right: -@grid-gutter-md;
    }
  }

  &.@{ns}g-collapse & {
    margin-left: 0;
    margin-right: 0;
  }
}

// no padding
.@{ns}g-collapse {
  [class*="@{ns}u-"] {
    padding-left: 0;
    padding-right: 0;
  }
}

// Fixed width row
.@{ns}g-fixed {
  max-width: @grid-max-width;
}

.col-basic();

@media @screen {
  .make-cols(sm);
}

@media @medium-up {
  .make-cols(md);
}

@media @large-up {
  .make-cols(lg);
}


// Hooks
// =============================================================================

// Core grid, No hooks