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;
}