diff --git a/src/components/flow/Cell/index.tsx b/src/components/flow/Cell/index.tsx index a3954be3..6f4c2adf 100644 --- a/src/components/flow/Cell/index.tsx +++ b/src/components/flow/Cell/index.tsx @@ -65,6 +65,10 @@ const Cell: FC = ({ > {can_edit && (
+
+ +
+
diff --git a/src/components/flow/Cell/styles.scss b/src/components/flow/Cell/styles.scss index 0071fcbc..c0f29a43 100644 --- a/src/components/flow/Cell/styles.scss +++ b/src/components/flow/Cell/styles.scss @@ -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; diff --git a/src/sprites/Sprites.tsx b/src/sprites/Sprites.tsx index 7ea32118..5384d0d6 100644 --- a/src/sprites/Sprites.tsx +++ b/src/sprites/Sprites.tsx @@ -144,6 +144,11 @@ const Sprites: FC<{}> = () => ( + + + + + );