You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
91 lines
2.0 KiB
91 lines
2.0 KiB
2 years ago
|
.row {
|
||
|
display: flex;
|
||
|
flex-direction: row;
|
||
|
list-style: none;
|
||
|
flex-wrap: wrap;
|
||
|
padding-left: 10px;
|
||
|
padding-right: 10px;
|
||
|
|
||
|
$one: calc(100 / 12 * 1%);
|
||
|
|
||
|
@for $i from 1 through 12 {
|
||
|
.col-#{$i} {
|
||
|
flex-basis: calc($one * $i);
|
||
|
padding-left: 10px;
|
||
|
padding-right: 10px;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
/* s1 smartphones, iPhone, portrait 480x320 phones */
|
||
|
@media (max-width:320px) {
|
||
|
$one: calc(100 / 12 * 1%);
|
||
|
@for $i from 1 through 12 {
|
||
|
.col-s1-#{$i} {
|
||
|
flex-basis: calc($one * $i) !important;
|
||
|
padding-left: 10px;
|
||
|
padding-right: 10px;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
/* s2 portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */
|
||
|
@media (max-width:481px) {
|
||
|
$one: calc(100 / 12 * 1%);
|
||
|
@for $i from 1 through 12 {
|
||
|
.col-s2-#{$i} {
|
||
|
flex-basis: calc($one * $i) !important;
|
||
|
padding-left: 10px;
|
||
|
padding-right: 10px;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
/* s3 portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */
|
||
|
@media (max-width:641px) {
|
||
|
$one: calc(100 / 12 * 1%);
|
||
|
@for $i from 1 through 12 {
|
||
|
.col-s3-#{$i} {
|
||
|
flex-basis: calc($one * $i) !important;
|
||
|
padding-left: 10px;
|
||
|
padding-right: 10px;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
/* s4 tablet, landscape iPad, lo-res laptops ands desktops */
|
||
|
@media (max-width:961px) {
|
||
|
$one: calc(100 / 12 * 1%);
|
||
|
@for $i from 1 through 12 {
|
||
|
.col-s4-#{$i} {
|
||
|
flex-basis: calc($one * $i) !important;
|
||
|
padding-left: 10px;
|
||
|
padding-right: 10px;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
/* s5 big landscape tablets, laptops, and desktops */
|
||
|
@media (max-width:1025px) {
|
||
|
$one: calc(100 / 12 * 1%);
|
||
|
@for $i from 1 through 12 {
|
||
|
.col-s5-#{$i} {
|
||
|
flex-basis: calc($one * $i) !important;
|
||
|
padding-left: 10px;
|
||
|
padding-right: 10px;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
/* s6 hi-res laptops and desktops */
|
||
|
@media (max-width:1281px) {
|
||
|
$one: calc(100 / 12 * 1%);
|
||
|
@for $i from 1 through 12 {
|
||
|
.col-s6-#{$i} {
|
||
|
flex-basis: calc($one * $i) !important;
|
||
|
padding-left: 10px;
|
||
|
padding-right: 10px;
|
||
|
}
|
||
|
}
|
||
|
}
|