Modify tile delete button for touch

Prototype of larger delete button for sprites, costumes and sounds to better support touch devices.

I split it out from `CloseButton` as it made the changes simpler, and we may end up going in a different direction (open context menu).
This commit is contained in:
Chris Garrity committed 2019-07-22 12:02:14 -04:00
1 parent f2ac39fe0e
commit d1e6960cd4
5 files changed
+105 -6

No files matched your search

@@ -0,0 +1,48 @@
@import "../../css/colors.css";
@import "../../css/units.css";
/* the delete button has .25rem invisible 'slop' around the visible button
to make it easier to tap on a touch device */
.delete-button {
display: flex;
align-items: center;
justify-content: center;
overflow: hidden; /* Mask the icon animation */
width: 2rem;
height: 2rem;
user-select: none;
cursor: pointer;
transition: all 0.15s ease-out;
}
/* .delete-button.large:hover {
transform: scale(1.1, 1.1);
box-shadow: 0 0 0 4px $ui-black-transparent;
} */
.delete-button-visible {
display: flex;
align-items: center;
justify-content: center;
overflow: hidden; /* Mask the icon animation */
width: 1.75rem;
height: 1.75rem;
box-shadow: 0px 0px 0px 2px $motion-transparent;
background-color: $motion-primary;
color: $ui-white;
border-radius: 50%;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
user-select: none;
cursor: pointer;
transition: all 0.15s ease-out;
}
.delete-icon {
position: relative;
margin: 0.25rem;
user-select: none;
transform-origin: 50%;
}