46 lines
783 B
SCSS
46 lines
783 B
SCSS
|
/* Colcade */
|
||
|
|
|
||
|
|
* { box-sizing: border-box; }
|
||
|
|
|
||
|
|
.grid {
|
||
|
|
border: 1px solid color(gray-light)est;
|
||
|
|
}
|
||
|
|
|
||
|
|
.grid:after {
|
||
|
|
display: block;
|
||
|
|
content: '';
|
||
|
|
clear: both;
|
||
|
|
}
|
||
|
|
|
||
|
|
.grid-col {
|
||
|
|
float: left;
|
||
|
|
width: 49%;
|
||
|
|
margin-right: 2%;
|
||
|
|
background: rgba(theme-color(primary), .2);
|
||
|
|
}
|
||
|
|
|
||
|
|
.grid-col--4 { margin-right: 0; }
|
||
|
|
|
||
|
|
/* hide two middle */
|
||
|
|
.grid-col--2, .grid-col--3 { display: none; }
|
||
|
|
|
||
|
|
@media ( min-width: 768px ) {
|
||
|
|
.grid-col { width: 32%; }
|
||
|
|
.grid-col--2 { display: block; }
|
||
|
|
}
|
||
|
|
|
||
|
|
@media ( min-width: 1200px ) {
|
||
|
|
.grid-col { width: 23.5%; }
|
||
|
|
.grid-col--2, .grid-col--3 { display: block; }
|
||
|
|
}
|
||
|
|
|
||
|
|
.grid-item {
|
||
|
|
background: theme-color(primary);
|
||
|
|
margin-bottom: 20px;
|
||
|
|
border-radius: 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.grid-item--a { height: 80px; }
|
||
|
|
.grid-item--b { height: 140px; }
|
||
|
|
.grid-item--c { height: 300px; }
|