From 9297d0ac45e40f12f4cf09361fc4ce38b793a894 Mon Sep 17 00:00:00 2001
From: OVSharova <olga.sharova@onlyoffice.com>
Date: Mon, 13 Sep 2021 01:39:50 +0300
Subject: [PATCH] add icon btn-zoomup

---
 apps/documenteditor/main/app/view/Toolbar.js  |  2 +-
 .../main/resources/less/toolbar.less          | 49 ++++---------------
 2 files changed, 11 insertions(+), 40 deletions(-)

diff --git a/apps/documenteditor/main/app/view/Toolbar.js b/apps/documenteditor/main/app/view/Toolbar.js
index 11123be7e..fd26aaf16 100644
--- a/apps/documenteditor/main/app/view/Toolbar.js
+++ b/apps/documenteditor/main/app/view/Toolbar.js
@@ -1132,7 +1132,7 @@ define([
                     this.listStylesAdditionalMenuItem = new Common.UI.MenuItem({
                         template: _.template(
                             '<div id="id-save-style-container" class = "save-style-container">' +
-                            '<span id="id-save-style-plus" class="plus tool"  ></span>' +
+                            '<span id="id-save-style-plus" class="tool plus icon toolbar__icon btn-zoomup">&nbsp;</span>' +
                             '<label id="id-save-style-link" class="save-style-link" >' + me.textStyleMenuNew + '</label>' +
                             '</div>')
                     });
diff --git a/apps/documenteditor/main/resources/less/toolbar.less b/apps/documenteditor/main/resources/less/toolbar.less
index 8fc84be29..517700507 100644
--- a/apps/documenteditor/main/resources/less/toolbar.less
+++ b/apps/documenteditor/main/resources/less/toolbar.less
@@ -168,48 +168,19 @@
     margin-left: 22px;
 }
 
-.tool {  
-    float: left;
-    width: 16px;
-    height: 16px;
-    cursor: pointer;
-    overflow: hidden;
+.tool {
     padding: 0px;
     margin-left: 2px;
-    margin-right: -16px;
+    margin-right: -20px;
+    cursor: pointer;
     &.plus {
-        @size-plus:12px;
-        position: relative;
-        opacity: 1;
-        font-weight: bold;
-        //width: calc(@size-plus/@pixel-ratio-factor);
-        //height: @size-plus;
-        &:hover {
-            opacity: 1;
-        }
-
-        &.disabled {
-            cursor: default;
-            opacity: 0.8;
-        }
-
-        &:before, &:after {
-            content: '';
-            position: absolute;
-            box-sizing: border-box;
-            left: 8px;
-            left: calc(8px/@pixel-ratio-factor);
-            top: 4px;
-            top: calc(4px/@pixel-ratio-factor);
-
-             border-left: 2px solid @text-normal-ie;
-             border-left: @scaled-two-px-value solid @text-normal ;
-
-             height: @size-plus;
-        }       
-
-        &:after {
-            transform: rotate(90deg);
+        display: inline-flex;
+        flex-direction: column;
+        align-items: center;
+        &.icon:not(svg) {
+            min-width: 20px;
+            height: 20px;
+            line-height: 18px;
         }
     }
 }