How to use the @paprika/stylers.placeholders function in @paprika/stylers

To help you get started, we’ve selected a few @paprika/stylers 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 / Textarea / src / Textarea.styles.js View on Github external
const textareaStyles = () => `
  position: relative;

  .form-textarea__textarea {
    ${stylers.placeholders};

    background-color: ${tokens.color.white};
    border: 1px solid ${tokens.border.color};
    border-radius: ${tokens.border.radius};
    box-shadow: none;
    box-sizing: border-box;
    color: ${tokens.color.black};
    display: block;
    margin: 0;
    min-height: 80px;
    padding: ${tokens.space};
    resize: none;
    width: 100%;

    &:hover:not(.is-disabled):not(.is-readonly):not([disabled]) {
      border-color: ${tokens.color.blackLighten30};
github acl-services / paprika / packages / Stylers / stories / stylers.stories.styles.js View on Github external
`;

export const TruncatedBox = styled(Box)`
  ${stylers.truncateText};
`;

export const UntruncatedBox = styled(TruncatedBox)`
  ${stylers.noTruncateText};
`;

export const InvisibleBox = styled(Box)`
  ${stylers.visuallyHidden};
`;

export const InputWithPlaceholder = styled.input`
  ${stylers.placeholders};
`;

export const FontScale = styled.div``;

export const FontStep = styled.span`
  ${props => stylers.fontSize(props.scale)};

  display: inline-flex;
  flex-direction: column;
  line-height: 1;

  > span {
    padding: 0 ${tokens.space};
    text-align: center;

    &:last-child {
github acl-services / paprika / packages / Input / src / Input.styles.js View on Github external
margin-left: 2px;
    padding: 0 ${tokens.spaceSm};
  `,
  [ShirtSizes.LARGE]: `
    ${stylers.fontSize(2)}
    margin-left: ${tokens.spaceSm};
    padding: 0 ${tokens.spaceSm};
  `,
};

const inputStyles = css`
  line-height: 1;
  position: relative;

  input.form-input__input {
    ${stylers.placeholders}

    background-color: ${tokens.color.white};
    border: 1px solid ${tokens.border.color};
    border-radius: ${tokens.border.radius};
    box-shadow: none;
    box-sizing: border-box;
    color: ${tokens.color.black};
    display: block;
    margin: 0;
    padding: 0 0 0 ${tokens.space};
    padding-right: ${({ hasClearButton }) => (hasClearButton ? stylers.spacer(3) : tokens.space)};
    transition: box-shadow 0.2s, color 0.2s;
    width: 100%;

    &:focus {
      background-color: ${tokens.color.white};