suomifi-ui-components/dist/cjs/core/Form/Textarea/Textarea.baseStyles.js

Suomi.fi UI component library

'use strict';

var tslib = require('tslib');
var styledComponents = require('styled-components');
var index = require('../../theme/reset/index.js');
var spacing = require('../../theme/utils/spacing.js');

var baseStyles = function baseStyles(theme, globalMargins, propMargins) {
  return styledComponents.css(templateObject_1 || (templateObject_1 = tslib.__makeTemplateObject(["\n  ", "\n  ", "\n  ", "\n  ", ";\n  ", "\n  color: ", ";\n  width: 290px;\n\n  &.fi-textarea {\n    display: flex;\n    flex-direction: column;\n\n    & .fi-textarea_bottom-wrapper {\n      display: flex;\n      justify-content: space-between;\n    }\n\n    & .fi-textarea_character-counter {\n      ", ";\n      color: ", ";\n      font-size: 14px;\n      line-height: 20px;\n      flex: none;\n      margin-top: ", ";\n\n      &.fi-textarea_character-counter--error {\n        color: ", ";\n        ", ";\n        font-size: 14px;\n        line-height: 20px;\n      }\n    }\n\n    & .fi-textarea_statusText--has-content {\n      margin-top: ", ";\n    }\n\n    & .fi-textarea_textarea-element-container {\n      &:focus-within {\n        ", " /* For high contrast mode */\n        position: relative;\n\n        &::after {\n          ", "\n        }\n      }\n    }\n\n    & .fi-label {\n      margin-bottom: ", ";\n    }\n\n    & .fi-hint-text {\n      margin-bottom: ", ";\n    }\n\n    & .fi-textarea_textarea {\n      display: block;\n      resize: vertical;\n      border-radius: 2px;\n      border: 1px solid ", ";\n      box-shadow: ", ";\n      padding: 8px 14px 13px 10px;\n      ", ";\n      width: 100%;\n      background-color: ", ";\n\n      &:focus {\n        outline: none;\n      }\n\n      &::placeholder {\n        font-style: italic;\n        color: ", ";\n        opacity: 1;\n      }\n\n      &-resize--horizontal {\n        resize: horizontal;\n      }\n\n      &-resize--both {\n        resize: both;\n      }\n\n      &-resize--none {\n        resize: none;\n      }\n    }\n\n    & .fi-status-text {\n      display: block;\n      line-height: 18px;\n    }\n\n    &.fi-textarea--disabled {\n      color: ", ";\n      cursor: not-allowed;\n\n      & .fi-textarea_textarea {\n        background-color: ", ";\n      }\n    }\n\n    &.fi-textarea--error {\n      & .fi-textarea_textarea {\n        border: 2px solid ", ";\n      }\n    }\n  }\n\n  &.fi-textarea--full-width {\n    width: 100%;\n  }\n"], ["\n  ", "\n  ", "\n  ", "\n  ", ";\n  ", "\n  color: ", ";\n  width: 290px;\n\n  &.fi-textarea {\n    display: flex;\n    flex-direction: column;\n\n    & .fi-textarea_bottom-wrapper {\n      display: flex;\n      justify-content: space-between;\n    }\n\n    & .fi-textarea_character-counter {\n      ", ";\n      color: ", ";\n      font-size: 14px;\n      line-height: 20px;\n      flex: none;\n      margin-top: ", ";\n\n      &.fi-textarea_character-counter--error {\n        color: ", ";\n        ", ";\n        font-size: 14px;\n        line-height: 20px;\n      }\n    }\n\n    & .fi-textarea_statusText--has-content {\n      margin-top: ", ";\n    }\n\n    & .fi-textarea_textarea-element-container {\n      &:focus-within {\n        ", " /* For high contrast mode */\n        position: relative;\n\n        &::after {\n          ", "\n        }\n      }\n    }\n\n    & .fi-label {\n      margin-bottom: ", ";\n    }\n\n    & .fi-hint-text {\n      margin-bottom: ", ";\n    }\n\n    & .fi-textarea_textarea {\n      display: block;\n      resize: vertical;\n      border-radius: 2px;\n      border: 1px solid ", ";\n      box-shadow: ", ";\n      padding: 8px 14px 13px 10px;\n      ", ";\n      width: 100%;\n      background-color: ", ";\n\n      &:focus {\n        outline: none;\n      }\n\n      &::placeholder {\n        font-style: italic;\n        color: ", ";\n        opacity: 1;\n      }\n\n      &-resize--horizontal {\n        resize: horizontal;\n      }\n\n      &-resize--both {\n        resize: both;\n      }\n\n      &-resize--none {\n        resize: none;\n      }\n    }\n\n    & .fi-status-text {\n      display: block;\n      line-height: 18px;\n    }\n\n    &.fi-textarea--disabled {\n      color: ", ";\n      cursor: not-allowed;\n\n      & .fi-textarea_textarea {\n        background-color: ", ";\n      }\n    }\n\n    &.fi-textarea--error {\n      & .fi-textarea_textarea {\n        border: 2px solid ", ";\n      }\n    }\n  }\n\n  &.fi-textarea--full-width {\n    width: 100%;\n  }\n"])), index.element(theme), index.font(theme)('bodyText'), spacing.buildSpacingCSS(globalMargins), spacing.buildSpacingCSS(propMargins, true), index.fixInternalMargins(), theme.colors.blackBase, index.font(theme)('bodyTextSmall'), theme.colors.blackBase, theme.spacing.xxs, theme.colors.alertBase, index.font(theme)('bodySemiBoldSmall'), theme.spacing.xxs, theme.focuses.highContrastFocus, theme.focuses.absoluteFocus, theme.spacing.xs, theme.spacing.xs, theme.colors.depthDark3, theme.shadows.actionElementBoxShadow, theme.typography.bodyTextSmall, theme.colors.whiteBase, theme.colors.depthDark2, theme.colors.depthBase, theme.colors.depthLight3, theme.colors.alertBase);
};
var templateObject_1;

exports.baseStyles = baseStyles;
//# sourceMappingURL=Textarea.baseStyles.js.map