@charset "utf-8";
@import "./var";

//旧版
.#{$prefix}grid__row{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    display: table\0;
    width: 100%;
    flex-wrap: wrap;
}
.#{$prefix}grid__row [class*=#{$prefix}grid__col]{
    padding: 10px;
    display: table-cell\0;
}
.#{$prefix}grid__box{
    height: 100%;
    color:$color-text;
}
.#{$prefix}grid__row.#{$prefix}vertical--top{
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: start;
}
.#{$prefix}grid__row.#{$prefix}vertical--middle{
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.#{$prefix}grid__row.#{$prefix}vertical--bottom{
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
}
.#{$prefix}grid__row.#{$prefix}vertical--top .#{$prefix}grid__box,
.#{$prefix}grid__row.#{$prefix}vertical--middle .#{$prefix}grid__box,
.#{$prefix}grid__row.#{$prefix}vertical--bottom .#{$prefix}grid__box{
    height: auto;
}
.#{$prefix}grid__row.#{$prefix}vertical--top [class*=#{$prefix}grid__col]{
    vertical-align: top;
}
.#{$prefix}grid__row.#{$prefix}vertical--center [class*=#{$prefix}grid__col]{
    vertical-align: middle;
}
.#{$prefix}grid__row.#{$prefix}vertical--bottom [class*=#{$prefix}grid__col]{
    vertical-align: bottom;
}
.#{$prefix}grid__col-1 {
    width: 4.1667%;
}
.#{$prefix}grid__col-2 {
    width: 8.3333%;
}
.#{$prefix}grid__col-3 {
    width: 12.5000%;
}
.#{$prefix}grid__col-4 {
    width: 16.6667%;
}
.#{$prefix}grid__col-5 {
    width: 20.8333333%;
}
.#{$prefix}grid__col-6 {
    width: 25%;
}
.#{$prefix}grid__col-7 {
    width: 29.1666667%;
}
.#{$prefix}grid__col-8 {
    width: 33.3333333%;
}
.#{$prefix}grid__col-9 {
    width: 37.5%;
}
.#{$prefix}grid__col-10 {
    width: 41.6666667%;
}
.#{$prefix}grid__col-11{
    width: 45.8333333%;
}
.#{$prefix}grid__col-12{
    width: 50%;
}
.#{$prefix}grid__col-13{
    width: 54.1666667%;
}
.#{$prefix}grid__col-14 {
    width: 58.3333333%;
}
.#{$prefix}grid__col-15 {
    width: 62.5%;
}
.#{$prefix}grid__col-16{
    width: 66.6666667%;
}
.#{$prefix}grid__col-17{
    width: 70.8333333%;
}
.#{$prefix}grid__col-18{
    width: 75%;
}
.#{$prefix}grid__col-19{
    width: 79.1666667%;
}
.#{$prefix}grid__col-20{
    width: 83.3333333%;
}
.#{$prefix}grid__col-21{
    width: 87.5%;
}
.#{$prefix}grid__col-22{
    width: 91.6666667%;
}
.#{$prefix}grid__col-23{
    width: 95.8333333%;
}
.#{$prefix}grid__col-24 {
    width: 100%;
}
// 带分割线
.#{$prefix}grid--split-line{}
.#{$prefix}grid--split-line>[class*="#{$prefix}grid__col"]{
    position: relative;
}
.#{$prefix}grid--split-line>[class *="#{$prefix}grid__col"]:before{
    content: "";
    display: inline-block;
    position: absolute;
    top: 10px;
    left: 0;
    bottom: 10px;
    border-right: $color-border-inner;
}
.#{$prefix}grid--split-line>[class *= "#{$prefix}grid__col"]:first-child:before{
    border-right: 0;
}


// ============================================================================


// ============================================================================


// ============================================================================


// ============================================================================


//新版
.#{$prefix}grid{
    margin: -($grid-gutter / 2);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
}
.#{$prefix}grid [class*=#{$prefix}grid__item]{
    padding: $grid-gutter / 2;
}
.#{$prefix}grid__box{
    height: 100%;
}
.#{$prefix}grid.#{$prefix}vertical--top{
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: start;
}
.#{$prefix}grid.#{$prefix}vertical--middle{
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.#{$prefix}grid.#{$prefix}vertical--bottom{
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
}
.#{$prefix}grid.#{$prefix}vertical--top .#{$prefix}grid__box,
.#{$prefix}grid.#{$prefix}vertical--middle .#{$prefix}grid__box,
.#{$prefix}grid.#{$prefix}vertical--bottom .#{$prefix}grid__box{
    height: auto;
}
.#{$prefix}grid.#{$prefix}vertical--top [class*=#{$prefix}grid__item]{
    vertical-align: top;
}
.#{$prefix}grid.#{$prefix}vertical--middle [class*=#{$prefix}grid__item]{
    vertical-align: middle;
}
.#{$prefix}grid.#{$prefix}vertical--bottom [class*=#{$prefix}grid__item]{
    vertical-align: bottom;
}



//处理均等分
.#{$prefix}grid__item {
    -ms-flex-positive: 1;
    flex-grow: 1;
    width: 0;
}
.#{$prefix}grid__item-sm-0,
.#{$prefix}grid__item-md-0,
.#{$prefix}grid__item-lg-0,
.#{$prefix}grid__item-xl-0,
.#{$prefix}grid__item-xxl-0,
.#{$prefix}grid__item-0 {
    display: none;
}

// 生成.#{$prefix}grid__item-[0-24]类名
// $grid-columns 为栅格列数
@for $i from 1 through $grid-columns{
    .#{$prefix}grid__item-#{$i}{
        width:($i / $grid-columns)*100%
    }
}
// .#{$prefix}grid__item-1 {
//     width: 4.1667%;
// }
// .#{$prefix}grid__item-2 {
//     width: 8.3333%;
// }
// .#{$prefix}grid__item-3 {
//     width: 12.5000%;
// }
// .#{$prefix}grid__item-4 {
//     width: 16.6667%;
// }
// .#{$prefix}grid__item-5 {
//     width: 20.8333333%;
// }
// .#{$prefix}grid__item-6 {
//     width: 25%;
// }
// .#{$prefix}grid__item-7 {
//     width: 29.1666667%;
// }
// .#{$prefix}grid__item-8 {
//     width: 33.3333333%;
// }
// .#{$prefix}grid__item-9 {
//     width: 37.5%;
// }
// .#{$prefix}grid__item-10 {
//     width: 41.6666667%;
// }
// .#{$prefix}grid__item-11{
//     width: 45.8333333%;
// }
// .#{$prefix}grid__item-12{
//     width: 50%;
// }
// .#{$prefix}grid__item-13{
//     width: 54.1666667%;
// }
// .#{$prefix}grid__item-14 {
//     width: 58.3333333%;
// }
// .#{$prefix}grid__item-15 {
//     width: 62.5%;
// }
// .#{$prefix}grid__item-16{
//     width: 66.6666667%;
// }
// .#{$prefix}grid__item-17{
//     width: 70.8333333%;
// }
// .#{$prefix}grid__item-18{
//     width: 75%;
// }
// .#{$prefix}grid__item-19{
//     width: 79.1666667%;
// }
// .#{$prefix}grid__item-20{
//     width: 83.3333333%;
// }
// .#{$prefix}grid__item-21{
//     width: 87.5%;
// }
// .#{$prefix}grid__item-22{
//     width: 91.6666667%;
// }
// .#{$prefix}grid__item-23{
//     width: 95.8333333%;
// }
// .#{$prefix}grid__item-24 {
//     width: 100%;
// }




// 带分割线
.#{$prefix}grid--split-line{}
.#{$prefix}grid--split-line>[class*="#{$prefix}grid__item"]{
    position: relative;
}
.#{$prefix}grid--split-line>[class *="#{$prefix}grid__item"]:before{
    content: "";
    display: inline-block;
    position: absolute;
    top:$grid-gutter / 2;
    left:0;
    bottom:$grid-gutter / 2;
    border-right: 1px solid $color-border-inner;
}
.#{$prefix}grid--split-line>[class *= "#{$prefix}grid__item"]:first-child:before{
    border-right: 0;
}


@media screen and (min-width:map-get($grid-breakpoints,'sm')){
    @for $i from 1 through $grid-columns{
        .#{$prefix}grid__item-sm-#{$i}{
            width:($i / $grid-columns)*100%
        }
    }
}
@media screen and (min-width:map-get($grid-breakpoints,'md')){
    @for $i from 1 through $grid-columns{
        .#{$prefix}grid__item-md-#{$i}{
            width:($i / $grid-columns)*100%
        }
    }
}
@media screen and (min-width:map-get($grid-breakpoints,'lg')){
    @for $i from 1 through $grid-columns{
        .#{$prefix}grid__item-lg-#{$i}{
            width:($i / $grid-columns)*100%
        }
    }
}
@media screen and (min-width:map-get($grid-breakpoints,'xl')){
    @for $i from 1 through $grid-columns{
        .#{$prefix}grid__item-xl-#{$i}{
            width:($i / $grid-columns)*100%
        }
    }
}
@media screen and (min-width:map-get($grid-breakpoints,'xxl')){
    @for $i from 1 through $grid-columns{
        .#{$prefix}grid__item-xxl-#{$i}{
            width:($i / $grid-columns)*100%
        }
    }
}