rayelliott
/
victor-hugo
Archived
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

move c-block styles to own file

This commit is contained in:
Ray Elliott 2020-03-28 09:51:22 +00:00
parent 6832b80308
commit c9ba7ab972
2 changed files with 46 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
src/css/imports/blocks.scss Normal file
View File

@ -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:

49
src/css/main.css
View File

@ -2,58 +2,11 @@
@tailwind components;
@tailwind utilities;
/*
You can use import statements to include partials:
*/
// @import "imports/reset.css";
@import "imports/blocks.scss";
html,
body {
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: