diff --git a/src/components/UI/svg/Trash.vue b/src/components/UI/svg/Trash.vue index 66579f0..3813bf5 100644 --- a/src/components/UI/svg/Trash.vue +++ b/src/components/UI/svg/Trash.vue @@ -1,5 +1,3 @@ - \ No newline at end of file diff --git a/src/views/PlannerView.vue b/src/views/PlannerView.vue index b543f33..f18135e 100644 --- a/src/views/PlannerView.vue +++ b/src/views/PlannerView.vue @@ -351,25 +351,33 @@ function onContextMenu(e, item) {
Сохранить Удалить Отменить Превью @@ -458,6 +466,7 @@ function onContextMenu(e, item) { position: fixed; bottom: 10px; display: flex; + align-items: flex-end; gap: 10px; padding: 10px 20px; border-radius: 10px; @@ -470,18 +479,33 @@ function onContextMenu(e, item) { border: 2px solid rgba(255, 255, 255, 0.18); } -.actions svg { - width: var(--sizeActions); - height: var(--sizeActions); - transition: color 0.4s; +.toolbar-item { + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; } -.actions svg:hover { +.toolbar-item svg { + width: var(--sizeActions); + height: var(--sizeActions); + transition: + transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), + color 0.25s ease; + transform-origin: center bottom; + will-change: transform; +} + +.toolbar-item:hover svg { + transform: scale(1.22) translateY(-6px); color: rgba(20, 104, 140, 0.89); } -.actions svg:active { - transition: color 0s; +.toolbar-item:active svg { + transition: + transform 0.12s ease, + color 0s; + transform: scale(1.08) translateY(-2px); color: #23aae3e2; }