move c-block styles to own file
This commit is contained in:
parent
6832b80308
commit
c9ba7ab972
|
@ -0,0 +1,45 @@
|
||||||
|
.c-block {
|
||||||
|
$duration: 1s;
|
||||||
|
$delay: 0.3s;
|
||||||
|
|
||||||
|
> .c-block__bg {
|
||||||
|
will-change: transform;
|
||||||
|
transform-origin: 100% 100%;
|
||||||
|
transition: transform $duration;
|
||||||
|
transform: scale3d(1, 1, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.state-1 > .c-block__bg {
|
||||||
|
transform-origin: 100% 100%;
|
||||||
|
transition: transform $duration;
|
||||||
|
transform: scale3d(0.5, 1, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.state-2 > .c-block__bg {
|
||||||
|
transform-origin: 100% 100%;
|
||||||
|
transform-origin: 100 100;
|
||||||
|
transition: transform $duration;
|
||||||
|
transform: scale3d(0.5, 0.5, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
> .c-block__img {
|
||||||
|
will-change: opacity, transform;
|
||||||
|
transform-origin: 0 0;
|
||||||
|
transition: opacity $duration $delay ease-in, transform $duration;
|
||||||
|
opacity: 1;
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.state-1 > .c-block__img {
|
||||||
|
transition: opacity $duration $delay ease-out, transform $duration;
|
||||||
|
opacity: 0;
|
||||||
|
transform: translate(50%, 0) scale(1.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.state-2 > .c-block__img {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translate(50%, 50%) scale(2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// vim:set filetype=scss:
|
|
@ -2,58 +2,11 @@
|
||||||
@tailwind components;
|
@tailwind components;
|
||||||
@tailwind utilities;
|
@tailwind utilities;
|
||||||
|
|
||||||
/*
|
@import "imports/blocks.scss";
|
||||||
You can use import statements to include partials:
|
|
||||||
*/
|
|
||||||
// @import "imports/reset.css";
|
|
||||||
|
|
||||||
html,
|
html,
|
||||||
body {
|
body {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c-block {
|
|
||||||
$duration: 1s;
|
|
||||||
$delay: 0.3s;
|
|
||||||
|
|
||||||
> .c-block__bg {
|
|
||||||
will-change: transform;
|
|
||||||
transform-origin: 100% 100%;
|
|
||||||
transition: transform $duration;
|
|
||||||
transform: scale3d(1, 1, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.state-1 > .c-block__bg {
|
|
||||||
transform-origin: 100% 100%;
|
|
||||||
transition: transform $duration;
|
|
||||||
transform: scale3d(0.5, 1, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.state-2 > .c-block__bg {
|
|
||||||
transform-origin: 100% 100%;
|
|
||||||
transform-origin: 100 100;
|
|
||||||
transition: transform $duration;
|
|
||||||
transform: scale3d(0.5, 0.5, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
> .c-block__img {
|
|
||||||
will-change: opacity, transform;
|
|
||||||
transform-origin: 0 0;
|
|
||||||
transition: opacity $duration $delay ease-in, transform $duration;
|
|
||||||
opacity: 1;
|
|
||||||
transform: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.state-1 > .c-block__img {
|
|
||||||
transition: opacity $duration $delay ease-out, transform $duration;
|
|
||||||
opacity: 0;
|
|
||||||
transform: translate(50%, 0) scale(1.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.state-2 > .c-block__img {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translate(50%, 50%) scale(2);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// vim:set filetype=scss:
|
// vim:set filetype=scss:
|
||||||
|
|
Reference in New Issue