From de42d96e2b3a70fa25678d911de9129915ac20dc Mon Sep 17 00:00:00 2001
From: Marco 'Lubber' Wienkoop <c64@lubber.de>
Date: Sun, 27 Dec 2020 22:33:12 +0100
Subject: [PATCH] feat(icon): use corner offset variables

Moved corner icon offsets into a variable, so one can easily adjust them
Added render condition to possibly reduce CSS
---
 src/definitions/elements/icon.less         | 34 ++++++++++++----------
 src/themes/default/elements/icon.variables |  1 +
 2 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/src/definitions/elements/icon.less b/src/definitions/elements/icon.less
index 5fb80d6ecf..238fa0f71d 100755
--- a/src/definitions/elements/icon.less
+++ b/src/definitions/elements/icon.less
@@ -324,12 +324,14 @@ each(@colors, {
     i.inverted.@{color}.icon.icon.icon.icon.icon {
       color: @l;
     }
-    i.inverted.bordered.@{color}.icon.icon.icon.icon.icon,
-    i.inverted.circular.@{color}.icon.icon.icon.icon.icon,
-    i.inverted.bordered.@{color}.icons,
-    i.inverted.circular.@{color}.icons {
-      background-color: @c;
-      color: @white;
+    & when (@variationIconBordered) or (@variationIconCircular) {
+      i.inverted.bordered.@{color}.icon.icon.icon.icon.icon,
+      i.inverted.circular.@{color}.icon.icon.icon.icon.icon,
+      i.inverted.bordered.@{color}.icons,
+      i.inverted.circular.@{color}.icons {
+        background-color: @c;
+        color: @white;
+      }
     }
   }
 })
@@ -392,8 +394,8 @@ i.icons {
     i.icons .corner.icon {
       top: auto;
       left: auto;
-      right: 0;
-      bottom: 0;
+      right: @cornerOffset;
+      bottom: @cornerOffset;
       font-size: @cornerIconSize;
       text-shadow: @cornerIconShadow;
       &:not(.rotated):not(.flipped) {
@@ -401,28 +403,28 @@ i.icons {
       }
     }
     i.icons .icon.corner[class*="top right"] {
-      top: 0;
+      top: @cornerOffset;
       left: auto;
-      right: 0;
+      right: @cornerOffset;
       bottom: auto;
     }
     i.icons .icon.corner[class*="top left"] {
-      top: 0;
-      left: 0;
+      top: @cornerOffset;
+      left: @cornerOffset;
       right: auto;
       bottom: auto;
     }
     i.icons .icon.corner[class*="bottom left"] {
       top: auto;
-      left: 0;
+      left: @cornerOffset;
       right: auto;
-      bottom: 0;
+      bottom: @cornerOffset;
     }
     i.icons .icon.corner[class*="bottom right"] {
       top: auto;
       left: auto;
-      right: 0;
-      bottom: 0;
+      right: @cornerOffset;
+      bottom: @cornerOffset;
     }
     & when (@variationIconInverted) {
       i.icons .inverted.corner.icon {
diff --git a/src/themes/default/elements/icon.variables b/src/themes/default/elements/icon.variables
index 3769fd4b82..324df7c236 100644
--- a/src/themes/default/elements/icon.variables
+++ b/src/themes/default/elements/icon.variables
@@ -85,6 +85,7 @@
    @cornerIconStroke  @cornerIconStroke 0 @black
 ;
 
+@cornerOffset: 0;
 @borderedGroupCornerOffset: 1.15em;
 
 @mini: 0.4em;