Add new style guide to global button style
- Updated new style guide for Primary, Secondary and Link button variants
- Changed box-shadow style from outer to inside on focus and active state
- Updated font weight from bold to regular for normal buttons and font
weight bold for link button.
Signed-off-by: Suren Neware <sneware9@in.ibm.com>
Change-Id: I38ca94baa9daec3fd03b830fc7b6d676fcce15b0
diff --git a/src/assets/styles/bmc/custom/_buttons.scss b/src/assets/styles/bmc/custom/_buttons.scss
index 3f11130..e927d24 100644
--- a/src/assets/styles/bmc/custom/_buttons.scss
+++ b/src/assets/styles/bmc/custom/_buttons.scss
@@ -1,5 +1,4 @@
.btn {
- font-weight: $headings-font-weight;
padding-top: $spacer / 2;
padding-right: $spacer;
padding-bottom: $spacer / 2;
@@ -10,34 +9,72 @@
svg + span {
margin-left: $spacer / 4;
}
+ &:disabled {
+ color: gray("600");
+ fill: currentColor;
+ box-shadow: none !important;
+ &:not(.btn-link) {
+ border-color: gray("400");
+ background-color: gray("400");
+ }
+ }
}
.btn-primary {
fill: currentColor;
+ &:focus,
+ &:not(:disabled):not(.disabled):active:focus {
+ border-color: $white;
+ box-shadow: inset 0 0 0 3px theme-color('primary'), inset 0 0 0 5px $white;
+ }
}
.btn-secondary {
fill: currentColor;
+ &:focus,
+ &:not(:disabled):not(.disabled):active:focus {
+ border-color: $white;
+ box-shadow: inset 0 0 0 3px theme-color('secondary'), inset 0 0 0 5px $white;
+ }
}
+// Global style for all button link
.btn-link {
+ font-weight: $headings-font-weight;
fill: theme-color("primary");
text-decoration: none !important;
-
- &:focus {
- box-shadow: $btn-focus-box-shadow;
- }
&:hover {
- fill: darken(theme-color("primary"), 15%);
+ background-color: gray("200");
+ color: theme-color("primary");
+ }
+ &:active {
+ background-color: gray("300");
+ }
+ &:focus {
+ box-shadow: inset 0 0 0 2px theme-color("primary");
+ color: theme-color("primary");
+ outline: none;
+ }
+ &:disabled {
+ box-shadow: $btn-focus-box-shadow;
}
}
-.btn:disabled {
- color: gray("600");
- fill: currentColor;
-
- &:not(.btn-link) {
- border-color: gray("400");
- background-color: gray("400");
+// Datepicker and Password toggle buttons
+.input-action {
+ position: absolute;
+ right: 0;
+}
+.input-action .btn-link,
+.input-action-btn {
+ position: absolute;
+ right: 1px;
+ top: 1px;
+ z-index: $zindex-dropdown + 1;
+ padding: 0;
+ width: 36px;
+ height: 35.8px;
+ svg {
+ vertical-align: sub;
}
}
\ No newline at end of file