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

wix-style-react

@st-import [B10, R10, Y10, THEME-TEXT-COLOR-SECONDARY-LIGHT] from "../Foundation/stylable/colors.st.css";

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

@st-import Text from "../Text/Text.st.css";
@st-import [
  --wds-color-text-primary,
  --wds-color-text-destructive,
  --wds-color-text-warning,
  --wds-color-text-placeholder,

  --wds-form-field-label-gap-small,
  --wds-form-field-label-gap-tiny,

  --wds-space-50,
  --wds-space-100,

  --wds-font-size-600,
  --wds-font-size-800,

  --wds-form-field-label-font-line-height-tiny,
  --wds-form-field-label-font-line-height-small,

  --wds-form-field-label-font-size-tiny,
  --wds-form-field-label-font-size-small,
] from "@wix/design-system-tokens/all.st.css";

:vars {
  suffixHorizontalPaddingSmall: var(--wds-form-field-label-gap-small, 12px);
  suffixHorizontalPaddingTiny: var(--wds-form-field-label-gap-tiny, 12px);
  inlineLabelMinHeight: 36px;
  childrenMarginSmall: var(--wds-form-field-label-gap-small, 6px);
  childrenMarginTiny: var(--wds-form-field-label-gap-tiny, 6px);
  suffixHeight: 18px;
}

.root {
  -st-states: labelPlacement(enum(top, left, right)), labelAlignment(enum(top, middle)), labelSize(enum(tiny, small)), required, stretchContent, minLabelHeight, hasInlineElements;
  display: inline-flex;
  flex-wrap: wrap;
  font-size: initial;
}

.root:labelAlignment(middle) {
  align-items: center;
}

.root:labelAlignment(top) {
  align-items: flex-start;
}


.root:stretchContent {
  display: flex;
  width: 100%;
}

.root:hasInlineElements {
  display: inline-grid;
  align-content: center;
  grid-template-rows: max-content max-content;
  grid-template-columns: min-content min-content;
}

.root:hasInlineElements .label {
  width: max-content;
}

.root:labelPlacement(left) {
  grid-template-columns: max-content min-content;
  justify-content: flex-end;
}

.root:hasInlineElements:stretchContent {
  display: grid;
  grid-template-columns: 1fr max-content;
}

.root:labelPlacement(left):stretchContent {
  grid-template-columns: max-content 1fr;
}

.root:labelPlacement(left) .labelIndicators {
  order: 1;
}

.root:labelPlacement(left) .children {
  order: 2;
}

.root:labelPlacement(left) .statusMessage {
  order: 3;
  grid-column-start: 2;
  grid-column-end: 3;
  padding-left: value(suffixHorizontalPaddingSmall);
}

.root:labelPlacement(left):labelSize(tiny) .statusMessage {
  padding-left: value(suffixHorizontalPaddingTiny);
}

.root:labelPlacement(right) .statusMessage {
  order: 3;
  grid-column-start: 1;
  grid-column-end: 3;
}

.root .children {
  margin: auto 0;
}

.root:stretchContent .children {
  flex-grow: 1;
}

.root:labelPlacement(top) .children {
  padding-top: value(childrenMarginSmall);
}

.root:labelPlacement(top):labelSize(tiny) .children {
  padding-top: value(childrenMarginTiny);
}

.children {
  -st-states: childrenWithInlineLabel;
  flex: 0 0 100%;
  max-width: 100%;
}

.children:childrenWithInlineLabel {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
}

.children:childrenWithInlineLabel .suffix {
  margin-bottom: value(childrenMarginSmall);
}

.root:labelSize(tiny) .children:childrenWithInlineLabel .suffix {
  margin-bottom: value(childrenMarginTiny);
}

.root:labelPlacement(right) .children:childrenWithInlineLabel {
  padding-right: value(suffixHorizontalPaddingSmall);
}

.root:labelPlacement(right):labelSize(tiny) .children:childrenWithInlineLabel {
  padding-right: value(suffixHorizontalPaddingTiny);
}

.root:labelPlacement(left) .children:childrenWithInlineLabel {
  padding-left: value(suffixHorizontalPaddingSmall);
}

.root:labelPlacement(left):labelSize(tiny) .children:childrenWithInlineLabel {
  padding-left: value(suffixHorizontalPaddingTiny);
}

.root:minLabelHeight .labelRow,
.root:minLabelHeight .labelIndicators {
  min-height: value(inlineLabelMinHeight);
  line-height: value(inlineLabelMinHeight);
}

.root:labelPlacement(top) .labelRow {
  display: flex;
  align-items: flex-end;
  flex: 1 0 auto;
  max-width: 100%;
  justify-content: space-between;
}

.labelRowMain {
  display: flex;
  min-width: 0;
}

.labelIndicators {
  -st-states: inlineWithSuffix;
  display: flex;
  align-items: center;
}

.labelIndicators:inlineWithSuffix {
  /* Aligns the inline label on the top in case the suffix (whether custom or the char counter) appears */
  margin-top: calc(value(suffixHeight) + value(childrenMarginSmall));
}

.label {
  -st-states: labelSize(enum(tiny, small));
  -st-extends: Text;
}

.label:weight(normal):labelSize(tiny) {
  font-size: var(--wds-form-field-label-font-size-tiny, 12px);
  line-height: var(--wds-form-field-label-font-line-height-tiny, 15px);
}

.label:weight(thin):labelSize(small) {
  font-size: var(--wds-form-field-label-font-size-small, 14px);
  line-height: var(--wds-form-field-label-font-line-height-small, 18px);
}

.root:labelSize(tiny) .labelIndicators:inlineWithSuffix {
  margin-top: calc(value(suffixHeight) + value(childrenMarginTiny));
}

.asterisk {
  -st-mixin: text-small-thin;
  display: inline-block;
  color: var(--wds-color-text-primary, value(B10));
  margin-left: var(--wds-space-100, 6px);
  margin-top: -4px;
  font-size: var(--wds-font-size-800, 22px);
}

.root:labelSize(small) .asterisk {
  -st-mixin: text-small-thin;
  font-size: var(--wds-font-size-600, 18px);
  line-height: var(--wds-form-field-label-font-line-height-small, 18px);
  margin-top: -1px;
}

.root:labelSize(tiny) .asterisk {
  -st-mixin: text-tiny-thin;
  font-size: var(--wds-font-size-600, 18px);
  line-height: var(--wds-form-field-label-font-line-height-tiny, 15px);
  margin-top: -1px;
}

.suffix {
  -st-states: noLabel;
  display: flex;
  max-width: 50%;
  justify-content: flex-end;
}

.suffix:noLabel {
  max-width: 100%;
}

.charCount {
  -st-states: labelSize(enum(tiny, small));
  -st-extends: Text;
}

.charCount:weight(normal):skin(standard):secondary {
  color: var(--wds-color-text-placeholder, value(THEME-TEXT-COLOR-SECONDARY-LIGHT));
}

.charCount:weight(normal):labelSize(tiny) {
  font-size: var(--wds-form-field-label-font-size-tiny, 12px);
  line-height: var(--wds-form-field-label-font-line-height-tiny, 15px);
}

.charCount:weight(normal):labelSize(small) {
  font-size: var(--wds-form-field-label-font-size-small, 14px);
  line-height: var(--wds-form-field-label-font-line-height-small, 18px);
}

.infoIcon {
  margin-left: var(--wds-space-100, 3px);
}

.root:required .infoIcon {
  margin-left: 0;
}

.root:labelSize(tiny) .infoIcon {
  margin-bottom: -3px;
}

.statusMessage {
  -st-states: status(enum(error, warning)), labelSize(enum(tiny, small));
  display: flex;
  gap: var(--wds-space-50, 3px);
  margin-top: var(--wds-space-100, 6px);
}

.statusMessage:status(error) .statusIcon {
  color: var(--wds-color-text-destructive, value(R10));
}

.statusMessage:status(warning) .statusIcon {
  color: var(--wds-color-text-warning, value(Y10));
}

.statusMessage:labelSize(tiny) .statusIcon {
  height: 16px;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.statusIcon {
  flex-shrink: 0;
}

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