From 86a6b68d612d47c7075f81ff6b06da2334d95e1b Mon Sep 17 00:00:00 2001
From: Julia Radzhabova <julia.radzhabova@onlyoffice.com>
Date: Fri, 4 Feb 2022 17:09:03 +0300
Subject: [PATCH] [Header] Refactoring style for share button

---
 apps/common/main/resources/less/header.less  | 12 ++++++------
 apps/common/main/resources/less/toolbar.less | 20 +++++++++++++-------
 2 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/apps/common/main/resources/less/header.less b/apps/common/main/resources/less/header.less
index ea4a33a26..20e714d90 100644
--- a/apps/common/main/resources/less/header.less
+++ b/apps/common/main/resources/less/header.less
@@ -285,18 +285,18 @@
         }
     }
 
-    &:active, &.active {
-        .inner-box-icon, .caption {
-            opacity: @header-component-active-icon-opacity;
-        }
-    }
-
     &:hover:not(:disabled)  {
         .inner-box-icon, .caption {
             opacity: @header-component-hover-icon-opacity;
         }
     }
 
+    &:active:not(:disabled), &.active:not(:disabled) {
+        .inner-box-icon, .caption {
+            opacity: @header-component-active-icon-opacity;
+        }
+    }
+
     &.disabled {
         opacity: @component-disabled-opacity;
         pointer-events: none;
diff --git a/apps/common/main/resources/less/toolbar.less b/apps/common/main/resources/less/toolbar.less
index af3b549c4..72e3f1976 100644
--- a/apps/common/main/resources/less/toolbar.less
+++ b/apps/common/main/resources/less/toolbar.less
@@ -462,9 +462,19 @@
 
         // TODO: move to appropriate module
         .btn-header, .btn-users, .btn-header-share {
-            &:not(:active) .icon--inverse {
-                background-position-x: 0;
-                background-position-x: @button-small-normal-icon-offset-x;
+            .icon {
+                &.icon--inverse {
+                    background-position-x: 0 !important;
+                    background-position-x: @button-small-normal-icon-offset-x !important;
+                }
+            }
+
+            &:active, &.active {
+                &:not(.disabled) .icon.toolbar__icon {
+                    &.icon--inverse {
+                        background-position-x: @button-small-active-icon-offset-x !important;
+                    }
+                }
             }
 
             svg.icon {
@@ -494,10 +504,6 @@
                     background-color: @highlight-button-pressed-ie;
                     background-color: @highlight-button-pressed;
 
-                    .icon--inverse {
-                        background-position-x: @button-small-active-icon-offset-x;
-                    }
-
                     svg.icon {
                         fill: @icon-toolbar-header-ie;
                         fill: @icon-toolbar-header;