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/base/forms.scss

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

app/common/styles/base/mixins.scss

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 {

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