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

React library of Procore Design Guidelines

import styled, { css, keyframes } from 'styled-components';
import { StyledLoader } from '../Loader/Loader.styles';
import { StyledLabel, StyledRemove, StyledToken } from '../Token/Token.styles';
import { getTypographyIntent } from '../Typography/Typography.styles';
import { colors } from '../_styles/colors';
import { spacing } from '../_styles/spacing';
export var pulseAnimationDuration = 600;
var focusPulse = /*#__PURE__*/keyframes(["0%{box-shadow:0 0 0 0 ", ",0 0 0 0 ", ",0 0 0 0 ", ";}25%{box-shadow:0 0 0 0 ", ",0 0 0 0 ", ",0 0 0 0 ", ";}50%{box-shadow:0 0 0 1px ", ",0 0 0 3px ", ",0 0 0 2px ", ";}100%{box-shadow:0 0 0 1.5px ", ",0 0 0 3px ", ",0 0 0 6px ", ";}"], colors.blue60, colors.blue90, colors.blue94, colors.blue60, colors.blue90, colors.blue94, colors.blue60, colors.blue90, colors.blue94, colors.blue60, colors.blue90, colors.blue94);
export var StyledFilenameShortcut = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledFilenameShortcut",
  componentId: "core-12_44_0__sc-13jx4bx-0"
})(["display:flex;"]);
export var StyledFilename = /*#__PURE__*/styled.span.withConfig({
  displayName: "StyledFilename",
  componentId: "core-12_44_0__sc-13jx4bx-1"
})(["flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;"]);
export var StyledExtension = /*#__PURE__*/styled.span.withConfig({
  displayName: "StyledExtension",
  componentId: "core-12_44_0__sc-13jx4bx-2"
})(["flex-shrink:0;"]);
export var StyledFileToken = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledFileToken",
  componentId: "core-12_44_0__sc-13jx4bx-3"
})(["background-color:", ";border-radius:200px;max-width:100%;outline:none;overflow:hidden;position:relative;&:focus,&.focus{box-shadow:0 0 0 2px ", ";outline:none;", "{border-color:transparent;", "}}", "{background:none;color:", ";display:flex;user-select:none;", "{color:", ";}}", "{overflow:hidden;", "{border-radius:200px 0 0 200px;color:", ";padding-right:0;transition:color 0s linear,background-color 0s linear;user-select:none;", "{flex:0 0 auto;}}}", ""], colors.gray96, colors.blue40, StyledToken, function (_ref) {
  var $progressComplete = _ref.$progressComplete;
  return $progressComplete && css(["background-color:", ";"], colors.blue45);
}, StyledToken, colors.blue40, StyledRemove, colors.blue40, StyledLoader, StyledToken, colors.white, StyledLabel, function (_ref2) {
  var $error = _ref2.$error,
    $finalized = _ref2.$finalized,
    $progressComplete = _ref2.$progressComplete;
  if ($error) {
    return css(["background-color:", ";&:focus{background-color:", ";}", "{color:", ";", "{color:", ";&.focus,&:focus,&.hover,&:hover{color:", ";}}}", "{display:none;}"], colors.red50, colors.red50, StyledToken, colors.white, StyledRemove, colors.white, colors.blue40, StyledLoader);
  } else if ($finalized || $progressComplete) {
    return css(["", ";", "{opacity:0;pointer-events:none;}", "{background-color:", ";color:", ";&:hover,&:focus{background-color:", ";}", "{color:", ";&.focus,&:focus,&.hover,&:hover{color:", ";}}}&.hover,&.focus{", "{background-color:", ";}}"], $finalized && css(["animation-delay:0;animation-duration:", "ms;animation-name:", ";animation-timing-function:ease-out;"], pulseAnimationDuration, focusPulse), StyledLoader, StyledToken, colors.blue50, colors.white, colors.blue45, StyledRemove, colors.white, colors.blue40, StyledToken, colors.blue45);
  }
  return css([""]);
});
export var StyledErrorMessage = /*#__PURE__*/styled.span.withConfig({
  displayName: "StyledErrorMessage",
  componentId: "core-12_44_0__sc-13jx4bx-4"
})(["display:block;color:", ";margin-top:", "px;word-break:break-word;", ""], colors.red50, spacing.xs, getTypographyIntent('small'));
export var StyledFileTokenErrorContainer = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledFileTokenErrorContainer",
  componentId: "core-12_44_0__sc-13jx4bx-5"
})(["max-width:100%;outline:none;&:focus,&.focus{> ", "{box-shadow:0 0 0 2px ", ";outline:none;}}"], StyledFileToken, colors.blue40);
//# sourceMappingURL=FileToken.styles.js.map