Merge pull request #40 from yne/master

Add `.grouped.gapless` class

dist/chota.css

@@ -524,17 +524,23 @@ button {
   display: -ms-flexbox;
   display: flex;
 }
-.grouped > input:not(:last-child),
+.grouped > *:not(:last-child) {
-.grouped > select:not(:last-child),
-.grouped > .button:not(:last-child) {
   margin-right: 16px;
 }
+.grouped.gapless > * {
+  margin: 0 0 0 -1px !important;
+  border-radius:0 !important;
+}
+.grouped.gapless > *:first-child {
+  margin: 0 !important;
+  border-radius:4px 0 0 4px !important;
+}
+.grouped.gapless > *:last-child {
+  border-radius:0 4px 4px 0 !important;
+}
 .button + .button {
   margin-left: 1rem;
 }
-.buttons > .button + .button {
-  margin-left: 0;
-}
 .button:hover,
 [type="button"]:hover,
 [type="reset"]:hover,
@@ -564,6 +570,7 @@ button:disabled:hover {
 .button.success,
 [type="submit"] {
   color: #fff;
+  z-index: 1; /* hightlight from other button's border when grouped */
   background-color: #000;
   background-color: var(--color-primary);
 }

docs/_includes/utilities.html

@@ -87,12 +87,34 @@
     <li><code>hide-pr</code> - hides the element for printing</li>
   </ul>
   <h4>Details</h4>
-  <p>You can have a <code>&lt;details&gt;</code> with a <code>.dropdown</code> class to defines a toggle-able block of content with a summary and additional details.</p>
+  <p>You can have a <code>&lt;details&gt;</code> to defines a toggle-able block of content with a summary and additional details.</p>
-  <details class="dropdown">
+  <details>
     <summary>Read more</summary>
     <p>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec
       nulla vitae mollis.
     </p>
   </details>
+  <p>This can be coupled to a <code>.dropdown</code> and a couple of <code>.button</code> and <code>.card</code> classes to defines a dropdown button.</p>
+  <details class=dropdown>
+      <summary class="button outline">My Profile</summary>
+      <div class=card>
+        <p><a href="#">Edit</a></p>
+        <p><a href="#">Alerts&nbsp;<span class=tag>3</span></a></p>
+        <hr/>
+        <p><a href="#" class=text-error>Logout</a></p>
+    </div>
+  </details>
+  <details class=dropdown>
+    <summary class="button outline">Login</summary>
+    <form class="card row">
+      <input class=col-12 placeholder=username>
+      <input class=col-12 placeholder=password type=password>
+      <footer class=is-right>
+        <a class="button clear">Sign up</a>
+        <button type=submit>Sign in</button>
+      </footer>
+    </form>
+  </details>
 </section>
+

src/_form.css

@@ -87,20 +87,27 @@ button {
   display: flex;
 }
 
-.grouped > input:not(:last-child),
+.grouped > *:not(:last-child) {
-.grouped > select:not(:last-child),
-.grouped > .button:not(:last-child) {
   margin-right: 16px;
 }
 
+.grouped.gapless > * {
+  margin: 0 0 0 -1px !important;
+  border-radius:0 !important;
+}
+.grouped.gapless > *:first-child {
+  margin: 0 !important;
+  border-radius:4px 0 0 4px !important;
+}
+
+.grouped.gapless > *:last-child {
+  border-radius:0 4px 4px 0 !important;
+}
+
 .button + .button {
   margin-left: 1rem;
 }
 
-.buttons > .button + .button {
-  margin-left: 0;
-}
-
 .button:hover,
 [type="button"]:hover,
 [type="reset"]:hover,
@@ -132,6 +139,7 @@ button:disabled:hover {
 .button.success,
 [type="submit"] {
   color: #fff;
+  z-index: 1; /* hightlight from other button's border when grouped */
   background-color: #000;
   background-color: var(--color-primary);
 }