Fix grouped button aligment, icon message alignment

server/documents/modules/form.html.eco

@@ -131,7 +131,7 @@ type        : 'UI Behavior'
     </h3>
     <div class="ui info message">Validation rules are found in <code>settings.rules</code>, to add new global validation rules, modify <code>$.fn.form.settings.rules</code> to include your function.</div>
     <div class="in red message">To pass parameters to a rule, use bracket notation in your settings object. For example <code>type: 'not[dog]'</code></div>
-    <table class="ui teal celled sortable definition table segment">
+    <table class="ui teal celled sortable definition table">
       <thead>
         <th class="four wide">Name</th>
         <th>Arguments</th>
@@ -366,7 +366,7 @@ type        : 'UI Behavior'
 
     All the following <a href="/module.html#/behavior">behaviors</a> can be called using the syntax <code>$('.foo').form('behavior name', argumentOne, argumentTwo)</code>
 
-    <table class="ui definition celled table segment">
+    <table class="ui definition celled table">
       <tr>
         <td>submit</td>
         <td>Submits selected form</td>
@@ -404,7 +404,7 @@ type        : 'UI Behavior'
       <div class="sub header">Form settings modify the form validation behavior</div>
     </h3>
 
-    <table class="ui celled sortable definition table segment">
+    <table class="ui celled sortable definition table">
       <thead>
         <th>Setting</th>
         <th class="four wide">Default</th>
@@ -458,7 +458,7 @@ type        : 'UI Behavior'
       <div class="sub header">Callbacks specify a function to occur after a specific behavior.</div>
     </h3>
 
-    <table class="ui celled definition table segment">
+    <table class="ui celled definition table">
       <thead>
         <th class="four wide">Setting</th>
         <th>Context</th>
@@ -495,7 +495,7 @@ type        : 'UI Behavior'
       <div class="sub header">Templates are used to construct elements</div>
     </h3>
     <div class="ui info message">Templates are found in <code>settings.template</code>, to modify templates across all forms, modify <code>$.fn.form.settings.templates</code> to include your function. They must return html.</div>
-    <table class="ui celled definition table segment">
+    <table class="ui celled definition table">
       <thead>
         <th class="four wide">Template</th>
         <th>Arguments</th>
@@ -521,7 +521,7 @@ type        : 'UI Behavior'
       DOM Settings
       <div class="sub header">DOM settings specify how this module should interface with the DOM</div>
     </h3>
-    <table class="ui celled definition table segment">
+    <table class="ui celled definition table">
       <thead>
         <th>Setting</th>
         <th class="six wide">Default</th>
@@ -587,7 +587,7 @@ type        : 'UI Behavior'
       <div class="sub header">Debug settings controls debug output to the console</div>
     </h3>
 
-    <table class="ui celled sortable definition table segment">
+    <table class="ui celled sortable definition table">
       <thead>
         <th>Setting</th>
         <th class="four wide">Default</th>

server/layouts/default.html.eco

@@ -30,7 +30,7 @@
 
   <link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700' rel='stylesheet' type='text/css'>
 
-  <% if 'zzz' in @getEnvironments(): %>
+  <% if 'development' in @getEnvironments(): %>
   <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/globals/reset.css">
   <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/globals/site.css">
   <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/elements/icon.css">

src/definitions/elements/button.less

@@ -293,6 +293,8 @@
   color: @invertedTextColor;
   text-shadow: @invertedTextShadow;
   background-image: @coloredBackgroundImage;
+}
+.ui.primary.button {
   box-shadow: @coloredBoxShadow;
 }
 .ui.primary.buttons .button:hover,
@@ -324,6 +326,8 @@
   color: @invertedTextColor;
   text-shadow: @invertedTextShadow;
   background-image: @coloredBackgroundImage;
+}
+.ui.secondary.button {
   box-shadow: @coloredBoxShadow;
 }
 .ui.secondary.buttons .button:hover,
@@ -1125,6 +1129,8 @@
   color: @invertedTextColor;
   text-shadow: @invertedTextShadow;
   background-image: @coloredBackgroundImage;
+}
+.ui.black.button {
   box-shadow: @coloredBoxShadow;
 }
 .ui.black.buttons .button:hover,
@@ -1182,6 +1188,8 @@
   color: @invertedTextColor;
   text-shadow: @invertedTextShadow;
   background-image: @coloredBackgroundImage;
+}
+.ui.blue.button {
   box-shadow: @coloredBoxShadow;
 }
 .ui.blue.buttons .button:hover,
@@ -1240,6 +1248,8 @@
   color: @invertedTextColor;
   text-shadow: @invertedTextShadow;
   background-image: @coloredBackgroundImage;
+}
+.ui.green.button {
   box-shadow: @coloredBoxShadow;
 }
 .ui.green.buttons .button:hover,
@@ -1297,6 +1307,8 @@
   color: @invertedTextColor;
   text-shadow: @invertedTextShadow;
   background-image: @coloredBackgroundImage;
+}
+.ui.orange.button {
   box-shadow: @coloredBoxShadow;
 }
 .ui.orange.buttons .button:hover,
@@ -1353,6 +1365,8 @@
   color: @invertedTextColor;
   text-shadow: @invertedTextShadow;
   background-image: @coloredBackgroundImage;
+}
+.ui.pink.button {
   box-shadow: @coloredBoxShadow;
 }
 .ui.pink.buttons .button:hover,
@@ -1409,6 +1423,8 @@
   color: @invertedTextColor;
   text-shadow: @invertedTextShadow;
   background-image: @coloredBackgroundImage;
+}
+.ui.purple.button {
   box-shadow: @coloredBoxShadow;
 }
 .ui.purple.buttons .button:hover,
@@ -1465,6 +1481,8 @@
   color: @invertedTextColor;
   text-shadow: @invertedTextShadow;
   background-image: @coloredBackgroundImage;
+}
+.ui.red.button {
   box-shadow: @coloredBoxShadow;
 }
 .ui.red.buttons .button:hover,
@@ -1522,6 +1540,8 @@
   color: @invertedTextColor;
   text-shadow: @invertedTextShadow;
   background-image: @coloredBackgroundImage;
+}
+.ui.teal.button {
   box-shadow: @coloredBoxShadow;
 }
 .ui.teal.buttons .button:hover,
@@ -1579,6 +1599,8 @@
   color: @invertedTextColor;
   text-shadow: @invertedTextShadow;
   background-image: @coloredBackgroundImage;
+}
+.ui.yellow.button {
   box-shadow: @coloredBoxShadow;
 }
 .ui.yellow.buttons .button:hover,
@@ -1638,6 +1660,8 @@
   color: @invertedTextColor;
   text-shadow: @invertedTextShadow;
   background-image: @coloredBackgroundImage;
+}
+.ui.positive.button {
   box-shadow: @coloredBoxShadow;
 }
 .ui.positive.buttons .button:hover,
@@ -1673,6 +1697,8 @@
   color: @invertedTextColor;
   text-shadow: @invertedTextShadow;
   background-image: @coloredBackgroundImage;
+}
+.ui.negative.button {
   box-shadow: @coloredBoxShadow;
 }
 .ui.negative.buttons .button:hover,

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

@@ -57,7 +57,7 @@
 @iconSize: 2em;
 @iconOpacity: 0.8;
 @iconDistance: 1.5em;
-@iconVerticalAlign: top;
+@iconVerticalAlign: middle;
 
 /* Attached */
 @attachedOffset: -1px;