Add hover styles

carbon-app · Oct 3, 2017 · de11ff0 · de11ff0
1 parent a3a90f9
commit de11ff0
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 1 deletion.
diff --git a/components/Button.js b/components/Button.js
@@ -24,6 +24,10 @@ export default props => (
         user-select: none;
       }
 
+      button:hover {
+        background: ${COLORS.HOVER} !important;
+      }
+
       button > span {
         font-size: 14px;
         line-height: 1;

diff --git a/components/Dropdown.js b/components/Dropdown.js
@@ -46,6 +46,10 @@ class Dropdown extends React.Component {
             border-bottom: 0.5px solid ${COLORS.SECONDARY};
           }
 
+          .dropdown-list-item:hover {
+            background: ${COLORS.HOVER};
+          }
+
           .dropdown-list-item:last-of-type {
             border-bottom: none;
             border-radius: 0px 0px 2px 2px;
@@ -107,6 +111,10 @@ class Dropdown extends React.Component {
             z-index: 1;
           }
 
+          .dropdown-display:hover {
+            background: ${COLORS.HOVER};
+          }
+
           .is-visible + .dropdown-list {
             display: block;
           }

diff --git a/components/Settings.js b/components/Settings.js
@@ -84,6 +84,10 @@ class Settings extends React.Component {
             cursor: pointer;
           }
 
+          .settings-display:hover {
+            background: ${COLORS.HOVER};
+          }
+
           .is-visible + .settings-settings {
             display: block;
           }

diff --git a/lib/constants.js b/lib/constants.js
@@ -324,7 +324,8 @@ export const COLORS = {
   BLACK: '#121212',
   PRIMARY: '#F8E81C',
   SECONDARY: '#fff',
-  GRAY: '#858585'
+  GRAY: '#858585',
+  HOVER: '#1F1F1F'
 }
 
 export const DEFAULT_CODE = `const pluckDeep = key => obj => key.split('.').reduce((accum, key) => accum[key], obj)