@procore/core-react/dist/MenuImperative/MenuImperative.styles.js

React library of Procore Design Guidelines

import styled, { css } from 'styled-components';
import { Box } from '../Box';
import { StyledButton } from '../Button';
import { StyledCheckboxLabel } from '../Checkbox/Checkbox.styles';
import { getTypographyIntent, typographyWeights } from '../Typography';
import { colors } from '../_styles/colors';
import { getFocus } from '../_styles/mixins';
import { spacing } from '../_styles/spacing';
var optionMinHeight = 32;

// Do not merge with StyledMenu, needed for max-height working in IE
export var StyledWrapper = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledWrapper",
  componentId: "core-12_44_0__sc-z984sz-0"
})(["border-radius:inherit;display:flex;max-height:inherit;min-width:inherit;outline:none;width:inherit;"]);
export var StyledMenu = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledMenu",
  componentId: "core-12_44_0__sc-z984sz-1"
})(["border-radius:inherit;display:flex;flex-direction:column;outline:0;width:100%;"]);
export var StyledOptions = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledOptions",
  componentId: "core-12_44_0__sc-z984sz-2"
})(["flex-basis:auto;flex-grow:1;flex-shrink:1;min-height:", "px;", ";padding:", "px 0;position:relative;&:focus-visible{", " margin:-1px;}"], optionMinHeight, function (_ref) {
  var _ref$$scrollable = _ref.$scrollable,
    $scrollable = _ref$$scrollable === void 0 ? true : _ref$$scrollable;
  return $scrollable && "overflow-y: auto";
}, spacing.sm, getFocus());
export var StyledGrip = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledGrip",
  componentId: "core-12_44_0__sc-z984sz-3"
})(["padding:0 2px;height:24px;"]);
export var StyledHeader = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledHeader",
  componentId: "core-12_44_0__sc-z984sz-4"
})([""]);
export var StyledSearch = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledSearch",
  componentId: "core-12_44_0__sc-z984sz-5"
})(["padding:", "px ", "px ", "px;", " > *{pointer-events:none;}"], spacing.lg, spacing.lg, spacing.sm, StyledButton);
export var StyledGroup = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledGroup",
  componentId: "core-12_44_0__sc-z984sz-6"
})(["&:not(:first-child){margin-top:", "px;}"], spacing.md);
export var StyledGroupLabel = /*#__PURE__*/styled.span.withConfig({
  displayName: "StyledGroupLabel",
  componentId: "core-12_44_0__sc-z984sz-7"
})(["", " display:block;color:", ";font-weight:", ";padding:", "px ", "px;cursor:default;"], getTypographyIntent('body'), colors.gray15, typographyWeights.semibold, spacing.xs, spacing.lg);
export var StyledItem = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledItem",
  componentId: "core-12_44_0__sc-z984sz-8"
})(["", ";", " cursor:pointer;list-style-type:none;padding:", "px ", "px;a{color:", ";display:block;margin:-", "px -", "px;padding:", "px ", "px;text-decoration:none;&:hover{color:", ";text-decoration:none;}}&[data-highlighted='true']{background-color:", ";}", " ", "{color:inherit;cursor:pointer;}", " ", " ", ""], getTypographyIntent('body'), function (_ref2) {
  var as = _ref2.as;
  return as === 'a' && css(["display:block;text-decoration:none;"]);
}, spacing.xs, spacing.lg, colors.gray15, spacing.xs, spacing.lg, spacing.xs, spacing.lg, colors.gray15, colors.gray96, function (_ref3) {
  var $highlighted = _ref3.$highlighted;
  return $highlighted && "background-color: ".concat(colors.gray96, ";");
}, StyledCheckboxLabel, function (_ref4) {
  var $disabled = _ref4.$disabled,
    $selected = _ref4.$selected;
  if ($disabled) {
    return css(["&,", "{color:", ";cursor:default;}"], StyledCheckboxLabel, colors.gray85);
  } else if ($selected) {
    return css(["color:", ";font-weight:700;a,a:hover{color:", ";text-decoration:none;}&[data-highlighted='true']{background-color:", ";}"], colors.blue50, colors.blue50, colors.gray96);
  }
  return css(["color:", ";&[data-highlighted='true']{background-color:", ";}"], colors.gray15, colors.gray96);
}, function (_ref5) {
  var $isDraggable = _ref5.$isDraggable;
  if ($isDraggable) {
    return css(["display:flex;align-items:center;", "{cursor:grab;&:before,&:after{cursor:pointer;}}&&&{padding-left:0;}"], StyledCheckboxLabel);
  }
}, function (_ref6) {
  var $isDragging = _ref6.$isDragging;
  if ($isDragging) {
    return css(["background-color:", ";"], colors.gray96);
  }
});
export var StyledDroppable = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledDroppable",
  componentId: "core-12_44_0__sc-z984sz-9"
})(["", ",", "{padding-left:28px;}"], StyledGroup, StyledItem);
export var StyledFooter = /*#__PURE__*/styled(Box).withConfig({
  displayName: "StyledFooter",
  componentId: "core-12_44_0__sc-z984sz-10"
})(["border-top:1px solid ", ";border-bottom-left-radius:inherit;border-bottom-right-radius:inherit;"], colors.gray85);
//# sourceMappingURL=MenuImperative.styles.js.map