From f82fa31620cd9e84291525f6cebcd8e70e9862be Mon Sep 17 00:00:00 2001
From: Evonne <evonne@catalyst.net.nz>
Date: Tue, 10 Sep 2019 10:17:46 +1200
Subject: [PATCH] Button group styling and placement

Fixes for first button in button group that appear to have all four
corners rounded rather than just the left ones. Fixes placement of
button group on style guide sitting above the box.

behatnotneeded

Change-Id: I06e19a3633e2692ee6a8f97b13be7751833356af
---
 htdocs/theme/raw/sass/_custom.scss               | 10 +++-------
 htdocs/theme/raw/sass/components/_btn-group.scss |  4 ++++
 htdocs/theme/styleguide.php                      |  3 +++
 3 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/htdocs/theme/raw/sass/_custom.scss b/htdocs/theme/raw/sass/_custom.scss
index ad52678229..b6cfdcb5fc 100644
--- a/htdocs/theme/raw/sass/_custom.scss
+++ b/htdocs/theme/raw/sass/_custom.scss
@@ -830,13 +830,9 @@ div.form-group .form-control-label {
     vertical-align: top;
 }
 
-.btn-group {
-    font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
-}
-
-.json_editor_btn_add .btn-group > .btn-group:not(:last-child) > .btn, .btn-group > .btn:not(:last-child):not(.dropdown-toggle) {
-    border-top-right-radius: 0.25rem;
-    border-bottom-right-radius: 0.25rem;
+.json-editor-btn-add {
+    border-top-right-radius: $border-radius !important;
+    border-bottom-right-radius: $border-radius !important;
 }
 
 .errormsg {
diff --git a/htdocs/theme/raw/sass/components/_btn-group.scss b/htdocs/theme/raw/sass/components/_btn-group.scss
index 9cedf52dc0..cfc46ba015 100644
--- a/htdocs/theme/raw/sass/components/_btn-group.scss
+++ b/htdocs/theme/raw/sass/components/_btn-group.scss
@@ -2,6 +2,10 @@
 // Extenstion to Button groups so we can use forms as buttons
 // --------------------------------------------------
 
+.btn-group {
+    font-family: $font-family-sans-serif;
+}
+
 .btn-group .form-as-button {
     .btn {
         @include border-right-radius(0);
diff --git a/htdocs/theme/styleguide.php b/htdocs/theme/styleguide.php
index e5b21871c5..ca90334fa4 100644
--- a/htdocs/theme/styleguide.php
+++ b/htdocs/theme/styleguide.php
@@ -90,6 +90,9 @@ $inlinecss = <<<EOT
     .completed {
         color: #426600;
     }
+    p ~ div > .btn-group-top {
+      margin-top: 0;
+    }
 }
 </style>
 EOT;
-- 
GitLab