Task CR-999: update yes/no and gender quesiton types (Y/G)

assets/survey_themes/ls6_surveytheme/buttons/buttons.scss

@@ -86,4 +86,19 @@ $btn-font-size-sm: $font-size-xs;
     & [class^="ri-"], & [class*=" ri-"] {
         font-size : $font-size-base;
     }
-}
+}
+
+// btn-check START
+.yesno-button, .gender-button {
+    &.btn-group {
+        > .btn {
+            border-radius : 4px;
+            margin-right  : 0;
+            &:not(:last-child) {
+                border-radius : 4px;
+                margin-right  : 20px;
+            }
+        }
+    }
+}
+// btn-check END

assets/survey_themes/ls6_surveytheme/buttons/buttons_colors.scss

@@ -7,32 +7,26 @@ $btn-warning-color   : $warning;
 $btn-light-color     : $g-200;
 $btn-dark-color      : $g-900;
 $btn-disabled-color  : $g-600;
-
 $btn-hover-boxshadow : 0px 0px 0px 3px rgba(123, 97, 255, 0.4);
 $btn-focus-boxshadow : 4px 4px 0px rgba(123, 97, 255, 0.4);
-
 // outline variants
 *[class*="btn-outline-"] {
     background-color : $white;
     border           : 1px solid $g-900;
-
     &:hover {
         // default_outline_hover
         box-shadow       : $btn-hover-boxshadow;
         background-color : $white;
     }
-
     &:focus, &:active, &.active, &.dropdown-toggle.show, &.dropdown-toggle.show:focus, &.show {
         // default_outline_focus
         box-shadow       : $btn-focus-boxshadow;
         background-color : $white;
     }
-
     &.disabled, &[disabled] {
         background-color : $white;
         border           : 1px solid $g-600;
         color            : $g-600;
-
         &:hover, &:focus, &:active, &.active {
             background-color : $white;
             border           : 1px solid $g-600;
@@ -62,11 +56,9 @@ $btn-variants        : (
     outline-dark: $g-900,
     outline-cancel: $g-600,
 );
-
 @mixin button-variant($color, $variant) {
     $otherColorBtns : ('success', 'warning', 'danger');
     $font-color     : $white;
-
     @if (str-index($variant, 'outline-')) {
         color            : $color;
         border-color     : $color;
@@ -84,7 +76,6 @@ $btn-variants        : (
         @if index($otherColorBtns, $variant) {
             $font-color : $g-900;
         }
-
         background-color : $color;
         border-color     : $color;
         color            : $font-color;
@@ -107,7 +98,6 @@ $btn-variants        : (
             box-shadow       : none;
             border-color     : $g-400;
             opacity          : 1;
-
             &:hover, &:focus, &:active, &.active {
                 // default_disabled
                 color            : $g-600;
@@ -116,10 +106,8 @@ $btn-variants        : (
             }
         }
     }
-
 }
 
-
 @each $state, $value in $btn-variants {
     .btn-#{$state} {
         @include button-variant($value, $state);
@@ -129,7 +117,6 @@ $btn-variants        : (
 // btn-link should be outsourced to links.scss or whatever it will be called
 .btn-link {
     color : $btn-primary-color;
-
     &:hover, &:focus {
         color : $btn-primary-color;
     }
@@ -169,16 +156,50 @@ $btn-variants        : (
     border             : 1px solid #cccccc;
 }
 
-/* Multiplechoice bootstrap buttons unchecked focus*/
-.btn-check .btn-primary:focus, .btn-check:focus + .btn-primary {
-    background-color : #0d6efd;
-    border           : 1px solid #0d6efd;
-    box-shadow       : none;
-    color            : #fff;
+// btn-check START
+.btn-check + .btn {
+    color            : $g-900;
+    background-color : $white;
+    border           : 1px solid $g-900;
+    &:hover {
+        box-shadow : $btn-hover-boxshadow;
+    }
+    &:focus, &:active, &.active, &:active:focus {
+        box-shadow : $btn-focus-boxshadow;
+    }
 }
 
-.btn-check:focus:checked + .btn-primary, .btn-check .btn-primary:focus:checked {
-    background-color : #0a58ca;
-    border-color     : #0a53be;
-    color            : #fff;
-}
+.btn-check {
+    + .btn-primary {
+        &:hover {
+            color            : $white;
+            background-color : $btn-primary-color;
+            border-color     : $btn-primary-color;
+            box-shadow       : $btn-hover-boxshadow;
+        }
+        &:focus,
+        &:active,
+        &.active,
+        &:active:focus {
+            color            : $white;
+            background-color : $btn-primary-color;
+            border-color     : $btn-primary-color;
+            box-shadow       : $btn-focus-boxshadow;
+        }
+    }
+    &:focus + .btn-primary,
+    &:active + .btn-primary {
+        color            : $white;
+        background-color : $btn-primary-color;
+        border-color     : $btn-primary-color;
+        box-shadow       : $btn-focus-boxshadow;
+    }
+    &:checked + .btn-primary,
+    &:checked + .btn-primary:focus,
+    &:focus:checked + .btn-primary {
+        color            : $white;
+        background-color : $btn-primary-color;
+        border-color     : $btn-primary-color;
+    }
+}
+// btn-check END

themes/survey/ls6_surveytheme/css/theme.css

@@ -732,6 +732,15 @@ Responsive navbar-brand image CSS
   font-size: 1.14rem;
 }
 
+.yesno-button.btn-group > .btn, .gender-button.btn-group > .btn {
+  border-radius: 4px;
+  margin-right: 0;
+}
+.yesno-button.btn-group > .btn:not(:last-child), .gender-button.btn-group > .btn:not(:last-child) {
+  border-radius: 4px;
+  margin-right: 20px;
+}
+
 body {
   font-family: "IBMPlexSans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   font-weight: 400;