Change button styles from rounded to straight corners
This will create more visual consistency between the components
in the GUI since there are elements, such as text fields and
dropdowns that are styled with straight corners.
- Removes border radius from buttons
- Removes some redundant styles
- Adds input types that aren't currently inheriting
defined styles
Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: I6ff1bde91e2e57df01484dd20003925cd914ffa2
diff --git a/app/common/styles/base/buttons.scss b/app/common/styles/base/buttons.scss
index 541d15e..f97aa6d 100644
--- a/app/common/styles/base/buttons.scss
+++ b/app/common/styles/base/buttons.scss
@@ -1,14 +1,10 @@
-button,
-.button,
-.submit {
+button, .button, .submit, .btn, [type='button'] {
font-size: 1em;
@include fontFamilyBold;
text-transform: none;
- border-radius: 3px;
- padding: 0.5rem 2rem 0.5rem;
- height: auto;
- border: 0;
- overflow: hidden;
+ border-radius: 0;
+ padding: .5em 1em;
+ line-height: 1;
&:hover {
cursor: pointer;
}
@@ -30,13 +26,15 @@
.btn-primary {
color: $primebtn__text;
background: $primebtn__bg;
- min-height: 40px;
+ border: 2px solid $primebtn__bg;
&:hover {
background: lighten($primebtn__bg, 8%);
+ border-color: lighten($primebtn__bg, 8%);
@include fastTransition-all;
}
&.disabled {
background: $primebtn__disabled-bg;
+ border-color: $primebtn__disabled-bg;
color: $primebtn__disabled-txt;
@include fastTransition-all;
&:hover {
@@ -52,8 +50,8 @@
display: inline-block;
}
img {
- width: 18px;
- height: 18px;
+ width: 1.5em;
+ height: 1.5em;
display: inline-block;
}
}
@@ -61,11 +59,11 @@
color: $secbtn__text;
background: transparent;
border: 2px solid $secbtn__border;
- min-height: 40px;
&:hover {
color: $secbtn__text;
cursor: pointer;
background: $secbtn__bg;
+ border-color: $secbtn__text;
@include fastTransition-all;
}
&.disabled {
@@ -90,11 +88,10 @@
vertical-align: middle;
}
img {
- width: 18px;
- height: 18px;
+ width: 1.5em;
+ height: 1.5em;
display: inline-block;
- margin-right: 0.5em;
- margin-top: -3px;
+ margin-right: .5em;
}
}