@activecollab/components/dist/esm/components/ComboBox/Styles.js

ActiveCollab Components

import styled, { css } from "styled-components";
import { CollapseExpandSingleIcon, CloseSmallIcon } from "../Icons/collection";
import { Input } from "../Input/Input";
import { StyledInputWrapper } from "../Input/Styles";
export const StyledComboBoxInput = styled(Input).withConfig({
  displayName: "Styles__StyledComboBoxInput",
  componentId: "sc-5qvkpb-0"
})(["overflow:hidden;text-overflow:ellipsis;width:100%;"]);
StyledComboBoxInput.displayName = "StyledComboBoxInput";
const StyledIconDefaults = css(["flex-shrink:0;cursor:pointer;"]);
export const StyledComboBoxCollapseExpandSingleIcon = styled(CollapseExpandSingleIcon).withConfig({
  displayName: "Styles__StyledComboBoxCollapseExpandSingleIcon",
  componentId: "sc-5qvkpb-1"
})(["", ";color:var(--color-theme-600);transform:rotate(180deg);", ""], StyledIconDefaults, props => props.$open && css(["transform:rotate(0deg);"]));
StyledComboBoxCollapseExpandSingleIcon.displayName = "StyledComboBoxCollapseExpandSingleIcon";
export const StyledComboBoxCloseSmallIcon = styled(CloseSmallIcon).withConfig({
  displayName: "Styles__StyledComboBoxCloseSmallIcon",
  componentId: "sc-5qvkpb-2"
})(["", ";opacity:0;transition-property:all;transition-duration:0.2s;transition-delay:0.5s;", ":hover,", ":hover &{opacity:1;transition-delay:0s;}"], StyledIconDefaults, StyledComboBoxInput, StyledInputWrapper);
StyledComboBoxCloseSmallIcon.displayName = "StyledComboBoxCloseSmallIcon";
export const StyledComboBoxList = styled.div.withConfig({
  displayName: "Styles__StyledComboBoxList",
  componentId: "sc-5qvkpb-3"
})(["min-width:260px;background-color:var(--page-paper-main);border-radius:8px;border:1px solid var(--border-primary);box-shadow:var(--shadow-tertiary);margin:8px 0;width:", ";", ""], props => props.$width + "px", _ref => {
  let {
    $hide
  } = _ref;
  return $hide === true && css(["display:none;"]);
});
StyledComboBoxList.displayName = "StyledComboBoxList";
export const StyledChipWrapper = styled.div.withConfig({
  displayName: "Styles__StyledChipWrapper",
  componentId: "sc-5qvkpb-4"
})(["", ";", ";", ";", " ", " ", ""], {
  "display": "flex"
}, {
  "gap": "0.25rem"
}, {
  "flex": "1 1 0%"
}, _ref2 => {
  let {
    $open
  } = _ref2;
  return !$open && css(["overflow:hidden;"]);
}, _ref3 => {
  let {
    $autoSize
  } = _ref3;
  return $autoSize === "auto" && css(["", ";", ";"], {
    "flexWrap": "wrap"
  }, {
    "width": "100%"
  });
}, _ref4 => {
  let {
    $autoSize
  } = _ref4;
  return $autoSize !== "auto" && css(["align-items:center;"]);
});
StyledChipWrapper.displayName = "StyledChipWrapper";
//# sourceMappingURL=Styles.js.map