birdpaper-ui/es/grid/src/style/grid.less

一个通用的 vue3 UI组件库。A common vue3 UI component library.

.bp-row {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-flow: row wrap;
}

/** 水平对齐方式 */
.bp-justify-center {
  justify-content: center;
}
.bp-justify-start {
  justify-content: flex-start;
}
.bp-justify-end {
  justify-content: flex-end;
}
.bp-justify-between {
  justify-content: space-between;
}
.bp-justify-around {
  justify-content: space-around;
}
.bp-justify-evenly {
  justify-content: space-evenly;
}

/** 垂直对齐方式 */
.bp-align-start {
  align-items: flex-start;
}
.bp-align-center {
  align-items: center;
}
.bp-align-end {
  align-items: flex-end;
}
.bp-align-baseline {
  align-items: baseline;
}
.bp-align-stretch {
  align-items: stretch;
}

.bp-col {
  box-sizing: border-box;

  // 栏位
  .span(@span) when (@span > 0) {
    .span((@span - 1));

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

  .span(24);

  // 偏移
  .offset(@offset) when (@offset > 0) {
    .offset((@offset - 1));

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

  .offset(23);
}

@width : 100%;

// xs部分
@media only screen and (max-width: 759px) {
  .bp-col-xs-0 {
    display: none;
    width: 0%;
  }

  .total-nums(24);

  .total-nums(@n, @i: 1) when (@i =< @n) {
    // ============= 分栏 ===============
    .bp-col-xs-@{i} {
      display: block;
      width: @width / (24 / @i);
      flex: 0 0 (100% / 24) * @i;
    }

    // ============= 偏移 ===============
    .bp-col-xs-offset-@{i} {
      margin-left: @width / (24 / @i);
    }

    .total-nums(@n, (@i + 1));
  }
}

// sm部分
@media only screen and (min-width: 760px) and (max-width: 991px) {
  .bp-col-sm-0 {
    display: none;
    width: 0%;
  }

  .total-nums(24);

  .total-nums(@n, @i: 1) when (@i =< @n) {
    // ============= 分栏 ===============
    .bp-col-sm-@{i} {
      display: block;
      width: @width / (24 / @i);
      flex: 0 0 (100% / 24) * @i;
    }

    // ============= 偏移 ===============
    .bp-col-sm-offset-@{i} {
      margin-left: @width / (24 / @i);
    }

    .total-nums(@n, (@i + 1));
  }
}

// md部分
@media only screen and (min-width: 992px) {
  .bp-col-md-0 {
    display: none;
    width: 0%;
  }

  .total-nums(24);

  .total-nums(@n, @i: 1) when (@i =< @n) {
    // ============= 分栏 ===============
    .bp-col-md-@{i} {
      display: block;
      width: @width / (24 / @i);
      flex: 0 0 (100% / 24) * @i;
    }

    // ============= 偏移 ===============
    .bp-col-md-offset-@{i} {
      margin-left: @width / (24 / @i);
    }

    .total-nums(@n, (@i + 1));
  }
}

// lg部分
@media only screen and (min-width: 1200px) {
  .bp-col-lg-0 {
    display: none;
    width: 0%;
  }

  .total-nums(24);

  .total-nums(@n, @i: 1) when (@i =< @n) {
    // ============= 分栏 ===============
    .bp-col-lg-@{i} {
      display: block;
      width: @width / (24 / @i);
      flex: 0 0 (100% / 24) * @i;
    }

    // ============= 偏移 ===============
    .bp-col-lg-offset-@{i} {
      margin-left: @width / (24 / @i);
    }

    .total-nums(@n, (@i + 1));
  }
}

// xl部分
@media only screen and (min-width: 1920px) {
  .bp-col-xl-0 {
    display: none;
    width: 0%;
  }

  .total-nums(24);

  .total-nums(@n, @i: 1) when (@i =< @n) {
    // ============= 分栏 ===============
    .bp-col-xl-@{i} {
      display: block;
      width: @width / (24 / @i);
      flex: 0 0 (100% / 24) * @i;
    }

    // ============= 偏移 ===============
    .bp-col-xl-offset-@{i} {
      margin-left: @width / (24 / @i);
    }

    .total-nums(@n, (@i + 1));
  }
}