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

wix-style-react

/* st-namespace-reference="../../../src/FormField/FormField.st.css" */
:import {
  -st-from: '../Foundation/stylable/colors.st.css';
  -st-named: THEME-COLOR-20;
}

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

:vars{
  suffixHorizontalPadding: 12px;
  inlineLabelMinHeight: 36px;
  childrenMargin: 6px;
  suffixHeight: 18px;
}

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

.root:labelPlacement(right) {
  flex-flow: row nowrap;
}

.root:labelPlacement(left) {
  flex-flow: row-reverse nowrap;
}

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

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


.root:stretchContent {
  display: flex;
}

.root .children {
  margin: auto 0;
}

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

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

.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(childrenMargin);
}

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

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

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

.root:labelPlacement(top) .label {
  display: flex;
  align-items: end;
  flex: 1 0 auto;
  max-width: 100%;
}

.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(childrenMargin));
}

.asterisk {
  -st-mixin: text-medium-thin;
  display: inline-block;
  color: value(THEME-COLOR-20);
  margin-left: 6px;
  margin-top: -4px;
  font-size: 22px;
}

.root:labelSize(small) .asterisk {
  -st-mixin: text-small-thin;
  font-size: 18px;
  margin-top: -1px;
}

.root:labelSize(tiny) .asterisk {
  -st-mixin: text-tiny-thin;
  font-size: 18px;
  margin-top: -1px;
}

.suffix {
  margin-left: auto;
}

.infoIcon {
  margin-left: 3px;
}

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

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