Update: replace notify button icon duplicate styles with mixin (fixes #…

…443) (#448) * create mixin for notify icon button styles * replace notifyPush close button styles with mixin * replace hotgraphicPopup icon button styles with mixin * replace tutor close button styles with mixin
adaptlearning · Jul 4, 2023 · bf2f2e6 · bf2f2e6
1 parent 1a8bd41
commit bf2f2e6
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 44 deletions.
diff --git a/less/core/notify.less b/less/core/notify.less
@@ -72,17 +72,7 @@
   }
 
   &__btn-icon {
-    margin: @btn-margin / 2;
-    padding: @btn-padding / 2;
-    background-color: @notify-icon;
-    color: @notify-icon-inverted;
-    border-radius: 50%;
-
-    .no-touch &:not(.is-disabled):not(.is-locked):hover {
-      background-color: @notify-icon-hover;
-      color: @notify-icon-inverted-hover;
-      .transition(background-color @duration ease-in, color @duration ease-in;);
-    }
+    .notify-btn-icon;
   }
 
   &__close-btn {
@@ -109,3 +99,19 @@
   //   }
   // }
 }
+
+// Global Notify button icon
+// --------------------------------------------------
+.notify-btn-icon() {
+  margin: @btn-margin / 2;
+  padding: @btn-padding / 2;
+  background-color: @notify-icon;
+  color: @notify-icon-inverted;
+  border-radius: 50%;
+
+  .no-touch &:not(.is-disabled):not(.is-locked):hover {
+    background-color: @notify-icon-hover;
+    color: @notify-icon-inverted-hover;
+    .transition(background-color @duration ease-in, color @duration ease-in;);
+  }
+}
diff --git a/less/core/notifyPush.less b/less/core/notifyPush.less
@@ -37,17 +37,7 @@
     position: absolute;
     top: 0;
     right: 0;
-    margin: @btn-margin / 2;
-    padding: @btn-padding / 2;
-    background-color: @notify-icon;
-    color: @notify-icon-inverted;
-    border-radius: 50%;
-
-    .no-touch &:not(.is-disabled):not(.is-locked):hover {
-      background-color: @notify-icon-hover;
-      color: @notify-icon-inverted-hover;
-      .transition(background-color @duration ease-in, color @duration ease-in;);
-    }
+    .notify-btn-icon;
 
     .dir-rtl & {
       right: auto;

diff --git a/less/plugins/adapt-contrib-hotgraphic/hotgraphicPopup.less b/less/plugins/adapt-contrib-hotgraphic/hotgraphicPopup.less
@@ -8,17 +8,7 @@
 
   &__controls,
   &__close {
-    margin: @btn-margin / 2;
-    padding: @btn-padding / 2;
-    background-color: @notify-icon;
-    color: @notify-icon-inverted;
-    border-radius: 50%;
-
-    .no-touch &:not(.is-disabled):not(.is-locked):hover {
-      background-color: @notify-icon-hover;
-      color: @notify-icon-inverted-hover;
-      .transition(background-color @duration ease-in, color @duration ease-in;);
-    }
+    .notify-btn-icon;
   }
 
   &__item-title {

diff --git a/less/plugins/adapt-contrib-tutor/tutor.less b/less/plugins/adapt-contrib-tutor/tutor.less
@@ -18,17 +18,7 @@
   }
 
   &__btn-icon {
-    margin: @btn-margin / 2;
-    padding: @btn-padding / 2;
-    background-color: @notify-icon;
-    color: @notify-icon-inverted;
-    border-radius: 50%;
-
-    .no-touch &:not(.is-disabled):not(.is-locked):hover {
-      background-color: @notify-icon-hover;
-      color: @notify-icon-inverted-hover;
-      .transition(background-color @duration ease-in, color @duration ease-in;);
-    }
+    .notify-btn-icon;
   }
 
   // overlay