fannypack-v5/src/Autosuggest/styles.ts

An accessible, composable, and friendly React UI Kit

import { cssClass } from '../styled';
import { palette, space, theme } from '../utils';

export const Autosuggest = (styleProps) => cssClass`
  position: relative;

  & {
    ${theme(styleProps.themeKey, `css.root`)(styleProps)};
  }
`;

export const AutosuggestPopover = (styleProps) => cssClass`
  &&& {
    max-width: 100%;
    width: 100%;
    max-height: ${styleProps.popoverHeight};
  }

  & {
    ${theme(styleProps.themeKey, `css.root`)(styleProps)};
  }
`;

export const AutosuggestItem = (styleProps) => cssClass`
  &&& {
    font-weight: 300;

    &[aria-selected="true"] {
      background-color: ${palette('white600')(styleProps)};
    }

    &[aria-disabled="true"] {
      color: ${palette('gray100')(styleProps)};
    }
  }

  & {
    ${theme(styleProps.themeKey, `css.root`)(styleProps)};
  }
`;

export const AutosuggestItemText = (styleProps) => cssClass`
  & {
    ${theme(styleProps.themeKey, `css.root`)(styleProps)};
  }
`;

export const AutosuggestStaticItem = (styleProps) => cssClass`
  padding: ${space(1.5)(styleProps)}rem ${space(4)(styleProps)}rem;
  width: 100%;

  & {
    ${theme(styleProps.themeKey, `css.root`)(styleProps)};
  }
`;

export const AutosuggestClearButtonWrapper = (styleProps) => cssClass`
  display: flex;
  align-items: center;
  justify-content: center;
  padding: ${space(1)(styleProps)}rem ${space(2)(styleProps)}rem;

  & {
    ${theme(styleProps.themeKey, `css.root`)(styleProps)};
  }
`;

export const AutosuggestClearButton = (styleProps) => cssClass`
  display: flex;
  align-items: center;
  justify-content: center;
  padding: ${space(1)(styleProps)}rem ${space(2)(styleProps)}rem;

  & {
    ${theme(styleProps.themeKey, `css.root`)(styleProps)};
  }
`;

export const AutosuggestInput = (styleProps) => cssClass`
  & {
    ${theme(styleProps.themeKey, `css.root`)(styleProps)};
  }
`;

export const AutosuggestField = (styleProps) => cssClass`
  & {
    ${theme(styleProps.themeKey, `css.root`)(styleProps)};
  }
`;

export const ItemsWrapper = (styleProps) => cssClass`
  max-height: calc(${styleProps.popoverHeight} - 1rem);
  overflow-y: scroll;

  & {
    ${theme(styleProps.themeKey, `css.root`)(styleProps)};
  }
`;