@procore/core-react/dist/_styles/mixins.js

React library of Procore Design Guidelines

import { css } from 'styled-components';
import { typographyLineHeight } from '../Typography/Typography.styles';
import { colors } from './colors';
export var focusBlue = colors.blue40;

/**
 * Using box-shadow only, will not change size with a border.
 */
export var focusable = /*#__PURE__*/css(["&.focus,&:focus{outline:none;box-shadow:0 0 0 1px ", ",inset 0 0 0 1px ", ";}"], focusBlue, focusBlue);
var offsets = {
  inside: '-2px',
  // useful for clipping from overflow properties
  ontop: '0px',
  // matches spec (on the border stroke + 1px out)
  outside: '1px' // have a gap between regular border and focus outline
};
/**
 * Uses a 2px `outline`. Can specify where it is painted relative to the border.
 * - inside: Inside the box model. Useful for overflow property clipping the outline.
   - ontop: Right on top the border stroke, matches spec.
   - outside: Have a gap between the border stroke and focus outline stroke
 */
export function getGapOutlineFocus() {
  var $offset = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'outside';
  return css(["outline:", " solid 2px;outline-offset:", ";"], focusBlue, offsets[$offset]);
}
export var defaultTransition = /*#__PURE__*/css(["transition:all 0.2s ease-in;"]);
export function getEllipsis() {
  return css(["overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"]);
}

/**
 * `border` is used instead of `outline` intentionally - as `outline` can't handle `border-radius`
 * (rounded elements will still have square outline)
 */
export function getFocus() {
  return css(["border-style:solid;border-width:1px;border-color:", ";box-shadow:0 0 0 1px ", ";outline:none;"], focusBlue, focusBlue);
}

/**
 * Useful when overflow could clip the outer pixel.
 */
export function getFocusInset() {
  return css(["border-style:solid;border-width:1px;border-color:", ";box-shadow:inset 0 0 1px 0 ", ";outline:none;"], focusBlue, focusBlue);
}
export function getLineClamp() {
  var lines = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 2;
  return css(["display:-webkit-box;-webkit-line-clamp:", ";-webkit-box-orient:vertical;overflow:hidden;", ""], lines, function (_ref) {
    var _ref$intent = _ref.intent,
      intent = _ref$intent === void 0 ? 'body' : _ref$intent;
    return css(["max-height:", "px;"], typographyLineHeight[intent] * 2);
  });
}
//# sourceMappingURL=mixins.js.map