This module contains the media-query mixin. It takes the items of the list from [responsive settings](settings.responsive.html) for generating the equivalent media-queries.
A simple mixin to quickly generate whole media queries from the aliases and
conditions defined in _settings.responsive.scss.
You can apply this mixin as follows:
.teaser{
padding: $inuit-base-spacing-unit;
@include media-query(palm) {
padding: $inuit-base-spacing-unit--small;
}
}
Output:
.teaser {
padding: 28px;
}
@media screen and (max-width: 719px) {
.teaser {
padding: 14px;
}
}