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

React library of Procore Design Guidelines

import styled, { css } from 'styled-components';
import { getTypographyIntent } from '../Typography/Typography.styles';
import { colors } from '../_styles/colors';
import { getEllipsis } from '../_styles/mixins';
import { spacing } from '../_styles/spacing';
export var StyledAnchorNavigationLandmark = /*#__PURE__*/styled.nav.withConfig({
  displayName: "StyledAnchorNavigationLandmark",
  componentId: "core-12_44_0__sc-aacdj4-0"
})([""]);
export var StyledAnchorNavigation = /*#__PURE__*/styled.ul.withConfig({
  displayName: "StyledAnchorNavigation",
  componentId: "core-12_44_0__sc-aacdj4-1"
})(["max-width:200px;margin:0;padding-inline-start:0;"]);
export var StyledAnchorSection = /*#__PURE__*/styled.li.withConfig({
  displayName: "StyledAnchorSection",
  componentId: "core-12_44_0__sc-aacdj4-2"
})(["display:flex;cursor:pointer;border-left:", "px solid ", ";background-color:", ";border-top-right-radius:4px;border-bottom-right-radius:4px;:hover{border-left:", "px solid ", ";background-color:", ";}"], spacing.xs, function (_ref) {
  var $selected = _ref.$selected;
  return $selected ? colors.gray15 : colors.gray90;
}, function (_ref2) {
  var $selected = _ref2.$selected;
  return $selected ? colors.gray90 : 'transparent';
}, spacing.xs, function (_ref3) {
  var $selected = _ref3.$selected;
  return $selected ? colors.gray15 : colors.gray60;
}, colors.gray90);
export var StyledAnchor = /*#__PURE__*/styled.a.withConfig({
  displayName: "StyledAnchor",
  componentId: "core-12_44_0__sc-aacdj4-3"
})(["width:100%;padding:6px ", "px;", " ", ";", " :focus-visible{box-shadow:inset 0 0 0 2px ", ";outline:none;}"], spacing.sm, getTypographyIntent('body'), function (_ref4) {
  var $selected = _ref4.$selected;
  return $selected ? css(["font-weight:600;"]) : '';
}, getEllipsis(), colors.blue50);
//# sourceMappingURL=AnchorNavigation.styles.js.map