#2046 First pass of grouped icons

src/definitions/elements/icon.less

@@ -314,27 +314,75 @@ i.inverted.circular.yellow.icon {
         Sizes
 --------------------*/
 
-i.small.icon {
+i.small.icon,
+i.small.icons {
   font-size: @small;
 }
-i.icon {
+i.icon,
+i.icons {
   font-size: @medium;
 }
-i.large.icon {
+i.large.icon,
+i.large.icons {
   font-size: @large;
   vertical-align: middle;
 }
-i.big.icon {
+i.big.icon,
+i.big.icons {
   font-size: @big;
   vertical-align: middle;
 }
-i.huge.icon {
+i.huge.icon,
+i.huge.icons {
   font-size: @huge;
   vertical-align: middle;
 }
-i.massive.icon {
+i.massive.icon,
+i.massive.icons {
   font-size: @massive;
   vertical-align: middle;
 }
 
+/*******************************
+            Groups
+*******************************/
+
+i.icons {
+  display: inline-block;
+  position: relative;
+}
+
+i.icons .icon {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-50%);
+  margin: 0em;
+  margin: 0;
+}
+
+i.icons .icon:first-child {
+  position: static;
+  width: auto;
+  height: auto;
+  vertical-align: top;
+  transform: none;
+  margin-right: @distanceFromText;
+}
+
+/* Corner Icon */
+i.icons .corner.icon {
+  top: auto;
+  left: auto;
+  right: 0;
+  bottom: 0;
+  transform: none;
+  font-size: @cornerIconSize;
+  text-shadow: @cornerIconShadow;
+}
+
+i.icons .inverted.corner.icon {
+  text-shadow: @cornerIconInvertedShadow;
+}
+
 .loadUIOverrides();

src/themes/default/elements/icon.variables

@@ -7,12 +7,23 @@
 --------------------*/
 
 @fontName: 'icons';
+@fallbackSRC: url("@{fontPath}/@{fontName}.eot");
+@src:
+  url("@{fontPath}/@{fontName}.eot?#iefix") format('embedded-opentype'),
+  url("@{fontPath}/@{fontName}.woff2") format('woff'),
+  url("@{fontPath}/@{fontName}.woff") format('woff'),
+  url("@{fontPath}/@{fontName}.ttf") format('truetype'),
+  url("@{fontPath}/@{fontName}.svg#icons") format('svg')
+;
 
 @opacity: 1;
 @width: 1.23em;
 @height: 1em;
 @distanceFromText: 0.25rem;
 
+
+/* Variations */
+
 @linkOpacity: 0.8;
 @linkDuration: 0.3s;
 @loadingDuration: 2s;
@@ -26,18 +37,25 @@
 @borderedHorizontalPadding: ((@borderedSize - @width) / 2);
 @borderedShadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
 
-@small: 0.875em;
+@cornerIconSize: 0.45em;
+@cornerIconStroke: 1px;
+@cornerIconShadow:
+  -@cornerIconStroke -@cornerIconStroke 0 @white,
+   @cornerIconStroke -@cornerIconStroke 0 @white,
+  -@cornerIconStroke  @cornerIconStroke 0 @white,
+   @cornerIconStroke  @cornerIconStroke 0 @white
+;
+@cornerIconInvertedShadow:
+  -@cornerIconStroke -@cornerIconStroke 0 @black,
+   @cornerIconStroke -@cornerIconStroke 0 @black,
+  -@cornerIconStroke  @cornerIconStroke 0 @black,
+   @cornerIconStroke  @cornerIconStroke 0 @black
+;
+
+@small: @relativeSmall;
 @medium: 1em;
 @large: 1.5em;
 @big: 2em;
 @huge: 4em;
 @massive: 8em;
 
-@fallbackSRC: url("@{fontPath}/@{fontName}.eot");
-@src:
-  url("@{fontPath}/@{fontName}.eot?#iefix") format('embedded-opentype'),
-  url("@{fontPath}/@{fontName}.woff2") format('woff'),
-  url("@{fontPath}/@{fontName}.woff") format('woff'),
-  url("@{fontPath}/@{fontName}.ttf") format('truetype'),
-  url("@{fontPath}/@{fontName}.svg#icons") format('svg')
-;