How to use the @paprika/stylers/lib/helpers.z 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 / Radio / src / Radio.styles.js View on Github external
${z(1)};
      ${({ size }) => styles[size].radioStyles};
    }

    & + label:hover::before {
      border: 2px solid ${tokens.color.black};
    }

    & + label > .radio-icon {
      color: ${tokens.color.black};
      ${({ size }) => styles[size].radioIconStyles};
      opacity: 0;
      pointer-events: none;
      transform: translateX(-50%);
      transition: opacity 0.15s ease-out;
      ${z(2)};
    }

    & + label > .radio-solid-background {
      background-color: ${tokens.color.black};
      ${({ size }) => styles[size].radioIconBackgroundStyles};
    }

    &:checked {
      & + label.deselectable:hover:before {
        background: ${tokens.color.blackLighten60};
      }
      & + label::before {
        border: 2px solid ${tokens.color.black};
      }
    }
github acl-services / paprika / packages / Radio / src / Radio.styles.js View on Github external
${({ size, hasLabel }) => styles[size].labelStyles(hasLabel)};
      position: relative;
    }

    & + label::before,
    & + label > .radio-icon {
      position: absolute;
      top: 0;
    }

    & + label::before {
      background: ${tokens.color.white};
      border: 2px solid ${tokens.border.color};
      content: "";
      left: 0;
      ${z(1)};
      ${({ size }) => styles[size].radioStyles};
    }

    & + label:hover::before {
      border: 2px solid ${tokens.color.black};
    }

    & + label > .radio-icon {
      color: ${tokens.color.black};
      ${({ size }) => styles[size].radioIconStyles};
      opacity: 0;
      pointer-events: none;
      transform: translateX(-50%);
      transition: opacity 0.15s ease-out;
      ${z(2)};
    }