@kiwicom/smart-faq/src/SmartFAQ/common/Card.js

Smart FAQ

// @flow

import * as React from 'react';
import css from 'styled-jsx/css';

const styles = css`
  .card {
    padding: 16px;
    position: relative;
    margin-bottom: 24px;
    width: 100%;
    border: solid 1px #e8edf1;
    border-radius: 3px;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.06), 0px 3px 6px rgba(0, 0, 0, 0.09);
    transition: box-shadow 0.25s ease-in-out;
    background-color: #ffffff;
  }
  .card:hover {
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.06),
      0px 6px 6px rgba(0, 0, 0, 0.09);
  }

  @media only screen and (max-width: 900px) {
    .card {
      position: relative;
      margin-bottom: 0;
      border-radius: none;
      box-shadow: none;
    }
    .card:hover {
      box-shadow: none;
    }
  }
`;

type Props = {|
  children: React.Node,
|};

const Card = (props: Props) => (
  <div className="card">
    {props.children}
    <style jsx>{styles}</style>
  </div>
);

export default Card;