@patreon/studio/module/components/Dropdown/styled-components/DropdownHandle.jsx

Patreon Studio Design System

import { css, styled } from 'styled-components';
import { tokens } from '~/tokens';
import { convertLegacyUnitValue } from '~/utilities/legacy-units';
const dropdownCSS = css `
  appearance: none;
  background-color: transparent;
  border: none;
  margin-bottom: 0;
  cursor: pointer;
  min-width: ${(props) => props.minWidth && convertLegacyUnitValue(props.minWidth)};
  max-width: 100%;
  width: ${(props) => props.fluidWidth && '100%'};
  padding: ${(props) => (props.openOnHover ? `0 ${tokens.global.space.x4}` : 0)};

  ${(props) => props.disabled &&
    css `
      opacity: ${tokens.global.opacity.disabled};
      cursor: not-allowed;
    `}

  ${({ disabled, hasCustomHandle, error }) => !disabled &&
    !hasCustomHandle &&
    css `
      appearance: none;
      background: ${tokens.global.bg.base.default};
      border-radius: ${tokens.global.radius.md};
      border: 1px solid ${tokens.global.border.action.default};
      border-color: ${error ? tokens.global.critical.surface.default : undefined};
      box-sizing: border-box;
      color: ${tokens.global.content.regular.default};
      height: ${tokens.global.space.x40};
      padding: ${tokens.global.space.x4} ${tokens.global.space.x16};
      transition: ${tokens.global.transition.regular.easing} ${tokens.global.transition.regular.duration};

      &:focus {
        border-color: ${error ? tokens.global.critical.surface.default : tokens.global.border.action.default};
      }

      &:hover {
        border-color: ${error ? tokens.global.critical.surface.hover : tokens.global.border.action.hover};
      }

      &:active {
        border-color: ${error ? tokens.global.critical.surface.pressed : tokens.global.border.action.pressed};
      }

      &::placeholder {
        color: ${tokens.global.content.muted.default};
      }
    `};
`;
export const DropdownHandle = styled.button.attrs({
    type: 'button',
}) `
  ${dropdownCSS};
`;
DropdownHandle.displayName = 'DropdownHandle';
export const DropdownHandleDiv = styled.div `
  ${dropdownCSS};
`;
DropdownHandleDiv.displayName = 'DropdownHandle';
//# sourceMappingURL=DropdownHandle.jsx.map