Better screen breakpoint mixins and classes

This commit is contained in:
Fabio Manganiello 2025-03-31 22:11:06 +02:00
parent 3c2313252c
commit 6a8f38a182
Signed by: blacklight
GPG key ID: D90FBA7F76362774

View file

@ -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;
}
}