2019-02-24 07:19:06 +03:00
|
|
|
/*
|
|
|
|
|
|
|
|
The media queries can be referenced like so:
|
|
|
|
|
|
|
|
@media (--breakpoint-not-small) {
|
|
|
|
.medium-and-larger-specific-style {
|
|
|
|
background-color: red;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@media (--breakpoint-medium) {
|
|
|
|
.medium-screen-specific-style {
|
|
|
|
background-color: red;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@media (--breakpoint-large) {
|
|
|
|
.large-and-larger-screen-specific-style {
|
|
|
|
background-color: red;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
/* Media Queries */
|
2019-10-21 14:09:56 +03:00
|
|
|
@custom-media --breakpoint-not-small screen and (min-width: 700px);
|
|
|
|
@custom-media --breakpoint-medium screen and (min-width: 700px) and (max-width: 1080px);
|
|
|
|
@custom-media --breakpoint-large screen and (min-width: 1080px);
|