[beast: 15/47] EBEAST: vc/button-bar.vue: add <vc-button-bar/> for tight button grouping

[Tim Janik <timj src gnome org>]

commit cd74340d05faeca23594b1f110a2bfa3cffe3580
Author: Tim Janik <timj gnu org>
Date:   Tue Apr 11 01:16:00 2017 +0200

    EBEAST: vc/button-bar.vue: add <vc-button-bar/> for tight button grouping
    
    Signed-off-by: Tim Janik <timj gnu org>

 ebeast/vc/button-bar.vue |   35 +++++++++++++++++++++++++++++++++++
 1 files changed, 35 insertions(+), 0 deletions(-)
---
diff --git a/ebeast/vc/button-bar.vue b/ebeast/vc/button-bar.vue
new file mode 100644
index 0000000..b1a39dd
--- /dev/null
+++ b/ebeast/vc/button-bar.vue
@@ -0,0 +1,35 @@
+<!-- GNU LGPL v2.1+: http://www.gnu.org/licenses/lgpl.html -->
+
+<docs>
+  ## vc-button-bar - A container for tight packing of buttons
+  ### Props:
+  ### Events:
+  ### Slots:
+  - **slot** - All contents passed into this element will be packed tightly and styled as buttons.
+</docs>
+
+<style lang="less">
+  @import 'styles.less';
+  .vc-button-bar {
+      display: inline-flex; background-color: @vc-button-border;
+      border: 1px solid @vc-button-border;
+      border-radius: @vc-button-radius; }
+  .vc-button-bar .vc-button,
+  .vc-button-bar button                        { margin: 0 0 0 1px; }
+  .vc-button-bar .vc-button:first-of-type,
+  .vc-button-bar button:first-of-type  { margin-left: 0; }
+  .vc-button-bar > .vc-button:first-of-type,
+  .vc-button-bar > button:first-of-type        { border-top-left-radius: @vc-button-radius; 
border-bottom-left-radius: @vc-button-radius; }
+  .vc-button-bar > .vc-button:last-of-type,
+  .vc-button-bar > button:last-of-type { border-top-right-radius: @vc-button-radius; 
border-bottom-right-radius: @vc-button-radius; }
+</style>
+
+<template>
+  <span class="vc-button-bar" ><slot class="vc-slot"></slot></span>
+</template>
+
+<script>
+module.exports = {
+  name: 'vc-button-bar',
+};
+</script>