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:
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%;
|
||||
}
|
||||
Reference in new issue
Block a user