Merges #795 field (x) wide / grid alignment

server/documents/collections/form.html.eco

@@ -588,9 +588,9 @@ type        : 'UI Collection'
 
   <div class="example">
     <h4 class="ui header">Fields Grid</h4>
-    <p>Fields can be aligned to 16-columns grid</p>
+    <p>Fields can be aligned to a <a href="/collections/grid.html">ui grid</a></p>
     <div class="ui form">
-      <div class="fields grid">
+      <div class="fields">
         <div class="four wide field">
           <label>First name</label>
           <input type="text" placeholder="First Name">

src/collections/form.less

@@ -556,58 +556,72 @@
   padding-right: 1%;
 }
 
+.ui.form .fields .field:first-child {
+  padding-left: 0%;
+}
+.ui.form .fields .field:last-child {
+  padding-right: 0%;
+}
+
+
 /* Fields grid support */
-.ui.form .fields.grid > .field {
+.ui.form .fields .wide.field {
   width: 6.25%;
   padding-left: 1%;
   padding-right: 1%;
 }
-.ui.form .fields.grid > .one.wide.field {
+.ui.form .fields .wide.field:first-child {
+  padding-left: 0%;
+}
+.ui.form .fields .wide.field:last-child {
+  padding-right: 0%;
+}
+.ui.form .fields > .one.wide.field {
   width: 6.25%;
 }
-.ui.form .fields.grid > .two.wide.field {
+.ui.form .fields > .two.wide.field {
   width: 12.5%;
 }
-.ui.form .fields.grid > .three.wide.field {
+.ui.form .fields > .three.wide.field {
   width: 18.75%;
 }
-.ui.form .fields.grid > .four.wide.field {
+.ui.form .fields > .four.wide.field {
   width: 25%;
 }
-.ui.form .fields.grid > .five.wide.field {
+.ui.form .fields > .five.wide.field {
   width: 31.25%;
 }
-.ui.form .fields.grid > .six.wide.field {
+.ui.form .fields > .six.wide.field {
   width: 37.5%;
 }
-.ui.form .fields.grid > .seven.wide.field {
+.ui.form .fields > .seven.wide.field {
   width: 43.75%;
 }
-.ui.form .fields.grid > .eight.wide.field {
+.ui.form .fields > .eight.wide.field {
   width: 50%;
 }
-.ui.form .fields.grid > .nine.wide.field {
+.ui.form .fields > .nine.wide.field {
   width: 56.25%;
 }
-.ui.form .fields.grid > .ten.wide.field {
+.ui.form .fields > .ten.wide.field {
   width: 62.5%;
 }
-.ui.form .fields.grid > .eleven.wide.field {
+.ui.form .fields > .eleven.wide.field {
   width: 68.75%;
 }
-.ui.form .fields.grid > .twelve.wide.field {
+.ui.form .fields > .twelve.wide.field {
   width: 75%;
 }
-.ui.form .fields.grid > .thirteen.wide.field {
+.ui.form .fields > .thirteen.wide.field {
   width: 81.25%;
 }
-.ui.form .fields.grid > .fourteen.wide.field {
+.ui.form .fields > .fourteen.wide.field {
   width: 87.5%;
 }
-.ui.form .fields.grid > .fifteen.wide.field {
+.ui.form .fields > .fifteen.wide.field {
   width: 93.75%;
 }
-.ui.form .fields.grid > .sixteen.wide.field {
+.ui.form .fields > .sixteen.wide.field {
   width: 100%;
 }
 
@@ -621,35 +635,27 @@
   .ui.form .four.fields > .field,
   .ui.form .five.fields > .fields,
   .ui.form .five.fields > .field,
-  .ui.form .fields.grid > .one.wide.field,
-  .ui.form .fields.grid > .two.wide.field,
-  .ui.form .fields.grid > .three.wide.field,
-  .ui.form .fields.grid > .four.wide.field,
-  .ui.form .fields.grid > .five.wide.field,
-  .ui.form .fields.grid > .six.wide.field,
-  .ui.form .fields.grid > .seven.wide.field,
-  .ui.form .fields.grid > .eight.wide.field,
-  .ui.form .fields.grid > .nine.wide.field,
-  .ui.form .fields.grid > .ten.wide.field,
-  .ui.form .fields.grid > .eleven.wide.field,
-  .ui.form .fields.grid > .twelve.wide.field,
-  .ui.form .fields.grid > .thirteen.wide.field,
-  .ui.form .fields.grid > .fourteen.wide.field,
-  .ui.form .fields.grid > .fifteen.wide.field,
-  .ui.form .fields.grid > .sixteen.wide.field {
+  .ui.form .fields > .two.wide.field,
+  .ui.form .fields > .three.wide.field,
+  .ui.form .fields > .four.wide.field,
+  .ui.form .fields > .five.wide.field,
+  .ui.form .fields > .six.wide.field,
+  .ui.form .fields > .seven.wide.field,
+  .ui.form .fields > .eight.wide.field,
+  .ui.form .fields > .nine.wide.field,
+  .ui.form .fields > .ten.wide.field,
+  .ui.form .fields > .eleven.wide.field,
+  .ui.form .fields > .twelve.wide.field,
+  .ui.form .fields > .thirteen.wide.field,
+  .ui.form .fields > .fourteen.wide.field,
+  .ui.form .fields > .fifteen.wide.field,
+  .ui.form .fields > .sixteen.wide.field {
     width: 100%;
     padding-left: 0%;
     padding-right: 0%;
   }
 }
 
-.ui.form .fields .field:first-child {
-  padding-left: 0%;
-}
-.ui.form .fields .field:last-child {
-  padding-right: 0%;
-}
-
 /*--------------------
     Inline Fields
 ---------------------*/