From d5bfc3244d4c19d0e4d9e69a78591d3b1a667d36 Mon Sep 17 00:00:00 2001
From: Maxim Kadushkin <maxim.kadushkin@onlyoffice.com>
Date: Tue, 11 Jul 2017 11:26:42 +0300
Subject: [PATCH] [Common] debug button's layout

---
 apps/common/main/lib/component/Button.js     | 14 +++++++++-----
 apps/common/main/resources/less/buttons.less | 17 +++++++----------
 apps/common/main/resources/less/toolbar.less |  5 +----
 3 files changed, 17 insertions(+), 19 deletions(-)

diff --git a/apps/common/main/lib/component/Button.js b/apps/common/main/lib/component/Button.js
index 42856bd49..b33afb11a 100644
--- a/apps/common/main/lib/component/Button.js
+++ b/apps/common/main/lib/component/Button.js
@@ -134,7 +134,9 @@ define([
                 '<div class="inner-box-icon">' +
                     templateBtnIcon +
                 '</div>' +
-                '<span class="caption"><%= caption %></span>' +
+                '<div class="inner-box-caption">' +
+                    '<span class="caption"><%= caption %></span>' +
+                '</div>' +
             '</button>';
 
     var templateHugeMenuCaption =
@@ -145,7 +147,7 @@ define([
                 '</div>' +
                 '<div class="inner-box-caption">' +
                     '<span class="caption"><%= caption %></span>' +
-                    '<span class="caret img-commonctrl"></span>' +
+                    '<i class="caret img-commonctrl"></i>' +
                 '</div>' +
             '</button>' +
         '</div>';
@@ -157,7 +159,7 @@ define([
             '</button>' +
             '<button type="button" class="btn <%= cls %> inner-box-caption dropdown-toggle" data-toggle="dropdown">' +
                 '<span class="caption"><%= caption %></span>' +
-                '<span class="caret img-commonctrl"></span>' +
+                '<i class="caret img-commonctrl"></i>' +
             '</button>' +
         '</div>';
 
@@ -198,7 +200,9 @@ define([
                     '<button type="button" class="btn dropdown-toggle <%= cls %>" data-toggle="dropdown">',
                         '<% applyicon() %>',
                         '<span class="caption"><%= caption %></span>',
-                        '<span class="caret img-commonctrl"></span>',
+                        '<span class="inner-box-caret">' +
+                            '<i class="caret img-commonctrl"></i>' +
+                        '</span>',
                     '</button>',
                 '</div>',
             '<% } else { %>',
@@ -208,7 +212,7 @@ define([
                         '<span class="caption"><%= caption %></span>',
                     '</button>',
                     '<button type="button" class="btn <%= cls %> dropdown-toggle" data-toggle="dropdown">',
-                        '<span class="caret img-commonctrl"></span>',
+                        '<i class="caret img-commonctrl"></i>',
                         '<span class="sr-only"></span>',
                     '</button>',
                 '</div>',
diff --git a/apps/common/main/resources/less/buttons.less b/apps/common/main/resources/less/buttons.less
index 4e2f3a549..0a2535678 100644
--- a/apps/common/main/resources/less/buttons.less
+++ b/apps/common/main/resources/less/buttons.less
@@ -1,3 +1,5 @@
+@x-huge-btn-height: 46px;
+
 .btn {
     border-radius: 1px;
     color: @gray-deep;
@@ -25,7 +27,7 @@
     }
 
     &.x-huge {
-        .btnsize(45px);
+        .btnsize(@x-huge-btn-height);
     }
 
     &[disabled] {
@@ -98,12 +100,11 @@
         }
     }
 
-    &.x-huge,
-      .x-huge {
+    &.x-huge {
         @icon-size: 26px;
 
         min-width: 45px;
-        height: 45px;
+        height: @x-huge-btn-height;
 
         img {
             height: 27px;
@@ -127,8 +128,6 @@
         align-items: center;
         justify-content: center;
         line-height: 20px;
-        max-height: 26px;
-        height: 26px;
     }
 
     .inner-box-caption {
@@ -290,10 +289,8 @@
     }
 
     > .dropdown-toggle:first-child {
-        padding: 0 2px 0 0;
-
-        .caption {
-            padding-right: 4px;
+        .inner-box-caret {
+            padding: 0 2px;
         }
     }
 
diff --git a/apps/common/main/resources/less/toolbar.less b/apps/common/main/resources/less/toolbar.less
index f8dc9b805..6094c22c4 100644
--- a/apps/common/main/resources/less/toolbar.less
+++ b/apps/common/main/resources/less/toolbar.less
@@ -171,6 +171,7 @@
         vertical-align: middle;
         white-space: nowrap;
         padding-left: 12px;
+        font-size: 0;
 
         &:last-child {
             padding-right: 12px;
@@ -207,10 +208,6 @@
         width: 20px;
         height: auto;
 
-        &:not(:first-child) {
-            margin-left: 1px;
-        }
-
         &.split {
             width: 31px;
         }