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
fomantic · Dec 27, 2020 · de42d96 · de42d96
1 parent 7da17f7
commit de42d96
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 16 deletions.
diff --git 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,37 +394,37 @@ 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) {
         transform: none;
       }
     }
     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
@@ -85,6 +85,7 @@
    @cornerIconStroke  @cornerIconStroke 0 @black
 ;
 
+@cornerOffset: 0;
 @borderedGroupCornerOffset: 1.15em;
 
 @mini: 0.4em;