Fix Borders in Outlined Button Group in textanswers view (#2085)

* add .outline-fix class for .btn-group

This class replaces bootstraps default strategy of using negative margins to hide double borders with specific css-selectors that hide and show specific borders.

Author: fekoch

evap/staff/templates/staff_evaluation_textanswers_section.html

@@ -35,7 +35,7 @@
 
                                     <input type="hidden" name="answer_id" value="{{ answer.id }}" />
 
-                                    <div class="btn-group btn-group-sm" role="group">
+                                    <div class="btn-group btn-group-sm outline-fix" role="group">
                                         <input type="radio" class="btn-check" name="action" value="publish" id="{{ answer.id }}-radio-publish" autocomplete="off" {% if answer.will_be_public %}checked{% endif %}>
                                         <label class="btn btn-outline-primary" for="{{ answer.id }}-radio-publish">{% trans 'Publish' %}</label>
 

evap/static/scss/_adjustments.scss

@@ -133,3 +133,24 @@ $alert-colors: (
     border-color: $input-focus-border-color;
     box-shadow: $input-focus-box-shadow;
 }
+
+// Change .btn-group outlined border style to fix double borders with outlined button style
+// see https://github.com/twbs/bootstrap/issues/25888
+.btn-group.outline-fix {
+
+    // If .btn is not the last element in the group, remove the right border.
+    // Also uses :has to not remove the right border if the next element is a disabled input
+    .btn:not(:last-child):has(+ :not(.btn-check[disabled])) {
+        border-right: 0;
+    }
+
+    // Explicitly disable the left border of disabled .btn's to use the right border of the previous button.
+    .btn-check[disabled] + .btn {
+        border-left: 0;
+    }
+
+    // Revert Bootstrap's hack, that uses negative margin which would appear as double borders
+    :not(.btn-check:first-child) + .btn {
+        margin-left: unset;
+    }
+}