Add support for loading spinner in alert boxes (#53)

The pattern of placing a spinner in an alert (styled info) to notify
that something is loading is very common for me. I realize the material
design suggests to use a progress bar but hack.css doesn't yet support
an indefinite progress bar. Till then I will often use an alert box
with a spinner.

The former style had no display type so it defaulted to block for
`<div>`s and inline for `<span>`s. The problem with a div is it means
the text next to a spinner drop to another row. This caused rendering
the spinner in an alert box looking off. It also forced the user to
explicitly set the display to inline-block or float.

For me that last think I conclude when using a CSS library like this is
to manually understand floating a spinner or changing it's display type.
Normally I would simply define the spinner as a `<span>` not a `<div>`.
Since inline elements have no width or height it renders awful.

To make things easier this adds some opinions to the display of a span
or div with .loading class on it. However, to prevent changes to style
when upgrading the spinner in a button defined as a div will stay float
left.

The example docs were updated and I moved the spinner to the right in
the button example because in almost all cases where I've seen loading
buttons the spinner has been on the right.

Author: sukima

src/css/components.css

@@ -342,22 +342,32 @@ select.form-control {
  * Loading
  */
 .loading {
+  display: inline-block;
+  content: ' ';
   height: 20px;
   width: 20px;
+  margin: 0 .5rem;
   animation: rotate 0.6s infinite linear;
   border: 2px solid $pink;
   border-right-color: transparent;
   border-radius: 50%;
 }
 
 .btn .loading {
-  display: inline-block;
-  float: left;
-  margin-right: .5rem;
+  margin-bottom: 0;
   width: 14px;
   height: 14px;
 }
 
+/* Remains for backwards compatibility */
+.btn div.loading {
+  float: left;
+}
+
+.alert .loading {
+  margin-bottom: -5px;
+}
+
 @keyframes rotate {
   0%    { transform: rotate(0deg); }
   100%  { transform: rotate(360deg); }

src/html/components.jade

@@ -311,16 +311,26 @@ p hack.css gives you a default loading element, but you can find more at <a href
 
 .example
   button.btn.btn-info.btn-ghost
-    .loading
-    | Loading...
+    | Loading&hellip;
+    span.loading
+
+.example
+  .alert.alert-info
+    span.loading
+    | Loading in an alert box&hellip;
 
 :marked
   ```html
   <div class="loading"></div>
 
   <button class="btn btn-info btn-ghost">
-    <div class="loading"></div>
-    Loading...
+    Loading&hellip;
+    <span class="loading"></span>
   </button>
+
+  <div class="alert alert-info">
+    <span class="loading"></span>
+    Loading in an alert box&hellip;
+  </div>
   ```