feat(icon): bordered and circular icon groups

Author: Yrlish

src/definitions/elements/icon.less

@@ -273,7 +273,9 @@ each(@colors, {
       color: @l;
     }
     i.inverted.bordered.@{color}.icon.icon.icon.icon.icon,
-    i.inverted.circular.@{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;
     }
@@ -372,4 +374,71 @@ i.icons {
   }
 }
 
+& when ((@variationIconGroups) or (@variationIconCorner))
+   and ((@variationIconBordered) or (@variationIconCircular)) {
+  /*************************************************
+     Bordered/circular with corner or group icons
+  *************************************************/
+  i.bordered.icons,
+  i.circular.icons {
+    width: @borderedSize;
+    height: @borderedSize;
+    box-shadow: @borderedShadow;
+    vertical-align: middle;
+  }
+  i.circular.icons {
+    border-radius: 500em;
+  }
+  i.bordered.icons i.icon:first-child,
+  i.circular.icons i.icon:first-child {
+    position: absolute;
+    transform: translateX(-50%) translateY(-50%);
+  }
+
+  & when (@variationIconInverted) {
+    /* Inverted Icon */
+    i.bordered.inverted.icons,
+    i.circular.inverted.icons {
+      border: none;
+      box-shadow: none;
+      background-color: @black;
+      color: @white;
+    }
+  }
+
+  & when (@variationIconCorner) {
+    /* Corner Icon */
+    i.bordered.icons .icon.corner,
+    i.circular.icons .icon.corner,
+    i.bordered.icons .icon.corner[class*="bottom right"],
+    i.circular.icons .icon.corner[class*="bottom right"] {
+      top: auto;
+      left: auto;
+      right: @borderedGroupCornerOffset;
+      bottom: @borderedGroupCornerOffset;
+    }
+    i.bordered.icons .icon.corner[class*="top right"],
+    i.circular.icons .icon.corner[class*="top right"] {
+      top: @borderedGroupCornerOffset;
+      left: auto;
+      right: @borderedGroupCornerOffset;
+      bottom: auto;
+    }
+    i.bordered.icons .icon.corner[class*="top left"],
+    i.circular.icons .icon.corner[class*="top left"] {
+      top: @borderedGroupCornerOffset;
+      left: @borderedGroupCornerOffset;
+      right: auto;
+      bottom: auto;
+    }
+    i.bordered.icons .icon.corner[class*="bottom left"],
+    i.circular.icons .icon.corner[class*="bottom left"] {
+      top: auto;
+      left: @borderedGroupCornerOffset;
+      right: auto;
+      bottom: @borderedGroupCornerOffset;
+    }
+  }
+}
+
 .loadUIOverrides();

src/themes/default/elements/icon.variables

@@ -85,6 +85,8 @@
    @cornerIconStroke  @cornerIconStroke 0 @black
 ;
 
+@borderedGroupCornerOffset: 1.15em;
+
 @mini: 0.4em;
 @tiny: 0.5em;
 @small: 0.75em;