From 807fa505aad2c66b6654f3612d56934b0c009f8d Mon Sep 17 00:00:00 2001
From: Maxim Kadushkin <maxim.kadushkin@onlyoffice.com>
Date: Fri, 19 Mar 2021 14:31:05 +0300
Subject: [PATCH] [common] changed button's icon stylesheet

---
 apps/common/main/resources/less/buttons.less  | 21 +++++++++++++------
 .../resources/less/colors-table-dark.less     |  8 +++----
 .../main/resources/less/colors-table.less     | 16 +++++++-------
 3 files changed, 28 insertions(+), 17 deletions(-)

diff --git a/apps/common/main/resources/less/buttons.less b/apps/common/main/resources/less/buttons.less
index 7897851bd..baabf5d28 100644
--- a/apps/common/main/resources/less/buttons.less
+++ b/apps/common/main/resources/less/buttons.less
@@ -7,7 +7,6 @@
     color: @text-normal;
     border-width: @scaled-one-px-value-ie;
     border-width: @scaled-one-px-value;
-    opacity: @component-normal-opacity;
 
     .btnsize(@value) {
         min-width: @value;
@@ -53,15 +52,11 @@
     &:hover {
         color: @text-normal-ie;
         color: @text-normal;
-
-        opacity: @component-hover-opacity;
     }
 
     &:active, &.active {
         -webkit-box-shadow: none;
         box-shadow: none;
-
-        opacity: @component-active-opacity;
     }
 
     .caret {
@@ -177,7 +172,13 @@
 
     &:not(:disabled) {
         .icon {
-            opacity: @button-icon-opacity;
+            opacity: @component-normal-icon-opacity;
+        }
+    }
+
+    &:hover:not(.disabled) {
+        .icon {
+            opacity: @component-hover-icon-opacity;
         }
     }
 
@@ -189,6 +190,14 @@
                 border-color: @background-normal;
             }
         }
+
+        .icon {
+            opacity: @component-active-icon-opacity;
+        }
+
+        &:hover .icon {
+            opacity: @component-active-hover-icon-opacity;
+        }
     }
 }
 
diff --git a/apps/common/main/resources/less/colors-table-dark.less b/apps/common/main/resources/less/colors-table-dark.less
index bc6d08ad8..28b268a49 100644
--- a/apps/common/main/resources/less/colors-table-dark.less
+++ b/apps/common/main/resources/less/colors-table-dark.less
@@ -110,11 +110,11 @@
         --image-border-types-filter-selected: invert(100%) brightness(4);
         --component-normal-icon-filter: invert(100%);
 
-        --component-normal-opacity: .8;
-        --component-hover-opacity: .8;
-        --component-active-opacity: .8;
+        --component-normal-icon-opacity: .8;
+        --component-hover-icon-opacity: .8;
+        --component-active-icon-opacity: .8;
+        --component-active-hover-icon-opacity: .8;
         --component-disabled-opacity: .3;
-        --button-icon-opacity: .8;
 
         --menu-icon-item-checked-offset-x: -20px;
     }
diff --git a/apps/common/main/resources/less/colors-table.less b/apps/common/main/resources/less/colors-table.less
index 2ffee9106..2b26707c1 100644
--- a/apps/common/main/resources/less/colors-table.less
+++ b/apps/common/main/resources/less/colors-table.less
@@ -122,9 +122,10 @@
     --image-border-types-filter-selected: none;
     --component-normal-icon-filter: none;
 
-    --component-normal-opacity: .8;
-    --component-hover-opacity: .8;
-    --component-active-opacity: .8;
+    --component-normal-icon-opacity: .8;
+    --component-hover-icon-opacity: .8;
+    --component-active-icon-opacity: .8;
+    --component-active-hover-icon-opacity: .8;
     --component-disabled-opacity: .4;
     //--button-icon-opacity: 1;
 }
@@ -199,11 +200,12 @@
 @button-header-active-icon-offset-x: var(--button-header-active-icon-offset-x, -20px);
 
 @component-normal-icon-filter: var(--component-normal-icon-filter);
-@component-normal-opacity: var(--component-normal-opacity, .8);
-@component-hover-opacity: var(--component-hover-opacity, .8);
-@component-active-opacity: var(--component-active-opacity, .8);
+@component-normal-icon-opacity: var(--component-normal-icon-opacity, .8);
+@component-hover-icon-opacity: var(--component-hover-icon-opacity, .8);
+@component-active-icon-opacity: var(--component-active-icon-opacity, .8);
+@component-active-hover-icon-opacity: var(--component-active-hover-icon-opacity, .8);
 @component-disabled-opacity: var(--component-disabled-opacity, .4);
-@button-icon-opacity: var(--button-icon-opacity, 1);
+//@button-icon-opacity: var(--button-icon-opacity, 1);
 
 @menu-icon-item-checked-offset-x: var(--menu-icon-item-checked-offset-x, 0);