@fluent-windows/core/es/Card/Card.styled.js

React components that inspired by Microsoft's Fluent Design System.

import { lighten } from '../styles';

const root = theme => ({
  overflow: 'hidden',
  borderRadius: 4,
  boxShadow: theme.shadows[2],
  backgroundColor: theme.colors.white.default,
  transition: theme.transitions.card
});

const hover = theme => ({
  '&:hover': {
    cursor: 'pointer',
    boxShadow: theme.shadows[3]
  }
});

const acrylic = theme => ({
  '&::before': {
    transition: theme.transitions.card,
    boxShadow: `inset 0 0 2px 1px ${lighten(theme.colors.white.default, 0.2)}`
  },
  '&:hover': {
    '&::before': {
      filter: 'brightness(105%)',
      boxShadow: `inset 0 0 2px 1px ${lighten(theme.colors.white.default, 0.4)}`
    }
  }
});

export const styles = theme => ({
  root: root(theme),
  hover: hover(theme),
  acrylic: acrylic(theme)
});