How to use the @paprika/tokens/lib/tokens.spaceLg function in @paprika/tokens

To help you get started, we’ve selected a few @paprika/tokens examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github acl-services / paprika / packages / ListBoxBrowser / src / components / Title / Title.styles.js View on Github external
import { css } from "styled-components";
import tokens from "@paprika/tokens/lib/tokens";
import stylers from "@paprika/stylers";

export const title = css`
  background: ${tokens.backgroundColor.level0};
  border-bottom: 1px solid ${tokens.border.color};
  border-top-left-radius: ${tokens.border.radius};
  border-top-right-radius: ${tokens.border.radius};
  flex-basis: 50%;
  flex-grow: 1;
  font-size: ${stylers.fontSize(-1)};
  font-weight: bold;
  min-height: 20px;
  padding: ${tokens.spaceSm} ${tokens.space} ${tokens.spaceSm} ${tokens.spaceLg};
`;

export const flex = css`
  align-items: flex-start;
  display: flex;
  justify-content: center;

  & div:last-child {
    border-left: 1px solid ${tokens.border.color};
  }
`;
github acl-services / paprika / packages / ListBoxBrowser / src / components / OptionsSelected / OptionsSelected.styles.js View on Github external
background: ${tokens.backgroundColor.level0};
  border-bottom: 1px solid ${tokens.border.color};
  border-top: 1px solid ${tokens.border.color};
  box-sizing: border-box;
  ${stylers.fontSize(-1)}
  font-weight: bold;
  padding: ${tokens.spaceSm} ${tokens.space} ${tokens.spaceSm} ${tokens.spaceLg};
  width: 100%;
`;

export const button = css`
  border-top-left-radius: ${tokens.border.radius};
  border-top-left-radius: ${tokens.border.radius};
  flex-basis: 100%;
  flex-grow: 1;
  padding: ${tokens.space} ${tokens.spaceLg};
`;

export const counter = css`
  border: 1px solid ${tokens.border.color};
  border-radius: ${tokens.border.radius};
  display: inline-box;
  font-size: 13px;
  font-weight: bold;
  margin-left: ${tokens.spaceSm};
  padding: 2px ${tokens.spaceSm};
`;

export const remove = css`
  align: center;
  align-items: center;
  border-bottom-right-radius: ${tokens.border.radius};
github acl-services / paprika / packages / ListBoxBrowser / src / components / CustomListBox / CustomListBox.styles.js View on Github external
align-items: center;
  border-left: 1px solid ${tokens.border.color};
  color: ${tokens.color.black};
  display: inline-flex;
  height: 100%;
  justify-content: center;
  width: 100%;

  &:hover:after {
    background: ${tokens.color.black};
    border-radius: 50%;
    content: "";
    height: ${stylers.spacer(3)};
    left: 50%;
    margin-left: -${tokens.spaceLg};
    margin-top: -${tokens.spaceLg};
    opacity: 0.1;
    pointer-events: none;
    position: absolute;
    top: 50%;
    width: ${stylers.spacer(3)};
  }

  ${({ isParentSelectable }) => {
    return isParentSelectable
      ? ""
      : css`
          background: transparent;
          border: 1px solid transparent;
          border-radius: ${tokens.border.radius};
        `;
  }}