Override main, primary and secondary button colors

- Move color overrides to separate files
- Add full override for main, primary and secondary buttons

core/app/themes/suite8/css/components/_button-main.scss

@@ -0,0 +1,72 @@
+/**
+ * Override main button color and outline main button
+ */
+
+.btn-outline-main {
+  color: $main;
+  border-color: $main;
+}
+
+.btn-outline-main:hover {
+  color: $white;
+  background-color: $main;
+  border-color: $main;
+}
+
+.btn-outline-main:focus, .btn-outline-main.focus {
+  box-shadow: 0 0 0 0.2rem rgba(83, 77, 100, 0.5);
+}
+
+.btn-outline-main.disabled, .btn-outline-main:disabled {
+  color: $main;
+  background-color: transparent;
+}
+
+.btn-outline-main:not(:disabled):not(.disabled):active, .btn-outline-main:not(:disabled):not(.disabled).active,
+.show > .btn-outline-main.dropdown-toggle {
+  color: $white;
+  background-color: $main;
+  border-color: $main;
+}
+
+.btn-outline-main:not(:disabled):not(.disabled):active:focus, .btn-outline-main:not(:disabled):not(.disabled).active:focus,
+.show > .btn-outline-main.dropdown-toggle:focus {
+  box-shadow: 0 0 0 0.2rem rgba(83, 77, 100, 0.5);
+}
+
+.btn-main {
+  color: $white;
+  background-color: $main;
+  border-color: $main;
+}
+
+.btn-main:hover {
+  color: $white;
+  background-color: $bright-orange;
+  border-color: $bright-orange;
+}
+
+.btn-main:focus, .btn-main.focus {
+  color: $white;
+  background-color: $main;
+  border-color: $main;
+  box-shadow: 0 0 0 0.2rem rgba(83, 77, 100, 0.5);
+}
+
+.btn-main.disabled, .btn-main:disabled {
+  color: $white;
+  background-color: $main;
+  border-color: $main;
+}
+
+.btn-main:not(:disabled):not(.disabled):active, .btn-main:not(:disabled):not(.disabled).active,
+.show > .btn-main.dropdown-toggle {
+  color: $white;
+  background-color: $bright-orange;
+  border-color: $bright-orange;
+}
+
+.btn-main:not(:disabled):not(.disabled):active:focus, .btn-main:not(:disabled):not(.disabled).active:focus,
+.show > .btn-main.dropdown-toggle:focus {
+  box-shadow: 0 0 0 0.2rem rgba(83, 77, 100, 0.5);
+}

core/app/themes/suite8/css/components/_button-primary.scss

@@ -0,0 +1,72 @@
+/**
+ * Override primary button color and outline primary button
+ */
+
+.btn-outline-primary {
+  color: $primary;
+  border-color: $primary;
+}
+
+.btn-outline-primary:hover {
+  color: $white;
+  background-color: $primary;
+  border-color: $primary;
+}
+
+.btn-outline-primary:focus, .btn-outline-primary.focus {
+  box-shadow: 0 0 0 0.2rem rgba(118, 133, 143, 0.5);
+}
+
+.btn-outline-primary.disabled, .btn-outline-primary:disabled {
+  color: $primary;
+  background-color: transparent;
+}
+
+.btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active,
+.show > .btn-outline-primary.dropdown-toggle {
+  color: $white;
+  background-color: $primary;
+  border-color: $primary;
+}
+
+.btn-outline-primary:not(:disabled):not(.disabled):active:focus, .btn-outline-primary:not(:disabled):not(.disabled).active:focus,
+.show > .btn-outline-primary.dropdown-toggle:focus {
+  box-shadow: 0 0 0 0.2rem rgba(118, 133, 143, 0.5);
+}
+
+.btn-primary {
+  color: $white;
+  background-color: $primary;
+  border-color: $primary;
+}
+
+.btn-primary:hover {
+  color: $white;
+  background-color: $bright-orange;
+  border-color: $bright-orange;
+}
+
+.btn-primary:focus, .btn-primary.focus {
+  color: $white;
+  background-color: $primary;
+  border-color: $primary;
+  box-shadow: 0 0 0 0.2rem rgba(118, 133, 143, 0.5);
+}
+
+.btn-primary.disabled, .btn-primary:disabled {
+  color: $white;
+  background-color: $primary;
+  border-color: $primary;
+}
+
+.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active,
+.show > .btn-primary.dropdown-toggle {
+  color: $white;
+  background-color: $bright-orange;
+  border-color: $bright-orange;
+}
+
+.btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus,
+.show > .btn-primary.dropdown-toggle:focus {
+  box-shadow: 0 0 0 0.2rem rgba(118, 133, 143, 0.5);
+}

core/app/themes/suite8/css/components/_button-secondary.scss

@@ -0,0 +1,72 @@
+/**
+ * Override secondary button color and outline secondary button
+ */
+
+.btn-outline-secondary {
+  color: $secondary;
+  border-color: $secondary;
+}
+
+.btn-outline-secondary:hover {
+  color: $white;
+  background-color: $secondary;
+  border-color: $secondary;
+}
+
+.btn-outline-secondary:focus, .btn-outline-secondary.focus {
+  box-shadow: 0 0 0 0.2rem rgba(147, 164, 179, 0.5);
+}
+
+.btn-outline-secondary.disabled, .btn-outline-secondary:disabled {
+  color: $secondary;
+  background-color: transparent;
+}
+
+.btn-outline-secondary:not(:disabled):not(.disabled):active, .btn-outline-secondary:not(:disabled):not(.disabled).active,
+.show > .btn-outline-secondary.dropdown-toggle {
+  color: $white;
+  background-color: $secondary;
+  border-color: $secondary;
+}
+
+.btn-outline-secondary:not(:disabled):not(.disabled):active:focus, .btn-outline-secondary:not(:disabled):not(.disabled).active:focus,
+.show > .btn-outline-secondary.dropdown-toggle:focus {
+  box-shadow: 0 0 0 0.2rem rgba(147, 164, 179, 0.5);
+}
+
+.btn-secondary {
+  color: $white;
+  background-color: $secondary;
+  border-color: $secondary;
+}
+
+.btn-secondary:hover {
+  color: $white;
+  background-color: $bright-orange;
+  border-color: $bright-orange;
+}
+
+.btn-secondary:focus, .btn-secondary.focus {
+  color: $white;
+  background-color: $secondary;
+  border-color: $secondary;
+  box-shadow: 0 0 0 0.2rem rgba(147, 164, 179, 0.5);
+}
+
+.btn-secondary.disabled, .btn-secondary:disabled {
+  color: $white;
+  background-color: $secondary;
+  border-color: $secondary;
+}
+
+.btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active,
+.show > .btn-secondary.dropdown-toggle {
+  color: $white;
+  background-color: $bright-orange;
+  border-color: $bright-orange;
+}
+
+.btn-secondary:not(:disabled):not(.disabled):active:focus, .btn-secondary:not(:disabled):not(.disabled).active:focus,
+.show > .btn-secondary.dropdown-toggle:focus {
+  box-shadow: 0 0 0 0.2rem rgba(147, 164, 179, 0.5);
+}

core/app/themes/suite8/css/components/_button.scss

@@ -15,32 +15,6 @@ button {
   display: inline-block;
 }
 
-.btn-main {
-  color: #fff;
-  background-color: $main;
-  border-color: $main;
-}
-
-.btn-primary {
-  color: #fff;
-  background-color: $primary;
-  border-color: $primary;
-}
-
-.btn-secondary {
-  color: #fff;
-  background-color: $secondary;
-  border-color: $secondary;
-}
-
-.btn-main:hover,
-.btn-primary:hover,
-.btn-secondary:hover {
-  color: $white;
-  background-color: $bright-orange;
-  border-color: $bright-orange;
-}
-
 .login-button {
   background-color: $coral-pink;
   letter-spacing: 0.1em;
@@ -371,4 +345,3 @@ button.settings-button.dropdown-toggle::after {
 .minimise-button:hover {
   fill: $midnight-grey;
 }
-

core/app/themes/suite8/css/style.scss

@@ -6,7 +6,10 @@
 @import 'base/reset';
 
 @import 'components/button';
-@import 'components/buttondanger';
+@import 'components/button-main';
+@import 'components/button-primary';
+@import 'components/button-secondary';
+@import 'components/button-danger';
 @import 'components/checkbox';
 @import 'components/dropdown';
 @import 'components/dropdown-submenu';