Fixes for icon message, button shadows, adds Lato as default font for docs only

src/definitions/collections/message.less

@@ -48,7 +48,7 @@
      Content
 ---------------*/
 
-/* block with headers */
+/* Header */
 .ui.message .header {
   display: @headerDisplay;
   font-family: @headerFont;
@@ -57,7 +57,7 @@
   margin: 0em @headerHorizontalDistance 0em 0em;
 }
 
-/* block with paragraphs */
+/* Paragraph */
 .ui.message p {
   opacity: @messageTextOpacity;
   margin: @messageParagraphMargin 0em;
@@ -72,7 +72,7 @@
   margin-top: @headerBottomMargin;
 }
 
-/* Block with list */
+/* List */
 .ui.message ul.list {
   opacity: @listOpacity;
   list-style-position: @listStylePosition;
@@ -96,6 +96,12 @@
   margin-top: 0em;
 }
 
+
+/* Icon */
+.ui.message > .icon {
+  margin-right: @iconDistance;
+}
+
 /* Close Icon */
 .ui.message > .close.icon {
   cursor: pointer;
@@ -189,9 +195,7 @@
   vertical-align: @iconVerticalAlign;
   font-size: @iconSize;
   opacity: @iconOpacity;
-}
-.ui.icon.message > .icon + .content {
-  padding-left: @iconDistance;
+  padding-right: @iconContentDistance;
 }
 .ui.icon.message > .content {
   display: table-cell;

src/definitions/elements/button.less

@@ -505,25 +505,10 @@
 ---------------*/
 
 .ui.button > .icon {
-  margin-right: @iconMargin;
-
-  line-height: 1;
-
-  -webkit-transition:
-    opacity 0.1s @transitionEasing
-  ;
-  -moz-transition:
-    opacity 0.1s @transitionEasing
-  ;
-  -o-transition:
-    opacity 0.1s @transitionEasing
-  ;
-  -ms-transition:
-    opacity 0.1s @transitionEasing
-  ;
-  transition:
-    opacity 0.1s @transitionEasing
-  ;
+  opacity: @iconOpacity;
+  margin: @iconMargin;
+  transition: @iconTransition;
+  vertical-align: @iconVerticalAlign;
 }
 
 /*******************************

src/themes/packages/default/collections/message.variables

@@ -25,6 +25,7 @@
 ;
 
 /* Header */
+
 @headerFontSize: 1.3em;
 @headerFontWeight: bold;
 @headerBottomMargin: 0.25em;
@@ -43,6 +44,9 @@
 @listItemIndent: 1em;
 @listItemMargin: 0.3em;
 
+/* Icon */
+@iconDistance: 0.6em;
+
 /* Close Icon */
 @closeTopDistance: 1em;
 @closeRightDistance: 0.5em;
@@ -56,7 +60,7 @@
 /* Icon Message */
 @iconSize: 2em;
 @iconOpacity: 0.8;
-@iconDistance: 1.5em;
+@iconContentDistance: 1.5em;
 @iconVerticalAlign: middle;
 
 /* Attached */

src/themes/packages/default/elements/button.variables

@@ -14,14 +14,18 @@
 @textColor: rgba(0, 0, 0, 0.6);
 @textShadow: none;
 @invertedTextShadow: none;
-
 @borderRadius: 0.25em;
 
+/* Shadow */
+@shadowDistance: 0em;
+@shadowOffset: (@shadowDistance / 2);
+@shadowBoxShadow: 0px -@shadowDistance 0px 0px rgba(0, 0, 0, 0.1) inset;
+
 @backgroundColor: #FAFAFA;
 @backgroundImage: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.09));
 @boxShadow:
   0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset,
-  0px -@shadowDistance 0px 0px rgba(0, 0, 0, 0.1) inset
+  @shadowBoxShadow
 ;
 
 /* transitions */
@@ -37,12 +41,12 @@
 @verticalPadding: 0.8em;
 @horizontalPadding: 1.5em;
 
-/* Shadow */
-@shadowDistance: 0em;
-@shadowOffset: (@shadowDistance / 2);
-
 /* Icon */
-@iconMargin: 0.6em;
+@iconOpacity: 0.8;
+@iconDistance: 0.4em;
+@iconTransition: opacity @transitionDuration @transitionEasing;
+@iconMargin: 0em @iconDistance 0em -@iconDistance;
+@iconVerticalAlign: top;
 
 /* Loader */
 @loaderPath: "@{imagePath}/loader-mini.gif";
@@ -155,7 +159,7 @@
 
 /* Colors */
 @coloredBackgroundImage: linear-gradient(rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.1));
-@coloredBoxShadow: none;
+@coloredBoxShadow: @shadowBoxShadow;
 
 /* Compact */
 @compactVerticalPadding: (@verticalPadding * 0.75);

src/themes/packages/default/globals/site.variables

@@ -166,7 +166,7 @@
 @purpleTextColor  : @purple;
 @redTextColor     : @red;
 @tealTextColor    : @teal;
-@yellowTextColor  : #EAB600; // Yellow text illegible
+@yellowTextColor  : #B58105; // Yellow text illegible
 
 /*--- Backgrounds ---*/
 @blueBackground   : #D3E4F3;