_grid.scss in ethosstyles-0.1.16

- old
+ new

@@ -1,6 +1,21 @@
 //
+// GRID
+//
+
+//
+// Structure
+//
+// <div class="rf-row">
+//   <div class="rf-col--[width]">1st Column</div>
+//   ...
+//   <div class="rf-col--[width]">Last Column</div>
+// </div>
+//
+
+
+//
 // ROWS
 //
 
 .rf-row {
   align-items: center;
@@ -75,11 +90,24 @@
 
 //
 // ACTIONS COLUMN
 //
 
-// Two action buttons
+//
+// Structure
+//
+// <div class="rf-row rf-col">
+//   <div class="rf-col--[width]">Body</div>
+//   <div class="rf-col--[width] rf-col--actions">
+//     <input class="rf-btn rf-btn--primary" type="delete" value="Delete">
+//     <input class="rf-btn rf-btn--secondary" type="submit" value="Submit">
+//   </div>
+// </div>
+//
+
+// TWO OR MORE ACTION BUTTONS
+
 .rf-col--actions {
   align-items: center;
   display: flex;
   justify-content: flex-end;
 
@@ -89,15 +117,20 @@
     padding-left: 0;
     padding-right: 0;
     width: 48%;
 
     &:first-child {
-      margin-right: 4%;
+      margin-right: 0;
     }
   }
+
+  .rf-btn:first-child {
+    margin-right: 0;
+  }
 }
 
-// Single action button
+// SINGLE ACTION BUTTON
+
 .rf-col--action {
   .rf-btn {
     padding-left: 0;
     padding-right: 0;
     width: 100%;