MAX-10493 Add hover color for trigger icon

predixdesignsystem · Dec 8, 2018 · aa9d9b4 · aa9d9b4
1 parent 2c53d8f
commit aa9d9b4
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 1 deletion.
diff --git a/css/px-product-switcher-styles.html b/css/px-product-switcher-styles.html
@@ -17,7 +17,7 @@
 <dom-module id="px-product-switcher-styles">
 <template>
 <style>
-:host{--px-dropdown-item-icon-size:22px;--px-dropdown-item-padding:20px;--px-dropdown-item-height:4rem;--px-dropdown-border-color:var(--px-product-switcher-border-color, #0C1419);--px-dropdown-text-color:var(--px-product-switcher-text-color, #B6C3CC);--px-dropdown-text-color--selected:var(--px-product-switcher-text-color--selected, #B6C3CC);--px-dropdown-bg-color:var(--px-product-switcher-background-color, #0C1419);--px-dropdown-bg-color--hover:var(--px-product-switcher-background-color--hover, #121F26);--px-dropdown-bg-color--selected:var(--px-product-switcher-background-color--selected, #09819C);--px-dropdown-bg-color--selected--mobile:var(--px-product-switcher-background-color--selected--mobile, #1B2A33);--px-dropdown-max-height:40rem;--px-dropdown-min-width:19.3333rem}:host([mobile]){--px-dropdown-min-width:0}.trigger{color:var(--px-base-text-color,#B6C3CC);padding:0 5px;outline:0}
+:host{--px-dropdown-item-icon-size:22px;--px-dropdown-item-padding:20px;--px-dropdown-item-height:4rem;--px-dropdown-border-color:var(--px-product-switcher-border-color, #0C1419);--px-dropdown-text-color:var(--px-product-switcher-text-color, #B6C3CC);--px-dropdown-text-color--selected:var(--px-product-switcher-text-color--selected, #B6C3CC);--px-dropdown-bg-color:var(--px-product-switcher-background-color, #0C1419);--px-dropdown-bg-color--hover:var(--px-product-switcher-background-color--hover, #121F26);--px-dropdown-bg-color--selected:var(--px-product-switcher-background-color--selected, #09819C);--px-dropdown-bg-color--selected--mobile:var(--px-product-switcher-background-color--selected--mobile, #1B2A33);--px-dropdown-max-height:40rem;--px-dropdown-min-width:19.3333rem}:host([mobile]){--px-dropdown-min-width:0}.trigger{color:var(--px-base-text-color,#B6C3CC);padding:0 5px;outline:0}.trigger:focus,.trigger:hover{color:var(--px-btn-bare-color--hover,#007acc)}
 </style>
 </template>
 </dom-module>
diff --git a/sass/px-product-switcher.scss b/sass/px-product-switcher.scss
@@ -50,4 +50,9 @@
   outline:none;
 }
 
+.trigger:focus,
+.trigger:hover {
+  color: var(--px-btn-bare-color--hover, #007acc);
+}
+
 // Trumps