@chayns-components/core/lib/esm/components/list/list-item/ListItem.styles.js

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

import styled, { css } from 'styled-components';
import { keyboardFocusHighlightingRingCss } from '../../../utils/keyboardFocusHighlighting.styles';
export const StyledListItem = styled.div`
    overflow: hidden;
    transition: background-color 0.3s ease;

    ${({
  $isInAccordion,
  $shouldHideIndicator
}) => $isInAccordion && css`
            padding-left: ${$shouldHideIndicator ? '16px' : '8px'};
        `}

    ${({
  $isInAccordion,
  $isOpen,
  $shouldChangeColor,
  $shouldForceBackground,
  theme,
  $isInDialog,
  $isSelected
}) => (!$isInAccordion && $isOpen || $shouldForceBackground || $isSelected) && css`
            background-color: rgba(
                ${$shouldChangeColor || $isInDialog ? theme['102-rgb'] : theme['100-rgb']},
                ${theme.cardBackgroundOpacity}
            );
        `}

    ${({
  $backgroundColor,
  $isInAccordion,
  $isOpen,
  $shouldForceBackground
}) => $backgroundColor && (!$isInAccordion && $isOpen || $shouldForceBackground) && css`
            background-color: ${$backgroundColor} !important;
        `}

    ${({
  $isClickable,
  $isInAccordion,
  $shouldChangeColor,
  $isInDialog,
  theme
}) => $isClickable && !$isInAccordion && css`
            &&:hover {
                background-color: rgba(
                    ${$shouldChangeColor || $isInDialog ? theme['102-rgb'] : theme['100-rgb']},
                    ${theme.cardBackgroundOpacity}
                );
            }
        `}

    ${({
  $isInAccordion,
  $isOpen,
  $isWrapped,
  $shouldHideBottomLine,
  $shouldForceBottomLine,
  $shouldShowSeparatorBelow,
  theme
}) => {
  if ($shouldShowSeparatorBelow || (!$isOpen || $isWrapped || $isInAccordion) && theme.accordionLines && !$shouldHideBottomLine) {
    if ($shouldForceBottomLine) {
      return css`
                    border-bottom: ${$shouldShowSeparatorBelow ? '4px' : '1px'} solid
                        rgba(${theme['headline-rgb']}, 1);
                `;
    }
    return css`
                &&:not(:last-child) {
                    border-bottom: ${$shouldShowSeparatorBelow ? '4px' : '1px'} solid
                        rgba(${theme['headline-rgb']}, 1);
                }
            `;
  }
  return undefined;
}}

    ${({
  $isWrapped
}) => $isWrapped && css`
            padding-left: 26px;
        `}
    
        &[data-should-show-keyboard-highlighting='true']:focus-visible {
        transition: none;
        ${keyboardFocusHighlightingRingCss};
        overflow: visible;
    }
`;
export const StyledListItemTooltip = styled.div`
    padding: 6px;
`;
//# sourceMappingURL=ListItem.styles.js.map