@helpscout/hsds-react/components/VerificationCode/VerificationCode.css.js

React component library for Help Scout's Design System

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.IconUI = exports.ValidIconUI = exports.ClipboardPlaceholderUI = exports.DigitInputUI = exports.DigitMaskUI = exports.DigitInputWrapperUI = exports.VerificationCodeFieldUI = void 0;

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _color = require("../../styles/utilities/color");

var _color2 = require("../../utilities/color");

var _Icon = _interopRequireDefault(require("../Icon"));

var _Tooltip = _interopRequireDefault(require("../Tooltip"));

var VerificationCodeFieldUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "VerificationCodecss__VerificationCodeFieldUI",
  componentId: "sc-1w7k468-0"
})(["box-sizing:border-box;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:center;align-items:center;position:relative;width:500px;height:74px;border:1px solid #c5ced6;border-radius:3px;background-color:#fff;box-shadow:0 0 0 0 ", ";transition:box-shadow 100ms ease,border-color 100ms ease;*,*:before,*:after{box-sizing:inherit;}&:focus{outline:none;}&:focus-within{border-color:transparent;box-shadow:0 0 0 2px ", ";}&.not-valid{border-color:transparent;box-shadow:0 0 0 2px #f23459;}"], (0, _color2.rgba)((0, _color.getColor)('border'), 0), (0, _color.getColor)('blue.500'));
exports.VerificationCodeFieldUI = VerificationCodeFieldUI;
var DigitInputWrapperUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "VerificationCodecss__DigitInputWrapperUI",
  componentId: "sc-1w7k468-1"
})(["position:relative;margin:0 15px 0 0;&:last-of-type{margin-right:0;}"]);
exports.DigitInputWrapperUI = DigitInputWrapperUI;
var DigitMaskUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "VerificationCodecss__DigitMaskUI",
  componentId: "sc-1w7k468-2"
})(["position:absolute;top:0;left:0;width:40px;height:50px;padding:0 0 7px 0;font-family:var(--HSDSGlobalFontFamilySystem);font-size:35px;line-height:41px;text-align:center;color:", ";border-bottom:2px solid #d5dce1;-webkit-font-smoothing:antialiased;&::selection{background-color:#b2d7ff;}&.hidden{opacity:0;}"], (0, _color.getColor)('charcoal.700'));
exports.DigitMaskUI = DigitMaskUI;
var DigitInputUI = (0, _styledComponents.default)('input').withConfig({
  displayName: "VerificationCodecss__DigitInputUI",
  componentId: "sc-1w7k468-3"
})(["position:relative;width:40px;height:50px;padding:0 0 7px 0;margin:0;border:0;border-bottom:2px solid #d5dce1;font-family:var(--HSDSGlobalFontFamilySystem);font-size:35px;line-height:35px;text-align:center;color:", ";transition:border-color 200ms ease;-webkit-font-smoothing:antialiased;&:focus{outline:none;border-bottom-color:", ";}&::selection{background-color:#b2d7ff;}&.hidden{opacity:0;}"], (0, _color.getColor)('charcoal.700'), (0, _color.getColor)('blue.500'));
exports.DigitInputUI = DigitInputUI;
var ClipboardPlaceholderUI = (0, _styledComponents.default)('textarea').withConfig({
  displayName: "VerificationCodecss__ClipboardPlaceholderUI",
  componentId: "sc-1w7k468-4"
})(["position:absolute;top:0;left:0;opacity:0;pointer-events:none;width:1px;height:1px;overflow:hidden;"]);
exports.ClipboardPlaceholderUI = ClipboardPlaceholderUI;
var ValidIconUI = (0, _styledComponents.default)(_Tooltip.default).withConfig({
  displayName: "VerificationCodecss__ValidIconUI",
  componentId: "sc-1w7k468-5"
})(["position:absolute;right:8px;top:calc(50% - 24px / 2);"]);
exports.ValidIconUI = ValidIconUI;
var IconUI = (0, _styledComponents.default)(_Icon.default).withConfig({
  displayName: "VerificationCodecss__IconUI",
  componentId: "sc-1w7k468-6"
})(["color:#f23459;"]);
exports.IconUI = IconUI;