muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-25 12:56:41 +07:00
Code Packages Activity Actions

made new hero component

Browse source
This commit is contained in:
Fedor Katurov 2021-10-07 12:33:17 +07:00
parent 3b7997b442
commit 330e233869
10 changed files with 321 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

168
src/components/flow/FlowSwiperHero/styles.module.scss Normal file
View file

@ -0,0 +1,168 @@
@import '~/styles/variables';
.wrap {
width: 100%;
height: 100%;
position: relative;
cursor: pointer;
}
.swiper {
@include outer_shadow;
width: 100%;
height: 100%;
border-radius: $radius;
:global(.swiper-slide) {
object-fit: cover;
img {
min-width: 150%;
}
}
}
.slide {
width: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: $gap;
z-index: 5;
pointer-events: none;
touch-action: none;
box-sizing: border-box;
border-radius: $radius;
&::after {
content: ' ';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('../../../sprites/stripes.svg') rgba(0, 0, 0, 0.3);
z-index: -1;
pointer-events: none;
box-shadow: inset transparentize($color: white, $amount: 0.85) 0 1px;
touch-action: none;
border-radius: $radius;
}
&::before {
content: ' ';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
182deg,
transparentize($cell_shade, 1) 50%,
transparentize($cell_shade, 0) 95%
);
z-index: 4;
pointer-events: none;
touch-action: none;
border-radius: $radius;
}
}
img.preview {
transform: translate(-15%, 0);
transition: transform 7s linear, opacity 1s linear;
opacity: 0;
:global(.swiper-slide-active) &,
:global(.swiper-slide-duplicate-active) &
{
transform: translate(-15%, -20%);
opacity: 1;
}
}
.info {
display: flex;
position: absolute;
bottom: 0;
right: 0;
width: 100%;
padding: $gap;
box-sizing: border-box;
z-index: 5;
flex-direction: row;
align-items: flex-end;
pointer-events: none;
touch-action: none;
}
.title {
@include clamp(2, 1.2 * 40px * 2);
flex: 1;
display: flex;
margin-right: $gap;
overflow: hidden;
font: $font_hero_title;
text-transform: uppercase;
text-overflow: ellipsis;
line-height: 1.2em;
word-break: break-word;
@include tablet {
@include clamp(3, 1.2 * 32px);
white-space: initial;
word-wrap: break-word;
font: $font_32_bold;
max-height: 3.6em;
}
@include phone {
white-space: initial;
word-wrap: break-word;
font: $font_24_bold;
max-height: 3.6em;
}
}
.buttons {
display: flex;
align-items: center;
justify-content: center;
height: 58px;
flex-direction: row;
width: 128px;
border-radius: $radius;
pointer-events: all;
touch-action: auto;
margin: 0 -15px -10px 0;
.button {
cursor: pointer;
flex: 0 0 58px;
display: flex;
align-items: center;
justify-content: center;
opacity: 0.5;
transition: opacity 0.5s;
&:hover {
opacity: 1;
}
svg {
width: 40px;
height: 40px;
}
}
}
.loader {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: transparentize(white, 0.95);
}