Rename btn-toolbar to toolbar

hugo/content/components/alert.md

@@ -75,7 +75,7 @@ As a result of the use of CSS variable to style the colors, any element that res
   <div class="alert-message">
     <p>Look at this alert message! <a href="#">Link</a> is color-matched.</p>
     <progress class="progress mb-3" value="50" max="100">50%</progress>
-    <div class="btn-toolbar">
+    <div class="toolbar">
       <div class="btn-group">
         <button type="button" class="btn btn-color">Colored</button>
         <button type="button" class="btn btn-hover">On hover</button>
@@ -88,7 +88,7 @@ As a result of the use of CSS variable to style the colors, any element that res
   <div class="alert-message">
     <p>Look at this alert message! <a href="#">Link</a> is color-matched.</p>
     <progress class="progress mb-3" value="50" max="100">50%</progress>
-    <div class="btn-toolbar">
+    <div class="toolbar">
       <div class="btn-group">
         <button type="button" class="btn btn-color">Colored</button>
         <button type="button" class="btn btn-hover">On hover</button>

hugo/content/components/button-group.md

@@ -43,21 +43,3 @@ While setting the individual button sizes is supported, you can also set the but
   <button type="button" class="btn btn-default">Group</button>
 </div>
 {{</example>}}
-
-## Toolbar
-You can combine multiple groups into a `btn-toolbar`. You can a also include a `btn` as a direct child.
-
-{{<example>}}
-<div class="btn-toolbar" role="toolbar">
-  <div class="btn-group" role="group">
-    <button type="button" class="btn btn-default">Button</button>
-    <button type="button" class="btn btn-default">Groups</button>
-    <button type="button" class="btn btn-default">In</button>
-  </div>
-  <div class="btn-group" role="group">
-    <button type="button" class="btn btn-default">A</button>
-    <button type="button" class="btn btn-default">Toolbar</button>
-  </div>
-  <button type="button" class="btn btn-danger">Single</button>
-</div>
-{{</example>}}

hugo/content/components/toolbar.md

@@ -0,0 +1,23 @@
+---
+title: Toolbar
+description: Combine various actions in a single bar.
+section: components
+---
+
+## Toolbar
+You can combine multiple `btn-groups` into a `toolbar`. You can a also include a `btn` as a direct child, as any other component.
+
+{{<example>}}
+<div class="toolbar" role="toolbar">
+  <div class="btn-group" role="group">
+    <button type="button" class="btn btn-default">Button</button>
+    <button type="button" class="btn btn-default">Groups</button>
+    <button type="button" class="btn btn-default">In</button>
+  </div>
+  <div class="btn-group" role="group">
+    <button type="button" class="btn btn-default">A</button>
+    <button type="button" class="btn btn-default">Toolbar</button>
+  </div>
+  <button type="button" class="btn btn-danger">Single</button>
+</div>
+{{</example>}}

hugo/data/docs.yml

@@ -43,6 +43,7 @@
     - title: Pivot
     - title: Placeholder
     - title: Progress
+    - title: Toolbar
 
 - title: Advanced
   pages:

scss/_button-groups.scss

@@ -33,14 +33,3 @@
     @extend .btn-lg;
   }
 }
-
-.btn-toolbar {
-  display: flex;
-  justify-content: flex-start;
-  flex-wrap: wrap;
-
-  > .btn:not(:last-child),
-  > .btn-group:not(:last-child) {
-    margin-right: .5rem;
-  }
-}

scss/_toolbar.scss

@@ -0,0 +1,10 @@
+.toolbar {
+  display: flex;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+
+  > .btn:not(:last-child),
+  > .btn-group:not(:last-child) {
+    margin-right: .5rem;
+  }
+}

scss/mellow.scss

@@ -48,6 +48,7 @@
 @import "pivot";
 @import "placeholder";
 @import "progress";
+@import "toolbar";
 
 @import "pwa";