@chayns-components/core/lib/esm/components/dropdown-body-wrapper/DropdownBodyWrapper.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';
export const StyledDropdownBodyWrapper = styled.div``;
export const StyledDropdownBodyWrapperContent = styled.div`
    width: ${({
  $width
}) => $width}px;
    min-width: ${({
  $minWidth
}) => $minWidth}px;

    overflow: hidden;

    ${({
  $maxHeight
}) => typeof $maxHeight === 'number' && css`
            max-height: ${$maxHeight}px;
            overflow-y: auto;
            overflow-x: hidden;
        `}

    // Basic styles
    background: ${({
  theme
}) => theme['000']};
    border: 1px solid rgba(160, 160, 160, 0.3);
    box-shadow: 0 0 0 1px
        rgba(${({
  theme
}) => theme['009-rgb']}, 0.08) inset;

    ${({
  $direction
}) => {
  if ([DropdownDirection.BOTTOM, DropdownDirection.BOTTOM_LEFT, DropdownDirection.BOTTOM_RIGHT].includes($direction)) {
    return css`
                border-bottom-left-radius: 3px;
                border-bottom-right-radius: 3px;
                box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.2);
            `;
  }
  return css`
            border-top-left-radius: 3px;
            border-top-right-radius: 3px;
            box-shadow: 0 -3px 10px 0 rgba(0, 0, 0, 0.2);
        `;
}}
`;
//# sourceMappingURL=DropdownBodyWrapper.styles.js.map