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/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 {