lolita-style/src/conponent/_grid.scss

87 行
2.2 KiB
SCSS

.container, .container-fluid {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 576px) { .container { max-width: 540px; } }
@media (min-width: 768px) { .container { max-width: 720px; } }
@media (min-width: 992px) { .container { max-width: 960px; } }
@media (min-width: 1200px) { .container { max-width: 1140px; } }
.row {
display: flex;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}
@for $i from 1 through 12 {
.col, .col-auto, .col-sm, .col-sm-auto, .col-md, .col-md-auto, .col-lg, .col-lg-auto, .col-xl, .col-xl-auto, .col-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}, .col-xl-#{$i} {
position: relative;
width: 100%;
padding-right: 15px;
padding-left: 15px;
}
}
.col { flex-basis: 0; flex-grow: 1; min-width: 0; max-width: 100%; }
.col-auto { flex: 0 0 auto; width: auto; max-width: 100%; }
$perc: ('1': 8.333333%, '2': 16.666667%, '3': 25%, '4': 33.333333%, '5': 41.666667%, '6': 50%, '7': 58.333333%, '8': 66.666667%, '9': 75%, '10': 83.333333%, '11': 91.666667%, '12': 100%);
@each $k, $v in $perc {
.col-#{$k} {
flex: 0 0 $v;
max-width: $v;
}
}
@media (min-width: 576px) {
.col-sm { flex-basis: 0; flex-grow: 1; min-width: 0; max-width: 100%; }
.col-sm-auto { flex: 0 0 auto; width: auto; max-width: 100%; }
@each $k, $v in $perc {
.col-sm-#{$k} {
flex: 0 0 $v;
max-width: $v;
}
}
}
@media (min-width: 768px) {
.col-md { flex-basis: 0; flex-grow: 1; min-width: 0; max-width: 100%; }
.col-md-auto { flex: 0 0 auto; width: auto; max-width: 100%; }
@each $k, $v in $perc {
.col-md-#{$k} {
flex: 0 0 $v;
max-width: $v;
}
}
}
@media (min-width: 992px) {
.col-lg { flex-basis: 0; flex-grow: 1; min-width: 0; max-width: 100%; }
.col-lg-auto { flex: 0 0 auto; width: auto; max-width: 100%; }
@each $k, $v in $perc {
.col-lg-#{$k} {
flex: 0 0 $v;
max-width: $v;
}
}
}
@media (min-width: 1200px) {
.col-xl { flex-basis: 0; flex-grow: 1; min-width: 0; max-width: 100%; }
.col-xl-auto { flex: 0 0 auto; width: auto; max-width: 100%; }
@each $k, $v in $perc {
.col-xl-#{$k} {
flex: 0 0 $v;
max-width: $v;
}
}
}