summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--app/common/styles/base/buttons.scss29
-rw-r--r--app/common/styles/base/forms.scss13
-rw-r--r--app/common/styles/base/mixins.scss4
-rwxr-xr-xapp/common/styles/base/variables.scss6
-rw-r--r--app/common/styles/elements/content-search.scss9
-rw-r--r--app/common/styles/elements/toggle-filter.scss5
-rw-r--r--app/configuration/styles/date-time.scss5
-rw-r--r--app/configuration/styles/firmware.scss16
-rw-r--r--app/configuration/styles/network.scss2
-rw-r--r--app/server-control/styles/power-operations.scss1
-rw-r--r--app/server-control/styles/power-usage.scss1
-rw-r--r--app/server-health/styles/log.scss6
-rw-r--r--app/server-health/styles/syslog.scss3
-rw-r--r--app/users/styles/user-accounts.scss9
14 files changed, 46 insertions, 63 deletions
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 @@ button,
.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 @@ button,
display: inline-block;
}
img {
- width: 18px;
- height: 18px;
+ width: 1.5em;
+ height: 1.5em;
display: inline-block;
}
}
@@ -61,11 +59,11 @@ button,
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 @@ button,
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='search'],
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 @@ select{
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 @@ $userInputHeight: 40px;
font-weight: 700;
margin-right: 4em;
}
+ select,
input {
width: 225px;
- height: $userInputHeight;
- }
- select {
width: 225px;
- height: $userInputHeight;
}
fieldset {
display: block;
@@ -64,7 +59,7 @@ $userInputHeight: 40px;
.password-toggle {
position: absolute;
right: 5px;
- top:.8em;
+ top: .6em;
padding: 3px;
margin-right: 20px;
color: $primebtn__bg;
OpenPOWER on IntegriCloud