eric/bridget
1
0
Fork 0
mirror of https://github.com/Sped0n/bridget.git synced 2026-04-22 14:09:30 -07:00
Code Issues Packages Projects Releases Wiki Activity

reformat image.scss to accommodate the new features of scss

Browse Source
This commit is contained in:
Spedon
2023-03-14 01:40:23 +08:00
parent c8e6ab505b
commit 5076455acd
1 changed files with 89 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
assets/css/_partial/_image.scss
View File

@@ -14,9 +14,8 @@
object-fit: contain; object-fit: contain;
width: auto; width: auto;
} }
}
.image_container[data-status='t0'] { &[data-status='t0'] {
transition: all 0.5s ease-in-out 1.5s; transition: all 0.5s ease-in-out 1.5s;
max-height: calc(100vh - var(--footer-height)); max-height: calc(100vh - var(--footer-height));
width: auto; width: auto;
@@ -31,26 +30,29 @@
max-width: 100vw; max-width: 100vw;
object-fit: contain; object-fit: contain;
} }
} }
.image_container[data-status='t1'] { &[data-status='t1'] {
transition: opacity 0.5s ease-out 1s; transition: opacity 0.5s ease-out 1s;
opacity: 0; opacity: 0;
} }
.image_container[data-status='t2'] {
&[data-status='t2'] {
transition: opacity 0.5s ease-out 0.75s; transition: opacity 0.5s ease-out 0.75s;
opacity: 0; opacity: 0;
} }
.image_container[data-status='t3'] {
&[data-status='t3'] {
transition: opacity 0.5s ease-out 0.5s; transition: opacity 0.5s ease-out 0.5s;
opacity: 0; opacity: 0;
} }
.image_container[data-status='t4'] {
&[data-status='t4'] {
transition: opacity 0.5s ease-out 0.25s; transition: opacity 0.5s ease-out 0.25s;
opacity: 0; opacity: 0;
} }
.image_container[data-status='r0'] { &[data-status='r0'] {
transition: all 0.5s ease-in-out 1s; transition: all 0.5s ease-in-out 1s;
max-height: 55vmin; max-height: 55vmin;
position: absolute; position: absolute;
@@ -68,42 +70,45 @@
object-fit: contain; object-fit: contain;
width: auto; width: auto;
} }
} }
.image_container[data-status='r1'] { &[data-status='r1'] {
transition: opacity 0.25s ease-out 1.5s; transition: opacity 0.25s ease-out 1.5s;
opacity: 1; opacity: 1;
} }
.image_container[data-status='r2'] {
&[data-status='r2'] {
transition: opacity 0.25s ease-out 1.75s; transition: opacity 0.25s ease-out 1.75s;
opacity: 1; opacity: 1;
} }
.image_container[data-status='r3'] {
&[data-status='r3'] {
transition: opacity 0.25s ease-out 2s; transition: opacity 0.25s ease-out 2s;
opacity: 1; opacity: 1;
} }
.image_container[data-status='r4'] {
&[data-status='r4'] {
transition: opacity 0.25s ease-out 2.25s; transition: opacity 0.25s ease-out 2.25s;
opacity: 1; opacity: 1;
} }
#layer5 {
#layer5 {
z-index: 5; z-index: 5;
} }
#layer4 { #layer4 {
z-index: 4; z-index: 4;
} }
#layer3 { #layer3 {
z-index: 3; z-index: 3;
} }
#layer2 { #layer2 {
z-index: 2; z-index: 2;
} }
#layer1 { #layer1 {
z-index: 1; z-index: 1;
}
} }