wix-style-react/dist/src/Themes/brand/components/InputWithLabel/InputWithLabel.st.css

wix-style-react

@st-namespace "BrandInputWithLabel";

:import {
  -st-from: "../../../../InputWithLabel/InputWithLabel.st.css";
  -st-default: InputWithLabel;
}

:import {
  -st-from: "../../Foundations/colors.st.css";
  -st-named: D40, R10, R30, B05, D80, B20, B40, D10-30, BR40, Y30;
}

.root {
  -st-extends: InputWithLabel;
}

.root,
.root:newColorsBranding {
  border: solid 1px value(D40);
}

/* Focus */
.root:hasFocus,
.root:focus {
  border-color: value(B05);
  border-width: 2px;
  box-shadow: none;
}

/* Hover */
.root:hover:not(:hasFocus):not(:disabled):border(standard),
.root:forceHover:not(.disabled):border(standard),
.root:hover:not(:hasFocus):not(:disabled):border(round),
.root:forceHover:not(.disabled):border(round) {
  border-color: value(B20);
  background-color: value(D80);
}

/* Disabled */
.root:disabled {
  border-color: value(BR40);
  background-color: value(D80);
  color: value(D10-30);
}

/* Hover with error*/
.root:hover:not(:hasFocus):not(:disabled):border(standard):status(error),
.root:forceHover:not(.disabled):border(standard):status(error),
.root:hover:not(:hasFocus):not(:disabled):border(round):status(error),
.root:forceHover:not(.disabled):border(round):status(error) {
  border-color: value(R30);
  background-color: value(D80);
}

/* Focus with error*/
.root:not(:disabled):status(error):border(standard):hasFocus,
.root:not(:disabled):status(error):border(round):hasFocus {
  border-color: value(R10);
  border-width: 2px;
  box-shadow: none;
}

/* Hover with warning*/
.root:hover:not(:hasFocus):not(:disabled):border(standard):status(warning),
.root:forceHover:not(.disabled):border(standard):status(warning),
.root:hover:not(:hasFocus):not(:disabled):border(round):status(warning),
.root:forceHover:not(.disabled):border(round):status(warning) {
  border-color: value(Y30);
  background-color: value(D80);
}

/* Focus with warning*/
.root:not(:disabled):status(warning):border(standard):hasFocus,
.root:not(:disabled):status(warning):border(round):hasFocus {
  border-color: value(Y30);
  border-width: 2px;
  box-shadow: none;
}
/* st-namespace-reference="../../../../../../src/Themes/brand/components/InputWithLabel/InputWithLabel.st.css" */