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

wix-style-react

@property --minHeight;
@property --maxHeight;

:import {
  -st-from: '../Foundation/stylable/colors.st.css';
  -st-named: D80, D10-30, R10, R30, R40, Y10, Y30, Y40, F00, D10, D40, B10, B30, B40, B50;
}

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

@st-import [
  --wds-input-border-radius-default-medium,
  --wds-input-value-font-size-medium,
  --wds-input-value-font-line-height-medium,
  --wds-color-border-destructive-secondary-active,
  --wds-color-border-standard-secondary-active,
  --wds-color-border-standard-secondary-disabled,
  --wds-color-border-standard-secondary-hover,
  --wds-color-border-standard-secondary,
  --wds-color-border-warning-secondary-active,

  --wds-color-fill-standard-tertiary-hover,
  --wds-color-fill-standard-tertiary,

  --wds-color-text-disabled,
  --wds-color-text-placeholder,
  --wds-color-text-standard-primary,

  --wds-input-padding-horizontal-medium,
  --wds-input-padding-vertical-medium,

  --wds-shadow-focus-destructive,
  --wds-shadow-focus-standard,
  --wds-shadow-focus-warning,

  --wds-space-100,
  --wds-space-50,
  ] from "@wix/design-system-tokens/all.st.css";

:vars {
  minWidth: 378px;
  minHeight: 72px;
  backgroundColor: var(--wds-color-fill-standard-tertiary, value(D80));
  border: 1px solid var(--wds-color-border-standard-secondary, value(B30));
  borderRadius: var(--wds-input-border-radius-default-medium, 6px);
  padding: var(--wds-input-padding-vertical-medium, 12px) var(--wds-input-padding-horizontal-medium, 12px);
  errorBorderColor: var(--wds-color-border-destructive-secondary-active, value(R10));
  warningBorderColor: var(--wds-color-border-warning-secondary-active, value(Y10));
}

.font-medium {
  font-size: var(--wds-input-value-font-size-medium, 16px);
  line-height: var(--wds-input-value-font-line-height-medium, 24px);
}

.root {
  -st-states: hidePlaceholder, disabled, hasError, hasWarning, newColorsBranding;
  min-height: value(minHeight);
  min-width: value(minWidth);
  background-color: value(backgroundColor);
  border-radius: value(borderRadius);
}

.root :global(.public-DraftEditorPlaceholder-root) {
  padding: 0 var(--wds-space-50, 0) 0 var(--wds-space-100, 0);
  position: absolute;
  pointer-events: none;
  color: var(--wds-color-text-placeholder, value(D40));
  -st-mixin: text-medium-thin, font-medium;
}

.root:disabled :global(.public-DraftEditorPlaceholder-root) {
  color: var(--wds-color-text-disabled, value(D10-30));
}

.root:disabled .link {
  color: var(--wds-color-text-disabled, value(D10-30));
}

.root:hidePlaceholder :global(.public-DraftEditorPlaceholder-root) {
  display: none;
}

.toolbar {
  display: flex;
  border: value(border);
  border-bottom: 0;
  border-top-left-radius: value(borderRadius);
  border-top-right-radius: value(borderRadius);
}

.root:newColorsBranding .toolbar {
  border-color: var(--wds-color-border-standard-secondary, value(B40));
  border-bottom: 0;
}

.root:newColorsBranding:disabled .toolbar {
  border-color: var(--wds-color-border-standard-secondary-disabled, value(B40));
}

.root:disabled .toolbar {
  border-color: var(--wds-color-border-standard-secondary-disabled, value(D10-30));
}

.editorWrapper {
  position: relative;
  padding: value(padding);
  border: value(border);
  border-bottom-left-radius: value(borderRadius);
  border-bottom-right-radius: value(borderRadius);
  background-color: value(backgroundColor);
  color: var(--wds-color-text-standard-primary, value(D10));
  min-height: var(--minHeight, value(minHeight));
  max-height: var(--maxHeight);
  overflow: auto;
  box-sizing: border-box;
}

.root:newColorsBranding .editorWrapper {
  border-color: var(--wds-color-border-standard-secondary, value(B40));
}

.root:newColorsBranding:disabled .editorWrapper {
  border-color: var(--wds-color-border-standard-secondary-disabled, value(B40));
}

.root .editorWrapper:hover {
  border-color: var(--wds-color-border-standard-secondary-hover, value(B40));
  background-color: var(--wds-color-fill-standard-tertiary-hover, value(B50));
  cursor: pointer;
}

.root:disabled .editorWrapper {
  color: var(--wds-color-text-disabled, value(D10-30));
  border-color: var(--wds-color-border-standard-secondary-disabled, value(D10-30));
}

.root:disabled .editorWrapper:hover {
  background-color: value(backgroundColor);
  cursor: default;
}

.editorWrapper :global(.public-DraftEditor-content) {
  padding: 0 var(--wds-space-50, 0) 0 var(--wds-space-100, 0);
  -st-mixin: text-medium-thin, font-medium;
}

.root .editorWrapper:focus-within {
  background-color: var(--wds-color-fill-standard-tertiary, value(D80));
  cursor: text;
  border-color: var(--wds-color-border-standard-secondary-active, value(B10));
  box-shadow: var(--wds-shadow-focus-standard, 0 0 0 3px value(F00));
}

.root:hasError .editorWrapper {
  border-color: value(errorBorderColor);
}

.root:hasError .editorWrapper:focus-within {
  border-color: value(errorBorderColor);
  box-shadow: var(--wds-shadow-focus-destructive, 0 0 0 3px value(R30));
}

.root:newColorsBranding:hasError .editorWrapper:focus-within {
  box-shadow: var(--wds-shadow-focus-destructive, 0 0 0 3px value(R40));
}

.root:hasWarning .editorWrapper {
  border-color: value(warningBorderColor);
}

.root:hasWarning .editorWrapper:focus-within {
  border-color: value(warningBorderColor);
  box-shadow: var(--wds-shadow-focus-warning, 0 0 0 3px value(Y30));
}

.root:newColorsBranding:hasWarning .editorWrapper:focus-within {
  box-shadow: var(--wds-shadow-focus-warning, 0 0 0 3px value(Y40));
}

.statusIndicator {
  position: absolute;
  top: var(--wds-input-padding-vertical-medium, 9px);
  right: var(--wds-input-padding-horizontal-medium, 12px);
  padding: 0 var(--wds-space-50, 0) 0 var(--wds-space-100, 0);
}

.link {
  text-decoration: none;
  color: value(B10);
  -st-mixin: text-medium-thin, font-medium;
}

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