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
diff --git a/src/assets/styles/_obmc-custom.scss b/src/assets/styles/_obmc-custom.scss
index 7deb6cb..e87e01b 100644
--- a/src/assets/styles/_obmc-custom.scss
+++ b/src/assets/styles/_obmc-custom.scss
@@ -1,3 +1,5 @@
+$enable-rounded: false;
+
// Required
@import "~bootstrap/scss/functions";
@import "./functions";
@@ -49,3 +51,5 @@
@import "~bootstrap/scss/print";
@import "~bootstrap-vue/src/index.scss";
+
+@import "./buttons";
\ No newline at end of file
diff --git a/src/views/AccessControl/LocalUserManagement/LocalUserManagement.vue b/src/views/AccessControl/LocalUserManagement/LocalUserManagement.vue
index bc2200e..6ca43f3 100644
--- a/src/views/AccessControl/LocalUserManagement/LocalUserManagement.vue
+++ b/src/views/AccessControl/LocalUserManagement/LocalUserManagement.vue
@@ -4,12 +4,12 @@
<b-row>
<b-col lg="10">
<b-button @click="initModalSettings" variant="link">
- <icon-settings />
Account policy settings
+ <icon-settings />
</b-button>
<b-button @click="initModalUser(null)" variant="primary">
- <icon-add />
Add user
+ <icon-add />
</b-button>
</b-col>
</b-row>