generated from gitea_admin/default
41 lines
931 B
SCSS
41 lines
931 B
SCSS
@use "sass:map";
|
|
|
|
|
|
$breakpoints: (
|
|
"phone_300": 300px,
|
|
"phone_400": 400px,
|
|
"phone_500": 500px,
|
|
"tablet_600": 600px,
|
|
"tablet_640": 640px,
|
|
"tablet_700": 700px,
|
|
"tablet_800": 800px,
|
|
"tablet_900": 900px,
|
|
"desktop_1000": 1000px,
|
|
"desktop_1100": 1100px,
|
|
"desktop_1200": 1200px,
|
|
"desktop_1300": 1300px,
|
|
"desktop_1500": 1500px,
|
|
"desktop_1800": 1800px
|
|
);
|
|
|
|
|
|
// jusqu'à cette taille
|
|
@mixin media_max($key) {
|
|
@media (max-width: map.get($breakpoints,$key)) {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
// à partir de cette taille
|
|
@mixin media_min($key) {
|
|
@media (min-width: map.get($breakpoints,$key)) {
|
|
@content;
|
|
}
|
|
}
|
|
// Entre minumum et maximum
|
|
// media_minmax("phone","desktop") = tablette
|
|
@mixin media_minmax($key_min, $key_max) {
|
|
@media (min-width: calc(map.get($breakpoints,$key_min))) and (max-width: calc(map.get($breakpoints,$key_max) - 1px)) {
|
|
@content;
|
|
}
|
|
} |