commit de382089de4cf920a59e75124da3f4d7cac056d0
author Yoshie Muranaka <yoshiemuranaka@gmail.com> Tue Apr 30 13:56:10 2019 -0500
committer Gunnar Mills <gmills@us.ibm.com> Tue May 07 14:59:27 2019 +0000
tree 60b52805839e500cbda7f2f0ab2ad3444d040882
parent 1548677275eb39a0c29d188bcb3acd0515236dd4

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

app/common/styles/components/form-elements.scss

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;
   }
 }