Merge pull request #2829 from weseek/imprv/gw3969-apply-colors-to-three-stranded-button-1

Imprv/gw3969 apply colors to three stranded button 1

src/client/styles/scss/_mixins.scss

@@ -223,3 +223,15 @@
   transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
   transition-duration: 300ms;
 }
+
+@mixin three-stranded-button($textColor, $borderColor, $bgColorHoverAndActive, $bgColor: white) {
+  color: $textColor;
+  background-color: $bgColor;
+  border-color: $borderColor;
+  &:hover,
+  &:active {
+    color: $textColor;
+    background-color: $bgColorHoverAndActive;
+    border-color: $borderColor;
+  }
+}

src/client/styles/scss/theme/default.scss

@@ -103,6 +103,13 @@ html[light] {
 
   @import 'apply-colors';
   @import 'apply-colors-light';
+
+  // Button
+  .grw-three-stranded-button {
+    .btn.btn-outline-primary {
+      @include three-stranded-button($primary, lighten($primary, 65%), lighten($primary, 70%));
+    }
+  }
 }
 
 //== Dark Mode
@@ -195,4 +202,7 @@ html[dark] {
 
   @import 'apply-colors';
   @import 'apply-colors-dark';
+
+  // Button
+  // [TODO: appply colors to three stranded button]
 }

src/client/styles/scss/theme/mono-blue.scss

@@ -88,6 +88,12 @@ html[light] {
       }
     }
   }
+  // Button
+  .grw-three-stranded-button {
+    .btn.btn-outline-primary {
+      @include three-stranded-button($primary, lighten($primary, 65%), lighten($primary, 70%));
+    }
+  }
 }
 
 html[dark] {
@@ -189,4 +195,11 @@ html[dark] {
   .table {
     color: white;
   }
+
+  // Button
+  .grw-three-stranded-button {
+    .btn.btn-outline-primary {
+      @include three-stranded-button(lighten($primary, 30%), $primary, darken($primary, 10%), darken($primary, 20%));
+    }
+  }
 }