mirror of
https://github.com/Sped0n/bridget.git
synced 2026-04-22 05:59:31 -07:00
separate desktop component to imagesDesktop
This commit is contained in:
52
assets/css/_partial/_imagesDesktop.scss
Normal file
52
assets/css/_partial/_imagesDesktop.scss
Normal file
@@ -0,0 +1,52 @@
|
||||
.imagesDesktop {
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
object-fit: contain;
|
||||
max-height: 50vmin;
|
||||
max-width: 100vw;
|
||||
|
||||
&[data-status='null'] {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&[data-status='top'] {
|
||||
opacity: 1;
|
||||
max-height: calc(100vh - var(--footer-height));;
|
||||
transition-property: transform, max-height;
|
||||
transition-timing-function: ease-in-out;
|
||||
transition-duration: 0.5s, 0.5s;
|
||||
}
|
||||
|
||||
&[data-status='trail'] {
|
||||
opacity: 0;
|
||||
margin-top: 40px;
|
||||
transition-property: opacity, margin-top;
|
||||
transition-timing-function: ease-out;
|
||||
transition-duration: 0.2s;
|
||||
}
|
||||
|
||||
&[data-status='resumeTop'] {
|
||||
opacity: 1;
|
||||
max-height: 50vmin;
|
||||
transition-property: max-height, transform;
|
||||
transition-timing-function: ease-in-out;
|
||||
transition-duration: 0.7s, 0.5s;
|
||||
}
|
||||
|
||||
&[data-status='resume'] {
|
||||
opacity: 1;
|
||||
margin-top: 0;
|
||||
transition-property: opacity, margin-top;
|
||||
transition-timing-function: ease-out;
|
||||
transition-duration: 0.2s;
|
||||
}
|
||||
|
||||
&[data-status='overlay'] {
|
||||
opacity: 1;
|
||||
max-height: calc(100vh - var(--footer-height));
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user