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;
}
}
diff --git a/app/common/styles/base/forms.scss b/app/common/styles/base/forms.scss
index eb633d4..21253e7 100644
--- a/app/common/styles/base/forms.scss
+++ b/app/common/styles/base/forms.scss
@@ -17,14 +17,16 @@
input[type='tel'],
input[type='url'],
input[type='text'],
+input[type='date'],
+input[type='time'],
textarea {
border-radius: 0px;
border: 1px solid $input-border;
- height: 3.1em;
margin: 0;
background: $white;
box-shadow: 0 0 0;
transition: none !important;
+ max-height: 2.1em;
&:focus {
border-color: $medgrey;
box-shadow: 0 -3px $field__focus inset;
@@ -94,13 +96,20 @@
border-radius: 0px;
height: auto;
padding-right: 0.5rem; //override inherited Foundation style
+ border-color: $input-border;
@include fastTransition-all;
@include bgImage__arrowDown-primary;
&:focus {
- border-color: $lightbg__accent;
box-shadow: 0 0 0;
}
&[disabled] {
@include bgImage__arrowDown-disabled;
}
}
+
+#login__form {
+ input {
+ height: 3em;
+ max-height: none;
+ }
+}
diff --git a/app/common/styles/base/mixins.scss b/app/common/styles/base/mixins.scss
index ead5924..6b68114 100644
--- a/app/common/styles/base/mixins.scss
+++ b/app/common/styles/base/mixins.scss
@@ -47,11 +47,11 @@
//Transitions mixin
@mixin fastTransition-all {
- transition: all 0.5s ease;
+ transition: all $duration--fast-02 ease;
}
@mixin slowTransition-all {
- transition: all 1.5s ease;
+ transition: all $duration--slow-02 ease;
}
@mixin page-transition {
diff --git a/app/common/styles/base/variables.scss b/app/common/styles/base/variables.scss
index e69de29..0e09f86 100755
--- a/app/common/styles/base/variables.scss
+++ b/app/common/styles/base/variables.scss
@@ -0,0 +1,6 @@
+$duration--fast-01: 70ms; //Micro-interactions such as button and toggle
+$duration--fast-02: 110ms; //Micro-interactions such as fade
+$duration--moderate-01: 150ms; //Micro-interactions, small expansion, short distance movements
+$duration--moderate-02: 240ms; //Expansion, system communication, toast
+$duration--slow-01: 400ms; //Large expansion, important system notifications
+$duration--slow-02: 700ms; //Background dimming
\ No newline at end of file
diff --git a/app/common/styles/elements/content-search.scss b/app/common/styles/elements/content-search.scss
index 5fa8ef2..4f4dfa4 100644
--- a/app/common/styles/elements/content-search.scss
+++ b/app/common/styles/elements/content-search.scss
@@ -3,7 +3,6 @@
.content__search {
width: 100%;
- display: inline-block;
float: left;
position: relative;
margin-right: 1em;
@@ -14,6 +13,8 @@
border: 1px solid $input-border;
padding-left: 40px;
padding-right: 5px;
+ height: 3em;
+ max-height: none;
&:focus {
box-shadow: none;
}
@@ -41,8 +42,9 @@
.search-submit__wrapper {
position: absolute;
width: auto;
- top: 0.2em;
- right: 0.2em;
+ height: 100%;
+ top: 0;
+ right: 0;
}
.content__search-submit {
display: inline-block;
@@ -54,6 +56,7 @@
font-size: .8em;
border: 0;
width: auto;
+ height: 100%;
&:hover {
cursor: pointer;
}
diff --git a/app/common/styles/elements/toggle-filter.scss b/app/common/styles/elements/toggle-filter.scss
index 7448827..ebdcf91 100644
--- a/app/common/styles/elements/toggle-filter.scss
+++ b/app/common/styles/elements/toggle-filter.scss
@@ -17,15 +17,10 @@
button {
margin: 3px -3px;
padding: .6em 2em;
- min-height: 2.1em;
font-size: .9em;
font-weight: 700;
border-radius: 0;
display: inline-block;
- &.first,
- &.last {
- border-radius: 3px;
- }
}
.btn-primary {
border: 2px solid $primebtn__bg;
diff --git a/app/configuration/styles/date-time.scss b/app/configuration/styles/date-time.scss
index 65d88a8..80d4b17 100644
--- a/app/configuration/styles/date-time.scss
+++ b/app/configuration/styles/date-time.scss
@@ -2,7 +2,6 @@
.time__form {
input {
- height: 2.1em;
margin-bottom: 0em;
}
@@ -31,9 +30,6 @@
}
.date-time__metadata-block {
list-style-type: none;
- width: 47%;
- margin-bottom: .7em;
- margin-top: 1.8em;
margin-right: .7em;
margin-left: 3em;
display: inline;
@@ -55,7 +51,6 @@
}
.date-time__dns-remove {
color: $medblue;
- height: 2.1em;
opacity: 1;
margin-left: 1em;
&:hover {
diff --git a/app/configuration/styles/firmware.scss b/app/configuration/styles/firmware.scss
index f3dc865..6d3c00f 100644
--- a/app/configuration/styles/firmware.scss
+++ b/app/configuration/styles/firmware.scss
@@ -105,26 +105,18 @@
label {
font-weight: 700;
}
- input {
- height: 2.4em;
- }
- .button {
- min-width: 210px;
- width: auto;
- margin-top: 1em;
- }
}
.firmware__upload-file-name {
text-transform: none;
}
.firmware__upload-chooser {
+ display: inline-block;
width: 100%;
background: $lightgrey;
padding-left: 1em;
padding-right: 1em;
margin-bottom: 1em;
.button {
- vertical-align: middle;
margin: 1em .5em 1em 0;
min-width: 3em;
}
@@ -132,7 +124,7 @@
@include indeterminate-bar;
}
@include mediaQuery(medium) {
- width: 70%;
+ width: 70%;
}
}
.firmware__upload-station {
@@ -145,6 +137,10 @@
padding-top: 2em;
padding-left: 1em;
padding-bottom: 50px;
+ padding-right: 0;
+ .button {
+ margin-top: 15px;
+ }
}
diff --git a/app/configuration/styles/network.scss b/app/configuration/styles/network.scss
index b0de4f7..61a6cb6 100644
--- a/app/configuration/styles/network.scss
+++ b/app/configuration/styles/network.scss
@@ -11,7 +11,6 @@
text-align: left;
}
input {
- height: 2.1em;
margin-bottom: 1.2em;
}
@@ -63,7 +62,6 @@
}
.network-config_remove-button {
color: $medblue;
- height: 2.1em;
margin-left: 1em;
opacity: 1;
&:hover {
diff --git a/app/server-control/styles/power-operations.scss b/app/server-control/styles/power-operations.scss
index 6ffc718..192bf70 100644
--- a/app/server-control/styles/power-operations.scss
+++ b/app/server-control/styles/power-operations.scss
@@ -91,7 +91,6 @@
.btn-secondary {
margin-bottom: .5em;
margin-right: 1em;
- font-size: .9em;
display: block;
min-width: 240px;
@include mediaQuery(medium) {
diff --git a/app/server-control/styles/power-usage.scss b/app/server-control/styles/power-usage.scss
index f45a510..59ec4e7 100644
--- a/app/server-control/styles/power-usage.scss
+++ b/app/server-control/styles/power-usage.scss
@@ -2,7 +2,6 @@
.power-usage__form {
input {
- height: 2.1em;
margin-bottom: 0em;
}
diff --git a/app/server-health/styles/log.scss b/app/server-health/styles/log.scss
index bf2d27f..cc58a60 100644
--- a/app/server-health/styles/log.scss
+++ b/app/server-health/styles/log.scss
@@ -42,14 +42,9 @@
button {
margin: 0px -3px;
padding: .6em 2em;
- min-height: 2.1em;
font-size: .9em;
font-weight: 700;
border-radius: 0;
- &.first,
- &.last {
- border-radius: 3px;
- }
@media (min-width: 583px) {
&.last {
border-left: 0;
@@ -66,7 +61,6 @@
float:left;
input {
width: 170px;
- height: 2.1rem;
}
label {
height: 0;
diff --git a/app/server-health/styles/syslog.scss b/app/server-health/styles/syslog.scss
index f887ae1..1e517ea 100644
--- a/app/server-health/styles/syslog.scss
+++ b/app/server-health/styles/syslog.scss
@@ -43,7 +43,6 @@
button {
padding: .6em 2em;
margin: 0px -1px;
- min-height: 2.1em;
font-size: .9em;
font-weight: 700;
border-radius: 0;
@@ -67,7 +66,6 @@
float:left;
input {
width: 170px;
- height: 2.1rem;
}
label {
height: 0;
@@ -147,7 +145,6 @@
width: 25em;
margin-top: 0;
text-align: left;
- border: 0.1em solid;
}
.dropdown__wrapper {
width: 25em;
diff --git a/app/users/styles/user-accounts.scss b/app/users/styles/user-accounts.scss
index 1027229..869b68b 100644
--- a/app/users/styles/user-accounts.scss
+++ b/app/users/styles/user-accounts.scss
@@ -1,5 +1,3 @@
-$userInputHeight: 40px;
-
.user-list__tbl {
.btn-edit,
.btn-delete {
@@ -35,13 +33,10 @@
font-weight: 700;
margin-right: 4em;
}
+ select,
input {
width: 225px;
- height: $userInputHeight;
- }
- select {
width: 225px;
- height: $userInputHeight;
}
fieldset {
display: block;
@@ -64,7 +59,7 @@
.password-toggle {
position: absolute;
right: 5px;
- top:.8em;
+ top: .6em;
padding: 3px;
margin-right: 20px;
color: $primebtn__bg;