wix-style-react/dist/src/InputArea/InputArea.st.css

wix-style-react

@st-import [
  --wds-font-size-body-small,
  --wds-color-blue-500,
  --wds-color-text-standard-primary,
  --wds-color-text-disabled,
  --wds-color-text-placeholder,
  --wds-color-fill-standard-tertiary,
  --wds-color-fill-standard-tertiary-hover,
  --wds-color-border-standard-secondary,
  --wds-color-border-destructive-secondary-active,
  --wds-color-border-warning-secondary-active,
  --wds-color-border-standard-secondary-active,
  --wds-color-border-standard-secondary-readonly,
  --wds-color-border-standard-secondary-disabled,
  --wds-color-border-standard-secondary-hover,
  --wds-color-fill-standard-tertiary-readonly,
  --wds-shadow-focus-standard,
  --wds-shadow-focus-destructive,
  --wds-shadow-focus-warning,
  --wds-space-100,
  --wds-input-area-padding-vertical-small,
  --wds-input-area-padding-right-small,
  --wds-input-area-padding-left-small,
  --wds-input-area-padding-vertical-medium,
  --wds-input-area-padding-right-medium,
  --wds-input-area-padding-left-medium,
  --wds-input-area-border-radius-default-medium,
  --wds-input-value-font-size-small,
  --wds-input-value-font-size-medium,
  --wds-input-value-font-line-height-small,
  --wds-input-value-font-line-height-medium,
  --wds-border-radius-full,
  --wds-input-size-small,
  --wds-input-size-medium,
  ] from '@wix/design-system-tokens/all.st.css';

@property --border-color;
@property --border-color-destructive;
@property --border-color-warning;
@property --border-color-disabled;
@property --wds-input-area-height-small-adjusted;
@property --wds-input-area-height-medium-adjusted;

:import {
  -st-from: '../Input/Input.mixins.js';
  -st-named: boxSizingMixin, placeholderMixin;
}

:import {
  -st-from: '../Foundation/stylable/colors.st.css';
  -st-named: THEME-TEXT-COLOR-PRIMARY, THEME-TEXT-COLOR-SECONDARY-LIGHT,
    B10, B30, B40, B50, D60, D70, D80, F00, D40, R10, R30, R40, Y10,
    Y30, Y40, D10-20, D10-30;
}

:import {
  -st-from: '../Foundation/stylable/typography.st.css';
  -st-named: text-small-thin, text-medium-thin;
}

:import {
  -st-from: '../Foundation/stylable/default-scroll-bar.st.css';
  -st-named: defaultScrollBar;
}

.root {
  -st-states: disabled, size(enum(small, medium)), resizable,
    status(enum(error, warning, loading)), hasFocus, forceHover, readOnly, newColorsBranding;

  -st-mixin: boxSizingMixin('border-box');
  position: relative;
}

.root .inputArea {
  background-color: var(--wds-color-fill-standard-tertiary, value(D80));
  position: relative;
  display: flex;
  align-items: stretch;
  outline: solid 1px var(--wds-color-border-standard-secondary, value(B30));
  outline-offset: -1px;
  border-radius: var(--wds-input-area-border-radius-default-medium, 6px);
}

.root:newColorsBranding .inputArea {
  outline: solid 1px var(--wds-color-border-standard-secondary, value(B40));
}

.root textarea {
  -st-mixin: defaultScrollBar, placeholderMixin(value(THEME-TEXT-COLOR-SECONDARY-LIGHT));

  flex-grow: 1;
  flex-shrink: 1;
  min-width: 20px;
  padding: var(--wds-input-area-padding-vertical-medium, 6px) var(--wds-input-area-padding-right-medium, 9px) var(--wds-input-area-padding-vertical-medium, 6px) var(--wds-input-area-padding-left-medium, 12px);
  margin: 0;
  border: 0;
  outline: 0;
  background: transparent;
  cursor: auto;
  resize: none;
  color: var(--wds-color-text-standard-primary, value(THEME-TEXT-COLOR-PRIMARY));
}

.root:size(small) textarea {
  padding: var(--wds-input-area-padding-vertical-small, 6px) var(--wds-input-area-padding-right-small, 9px) var(--wds-input-area-padding-vertical-small, 6px) var(--wds-input-area-padding-left-small, 12px);
}

.root textarea::-webkit-scrollbar-thumb {
  height: 30px;
}

.root textarea::-webkit-scrollbar {
  border-radius: 0 var(--wds-border-radius-full, 6px) var(--wds-border-radius-full, 6px) 0;
}

.root:size(small),
.root:size(small) textarea {
  -st-mixin: text-small-thin;
  font-size: var(--wds-input-value-font-size-small, 14px);
  line-height: var(--wds-input-value-font-line-height-small, 18px);
  min-height: var(--wds-input-size-small, 18px);
}

.root:size(medium),
.root:size(medium) textarea {
  -st-mixin: text-medium-thin;
  font-size: var(--wds-input-value-font-size-medium, 16px);
  line-height: var(--wds-input-value-font-line-height-medium, 24px);
  min-height: var(--wds-input-size-medium, 34px);
}

.root textarea::selection {
  background: var(--wds-color-blue-500, value(B40));
}

/* Counter */
.counter {
  position: absolute;
  top: -24px;
  right: 0;
  font-size: var(--wds-font-size-body-small, 14px);
  line-height: 1.3;
  color: var(--wds-color-text-placeholder, value(D40));
}

:global([dir='rtl']) .counter {
  right: unset;
  left: 0;
}

/* Focus */
.root:hasFocus .inputArea {
  outline-color: var(--wds-color-border-standard-secondary-active, value(B10));
  box-shadow: var(--wds-shadow-focus-standard, 0 0 0 3px value(F00));
}

.root {
  --border-color: var(--wds-color-border-standard-secondary-hover, value(B40));
  --border-color-destructive: var(--wds-color-border-destructive-secondary-active, value(R10));
  --border-color-warning: var(--wds-color-border-warning-secondary-active, value(Y10));
  --border-color-disabled: var(--wds-color-border-standard-secondary-disabled, value(D10-20));
}

.root:newColorsBranding {
  --border-color: var(--wds-color-border-standard-secondary-hover, value(B40));
  --border-color-destructive: var(--wds-color-border-destructive-secondary-active, value(R10));
  --border-color-warning: var(--wds-color-border-warning-secondary-active, value(Y10));
  --border-color-disabled: var(--wds-color-border-standard-secondary-disabled, value(D10-20));
}

/* Disabled */
.root:disabled .inputArea {
  outline-color: var(--border-color-disabled);
}

.root:disabled textarea {
  -st-mixin: placeholderMixin(value(D10-30));
  color: var(--wds-color-text-disabled, value(D10-30));
}

/* Status */
.status {
  position: absolute;
  right: 6px;
  top: 0;
  margin: var(--wds-space-100, 6px);
}

:global([dir='rtl']) .status {
  right: unset;
  left: 6px;
}

.root:not(:disabled):status(error) .inputArea {
  outline-color: var(--border-color-destructive);
  box-shadow: none;
}

.root:not(:disabled):status(error):hasFocus .inputArea {
  outline-color: var(--border-color-destructive);
  box-shadow: var(--wds-shadow-focus-destructive, 0 0 0 3px value(R30));
}

.root:newColorsBranding:not(:disabled):status(error):hasFocus .inputArea {
  box-shadow: var(--wds-shadow-focus-destructive, 0 0 0 3px value(R40));
}

.root:not(:disabled):status(warning) .inputArea {
  outline-color: var(--border-color-warning);
  box-shadow: none;
}

.root:not(:disabled):status(warning):hasFocus .inputArea {
  outline-color: var(--border-color-warning);
  box-shadow: var(--wds-shadow-focus-warning, 0 0 0 3px value(Y30));
}

.root:newColorsBranding:not(:disabled):status(warning):hasFocus .inputArea {
  box-shadow: var(--wds-shadow-focus-warning, 0 0 0 3px value(Y40));
}

/* Hover */
.root:not(:hasFocus):not(:disabled) .inputArea:hover {
  outline-color: var(--border-color);
}

.root:not(:hasFocus):not(:disabled):status(error) .inputArea:hover {
  outline-color: var(--border-color-destructive);
}

.root:not(:hasFocus):not(:disabled):status(warning) .inputArea:hover {
  outline-color: var(--border-color-warning);
}

.root:not(:hasFocus):disabled .inputArea:hover {
  outline-color: var(--border-color-disabled);
}

.root:hover:not(:hasFocus):not(:disabled) .inputArea,
.root:forceHover:not(.disabled) .inputArea {
  background-color: var(--wds-color-fill-standard-tertiary-hover, value(B50));
}

.root:hover.readOnly:not(:disabled) .inputArea {
  outline: solid 1px var(--wds-color-border-standard-secondary-hover, value(B30));
}

.root:hover.readOnly.disabled .inputArea {
  outline: solid 1px var(--wds-color-border-standard-secondary-readonly, value(D60));
}

/* Read Only */
.root:readOnly .inputArea {
  outline: solid 1px var(--wds-color-border-standard-secondary-readonly, value(D60));
  background-color: var(--wds-color-fill-standard-tertiary-readonly, value(D70));
}
.root:readOnly:hasFocus .inputArea {
  outline-color: var(--wds-color-border-standard-secondary-active, value(B10));
}

.root:resizable:not(:disabled) textarea {
  resize: vertical;
}

/* st-namespace-reference="../../../src/InputArea/InputArea.st.css" */