Update button variant styles
Adding styles to leverage bootstrap-vue button components.
Using the link variant as a replacement for our current 'ghost'
button style. Use $enable-rounded flag to disable rounded
corners. This will take care of all components with rounded
corners (input fields, modals, etc).
Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: Ie48f19a76698f896d9ebe7e72e9c0575f6db80c1
diff --git a/src/assets/styles/_buttons.scss b/src/assets/styles/_buttons.scss
new file mode 100644
index 0000000..02b0cae
--- /dev/null
+++ b/src/assets/styles/_buttons.scss
@@ -0,0 +1,27 @@
+.btn {
+ font-weight: $headings-font-weight;
+ svg {
+ vertical-align: sub;
+ margin-left: $spacer / 2;
+ }
+}
+
+.btn-primary {
+ fill: $white;
+}
+
+.btn-secondary {
+ fill: $white;
+ @extend .btn-secondary-dark;
+}
+
+.btn-link {
+ fill: $primary;
+ text-decoration: none !important;
+ &:focus {
+ box-shadow: $btn-focus-box-shadow;
+ }
+ &:hover {
+ fill: darken($primary, 15%);
+ }
+}
\ No newline at end of file