@motor-js/cli/react/solar-motor/src/layouts/content/style.jsx

CLI tool for generating Qlik Sense Mashups

import styled, {
  device,
  space,
  border as borderStyle,
  css,
  themeGet,
} from "../../theme";

const conentCSS = css`
  padding: 20px;
  ${device.large} {
    padding: 25px;
    margin-top: 60px;
  }
  ${device.xlarge} {
    padding: 30px;
  }
  ${({ $fullHeight }) =>
    $fullHeight &&
    css`
      min-height: calc(100vh - 107px);
      display: flex;
      flex-direction: column;
      justify-content: center;
    `}

  ${({ $align }) =>
    $align &&
    $align !== "center" &&
    css`
      & > .container {
        flex: 1;
      }
    `}
	${({ borderBottom, borderBottomWidth }) =>
    (borderBottom || borderBottomWidth) &&
    css`
      border-bottom-style: solid;
      border-bottom-color: ${themeGet("colors.border")};
    `}
    ${space};
  ${borderStyle};
`;

export const StyledContent = styled(
  ({
    p,
    px,
    py,
    m,
    mx,
    my,
    mt,
    borderBottomWidth,
    $fullHeight,
    $align,
    ...rest
  }) => <div {...rest} />
)`
  ${conentCSS}
`;