ghost button style made

z · z · commit db34bf41dfb9 · 2017-11-20T16:13:41.000+05:30
diff --git a/utils/base.styles.js b/utils/base.styles.js
@@ -1,5 +1,7 @@
 import styled, { css } from 'react-emotion';
 
+const purplePrimary = '#7657fb';
+const whiteFull = '#ffffff';
 export const breakpoints = {
   xs: '@media screen and (max-width: 40em)',
   sm: '@media screen and (min-width: 40em) and (max-width: 52em)',
@@ -45,15 +47,18 @@ export const baseButton = css`
 
 export const Button = styled.a`
   ${baseButton};
-  background: ${props => (props.inverted ? '#7657fb' : '#fff')}
-  color: ${props => (props.inverted ? '#fff' : '#222')}
+  background: ${props => (props.inverted ? '#7657fb' : props.ghost ? '#fff' : '#fff')}
+  color: ${props => (props.inverted ? '#fff' : props.ghost ? purplePrimary : '#222')}
   padding: ${props => (props.large ? '0.8rem 2.25rem' : props.medium ? '0.6rem 1.2rem' : '0.2rem 1rem')};
   font-size: ${props => (props.large ? '1.8rem' : props.medium ? '1rem' : '1rem')}
+  outline:${props => (props.ghost ? `3px solid ${purplePrimary}` : 'none')}
+  outline-offset:${props => (props.ghost ? '-3px' : '0px')}
   cursor: pointer;
   user-select: none;
   -webkit-touch-callout: none;
   &:hover {
-    background: ${props => (props.inverted ? '#6f19ed' : '#eee')};
+    background: ${props => (props.inverted ? '#6f19ed' : props.ghost ? purplePrimary : '#eee')};
+    color: ${props => (props.inverted ? '#fff' : props.ghost ? whiteFull : '#222')}
   }
 `;
 
