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

wix-style-react

:import {
  -st-from: '../Foundation/stylable/easing.st.css';
  -st-named: ease-1;
}

:import {
  -st-from: "../Input/Input.st.css";
  -st-default: Input;
  -st-named: input, menuArrow;
}

:import {
  -st-from: '../Foundation/stylable/colors.st.css';
  -st-named: D30, D40;
}

:import {
  -st-from: '../Text/Text.st.css';
  -st-default: Text;
}

.root {
  position: relative;
  height: 54px;
}

.label {
  -st-states: labelTop, topLabelGray, disabled;

  display: flex;
  align-items: center;
  position: absolute;
  pointer-events: none;
  left: 16px;
  z-index: 1;
  transition: transform 300ms value(ease-1);
  transform-origin: left;
  transform: translateY(15px);
}

.labelText {
  -st-extends: Text;
  transition: inherit;
  transform-origin: inherit;
}

.label:labelTop {
  transform: translateY(3px);
}

.label:labelTop .labelText {
  transform: scale(0.75);
  color: value(D30)
}

.label:labelTop:topLabelGray .labelText {
  color: value(D40)
}

.label:disabled .labelText {
  color: value(D40)
}

.inputContainer {
  -st-extends: Input;
}

.inputContainer:size(tiny),
.inputContainer:size(small),
.inputContainer:size(medium),
.inputContainer:size(large) {
  height: 52px;
}

.inputContainer .input {
  padding: 18px 0 0 4px !important;
}

.inputContainer .menuArrow {
  padding: 14px 6px 14px 9px !important;
}

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