@import "../../compile/core/less/_grid-framework";
////////布局////////
.dog {
  font-family: @sys-font-yahei;
  font-size: 14px;
  color: #333;
  &,* {
    box-sizing: border-box;
  }
}

// 左浮动
.d-pull-left {
  float: left;
}
// 右浮动
.d-pull-right {
  float: right;
}
// 清除浮动
.d-pull-clear {
  clear: both;
}
.d-content-clear {
  &:before, &:after{
    content: "";
    overflow: hidden;
    display: block;
    clear: both;
    height: 0;
  }
}
// 绝对定位
.d-abs {
  position: absolute;
}
// 相对定位
.d-relative {
  position: relative;
}
.d-over-hidden {
  overflow: hidden;
}
// 水平居中
.d-horizon {
  margin-left: auto;
  margin-right: auto;
}
// 边距内容区
.d-contenter {
  padding: @sys-layout-md;
}
// 容器
.d-container {
  padding-right: @sys-layout-md;
  padding-left: @sys-layout-md;
}
// 容器居中区
.d-container-focus {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: @sys-layout-md;
  padding-bottom: @sys-layout-md;
  min-height: 64px;
  text-align: center;
}
// 段落内容区
.d-section {
  margin-top: @sys-layout-md;
  margin-bottom: @sys-layout-md;
}
// 行
.d-row {
  &:after{
    content: "";
    display: block;
    clear: both;
  }
  [class*=col-]{
    float: left;
  }
}
// 行单元
.d-row-cell {
  padding-left: @sys-layout-sm;
  padding-right: @sys-layout-sm;
}
// 栅格
.make-grid(xs);
@media (min-width: @sys-grid-sm) {
  .make-grid(sm);
}
@media (min-width: @sys-grid-md) {
  .make-grid(md);
}
@media (min-width: @sys-grid-lg) {
  .make-grid(lg);
}

// flex布局
.d-layout-flex {
  display: flex;
  &.d-flex-column {
    flex-direction: column;
  }
  .d-flex-1 {
    flex: 1;
  }
}
.d-layout-flex-between-center {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

// grid布局
.d-layout-grid {
  display: grid;
}
.d-layout-grid-2 {
  grid-template-columns: ~"calc(50% - 7.5px) calc(50% - 7.5px)";
  grid-gap: 0 15px;
}
.d-layout-grid-3 {
  grid-template-columns: ~"calc(33.333% - 10px) calc(33.333% - 10px) calc(33.333% - 10px)";
  grid-gap: 0 15px;
}
.d-layout-grid-4 {
  grid-template-columns: ~"calc(25% - 11.25px) calc(25% - 11.25px) calc(25% - 10px) calc(25% - 11.25px)";
  grid-gap: 0 15px;
}
.d-layout-grid-5 {
  grid-template-columns: ~"calc(20% - 12px) calc(20% - 12px) calc(20% - 12px) calc(20% - 12px) calc(20% - 12px)";
  grid-gap: 0 15px;
}
.d-layout-grid-6 {
  grid-template-columns: ~"calc(16.666% - 12.5px) calc(16.666% - 12.5px) calc(16.666% - 12.5px) calc(16.666% - 12.5px) calc(16.666% - 12.5px) calc(16.666% - 12.5px)";
  grid-gap: 0 15px;
}

// 块状元素
.d-block {
  display: block;
}
// 内联块
.d-inblock {
  display: inline-block;
}
// 隐藏
.d-hide {
  display: none;
}

// 居中
.d-vm {
  vertical-align: middle;
}

// 无外边距
.d-nomar {
  margin: 0;
}

// 无内边距
.d-nopad {
  padding: 0;
}

// 嵌入框架
.d-iframe {
  width: 100%;
  height: 100%;
  border: none;
}