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

React library of Procore Design Guidelines

import styled, { css } from 'styled-components';
import { getTypographyIntent } from '../Typography';
import { borderRadius } from '../_styles/borderRadius';
import { colors } from '../_styles/colors';
import { spacing } from '../_styles/spacing';
export var StyledContainer = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledContainer",
  componentId: "core-12_44_0__sc-ocai3-0"
})(["align-items:center;display:", ";height:36px;justify-content:center;width:", ";"], function (_ref) {
  var $block = _ref.$block;
  return $block ? 'flex' : 'inline-flex';
}, function (_ref2) {
  var $block = _ref2.$block;
  return $block ? '100%' : null;
});
export var StyledSegment = /*#__PURE__*/styled.label.withConfig({
  displayName: "StyledSegment",
  componentId: "core-12_44_0__sc-ocai3-1"
})(["align-items:center;border-radius:0;border:1px solid ", ";cursor:pointer;display:flex;flex:1 1 auto;height:100%;justify-content:center;min-width:0;outline:0;padding:0 ", "px;position:relative;background-color:", ";color:", ";&:hover{background-color:", ";border-color:", ";color:", ";}", " ", ";"], colors.gray85, spacing.md, colors.white, colors.gray45, colors.gray94, colors.gray85, colors.gray45, function (_ref3) {
  var _ref3$$focused = _ref3.$focused,
    $focused = _ref3$$focused === void 0 ? false : _ref3$$focused;
  if ($focused) {
    return css(["border-color:", ";box-shadow:0 0 0 1px ", ";z-index:1;"], colors.blue40, colors.blue40);
  }
}, function (_ref4) {
  var _ref4$$disabled = _ref4.$disabled,
    $disabled = _ref4$$disabled === void 0 ? false : _ref4$$disabled,
    _ref4$$selected = _ref4.$selected,
    $selected = _ref4$$selected === void 0 ? false : _ref4$$selected;
  if ($disabled && $selected) {
    return css(["&,&:hover,&:disabled{background-color:", ";border-color:", ";color:", ";pointer-events:none;}"], colors.gray85, colors.gray85, colors.white);
  } else if ($disabled) {
    return css(["&,&:hover,&:disabled{background-color:", ";border-color:", ";color:", ";pointer-events:none;"], colors.white, colors.gray85, colors.gray85);
  } else if ($selected) {
    return css(["&,&:hover{background-color:", ";border-color:", ";color:", ";}"], colors.blue50, colors.blue50, colors.white);
  }
});
export var StyledSegmentDisabledInteractiveWrapper = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledSegmentDisabledInteractiveWrapper",
  componentId: "core-12_44_0__sc-ocai3-2"
})(["display:flex;flex:1 1 auto;min-width:0;height:100%;margin-right:-1px;&:first-child ", "{border-bottom-left-radius:", "px;border-top-left-radius:", "px;}&:last-child ", "{border-bottom-right-radius:", "px;border-top-right-radius:", "px;}"], StyledSegment, borderRadius.md, borderRadius.md, StyledSegment, borderRadius.md, borderRadius.md);
export var StyledLabel = /*#__PURE__*/styled.span.withConfig({
  displayName: "StyledLabel",
  componentId: "core-12_44_0__sc-ocai3-3"
})(["", ";display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"], getTypographyIntent('body'));
//# sourceMappingURL=SegmentedController.styles.js.map