granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add new mixin for media query breakpoints

Browse source
This commit is contained in:
Justin Edmund 2022-12-27 14:54:04 -08:00
parent 0e2e86a81e
commit ced4c35dbd
2 changed files with 29 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
styles/mixins.scss Normal file
View file

@ -0,0 +1,28 @@
// use with @include
@mixin breakpoint($breakpoint) {
$phone-width: 430px;
$phone-height: 850px;
$tablet-width: 1024px;
$tablet-height: 1024px;
@if $breakpoint == tablet {
// prettier-ignore
@media only screen
and (max-width: $tablet-width)
and (max-height: $tablet-height)
and (-webkit-min-device-pixel-ratio: 2) {
@content;
}
}
@if $breakpoint == phone {
// prettier-ignore
@media only screen
and (max-width: $phone-width)
and (max-height: $phone-height)
and (-webkit-min-device-pixel-ratio: 2) {
@content;
}
}
}

1
styles/variables.scss
View file

@ -1,4 +1,5 @@
// @import 'include-media/dist/_include-media';
@import 'mixins.scss';
// Breakpoints
$breakpoints: (