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

fixed style files module names

Browse source
This commit is contained in:
Fedor Katurov 2020-11-06 12:15:07 +07:00
parent 52acdb283e
commit 2daa38ad12
223 changed files with 113 additions and 114 deletions
Download patch file Download diff file Expand all files Collapse all files

148
src/components/flow/FlowHero/styles.scss
View file

@ -1,148 +0,0 @@
.wrap {
width: 100%;
height: 100%;
position: relative;
background: $content_bg;
border-radius: $cell_radius;
overflow: hidden;
&::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: 4;
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;
}
}
.hero {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 150%;
display: none;
transition: opacity 2s, transform linear 5s 2s;
background: 50% 50% no-repeat;
background-size: cover;
border-radius: $cell_radius;
z-index: 2;
opacity: 0;
cursor: pointer;
transform: translate(0, 0);
img {
width: 0;
height: 0;
opacity: 0;
pointer-events: none;
touch-action: none;
}
&.is_visible {
display: block;
}
&.is_active {
opacity: 1;
z-index: 3;
will-change: transform;
// animation: rise 5s forwards;
transform: translate(0, -10%);
transition: opacity 2s, transform linear 5s;
}
}
.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;
}
.title_wrap {
flex: 1;
white-space: nowrap;
display: flex;
margin-right: $gap;
overflow: hidden;
font: $font_hero_title;
text-transform: uppercase;
text-overflow: ellipsis;
line-height: 1.2em;
@include tablet {
white-space: initial;
word-wrap: break-word;
font: $font_32_bold;
max-height: 3.6em;
}
}
.buttons {
display: flex;
align-items: center;
justify-content: center;
height: 48px;
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;
}
}
}
.loaders {
position: absolute;
top: 0;
left: 0;
opacity: 0;
pointer-events: none;
touch-action: none;
img {
position: absolute;
left: 0;
top: 0;
}
}