From 0f912c6cd94dc57d3a77b02366f71d881acc08a5 Mon Sep 17 00:00:00 2001
From: OVSharova <olga.sharova@onlyoffice.com>
Date: Tue, 13 Jul 2021 12:47:27 +0300
Subject: [PATCH] Second variant

---
 apps/documenteditor/main/app/view/Toolbar.js  |  2 +-
 .../main/resources/less/toolbar.less          | 46 +++++++++++++++++--
 2 files changed, 44 insertions(+), 4 deletions(-)

diff --git a/apps/documenteditor/main/app/view/Toolbar.js b/apps/documenteditor/main/app/view/Toolbar.js
index 14990b384..11123be7e 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"  ></span>' +
+                            '<span id="id-save-style-plus" class="plus tool"  ></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 75577c3f8..f9381f56d 100644
--- a/apps/documenteditor/main/resources/less/toolbar.less
+++ b/apps/documenteditor/main/resources/less/toolbar.less
@@ -168,8 +168,8 @@
     margin-left: 22px;
 }
 
-.plus {
-    width: 16px;
+.tool {
+   /* width: 16px;
     height: 16px;
     cursor: pointer;
     position: absolute;
@@ -182,7 +182,47 @@
         margin-top: -7px;
         margin-left: 1px;
     }
-}
+}*/
+    float: left;
+    width: 16px;
+    height: 16px;
+    cursor: pointer;
+    overflow: hidden;
+    padding: 0px;
+    margin-left: 2px;
+    margin-right: -16px;
+    &.plus {
+        position: relative;
+        opacity: 1;
+        font-weight: bold;
+        &:hover {
+            opacity: 1;
+        }
+
+        &.disabled {
+            cursor: default;
+            opacity: 0.8;
+        }
+
+        &:before, &:after {
+            content: ' ';
+            position: absolute;
+            left: 7px;
+            left: calc(7px/@pixel-ratio-factor);
+            top: 3px;
+            top: calc(3px/@pixel-ratio-factor);
+            height: 10px;
+            width: 2px;
+            width: calc(2px/@pixel-ratio-factor);
+            background-color: @icon-normal-ie;
+            background-color: @icon-normal;
+        }       
+
+        &:after {
+            transform: rotate(90deg);
+        }
+    }
+}       
 
 .dropdown-menu > .disabled {
      .save-style-link {