Better screen breakpoint mixins and classes
This commit is contained in:
parent
3c2313252c
commit
6a8f38a182
1 changed files with 42 additions and 2 deletions
|
@ -8,10 +8,50 @@ $breakpoints: (
|
|||
);
|
||||
|
||||
// Mixin to print out media queries (based on map keys passed)
|
||||
@mixin media($keys...){
|
||||
@mixin media($keys...) {
|
||||
@each $key in $keys {
|
||||
@media (min-width: map.get($breakpoints, $key)){
|
||||
@media (min-width: map.get($breakpoints, $key)) {
|
||||
@content
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
@mixin from($key) {
|
||||
@media (min-width: map.get($breakpoints, $key)) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin until($key) {
|
||||
@media (max-width: #{map.get($breakpoints, $key) - 1}) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
.from.desktop {
|
||||
@include until(desktop) {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.from.tablet {
|
||||
@include until(tablet) {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.until.tablet {
|
||||
@include from(tablet) {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.until.desktop {
|
||||
@include from(desktop) {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Add table
Reference in a new issue