@vimeo/iris/components/inputs/TextArea/TextArea.style.js

Vimeo Design System

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var tslib_es6 = require('../../../tslib.es6-3ec409b7.js');
var styled = require('styled-components');
var polished = require('polished');
var components_inputs_Shared = require('../Shared.js');
var color_colors = require('../../../color/colors.js');
var icons_ui_CircleInfoSmall = require('../../../icons/ui/CircleInfoSmall.js');
require('react');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);

var TextAreaStyled = styled__default["default"].textarea(templateObject_2 || (templateObject_2 = tslib_es6.__makeTemplateObject(["\n  display: block;\n  width: 100%;\n  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;\n  padding: 1rem;\n  font-size: ", ";\n  line-height: 1.25rem;\n  height: auto;\n  border-radius: 0.2rem;\n  ", ";\n\n  &:placeholder {\n    color: ", ";\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  ", ";\n"], ["\n  display: block;\n  width: 100%;\n  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;\n  padding: 1rem;\n  font-size: ", ";\n  line-height: 1.25rem;\n  height: auto;\n  border-radius: 0.2rem;\n  ", ";\n\n  &:placeholder {\n    color: ", ";\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  ", ";\n"])), polished.rem(14), components_inputs_Shared.inputColors, color_colors.slate(200), function (props) {
    return props.hasIcon && styled.css(templateObject_1 || (templateObject_1 = tslib_es6.__makeTemplateObject(["\n      padding-left: 2.25rem;\n    "], ["\n      padding-left: 2.25rem;\n    "])));
});
var InfoIcon = styled__default["default"](icons_ui_CircleInfoSmall.CircleInfoSmall)(templateObject_3 || (templateObject_3 = tslib_es6.__makeTemplateObject(["\n  position: absolute;\n  top: ", ";\n  left: ", ";\n  width: ", ";\n  height: ", ";\n\n  * {\n    fill: ", ";\n  }\n"], ["\n  position: absolute;\n  top: ", ";\n  left: ", ";\n  width: ", ";\n  height: ", ";\n\n  * {\n    fill: ", ";\n  }\n"])), polished.rem(18), polished.rem(10), polished.rem(20), polished.rem(20), color_colors.red(500));
var templateObject_1, templateObject_2, templateObject_3;

exports.InfoIcon = InfoIcon;
exports.TextAreaStyled = TextAreaStyled;