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

dots menu on flow nodes

Browse source
This commit is contained in:
Fedor Katurov 2019-10-23 15:03:17 +07:00
parent ed3f6369fb
commit 9fc1d3b918
3 changed files with 45 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -6,7 +6,6 @@
background: $cell_bg;
border-radius: $cell_radius;
position: relative;
overflow: hidden;
cursor: pointer;
color: white;
@ -22,14 +21,6 @@
}
}
&:hover {
.menu {
opacity: 1;
pointer-events: all;
touch-action: auto;
}
}
@include outer_shadow();
}
@ -132,6 +123,7 @@
.face {
@include outer_shadow();
overflow: hidden;
box-sizing: border-box;
position: absolute;
top: 0;
@ -148,27 +140,56 @@
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 80px;
// height: 100%;
// width: 80px;
z-index: 4;
border-radius: $radius;
opacity: 0;
// opacity: 0;
pointer-events: none;
touch-action: none;
transition: opacity 0.5s;
box-sizing: border-box;
// display: none;
padding: $gap;
// padding: $gap;
display: flex;
align-items: stretch;
justify-content: center;
&:hover {
opacity: 1;
pointer-events: all;
touch-action: auto;
.menu_content {
opacity: 1;
}
}
}
.menu_button {
pointer-events: all;
touch-action: auto;
position: absolute;
z-index: 4;
width: 32px + $gap * 2;
height: 32px + $gap * 2;
display: flex;
align-items: center;
justify-content: center;
opacity: 0.2;
svg {
fill: white;
width: 30px;
height: 30px;
}
}
.menu_content {
flex: 1;
// height: 100%;
opacity: 0;
background: $red_gradient;
padding: 60px $gap $gap $gap;
padding: (32px + $gap * 2) $gap $gap $gap;
border-radius: $radius;
display: flex;
align-items: center;