muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-24 20:36:40 +07:00
Code Packages Activity Actions

hero slider

Browse source
This commit is contained in:
Fedor Katurov 2019-10-24 15:44:40 +07:00
parent a9da7e8cef
commit 5cd5941be0
12 changed files with 266 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

106
src/components/flow/FlowHero/styles.scss Normal file
View file

@ -0,0 +1,106 @@
.wrap {
width: 100%;
height: 100%;
position: relative;
background: $content_bg;
border-radius: $cell_radius;
}
.hero {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
transition: opacity 1s;
background: 50% 50% no-repeat;
background-size: cover;
border-radius: $cell_radius;
z-index: 2;
opacity: 0;
cursor: pointer;
&::after {
content: ' ';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('~/sprites/dots.svg') rgba(0, 0, 0, 0.3);
}
img {
width: 0;
height: 0;
opacity: 0;
pointer-events: none;
touch-action: none;
}
&.is_visible {
display: block;
}
&.is_active {
opacity: 1;
z-index: 3;
}
}
.info {
display: flex;
position: absolute;
bottom: 0;
right: 0;
width: 100%;
padding: $gap;
box-sizing: border-box;
z-index: 5;
flex-direction: row;
}
.title_wrap {
flex: 1;
white-space: nowrap;
display: flex;
margin-right: $gap;
overflow: hidden;
}
.title {
flex: 0;
height: 48px;
background: rgba(0, 0, 0, 0.7);
display: flex;
align-items: center;
justify-content: center;
padding: 0 $gap;
border-radius: $radius;
font: $font_hero_title;
}
.buttons {
display: flex;
align-items: center;
justify-content: center;
height: 48px;
background: rgba(0, 0, 0, 0.7);
flex-direction: row;
width: 96px;
border-radius: $radius;
.button {
cursor: pointer;
flex: 0 0 48px;
display: flex;
align-items: center;
justify-content: center;
svg {
width: 40px;
height: 40px;
}
}
}