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

add block component

This commit is contained in:
Ray Elliott 2020-04-02 18:28:18 +00:00
parent 904bc46b63
commit 652b42c95f
2 changed files with 215 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
site/layouts/partials/components/block.html Normal file
View File

@ -0,0 +1,8 @@
<!-- TODO convert to proper template -->
<div class="js-block c-block c-block--4 c-block-br block-styles">
<div class="c-block__img" style="background-image: url(/img/img.jpg)"></div>
</div>
<div class="js-block c-block c-block--5 block-sans-image-styles">
</div>

207
src/css/imports/components/block.scss Normal file
View File

@ -0,0 +1,207 @@
$duration: 1s;
$delay: 0.3s;
$transition-img-in: opacity $duration $delay ease-in, transform $duration;
$transition-img-out: opacity $duration $delay ease-out, transform $duration;
@mixin img-in {
transition: $transition-img-in;
opacity: 0.5;
transform: none;
}
@mixin img-out {
transition: $transition-img-out;
}
.c-block::before,
.c-block__img {
@include abs-full;
}
.c-block {
z-index: 1;
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
&::before {
//will-change: transform;
z-index: 1;
content: "";
transition: transform $duration;
background-color: currentColor;
}
> .c-block__img {
z-index: 2;
//will-change: opacity, transform;
background-size: cover;
background-position: center;
opacity: 0;
}
}
.c-block--1 {
&::before {
transform-origin: 100% 100%;
@at-root .state-0 & {
transform: scale(1, 1);
}
@at-root .state-1 & {
transform: scale(0.5, 1);
}
@at-root .state-2 & {
transform: scale(0.5, 0.5);
}
}
> .c-block__img {
transform-origin: 0 0;
@at-root .state-0 & {
@include img-in;
}
@at-root .state-1 & {
@include img-out;
transform: translate(50%, 0) scale(1.3);
}
@at-root .state-2 & {
transform: translate(50%, 50%) scale(2);
}
}
}
.c-block--2 {
&::before {
transform-origin: 100% 0;
@at-root .state-0 & {
transform: scale(0.5, 0.5);
}
@at-root .state-1 & {
transform: scale(1, 1);
}
@at-root .state-2 & {
transform: scale(0.5, 1);
}
}
> .c-block__img {
transform-origin: 0 100%;
@at-root .state-0 & {
transform: translate(50%, 50%) scale(2);
}
@at-root .state-1 & {
@include img-in;
}
@at-root .state-2 & {
transform: translate(50%, 0) scale(1.3);
@include img-out;
}
}
}
.c-block--3 {
&::before {
transform-origin: 100% 0;
@at-root .state-0 & {
transform: scale(0.5, 1);
}
@at-root .state-1 & {
transform: scale(0.5, 0.5);
}
@at-root .state-2 & {
transform: scale(1, 1);
}
}
> .c-block__img {
transform-origin: 0 100%;
@at-root .state-0 & {
@include img-out;
transform: translate(50%, 0) scale(1.3);
}
@at-root .state-1 & {
transform: translate(50%, 50%) scale(2);
}
@at-root .state-2 & {
@include img-in;
}
}
}
.c-block--4 {
&::before {
transform-origin: 100% 0;
@at-root .state-0 & {
transform: scale(0.33, 1);
}
@at-root .state-1 & {
transform: scale(0.33, 0.25);
}
@at-root .state-2 & {
transform: scale(1, 1);
}
}
> .c-block__img {
transform-origin: 0 100%;
@at-root .state-0 & {
@include img-out;
transform: translate(66.6%, 0) scale(1.3);
}
@at-root .state-1 & {
transform: translate(66.6%, 66.6%) scale(2);
}
@at-root .state-2 & {
@include img-in;
}
}
}
.c-block--5 {
&::before {
transform-origin: 100% 100%;
@at-root .state-0 & {
transform: scale(1, 1);
}
@at-root .state-1 & {
transform: scale(0.5, 1);
}
@at-root .state-2 & {
transform: scale(0.5, 0.5);
}
}
}
//
//
//
// vim:set filetype=scss: