Arjun Patel
65 lines
959 B
SCSS
65 lines
959 B
SCSS
/* Highlights */
|
|
|
|
.highlights {
|
|
width: 100%;
|
|
margin: (_size(element-margin) * 1.25) 0;
|
|
|
|
@include flexgrid((
|
|
columns: 3,
|
|
gutters: 3rem,
|
|
vertical-align: stretch
|
|
));
|
|
|
|
.content {
|
|
border-radius: _size(border-radius);
|
|
height: 100%;
|
|
padding: 3rem;
|
|
text-align: center;
|
|
|
|
.icon {
|
|
font-size: 5rem;
|
|
}
|
|
}
|
|
|
|
> div {
|
|
|
|
> :last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
}
|
|
|
|
@include breakpoint('<=medium') {
|
|
@include flexgrid-resize((
|
|
columns: 2,
|
|
gutters: 2rem,
|
|
prev-columns: 3
|
|
));
|
|
|
|
.content {
|
|
padding: 2rem;
|
|
}
|
|
}
|
|
|
|
@include breakpoint('<=small') {
|
|
@include flexgrid-resize((
|
|
columns: 1,
|
|
gutters: 2rem,
|
|
prev-columns: (3, 2)
|
|
));
|
|
|
|
}
|
|
}
|
|
|
|
@mixin color-highlights($p: null) {
|
|
$highlight: _palette($p, highlight);
|
|
|
|
.highlights {
|
|
.content {
|
|
background: _palette($p, bg);
|
|
box-shadow: 0px 0px 4px 1px _palette($p, border-lt);
|
|
}
|
|
}
|
|
}
|
|
|
|
@include color-highlights; |