/*
  布局相关mixin
*/

@import './util.less';

// 浮动
.fl() {
  float: left;
}
.fr() {
  float: right;
}

/* 设定元素尺寸，长宽一致
  @size 尺寸（宽高一致）
  或者
  @w 宽度
  @h 高度
*/
.size(@size) {
  width: @size;
  height: @size;
}

// 设定元素尺寸，长宽不一致
.size(@width, @height) {
  width: @width;
  height: @height;
}

/*
  定宽居中页面布局
  @width 定宽宽度
*/
.layoutPageCenter(@width) {
  width: @width;
  margin-right: auto;
  margin-left: auto;
}

/*
  单侧边栏布局。
  @position
  边栏位置，可用值为 left / right
  @width 边栏宽度。
  @main-selector 主区域应用的选择器。可选，默认值为 .main。
  @sidebar-selector 侧边栏应用的选择器。可选，默认值为 .sidebar
*/
.layoutSidebar(left, @sidebarWidth, @mainSelector: ~'.main', @sidebarSelector: ~'.sidebar') {
  position: relative;

  & > @{mainSelector} {
    margin-left: @sidebarWidth;
    overflow: hidden;
  }

  & > @{sidebarSelector} {
    position: absolute;
    top: 0;
    left: 0;
    width: @sidebarWidth;
  }
}

// 单侧边栏布局（右侧）， @position=right, 其余参数同上
.layoutSidebar(right, @sidebarWidth, @mainSelector: ~'.main', @sidebarSelector: ~'.sidebar') {
  position: relative;

  & > @{mainSelector} {
    margin-right: @sidebarWidth;
    overflow: hidden;
  }

  & > @{sidebarSelector} {
    position: absolute;
    top: 0;
    right: 0;
    width: @sidebarWidth;
  }
}

/*
  用于把列表变成水平
  @gap 水平方向上列表项之间的间隔长度（任意单位）。
  @direction 水平浮动的方向。可用值为 right / left。可选，默认值：left。
*/
.layoutHorizontalList(@gap, @direction: left) when (@direction = left) {
  .clearfix();

  overflow: hidden;

  ul,
  ol {
    float: left;
    margin-left: -@gap;
    padding: 0;
    list-style: none;

    li {
      float: left;
      margin-left: @gap;
    }
  }
}

.layoutHorizontalList(@gap, @direction: left) when (@direction = right) {
  .clearfix();

  overflow: hidden;

  ul,
  ol {
    float: right;
    margin-right: -@gap;
    padding: 0;
    list-style: none;

    li {
      float: left;
      margin-right: @gap;
    }
  }
}
