Add dropdown caret to time owner dropdown on Date and Time Settings
- Use background-image strategy to add caret to dropdowns
- Standardize implementation by including mixin to dropdown__button
class and removing styled pseudo element
Resolves ibm-openbmc/dev#478
Tested: Running locally on Chrome only. Ran into network request
errors for newly added svg assets when mounting overlay
Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: I714c2515282676f368eafb2560177d2935680e23
diff --git a/app/assets/images/icon-caret-down-disabled.svg b/app/assets/images/icon-caret-down-disabled.svg
new file mode 100644
index 0000000..d352a8c
--- /dev/null
+++ b/app/assets/images/icon-caret-down-disabled.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="8" height="4" fill="#999999"><path d="M8 0L4 4 0 0z"/></svg>
\ No newline at end of file
diff --git a/app/assets/images/icon-caret-down.svg b/app/assets/images/icon-caret-down.svg
new file mode 100644
index 0000000..83a1d98
--- /dev/null
+++ b/app/assets/images/icon-caret-down.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="8" height="4" fill="#2d60e5"><path d="M8 0L4 4 0 0z"/></svg>
\ No newline at end of file
diff --git a/app/common/styles/base/forms.scss b/app/common/styles/base/forms.scss
index 73c25c1..eb633d4 100644
--- a/app/common/styles/base/forms.scss
+++ b/app/common/styles/base/forms.scss
@@ -92,12 +92,15 @@
//Custom select
select{
border-radius: 0px;
- height:auto;
+ height: auto;
+ padding-right: 0.5rem; //override inherited Foundation style
@include fastTransition-all;
@include bgImage__arrowDown-primary;
&:focus {
border-color: $lightbg__accent;
- @include bgImage__arrowDown-accent;
box-shadow: 0 0 0;
}
+ &[disabled] {
+ @include bgImage__arrowDown-disabled;
+ }
}
diff --git a/app/common/styles/base/mixins.scss b/app/common/styles/base/mixins.scss
index c29936d..e95d949 100644
--- a/app/common/styles/base/mixins.scss
+++ b/app/common/styles/base/mixins.scss
@@ -52,15 +52,19 @@
//Custom SVG arrow
@mixin bgImage__arrowDown-primary {
- background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='32' height='24' viewBox='0 0 32 24'><polygon points='0,0 32,0 16,24' style='fill: #19273c'></polygon></svg>");
+ background-image: url(../assets/images/icon-caret-down.svg);
+ background-size: 0.8em;
+ background-repeat: no-repeat;
+ background-position-y: center;
+ background-position-x: calc(100% - .5em);
}
-@mixin bgImage__arrowDown-accent {
- background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='32' height='24' viewBox='0 0 32 24'><polygon points='0,0 32,0 16,24' style='fill: #2d60e5'></polygon></svg>");
-}
-
-@mixin bgImage__arrowDown-grey {
- background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='32' height='24' viewBox='0 0 32 24'><polygon points='0,0 32,0 16,24' style='fill: #b8c1c1'></polygon></svg>");
+@mixin bgImage__arrowDown-disabled {
+ background-image: url(../assets/images/icon-caret-down-disabled.svg);
+ background-size: 0.8em;
+ background-repeat: no-repeat;
+ background-position-y: center;
+ background-position-x: calc(100% - .5em);
}
@mixin calcColumn-5 {
diff --git a/app/common/styles/components/form-elements.scss b/app/common/styles/components/form-elements.scss
index 5c87a35..8b26339 100644
--- a/app/common/styles/components/form-elements.scss
+++ b/app/common/styles/components/form-elements.scss
@@ -1,26 +1,17 @@
// Drop downs
.dropdown__button {
position: relative;
- padding: .5em .8em;
+ padding-top: .5em;
+ padding-bottom: .5em;
+ padding-left: .5em;
+ padding-right: 1.5em;
margin-top: 0;
border: 1px solid $input-border;
min-width: 70px;
- padding-right: 25px;
font-weight: 400;
- &.active,
- &:hover {
- background: $dropdown__focus-bg;
- }
- &:after {
- content: '\25B8';
- display: inline-block;
- margin-left: 5px;
- font-size: .8em;
- transform: translateY(-50%) rotate(90deg);
- color: $lightbg__primary;
- position: absolute;
- right: .8em;
- top: 50%;
+ @include bgImage__arrowDown-primary;
+ &[disabled] {
+ @include bgImage__arrowDown-disabled;
}
}
diff --git a/app/configuration/styles/date-time.scss b/app/configuration/styles/date-time.scss
index cba0515..65d88a8 100644
--- a/app/configuration/styles/date-time.scss
+++ b/app/configuration/styles/date-time.scss
@@ -17,7 +17,7 @@
.date-time__owner-dropdown {
width: 200px;
&:hover {
- background: $dropdown__focus-bg;
+ background-color: $dropdown__focus-bg;
}
}
.date-time__ntp-servers{
