diff --git a/packages/hover-react/src/index.js b/packages/hover-react/src/index.js index 6c6ef30f2..517b5185b 100644 --- a/packages/hover-react/src/index.js +++ b/packages/hover-react/src/index.js @@ -3,6 +3,8 @@ import styled from 'styled-components' import React from 'react' const PopOver = styled.div` + --microlink-hover-background-color: var(--microlink-background-color, white); + position: absolute; overflow: hidden; visibility: hidden; @@ -16,8 +18,16 @@ const PopOver = styled.div` padding: 0.5rem; border-radius: 4px; + .microlink_card { + border: 0; + } + + border: 1px solid var(--microlink-border-color, #e1e8ed); + background-color: var(--microlink-hover-background-color); + &:hover { box-shadow: rgba(0, 0, 0, 0.12) 0px 30px 60px; + border-color: var(--microlink-hover-border-color, #f5f8fa); } ` @@ -31,23 +41,6 @@ const Wrapper = styled.span` opacity: 1; margin-bottom: 15px; } - - .microlink_card { - border: none; - } - - .microlink_card:hover { - background-color: inherit; - } - - .microlink_hover { - background-color: white; - border: 1px solid #e1e8ed; - } - - .microlink_hover:hover { - border-color: #f5f8fa; - } ` const withHover = ({ LinkComponent, ...props }) => ( diff --git a/packages/hover-react/stories/index.js b/packages/hover-react/stories/index.js index 94a999c6a..624a04d2f 100644 --- a/packages/hover-react/stories/index.js +++ b/packages/hover-react/stories/index.js @@ -118,16 +118,10 @@ storiesOf('decorator', module) const MicrolinkHoverLink = withMicrolinkHover(Link) const CustomCenter = styled(Center)` + --microlink-border-color: #666; + --microlink-hover-border-color: #999; color: white; background: #1a1a1a; - - .microlink_card { - border-color: #999; - } - - .microlink_card:hover { - border-color: #666; - } ` return ( diff --git a/packages/hover-vanilla/docs/collectednotes.html b/packages/hover-vanilla/docs/collectednotes.html index 0aed9fdd4..3c6e6bca4 100644 --- a/packages/hover-vanilla/docs/collectednotes.html +++ b/packages/hover-vanilla/docs/collectednotes.html @@ -325,22 +325,12 @@

Christian Gill

diff --git a/packages/hover-vanilla/docs/index.html b/packages/hover-vanilla/docs/index.html index aa0481a23..bcad1ae14 100644 --- a/packages/hover-vanilla/docs/index.html +++ b/packages/hover-vanilla/docs/index.html @@ -57,6 +57,10 @@ diff --git a/packages/react/src/components/Card/CardWrap.js b/packages/react/src/components/Card/CardWrap.js index 0822bc137..72b13fcad 100644 --- a/packages/react/src/components/Card/CardWrap.js +++ b/packages/react/src/components/Card/CardWrap.js @@ -34,8 +34,8 @@ const hoverStyle = css` transition-property: background, border-color; will-change: background, border-color; &:hover { - background: #f5f8fa; - border-color: rgba(136, 153, 166, 0.5); + background-color: var(--microlink-hover-background-color, #f5f8fa); + border-color: var(--microlink-hover-border-color, #8899A680); } ` @@ -45,19 +45,18 @@ const rtlStyle = ({ cardSize }) => css` const baseStyle = css( () => ` - max-width: 500px; - background-color: #fff; - border-width: 1px; - border-style: solid; - border-color: #e1e8ed; + max-width: var(--microlink-max-width, 500px); + background-color: var(--microlink-background-color, #fff); + border-width: var(--microlink-border-width, 1px); + border-style: var(--microlink-border-style, solid); + border-color: var(--microlink-border-color, #e1e8ed); + color: var(--microlink-color, #181919); overflow: hidden; - color: #181919; font-family: ${font.sans}; display: flex; text-decoration: none; opacity: 1; position: relative; - transition-duration: ${speed.medium}; transition-timing-function: ${animation.medium};