list of buttons

_config.yml

@@ -124,61 +124,53 @@ theme-colors:
   danger: 
     hex: '#f90049'
     name: Danger
-  light: 
-    hex: '#f8f9fa'
-    name: Light
-  dark: 
-    hex: '#343a40'
-    name: Dark
-
-button-types:
-  primary: 'Primary'
-  secondary: 'Secondary'
-  success: 'Success'
-  info: 'Info'
-  warning: 'Warning'
-  danger: 'Danger'
+#  light:
+#    hex: '#f8f9fa'
+#    name: Light
+#  dark:
+#    hex: '#343a40'
+#    name: Dark
 
 social-buttons:
   facebook:
     icon: fa fa-facebook
-    title: Facebook
+    name: Facebook
   twitter:
     icon: fa fa-twitter
-    title: Twitter
+    name: Twitter
   google:
     icon: fa fa-google
-    title: Google
+    name: Google
   youtube:
     icon: fa fa-youtube
-    title: Youtube
+    name: Youtube
   vimeo:
     icon: fa fa-vimeo
-    title: Vimeo
+    name: Vimeo
   dribbble:
     icon: fa fa-dribbble
-    title: Dribble
+    name: Dribble
   github:
     icon: fa fa-github
-    title: Github
+    name: Github
   instagram:
     icon: fa fa-instagram
-    title: Instagram
+    name: Instagram
   pinterest:
     icon: fa fa-pinterest
-    title: Pinterest
+    name: Pinterest
   vk:
     icon: fa fa-vk
-    title: VKontakte
+    name: VKontakte
   rss:
     icon: fa fa-rss
-    title: RSS
+    name: RSS
   flickr:
     icon: fa fa-flickr
-    title: Flickr
+    name: Flickr
   bitbucket:
     icon: fa fa-bitbucket
-    title: Bitbucket
+    name: Bitbucket
 
 google-maps-key: AIzaSyBEJy4UvF-JfcNciWlvlznyDlUckcspiD4
 google-maps-url: https://maps.googleapis.com/maps/api/js?key=AIzaSyCOJwXN0eoyeFZ3cYtGzPLFw8zGhQ750Xk

_docs/buttons.md

@@ -23,8 +23,8 @@ The `.btn` classes are designed to be used with the `<button>` element. However,
 Use any of the available button classes to quickly create a styled button . We provide a variety of colors for you to express different emotions.
 
 {% example html wrapper=btn-list %}
-{% for button in site.button-types %}
-<a href="#" class="btn btn-{{ button[0] }}">{{ button[1] }}</a>
+{% for button in site.theme-colors %}
+<a href="#" class="btn btn-{{ button[0] }}">{{ button[1].name }}</a>
 {% endfor %}
 <a href="#" class="btn btn-link">Link</a>
 {% endexample %}
@@ -34,8 +34,8 @@ Use any of the available button classes to quickly create a styled button . We p
 Make buttons look inactive by adding the disabled boolean attribute to any `.btn` element. `<a>`s don’t support the disabled attribute, so you must add the `.disabled` class to make it visually appear disabled.
 
 {% example html wrapper=btn-list %}
-{% for button in site.button-types %}
-<a href="#" class="btn btn-{{ button[0] }} disabled">{{ button[1] }}</a>
+{% for button in site.theme-colors %}
+<a href="#" class="btn btn-{{ button[0] }} disabled">{{ button[1].name }}</a>
 {% endfor %}
 {% endexample %}
 
@@ -55,8 +55,8 @@ The classic button, in different colors.
 Add `.btn-square` to button to remove border-radius.
 
 {% example html wrapper=btn-list %}
-{% for button in site.button-types %}
-<a href="#" class="btn btn-square btn-{{ button[0] }}">{{ button[1] }}</a>
+{% for button in site.theme-colors %}
+<a href="#" class="btn btn-square btn-{{ button[0] }}">{{ button[1].name }}</a>
 {% endfor %}
 {% endexample %}
 
@@ -65,8 +65,8 @@ Add `.btn-square` to button to remove border-radius.
 Add `.btn-pill` class to any button to make them more rounded.
 
 {% example html wrapper=btn-list %}
-{% for button in site.button-types %}
-<a href="#" class="btn btn-pill btn-{{ button[0] }}">{{ button[1] }}</a>
+{% for button in site.theme-colors %}
+<a href="#" class="btn btn-pill btn-{{ button[0] }}">{{ button[1].name }}</a>
 {% endfor %}
 {% endexample %}
 
@@ -75,8 +75,8 @@ Add `.btn-pill` class to any button to make them more rounded.
 In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the `.btn-outline-*` ones to remove all background images and colors on any button.
 
 {% example html wrapper=btn-list %}
-{% for button in site.button-types %}
-<a href="#" class="btn btn-outline-{{ button[0] }}">{{ button[1] }}</a>
+{% for button in site.theme-colors %}
+<a href="#" class="btn btn-outline-{{ button[0] }}">{{ button[1].name }}</a>
 {% endfor %}
 {% endexample %}
 
@@ -118,7 +118,15 @@ Basic buttons are traditional buttons with borders and background with an extra
 
 {% example html wrapper=btn-list %} 
 {% for button in site.social-buttons %}
-<button type="button" class="btn btn-{{ button[0] }}"><i class="{{ button[1].icon }} mr-2"></i>{{ button[1].title }}</button>
+<button type="button" class="btn btn-{{ button[0] }}"><i class="{{ button[1].icon }} mr-2"></i>{{ button[1].name }}</button>
+{% endfor %}
+{% endexample %}
+
+You can use only icons.
+
+{% example html wrapper=btn-list %} 
+{% for button in site.social-buttons %}
+<button type="button" class="btn btn-icon btn-{{ button[0] }}"><i class="{{ button[1].icon }}"></i></button>
 {% endfor %}
 {% endexample %}
 
@@ -182,4 +190,43 @@ Add `.btn-loading` to use a loading state on a button. Since the loading spinner
 <button type="button" class="btn btn-warning btn-loading btn-sm">Button text</button>
 <button type="button" class="btn btn-danger btn-loading btn-lg">Button text</button>
 <button type="button" class="btn btn-secondary btn-loading btn-block">Button text</button>
+{% endexample %}
+
+
+### List of buttons
+
+You can now create a list of buttons with the `.btn-list` container.
+
+{% example html %}
+<div class="btn-list">
+  <a href="#" class="btn btn-success">Save changes</a>
+  <a href="#" class="btn btn-secondary">Save and continue</a>
+  <a href="#" class="btn btn-danger">Cancel</a>
+</div>
+{% endexample %}
+
+If the list is very long, it will automatically wrap on multiple lines, while keeping all buttons evenly spaced.
+
+{% example html %}
+<div class="btn-list">
+  <a href="#" class="btn btn-secondary">One</a>
+  <a href="#" class="btn btn-secondary">Two</a>
+  <a href="#" class="btn btn-secondary">Three</a>
+  <a href="#" class="btn btn-secondary">Four</a>
+  <a href="#" class="btn btn-secondary">Five</a>
+  <a href="#" class="btn btn-secondary">Six</a>
+  <a href="#" class="btn btn-secondary">Seven</a>
+  <a href="#" class="btn btn-secondary">Eight</a>
+  <a href="#" class="btn btn-secondary">Nine</a>
+  <a href="#" class="btn btn-secondary">Ten</a>
+  <a href="#" class="btn btn-secondary">Eleven</a>
+  <a href="#" class="btn btn-secondary">Twelve</a>
+  <a href="#" class="btn btn-secondary">Thirteen</a>
+  <a href="#" class="btn btn-secondary">Fourteen</a>
+  <a href="#" class="btn btn-secondary">Fifteen</a>
+  <a href="#" class="btn btn-secondary">Sixteen</a>
+  <a href="#" class="btn btn-secondary">Seventeen</a>
+  <a href="#" class="btn btn-secondary">Eighteen</a>
+  <a href="#" class="btn btn-secondary">Nineteen</a>
+</div>
 {% endexample %}

assets/scss/dashboard/_button.scss

@@ -75,8 +75,11 @@
 
 	>.btn,
 	>.dropdown {
-		margin-right: .5rem;
 		margin-bottom: .5rem;
+
+		&:not(:last-child) {
+			margin-right: .5rem;
+		}
 	}
 }