_sass/_core/mixins.scss
$color-opaque: rgba(0, 0, 0, 0.2);
@mixin hover-box-shadow() {
@include u-shadow(2);
&:hover {
@include u-shadow(3);
}
&:active {
box-shadow: u-shadow(2);
}
}
// Mobile-first media query helper
@mixin media-max($bp) {
@media screen and (max-width: #{$bp}) {
@content;
}
}
@mixin allow-layout-classes {
@include u-margin-x(auto);
&.width-one-half {
@include at-media('tablet') {
width: 50%;
}
}
&.width-one-third {
@include at-media('tablet') {
width: 33%;
}
}
&.width-two-thirds {
@include at-media('tablet') {
width: 67%;
}
}
&.width-one-fourth {
@include at-media('tablet') {
width: 25%;
}
}
&.width-three-fourths {
@include at-media('tablet') {
width: 75%;
}
}
&.align-left {
@include at-media('tablet') {
float: left;
margin-right: 2em;
margin-top: 0.5em;
}
}
&.align-right {
@include at-media('tablet') {
float: right;
margin-left: 2em;
margin-top: 0.5em;
}
}
}