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

refactored flow cells, added colors for lab (#78)

Browse source 
* made better flow cells

* made cubical desaturation

* made colorfull lab nodes

* colorful lab nodes for all text ones

* all lab nodes are colorful

* disabled lazy loading on heroes

* fixed color calculation hook

* fixed lab color gradients calculation

* fixed cell text on flow
This commit is contained in:
muerwre 2021-10-08 11:33:53 +07:00 • committed by GitHub
parent 7d6f35b0af
commit 94c656fe0f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
29 changed files with 345 additions and 63 deletions
Download patch file Download diff file Expand all files Collapse all files

97
src/components/flow/FlowCell/styles.module.scss Normal file
View file

@ -0,0 +1,97 @@
@import "~/styles/variables";
.cell {
@include inner_shadow;
position: relative;
overflow: hidden;
border-radius: $radius;
display: flex;
width: 100%;
height: 100%;
background: $content_bg;
flex-direction: row;
color: inherit;
text-decoration: inherit;
font: inherit;
line-height: inherit;
&.vertical {
flex-direction: column-reverse;
}
}
.thumb {
@include outer_shadow;
border-radius: $radius;
overflow: hidden;
position: relative;
z-index: 0;
}
.shade {
@include outer_shadow;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
}
.text {
position: absolute;
bottom: 5px;
left: 5px;
z-index: 1;
overflow: hidden;
border-radius: $radius;
max-height: calc(100% - 10px);
max-width: calc(100% - 10px);
box-sizing: border-box;
font: $font_16_regular;
@include tablet {
font: $font_14_regular;
left: 5px;
bottom: 5px;
}
& :global(.grey) {
color: inherit;
opacity: 0.5;
}
.quadro &,
.horizontal & {
max-width: calc(50% - 15px);
@include blur(transparentize($content_bg, 0), 10px, 0.5)
}
.quadro &,
.vertical & {
max-height: calc(50% - 15px);
@include blur(transparentize($content_bg, 0), 10px, 0.5)
}
}
.title_wrapper {
bottom: 0;
left: 0;
width: 100%;
z-index: 10;
padding: $gap;
position: absolute;
}
.title {
font: $font_cell_title;
text-transform: uppercase;
word-break: break-word;
@include tablet {
font: $font_18_semibold;
}
}