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

React component library for Help Scout's Design System

"use strict";

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

exports.__esModule = true;
exports.MaskUI = exports.EditableTextareaUI = exports.ComponentUI = void 0;

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

var _EditableField = require("../EditableField/EditableField.utils");

var _constants = require("../../styles/configs/constants");

var field = _EditableField.SIZES.field,
    focusIndicator = _EditableField.SIZES.focusIndicator,
    floatingLabel = _EditableField.SIZES.floatingLabel;
var ComponentUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "EditableTextareacss__ComponentUI",
  componentId: "sc-1bi7jf4-0"
})(["width:100%;max-width:100%;margin-bottom:40px;"]);
exports.ComponentUI = ComponentUI;
var EditableTextareaUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "EditableTextareacss__EditableTextareaUI",
  componentId: "sc-1bi7jf4-1"
})(["box-sizing:border-box;position:relative;display:flex;border-bottom:1px dashed ", ";&::after{content:'';box-sizing:border-box;display:block;position:absolute;bottom:-1px;left:0;right:0;height:", ";background-color:", ";transform-origin:bottom left;transform:scaleX(1);transition:transform 0.3s ease;z-index:3;will-change:transform;}&.is-readonly:after{transform:scaleX(0);}&.is-readonly{&:not(.with-placeholder){border-bottom:1px dashed ", ";&:hover{border-bottom:1px dashed ", ";}}textarea{cursor:text;background-color:#fff;&::placeholder{color:", ";}}}&.with-placeholder.is-readonly{.field:not(.is-hidden):not(.EditableTextarea__Textarea){display:block;overflow:visible;width:100%;span{border-bottom:1px dashed ", ";display:inline-block;height:20px;}&:hover{cursor:pointer;span{border-bottom:1px dashed ", ";}}}}&.is-readonly.is-clamped::before{content:'';box-sizing:border-box;display:block;position:absolute;width:calc(100% - 10px);height:50px;", ";left:0;bottom:0;pointer-events:none;z-index:3;}.field{align-items:stretch;box-sizing:border-box;position:relative;width:100%;max-width:100%;height:auto;border:0;margin:0;padding:0 10px 0 0;color:", ";font-family:", ";font-size:", ";line-height:20px;outline:none;resize:none;overflow:hidden;box-shadow:none;scrollbar-width:thin;&:not(.is-hidden):not(.is-inline):not(.EditableTextarea__Textarea){border-bottom:1px solid transparent;}&.is-hidden{display:none;}&.is-inline{display:inline-block;height:20px;width:auto;padding:0;color:", ";border-bottom:1px solid transparent;}}.EditableTextarea__Textarea{&.is-placeholder{position:absolute;top:0;left:0;border:0;transform:scaleX(0.1);transform-origin:top left;&::placeholder{color:", ";}}&:hover,&:focus{overflow-y:auto;overscroll-behavior-y:contain;}&::placeholder{color:", ";}.with-floatingLabels &{&::placeholder{color:", ";}}::-webkit-scrollbar{width:7px;background:rgba(0,0,0,0);border-radius:100px;}::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.25);border-radius:100px;}::-webkit-scrollbar-thumb:active{background:rgba(0,0,0,0.5);border-radius:100px;}}"], _EditableField.COLOURS.invisible, focusIndicator.active, function (_ref) {
  var focusIndicatorColor = _ref.focusIndicatorColor;
  return focusIndicatorColor;
}, _EditableField.COLOURS.invisible, _EditableField.COLOURS.mask.border, _EditableField.COLOURS.mask.placeholder.regular, _EditableField.COLOURS.mask.border, _EditableField.COLOURS.mask.placeholder.border.hover, function (_ref2) {
  var overflowCueColor = _ref2.overflowCueColor;
  return "background: -moz-linear-gradient(\n        top,\n        " + overflowCueColor + " 0%,\n        rgba(255, 255, 255, 0) 100%\n      );\n      background: -webkit-linear-gradient(\n        top,\n        " + overflowCueColor + " 0%,\n        rgba(255, 255, 255, 0) 100%\n      );\n      background: linear-gradient(\n        to top,\n        " + overflowCueColor + " 0%,\n        rgba(255, 255, 255, 0) 100%\n      )";
}, _EditableField.COLOURS.input.regular, _constants.FONT_FAMILY, field.font.medium, _EditableField.COLOURS.mask.placeholder.regular, _EditableField.COLOURS.invisible, _EditableField.COLOURS.mask.placeholder.disabled, function (_ref3) {
  var inputValue = _ref3.inputValue;
  return "" + (inputValue ? _EditableField.COLOURS.invisible : _EditableField.COLOURS.input.placeholder);
});
exports.EditableTextareaUI = EditableTextareaUI;
var MaskUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "EditableTextareacss__MaskUI",
  componentId: "sc-1bi7jf4-2"
})(["&.EditableTextarea__Mask{will-change:transform,font-size;transition-property:transform,font-size;transition-timing-function:linear;transition-duration:0.2s;.with-floatingLabels &{display:block;opacity:", ";transform:", ";transform-origin:center left;position:", ";z-index:5;top:0;left:0;font-family:", ";font-size:", ";color:", ";}.with-floatingLabels .is-readonly &{opacity:1;}}"], function (_ref4) {
  var inputValue = _ref4.inputValue;
  return "" + (inputValue ? '1' : '0');
}, function (_ref5) {
  var inputValue = _ref5.inputValue;
  return "translateY(" + (inputValue ? -15 : 0) + "px)";
}, function (_ref6) {
  var inputValue = _ref6.inputValue;
  return "" + (inputValue ? 'absolute' : 'relative');
}, _constants.FONT_FAMILY, function (_ref7) {
  var inputValue = _ref7.inputValue;
  return "" + (inputValue ? floatingLabel.font.medium : field.font.medium);
}, _EditableField.COLOURS.input.placeholder);
exports.MaskUI = MaskUI;