Added viewport only
This commit is contained in:
parent
6f97b30687
commit
e6fb1db649
1 changed files with 69 additions and 0 deletions
69
src/styles/classes.sass
Normal file
69
src/styles/classes.sass
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
.fullscreen
|
||||
position: fixed
|
||||
top: 0
|
||||
left: 0
|
||||
width: 100vw
|
||||
height: 100vh
|
||||
object-fit: cover
|
||||
z-index: -1
|
||||
opacity: 0.2
|
||||
|
||||
.on-desktop-only
|
||||
@media only screen and (max-width: view.$desktop)
|
||||
display: block
|
||||
|
||||
@media only screen and (max-width: view.$tablet)
|
||||
display: none
|
||||
|
||||
@media only screen and (max-width: view.$mobile)
|
||||
display: none
|
||||
|
||||
.on-tablet-only
|
||||
@media only screen and (max-width: view.$desktop)
|
||||
display: none
|
||||
|
||||
@media only screen and (max-width: view.$tablet)
|
||||
display: block
|
||||
|
||||
@media only screen and (max-width: view.$mobile)
|
||||
display: none
|
||||
|
||||
.on-mobile-only
|
||||
@media only screen and (max-width: view.$desktop)
|
||||
display: none
|
||||
|
||||
@media only screen and (max-width: view.$tablet)
|
||||
display: none
|
||||
|
||||
@media only screen and (max-width: view.$mobile)
|
||||
display: block
|
||||
|
||||
.on-desktop-tablet-only
|
||||
@media only screen and (max-width: view.$desktop)
|
||||
display: block
|
||||
|
||||
@media only screen and (max-width: view.$tablet)
|
||||
display: block
|
||||
|
||||
@media only screen and (max-width: view.$mobile)
|
||||
display: none
|
||||
|
||||
.on-desktop-mobile-only
|
||||
@media only screen and (max-width: view.$desktop)
|
||||
display: block
|
||||
|
||||
@media only screen and (max-width: view.$tablet)
|
||||
display: none
|
||||
|
||||
@media only screen and (max-width: view.$mobile)
|
||||
display: block
|
||||
|
||||
.on-tablet-mobile-only
|
||||
@media only screen and (max-width: view.$desktop)
|
||||
display: none
|
||||
|
||||
@media only screen and (max-width: view.$tablet)
|
||||
display: block
|
||||
|
||||
@media only screen and (max-width: view.$mobile)
|
||||
display: block
|
||||
Loading…
Add table
Add a link
Reference in a new issue