From 89f55c9d938ff0c6cd0a6f4936af6c38a19afea4 Mon Sep 17 00:00:00 2001
From: Maxim Kadushkin <maxim.kadushkin@onlyoffice.com>
Date: Fri, 16 Nov 2018 17:37:25 +0300
Subject: [PATCH] [component] changed tabs scroll's arrow

---
 apps/common/main/lib/component/Mixtbar.js    |  4 +--
 apps/common/main/resources/less/toolbar.less | 34 +++++++++++++++++---
 2 files changed, 32 insertions(+), 6 deletions(-)

diff --git a/apps/common/main/lib/component/Mixtbar.js b/apps/common/main/lib/component/Mixtbar.js
index 667b36449..4604dff93 100644
--- a/apps/common/main/lib/component/Mixtbar.js
+++ b/apps/common/main/lib/component/Mixtbar.js
@@ -88,7 +88,7 @@ define([
 
                 var _template_tabs =
                     '<section class="tabs">' +
-                        '<a class="scroll left"><i class="icon">&lt;</i></a>' +
+                        '<a class="scroll left"></a>' +
                         '<ul>' +
                             '<% for(var i in items) { %>' +
                                 '<li class="ribtab' +
@@ -98,7 +98,7 @@ define([
                                 '</li>' +
                             '<% } %>' +
                         '</ul>' +
-                        '<a class="scroll right"><i class="icon">&gt;</i></a>' +
+                        '<a class="scroll right"></a>' +
                     '</section>';
 
                 this.$layout = $(options.template({
diff --git a/apps/common/main/resources/less/toolbar.less b/apps/common/main/resources/less/toolbar.less
index f633706bc..cc6225771 100644
--- a/apps/common/main/resources/less/toolbar.less
+++ b/apps/common/main/resources/less/toolbar.less
@@ -108,20 +108,46 @@
         .scroll {
             line-height: @height-tabs;
             min-width: 20px;
-            text-align: center;
             z-index: 1;
             cursor: pointer;
-            color: #fff;
+            position: relative;
+            display: flex;
+            align-items: center;
 
             &:hover {
                 text-decoration: none;
             }
 
+            &:not(:hover) {
+                &:after {
+                    opacity: .8;
+                }
+            }
+
             &.left{
-                box-shadow: 5px 0 20px 5px @tabs-bg-color
+                box-shadow: 5px 0 20px 5px @tabs-bg-color;
+
+                &:after {
+                    transform: rotate(135deg);
+                    margin-left: 8px;
+                }
             }
             &.right{
-                box-shadow: -5px 0 20px 5px @tabs-bg-color
+                box-shadow: -5px 0 20px 5px @tabs-bg-color;
+
+                &:after {
+                    transform: rotate(-45deg);
+                    margin-left: 4px;
+                }
+            }
+
+            @arrow-length: 8px;
+            &:after {
+                content: ' ';
+                width: @arrow-length;
+                height: @arrow-length;
+                border: solid white;
+                border-width: 0 2px 2px 0;
             }
         }
     }