Fix fields

docs/css/bulma-docs.css

@@ -1286,12 +1286,12 @@ a.box:active {
   border-top-color: transparent;
   content: "";
   display: block;
-  height: 1rem;
+  height: 1em;
   position: relative;
-  width: 1rem;
+  width: 1em;
   left: 50%;
-  margin-left: -8px;
-  margin-top: -8px;
+  margin-left: -0.5em;
+  margin-top: -0.5em;
   position: absolute;
   top: 50%;
   position: absolute !important;
@@ -2021,9 +2021,9 @@ a.box:active {
   border-top-color: transparent;
   content: "";
   display: block;
-  height: 1rem;
+  height: 1em;
   position: relative;
-  width: 1rem;
+  width: 1em;
   position: absolute !important;
   right: 0.625em;
   top: 0.625em;
@@ -2715,9 +2715,9 @@ a.box:active {
   border-top-color: transparent;
   content: "";
   display: block;
-  height: 1rem;
+  height: 1em;
   position: relative;
-  width: 1rem;
+  width: 1em;
 }
 
 .number {

docs/index.html

@@ -160,10 +160,14 @@ route: index
         </div>
       </div>
     </div>
-    <p class="control has-addons has-addons-centered">
-      <a id="add" class="button is-unselectable">Add column</a>
-      <a id="remove" class="button is-unselectable">Remove column</a>
-    </p>
+    <div class="field has-addons has-addons-centered">
+      <p class="control">
+        <a id="add" class="button is-unselectable">Add column</a>
+      </p>
+      <p class="control">
+        <a id="remove" class="button is-unselectable">Remove column</a>
+      </p>
+    </div>
     <div id="message" class="message is-info">
       <p class="message-header">Info</p>
       <p class="message-body">While it's possible to add as many columns as you want, it is recommend to stick with <strong>12 columns</strong>.<br>
@@ -301,12 +305,16 @@ route: index
           </a>
         </p>
         <div class="level-item">
-          <p class="control has-addons">
-            <input class="input" type="text" placeholder="Filter">
-            <button class="button">
-              Search
-            </button>
-          </p>
+          <div class="field has-addons">
+            <p class="control">
+              <input class="input" type="text" placeholder="Filter">
+            </p>
+            <p class="control">
+              <button class="button">
+                Search
+              </button>
+            </p>
+          </div>
         </div>
       </div>
       <div class="level-right">
@@ -370,7 +378,7 @@ route: index
                   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
                 </p>
               </div>
-              <nav class="level">
+              <nav class="level is-mobile">
                 <div class="level-left">
                   <a class="level-item">
                     <span class="icon is-small"><i class="fa fa-reply"></i></span>
@@ -443,27 +451,35 @@ route: index
       </div>
       <div class="column">
         <div class="block">
-          <p class="control">
-            <code>button</code>
-          </p>
+          <div class="field">
+            <p class="control">
+              <code>button</code>
+            </p>
+          </div>
           <a class="button">Button</a>
         </div>
         <div class="block">
-          <p class="control">
-            <code>button is-primary</code>
-          </p>
+          <div class="field">
+            <p class="control">
+              <code>button is-primary</code>
+            </p>
+          </div>
           <a class="button is-primary">Button</a>
         </div>
         <div class="block">
-          <p class="control">
-            <code>button is-primary is-large</code>
-          </p>
+          <div class="field">
+            <p class="control">
+              <code>button is-primary is-large</code>
+            </p>
+          </div>
           <a class="button is-primary is-large">Button</a>
         </div>
         <div class="block">
-          <p class="control">
-            <code>button is-primary is-large is-loading</code>
-          </p>
+          <div class="field">
+            <p class="control">
+              <code>button is-primary is-large is-loading</code>
+            </p>
+          </div>
           <a class="button is-primary is-large is-loading">Button</a>
         </div>
       </div>
@@ -517,7 +533,7 @@ route: index
       <div class="column">
         <p class="title">Title</p>
         <p class="subtitle">Subtitle</p>
-        <div class="control is-grouped">
+        <div class="field is-grouped">
           <p class="control">
             <span class="select">
               <select>
@@ -529,25 +545,31 @@ route: index
             <input class="input" type="text" placeholder="Text input">
           </p>
         </div>
-        <p class="control">
-          <label class="checkbox">
-            <input type="checkbox">
-            Checkbox
-          </label>
-        </p>
-        <p class="control">
-          <label class="radio">
-            <input type="radio" name="question">
-            Radio
-          </label>
-          <label class="radio">
-            <input type="radio" name="question">
-            Buttons
-          </label>
-        </p>
-        <p class="control">
-          <button class="button is-primary">Button</button>
-        </p>
+        <div class="field">
+          <p class="control">
+            <label class="checkbox">
+              <input type="checkbox">
+              Checkbox
+            </label>
+          </p>
+        </div>
+        <div class="field">
+          <p class="control">
+            <label class="radio">
+              <input type="radio" name="question">
+              Radio
+            </label>
+            <label class="radio">
+              <input type="radio" name="question">
+              Buttons
+            </label>
+          </p>
+        </div>
+        <div class="field">
+          <p class="control">
+            <a class="button is-primary">Button</a>
+          </p>
+        </div>
         <div class="tabs is-boxed">
           <ul>
             <li class="is-active">
@@ -577,9 +599,9 @@ route: index
           </ul>
         </div>
         <p class="block">
-          <span class="tag is-dark">Tag<button class="delete is-small"></button></span>
-          <span class="tag is-info">Two<button class="delete is-small"></button></span>
-          <span class="tag is-danger">Three<button class="delete is-small"></button></span>
+          <span class="tag is-dark">Tag<a class="delete is-small"></a></span>
+          <span class="tag is-info">Two<a class="delete is-small"></a></span>
+          <span class="tag is-danger">Three<a class="delete is-small"></a></span>
         </p>
         <div class="message is-warning">
           <div class="message-header">
@@ -590,7 +612,7 @@ route: index
           </div>
         </div>
         <div class="notification is-success">
-          <button class="delete"></button>
+          <a class="delete"></a>
           Success!
         </div>
       </div>

sass/elements/button.sass

@@ -151,5 +151,5 @@ $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2) !default
     pointer-events: none
     &:after
       +loader
-      +center(16px)
+      +center(1em)
       position: absolute !important

sass/utilities/mixins.sass

@@ -137,9 +137,9 @@
   border-top-color: transparent
   content: ""
   display: block
-  height: 1rem
+  height: 1em
   position: relative
-  width: 1rem
+  width: 1em
 
 =overflow-touch
   -webkit-overflow-scrolling: touch