Kraut.World/server
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Implement breakpoints utils on SCSS and JS

Browse source
This commit is contained in:
Alexis Faizeau 2022-01-05 09:56:10 +01:00
parent 56d8f62dd0
commit 9695064e82
2 changed files with 214 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

102
front/style/breakpoints.scss Normal file
View file

@ -0,0 +1,102 @@
@use "sass:map";
// If you modify this breakpoints don't forget to change it also in TS utils.
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1400px
);
@function get-upper-breakpoint($breakpoint) {
@return map-get((
xs: map.get($grid-breakpoints, "sm"),
sm: map.get($grid-breakpoints, "md"),
md: map.get($grid-breakpoints, "lg"),
lg: map.get($grid-breakpoints, "xl"),
xl: map.get($grid-breakpoints, "xxl"),
xxl: null,
), $breakpoint);
}
@function get-under-breakpoint($breakpoint) {
@return map-get((
xs: null,
sm: map.get($grid-breakpoints, "xs"),
md: map.get($grid-breakpoints, "sm"),
lg: map.get($grid-breakpoints, "md"),
xl: map.get($grid-breakpoints, "lg"),
xxl: map.get($grid-breakpoints, "xl"),
), $breakpoint);
}
@mixin media-breakpoint-up($upTo) {
@if $upTo == 'xxl' {
@media only screen {
@content;
}
} @else {
$value: get-upper-breakpoint($upTo);
@if $value != null {
$value: $value - 1px;
@media only screen and (max-width: $value) {
@content;
}
}
}
}
@mixin media-breakpoint-down($downFrom) {
@if $downFrom == 'xs' {
@media only screen {
@content;
}
} @else {
$value: map.get($grid-breakpoints, $downFrom);
@if $value != null {
@media only screen and (min-width: $value) {
@content;
}
}
}
}
@mixin media-breakpoint-only($only) {
$maxValue: get-upper-breakpoint($only);
$minValue: map.get($grid-breakpoints, $only);
@if $minValue == null {
} @else if $maxValue != null {
$maxValue: $maxValue - 1px;
@media only screen and (min-width: $minValue) and (max-width: $maxValue) {
@content;
}
} @else {
@media only screen and (min-width: $minValue) {
@content;
}
}
}
@mixin media-breakpoint-between($start, $end) {
$maxValue: get-upper-breakpoint($end);
$minValue: map.get($grid-breakpoints, $start);
@if $minValue == null {
} @else if $maxValue != null {
$maxValue: $maxValue - 1px;
@media only screen and (min-width: $minValue) and (max-width: $maxValue) {
@content;
}
} @else {
@media only screen and (min-width: $minValue) {
@content;
}
}
}