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

flow fixes for mobile

Browse source
This commit is contained in:
Fedor Katurov 2019-10-23 17:08:52 +07:00
parent 4b05aef7e7
commit 4facd1f148
1 changed files with 51 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

96
src/components/flow/Cell/styles.scss
View file

@ -43,6 +43,10 @@
z-index: 1; z-index: 1;
border-radius: 0 0 $radius $radius; border-radius: 0 0 $radius $radius;
} }
@media (max-width: $cell * 2 + $grid_line) {
display: none;
}
} }
.title, .title,
@ -130,57 +134,59 @@
pointer-events: none; pointer-events: none;
touch-action: none; touch-action: none;
.vertical > &, @media (min-width: $cell * 2 + $grid_line) {
.horizontal > &, .vertical > &,
.quadro > & { .horizontal > &,
box-sizing: border-box; .quadro > & {
background: none; box-sizing: border-box;
box-shadow: none; background: none;
padding: $gap / 2; box-shadow: none;
padding: $gap / 2;
&::after { &::after {
display: none; display: none;
}
.face_content {
padding: $gap;
background: rgba(25, 25, 25, 0.8);
border-radius: $radius;
overflow: hidden;
}
.text::after {
display: none;
}
} }
.face_content { .vertical > & {
padding: $gap; top: auto;
background: rgba(25, 25, 25, 0.8); bottom: 0;
border-radius: $radius; max-height: 50%;
overflow: hidden; max-width: 100%;
height: auto;
width: auto;
} }
.text::after { .horizontal > & {
display: none; top: auto;
left: 0;
max-height: 100%;
max-width: 50%;
height: auto;
width: auto;
bottom: 0;
} }
}
.vertical > & { .quadro > & {
top: auto; top: auto;
bottom: 0; max-height: 70%;
max-height: 50%; max-width: 50%;
max-width: 100%; height: auto;
height: auto; width: auto;
width: auto; bottom: 0;
} left: 0;
}
.horizontal > & {
top: auto;
left: 0;
max-height: 100%;
max-width: 50%;
height: auto;
width: auto;
bottom: 0;
}
.quadro > & {
top: auto;
max-height: 70%;
max-width: 50%;
height: auto;
width: auto;
bottom: 0;
left: 0;
} }
} }
@ -209,7 +215,7 @@
} }
} }
@media (max-width: $cell * 2) { @media (max-width: $cell * 2 + $grid_line) {
right: 0; right: 0;
top: 0; top: 0;
} }