@chayns-components/core/lib/esm/components/combobox/ComboBox.styles.js

A set of beautiful React components for developing your own applications with chayns.

import styled, { css } from 'styled-components';
import { DropdownDirection } from '../../types/dropdown';
import { ComboBoxSize } from './ComboBox.types';
import { keyboardFocusHighlightingRingCss } from '../../utils/keyboardFocusHighlighting.styles';
export const StyledComboBox = styled.div`
    min-width: 0;
    user-select: none;
    position: relative;

    ${({
  $shouldUseFullWidth,
  $minWidth
}) => {
  if ($shouldUseFullWidth) {
    return css`
                width: 100%;
                max-width: 100%;
                min-width: ${typeof $minWidth === 'number' ? `${$minWidth}px` : '0'};
            `;
  }
  if (typeof $minWidth === 'number') {
    return css`
                width: fit-content;
                max-width: 100%;
                min-width: ${$minWidth}px;
            `;
  }
  return css`
            width: fit-content;
            max-width: 100%;
        `;
}}
`;
export const StyledComboBoxHeader = styled.div`
    display: flex;
    min-width: 0;
    border: 1px solid transparent;
    cursor: ${({
  $isDisabled
}) => !$isDisabled ? 'pointer' : 'default'};
    justify-content: space-between;
    opacity: ${({
  $isDisabled
}) => $isDisabled ? 0.5 : 1};
    transition: background-color 0.2s ease-in-out;

    ${({
  $size
}) => {
  switch ($size) {
    case ComboBoxSize.SMALL:
      return css`
                    height: 34px;
                `;
    case ComboBoxSize.NORMAL:
    default:
      return css`
                    min-height: 42px;
                `;
  }
}}

    ${({
  theme,
  $shouldShowTransparentBackground,
  $shouldChangeColor
}) => {
  if ($shouldShowTransparentBackground) {
    if (theme.colorMode === 'dark') {
      return css`
                    border-color: rgba(255, 255, 255, 0.5);
                    background-color: transparent;
                `;
    }
    return css`
                border-color: rgba(0, 0, 0, 0.5);
                background-color: transparent;
            `;
  }
  return css`
            border-color: rgba(160, 160, 160, 0.3);
            background-color: ${theme.colorMode === 'classic' || $shouldChangeColor ? theme['000'] : theme['100']};
        `;
}}

    ${({
  $shouldShowBigImage
}) => $shouldShowBigImage && css`
            height: 42px;
        `}

    ${({
  $isOpen,
  $direction
}) => {
  if ($isOpen) {
    return [DropdownDirection.BOTTOM, DropdownDirection.BOTTOM_LEFT, DropdownDirection.BOTTOM_RIGHT].includes($direction) ? css`
                      border-top-left-radius: 3px;
                      border-top-right-radius: 3px;
                  ` : css`
                      border-bottom-left-radius: 3px;
                      border-bottom-right-radius: 3px;
                  `;
  }
  return css`
            border-radius: 3px;
        `;
}}

    ${({
  $isTouch,
  $isDisabled,
  theme
}) => !$isTouch && !$isDisabled && css`
            &:hover {
                background-color: ${theme['secondary-102']};
            }
        `}

    ${({
  $shouldShowKeyboardHighlighting
}) => $shouldShowKeyboardHighlighting && css`
            &:focus-visible,
            &:focus-within {
                transition: none;
                ${keyboardFocusHighlightingRingCss}
            }
        `}
`;
export const StyledComboBoxPlaceholder = styled.div`
    align-items: center;
    color: ${({
  theme
}) => theme.text};
    display: flex;
    flex: 1 1 auto;
    gap: 10px;
    min-width: 0;
    opacity: ${({
  $shouldReduceOpacity
}) => $shouldReduceOpacity ? 0.5 : 1};
`;
export const StyledComboBoxPlaceholderText = styled.div`
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
`;
export const StyledComboBoxPrefixAndPlaceholderWrapper = styled.div`
    align-items: center;
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    padding: 4px 10px;
`;
export const StyledComboBoxPrefix = styled.div`
    flex: 0 0 auto;
    min-width: ${({
  $prefixMinWidth
}) => $prefixMinWidth ?? 0}px;
    padding-right: 5px;
`;
export const StyledComboBoxInput = styled.input`
    color: ${({
  theme
}) => theme.text};
    border: none;
    background-color: transparent;
    width: 100%;
    min-width: 0;
`;
export const StyledComboBoxPlaceholderImage = styled.img`
    box-shadow: 0 0 0 1px
        rgba(${({
  theme
}) => theme['009-rgb']}, 0.15);
    height: ${({
  $shouldShowBigImage
}) => $shouldShowBigImage ? '32px' : '22px'};
    width: ${({
  $shouldShowBigImage
}) => $shouldShowBigImage ? '32px' : '22px'};

    ${({
  $shouldShowRoundImage
}) => $shouldShowRoundImage && css`
            border-radius: 50%;
        `}
`;
export const StyledComboBoxClearIconWrapper = styled.div`
    align-items: center;
    cursor: ${({
  $isDisabled
}) => !$isDisabled ? 'pointer' : 'default'};
    display: flex;
    flex: 0 0 auto;
    height: 40px;
    justify-content: center;
    width: 40px;
`;
export const StyledComboBoxIconWrapper = styled.div`
    align-items: center;
    border-left: ${({
  $shouldShowBorderLeft
}) => $shouldShowBorderLeft ? '1px solid rgba(160, 160, 160, 0.3)' : 'none'};
    cursor: ${({
  $isDisabled
}) => !$isDisabled ? 'pointer' : 'default'};
    display: flex;
    flex: 0 0 auto;
    justify-content: center;
    width: 40px;

    ${({
  $size
}) => {
  switch ($size) {
    case ComboBoxSize.SMALL:
      return css`
                    height: 30px;
                `;
    case ComboBoxSize.NORMAL:
    default:
      return css`
                    height: 40px;
                `;
  }
}}
`;
export const StyledComboBoxBody = styled.div`
    display: flex;
    flex-direction: column;
    cursor: pointer;
    min-width: ${({
  $minWidth
}) => $minWidth}px;

    overflow-x: hidden;
    overflow-y: auto;

    max-height: ${({
  $maxHeight
}) => $maxHeight}px;
`;
export const StyledComboBoxTopic = styled.div`
    align-items: center;
    background-color: ${({
  theme
}) => theme['secondary-102']};
    color: rgba(${({
  theme
}) => theme['text-rgb']}, 0.65);
    cursor: default;
    display: flex;
    flex: 0 0 auto;
    font-weight: bold;
    min-height: 38px;
    line-height: normal;
    padding: 8px 10px;
    position: sticky;
    top: 0;
    z-index: 10;
`;
//# sourceMappingURL=ComboBox.styles.js.map