@allma/admin-shell
Version:
The web-based administration panel for the Allma platform.
61 lines (60 loc) • 1.27 kB
CSS
@import "@aws-amplify/ui-react/styles.css";
/* src/global.css */
.handle-wrapper {
position: absolute;
opacity: 0;
transition: opacity 150ms ease-in-out;
width: 24px;
height: 24px;
transform: translate(-50%, -50%);
z-index: 10;
pointer-events: none;
}
.handle-wrapper.visible {
opacity: 1;
pointer-events: all;
}
.handle-circle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(1);
width: 9px;
height: 9px;
border-radius: 50%;
border: 2px solid #555;
background: #2c2e33;
transition: transform 150ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.handle-wrapper:hover .handle-circle {
transform: translate(-50%, -50%) scale(2);
}
.handle-circle.connected {
border-color: #228be6;
background: #33465f;
}
.handle-grab-area {
width: 24px;
height: 24px;
background: transparent;
border-radius: 50%;
cursor: crosshair;
}
@keyframes shake {
10%, 90% {
transform: translate3d(-1px, 0, 0);
}
20%, 80% {
transform: translate3d(2px, 0, 0);
}
30%, 50%, 70% {
transform: translate3d(-4px, 0, 0);
}
40%, 60% {
transform: translate3d(4px, 0, 0);
}
}
.shake-animation {
animation: shake 0.5s cubic-bezier(.36, .07, .19, .97) both;
}
/*# sourceMappingURL=index.css.map */