From bf435f9e82d5c3ad8c9172caa8dfe48f4443f8ba Mon Sep 17 00:00:00 2001
From: Attila Csanyi <attila.csnyi@yahoo.co.uk>
Date: Wed, 21 Jun 2017 17:33:26 +0200
Subject: [PATCH] use bootstrap button group instead of separate buttons (#317)

---
 shared/src/components/layers/layers.component.html | 4 ++--
 shared/src/components/layers/layers.component.scss | 6 +-----
 2 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/shared/src/components/layers/layers.component.html b/shared/src/components/layers/layers.component.html
index a52d30fb..006f34a6 100644
--- a/shared/src/components/layers/layers.component.html
+++ b/shared/src/components/layers/layers.component.html
@@ -1,6 +1,6 @@
 <div class="text-center">
-    <span class="uhk__layer-switcher--wrapper" data-title="Layers: ">
-        <button type="button" class="btn btn-default btn-lg" *ngFor="let button of buttons; let index = index" (click)="selectLayer(index)"
+    <span role="group" class="uhk__layer-switcher--wrapper btn-group btn-group-lg" data-title="Layers: ">
+        <button type="button" class="btn btn-default" *ngFor="let button of buttons; let index = index" (click)="selectLayer(index)"
             [class.btn-primary]="index === current">
             {{ button }}
         </button>
diff --git a/shared/src/components/layers/layers.component.scss b/shared/src/components/layers/layers.component.scss
index e5f32993..d3c56ada 100644
--- a/shared/src/components/layers/layers.component.scss
+++ b/shared/src/components/layers/layers.component.scss
@@ -15,10 +15,6 @@
     }
 }
 
-button {
-    margin: 2px;
-}
-
 .uhk {
     &__layer-switcher {
         &--wrapper {
@@ -29,7 +25,7 @@ button {
                 content: attr(data-title);
                 display: inline-block;
                 position: absolute;
-                bottom: -0.3em;
+                bottom: 0.3em;
                 right: 100%;
                 font-size: 2.4rem;
                 padding-right: 0.25em;