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

wix-style-react

@property --border-color-hover;
@property --border-color-hover-destructive;
@property --border-color-hover-warning;

:import {
  -st-from: './Input.mixins.js';
  -st-named: boxSizingMixin, placeholderMixin, borderRadiusMixin;
}

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

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

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

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

:import {
  -st-from: '../Foundation/stylable/border.st.css';
  -st-named: THEME-RADIUS-06;
}

@st-import [
  --wds-color-border-destructive-secondary-active,
  --wds-color-border-destructive-secondary-hover,
  --wds-color-border-destructive-tertiary-hover,

  --wds-color-border-standard-secondary,
  --wds-color-border-standard-secondary-active,
  --wds-color-border-standard-secondary-disabled,
  --wds-color-border-standard-secondary-hover,
  --wds-color-border-standard-secondary-readonly,
  --wds-color-border-standard-secondary-readonly,


  --wds-color-border-warning-secondary-active,
  --wds-color-border-warning-secondary-hover,
  --wds-color-border-warning-tertiary-hover,

  --wds-color-fill-standard-secondary,
  --wds-color-fill-standard-tertiary,
  --wds-color-fill-standard-tertiary-disabled,
  --wds-color-fill-standard-tertiary-hover,
  --wds-color-fill-standard-tertiary-readonly,

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

  --wds-input-border-radius-default-tiny,
  --wds-input-border-radius-default-small,
  --wds-input-border-radius-default-medium,
  --wds-input-border-radius-default-large,
  --wds-input-border-radius-round-tiny,
  --wds-input-border-radius-round-small,
  --wds-input-border-radius-round-medium,
  --wds-input-border-radius-round-large,

  --wds-input-padding-horizontal-large,
  --wds-input-padding-horizontal-medium,
  --wds-input-padding-horizontal-small,
  --wds-input-padding-horizontal-tiny,
  --wds-input-padding-vertical-large,
  --wds-input-padding-vertical-medium,
  --wds-input-padding-vertical-small,
  --wds-input-padding-vertical-tiny,

  --wds-input-size-large,
  --wds-input-size-medium,
  --wds-input-size-small,
  --wds-input-size-tiny,

  --wds-input-value-font-line-height-tiny,
  --wds-input-value-font-line-height-small,
  --wds-input-value-font-line-height-medium,
  --wds-input-value-font-line-height-large,

  --wds-input-value-font-size-tiny,
  --wds-input-value-font-size-small,
  --wds-input-value-font-size-medium,
  --wds-input-value-font-size-large,

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

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

@custom-selector :--input .wrapper > .input;

.root {
  -st-states: size(enum(tiny, small, medium, large)), hasFocus,
    status(enum(error, warning)), forceHover, readOnly,
    disabled,
    border(enum(standard, round, bottomLine, none)),
    noLeftBorderRadius, noRightBorderRadius, newColorsBranding;
  -st-mixin: boxSizingMixin('border-box'), borderRadiusMixin(var(--wds-input-border-radius-default-medium, value(THEME-RADIUS-06)));
  position: relative;
  display: flex;
  border: solid 1px var(--wds-color-border-standard-secondary, value(B30));
  background-color: var(--wds-color-fill-standard-tertiary, value(D80));
  color: var(--wds-color-text-standard-primary, value(THEME-TEXT-COLOR-PRIMARY));
}

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

:--input {
  -st-mixin: placeholderMixin(var(--wds-color-text-placeholder, value(D40)));
  color: var(--wds-color-text-standard-primary, value(THEME-TEXT-COLOR-PRIMARY));
  display: block;
  flex: 1 1 auto;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  width: inherit;
  /* FF only */
  overflow-block: scroll;
}

.wrapper {
  display: flex;
  width: 100%;
}

/* Text selection */
:--input::selection {
  background: var(--wds-color-fill-standard-secondary, value(B40));
}

/* Height */
.root:size(tiny) {
  height: var(--wds-input-size-tiny, 23px);
}

.root:size(small) {
  height: var(--wds-input-size-small, 30px);
}

.root:size(medium) {
  height: var(--wds-input-size-medium, 36px);
}

.root:size(large) {
  height: var(--wds-input-size-large, 42px);
}

.root:size(tiny),
.root:size(tiny) > :--input {
  -st-mixin: text-tiny-thin;
  font-size: var(--wds-input-value-font-size-tiny, 12px);
  line-height: var(--wds-input-value-font-line-height-tiny, 15px);
}

.root:size(tiny) > :--input:-webkit-autofill::first-line {
  -st-mixin: text-tiny-thin;
}

.root:size(tiny) > :--input {
  padding: var(--wds-input-padding-vertical-tiny, 3px) var(--wds-space-50, 3px);
}

.root:size(small),
.root:size(small) > :--input {
  -st-mixin: text-small-thin;
  font-size: var(--wds-input-value-font-size-small, 14px);
  line-height: var(--wds-input-value-font-line-height-small, 18px);
}

.root:size(small) > :--input:-webkit-autofill::first-line {
  -st-mixin: text-small-thin;
}

.root:size(small) > :--input {
  padding: var(--wds-input-padding-vertical-small, 5px)
    var(--wds-space-50, 3px)
    var(--wds-input-padding-vertical-small, 5px)
    var(--wds-space-100, 6px);
}

.root:size(medium),
.root:size(medium) > :--input {
  -st-mixin: text-medium-thin;
  font-size: var(--wds-input-value-font-size-medium, 16px);
  line-height: var(--wds-input-value-font-line-height-medium, 24px);
}

.root:size(medium) > :--input:-webkit-autofill::first-line {
  -st-mixin: text-medium-thin;
}

.root:size(medium) > :--input {
  padding: var(--wds-input-padding-vertical-medium, 5px)
    var(--wds-space-50, 3px)
    var(--wds-input-padding-vertical-medium, 5px)
    var(--wds-space-100, 6px);
}

.root:size(large),
.root:size(large) > :--input {
  -st-mixin: text-medium-thin;
  font-size: var(--wds-input-value-font-size-large, 16px);
  line-height: var(--wds-input-value-font-line-height-large, 24px);
}

.root:size(large) > :--input:-webkit-autofill::first-line {
  -st-mixin: text-medium-thin;
}

.root:size(large) > :--input {
  padding: var(--wds-input-padding-vertical-large, 8px)
    var(--wds-space-50, 3px)
    var(--wds-input-padding-vertical-large, 8px)
    var(--wds-space-100, 6px);
}

.root:size(tiny) > .wrapper {
  padding: 0 var(--wds-input-padding-horizontal-tiny, 6px);
}

.root:size(small) > .wrapper {
  padding: 0 var(--wds-input-padding-horizontal-small, 6px) 0 var(--wds-input-padding-horizontal-small, 6px);
}

.root:size(medium) > .wrapper {
  padding: 0 var(--wds-input-padding-horizontal-medium, 6px) 0 var(--wds-input-padding-horizontal-medium, 6px);
}

.root:size(large) > .wrapper {
  padding: 0 var(--wds-input-padding-horizontal-large, 9px) 0 var(--wds-input-padding-horizontal-large, 9px);
}

/* Focus */
.root:hasFocus:border(standard),
.root:hasFocus:border(round) {
  outline: none;
  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:border(bottomLine)::before {
  content: ' ';
  transition: width .2s value(ease-8);
  width: 0;
  position: absolute;
  height: 1px;
  background: var(--wds-color-border-standard-secondary-active, value(B10));
  bottom: 0;
}

.root:border(bottomLine):status(error)::before {
  background: var(--wds-color-border-destructive-secondary-active, value(R10));
}

.root:border(bottomLine):status(warning)::before {
  background: var(--wds-color-border-warning-secondary-active, value(Y10));
}

.root:border(bottomLine):hasFocus::before {
  width: 100%;
}

/* Hover */
.root {
  --border-color-hover: var(--wds-color-border-standard-secondary-hover, value(B30));
  --border-color-hover-destructive: var(--wds-color-border-destructive-secondary-hover, value(R30));
  --border-color-hover-warning: var(--wds-color-border-warning-secondary-hover, value(Y30));
}

.root:newColorsBranding {
  --border-color-hover: var(--wds-color-border-standard-secondary-hover, value(B40));
  --border-color-hover-destructive: var(--wds-color-border-destructive-secondary-hover, value(R40));
  --border-color-hover-warning: var(--wds-color-border-warning-secondary-hover, value(Y40));
}

.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) {
  background-color: var(--wds-color-fill-standard-tertiary-hover, value(B50));
}

.root:hover, .root:forceHover {
  border-color: var(--border-color-hover);
}

.root:hover.readOnly:not(:disabled) {
  border: solid 1px var(--wds-color-border-standard-secondary-readonly, value(B30));
}

.root:not(:hasFocus):border(bottomLine):not(:disabled):hover {
  border-bottom-color: var(--wds-color-border-standard-secondary-hover, value(D60));
}

.root:not(:hasFocus):border(bottomLine):not(:disabled):status(error):hover {
  border-bottom-color: var(--border-color-hover-destructive);
}

.root:not(:hasFocus):border(bottomLine):not(:disabled):status(warning):hover {
  border-bottom-color: var(--border-color-hover-warning);
}

/* Read Only */
.root:readOnly {
  border: solid 1px var(--wds-color-border-standard-secondary-readonly, value(D60));
  background-color: var(--wds-color-fill-standard-tertiary-readonly, value(D10-03));
}

/* Border */
.root:size(tiny):border(round) {
  -st-mixin: borderRadiusMixin(var(--wds-input-border-radius-round-tiny, 13px));
}

.root:size(small):border(round) {
  -st-mixin: borderRadiusMixin(var(--wds-input-border-radius-round-small, 15px));
}

.root:size(medium):border(round) {
  -st-mixin: borderRadiusMixin(var(--wds-input-border-radius-round-medium, 18px));
}

.root:size(large):border(round) {
  -st-mixin: borderRadiusMixin(var(--wds-input-border-radius-round-large, 21px));
}

.root:size(tiny):border(standard) {
  -st-mixin: borderRadiusMixin(var(--wds-input-border-radius-default-tiny, value(THEME-RADIUS-06)));
}

.root:size(small):border(standard) {
  -st-mixin: borderRadiusMixin(var(--wds-input-border-radius-default-small, value(THEME-RADIUS-06)));
}

.root:size(medium):border(standard) {
  -st-mixin: borderRadiusMixin(var(--wds-input-border-radius-default-medium, value(THEME-RADIUS-06)));
}

.root:size(large):border(standard) {
  -st-mixin: borderRadiusMixin(var(--wds-input-border-radius-default-large, value(THEME-RADIUS-06)));
}

.root:border(standard):noLeftBorderRadius,
.root:border(round):noLeftBorderRadius {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
}
.root:border(standard):noRightBorderRadius,
.root:border(round):noRightBorderRadius {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}

.root:border(bottomLine) {
  -st-mixin: borderRadiusMixin(0px);
  background-color: var(--wds-color-fill-standard-tertiary, transparent);
  border-color: var(--wds-color-fill-standard-tertiary, transparent);
}

.root:border(none) {
  border: none;
  padding: 1px;
  border-radius: 0;
  background-color: var(--wds-color-fill-standard-tertiary, transparent);
}

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

.root:disabled:not(:border(bottomLine)) {
  border-color: var(--wds-color-border-standard-secondary-disabled, value(D10-20));
  background-color: var(--wds-color-fill-standard-tertiary-disabled, value(D80));
  color: var(--wds-color-text-disabled, value(D10-30));
}

.root:disabled > :--input {
  -st-mixin: placeholderMixin(var(--wds-color-text-placeholder, value(D10-30)));
  color: var(--wds-color-text-disabled, value(D10-30));
}

.root:disabled:border(bottomLine) {
  border-bottom-color: var(--wds-color-border-standard-secondary-disabled, value(D10-20));
}

/* Suffixes */
.suffixes {
  user-select: none;
  white-space: nowrap;
}

.suffix {
  display: flex;
}

/* Status */
.root:size(tiny) .statusWrapper,
.root:size(small) .statusWrapper {
  margin: auto 0 auto var(--wds-space-100, 6px);
}

:global([dir='rtl']) .root:size(tiny) .statusWrapper,
:global([dir='rtl']) .root:size(small) .statusWrapper {
  margin: auto var(--wds-space-100, 6px) auto 0;
}

.root:size(medium) .statusWrapper,
.root:size(large) .statusWrapper {
  margin: auto var(--wds-space-50, 3px) auto var(--wds-space-100, 6px);
}

:global([dir='rtl']) .root:size(medium) .statusWrapper,
:global([dir='rtl']) .root:size(large) .statusWrapper {
  margin: auto var(--wds-space-100, 6px) auto var(--wds-space-50, 3px);
}

.root:not(:disabled):status(error):border(standard),
.root:not(:disabled):status(error):border(round) {
  border-color: var(--wds-color-border-destructive-secondary-active, value(R10));
  box-shadow: none;
}

.root:not(:disabled):status(error):border(standard):hasFocus,
.root:not(:disabled):status(error):border(round):hasFocus {
  border-color: var(--wds-color-border-destructive-secondary-active, value(R10));
  box-shadow: var(--wds-shadow-focus-destructive, 0 0 0 3px value(R30));
}

.root:newColorsBranding:not(:disabled):status(error):border(standard):hasFocus,
.root:newColorsBranding:not(:disabled):status(error):border(round):hasFocus {
  box-shadow: var(--wds-shadow-focus-destructive, 0 0 0 3px value(R40));
}

.root:not(:disabled):status(warning):border(standard),
.root:not(:disabled):status(warning):border(round) {
  border-color: var(--wds-color-border-warning-secondary-active, value(Y10));
  box-shadow: none;
}

.root:not(:disabled):status(warning):border(standard):hasFocus,
.root:not(:disabled):status(warning):border(round):hasFocus {
  border-color: var(--wds-color-border-warning-secondary-active, value(Y10));
  box-shadow: var(--wds-shadow-focus-warning, 0 0 0 3px value(Y30));
}

.root:newColorsBranding:not(:disabled):status(warning):border(standard):hasFocus,
.root:newColorsBranding:not(:disabled):status(warning):border(round):hasFocus {
  box-shadow: var(--wds-shadow-focus-warning, 0 0 0 3px value(Y40));
}

/* Clear Button */
.root .clearButtonWrapper {
  margin: auto 0 auto var(--wds-space-50, 3px);
}

:global([dir='rtl']) .clearButtonWrapper {
  margin: auto var(--wds-space-50, 3px) auto 0;
}

.root .menuArrow {
  display: flex;
  align-items: center;
}

.root .menuArrow svg {
  transform: translateY(1px);
}

/* Menu Arrow */
.root:not(:disabled) .menuArrow:hover {
  cursor: pointer;
}

.root:size(tiny) .menuArrow {
  padding: 0 var(--wds-space-100, 3px);
}

.root:size(small) .menuArrow,
.root:size(medium) .menuArrow {
  padding: 0 var(--wds-space-100, 6px);
}

.root:size(medium):border(round) .menuArrow {
  padding: 0 var(--wds-space-100, 9px) 0 var(--wds-space-100, 6px);
}

:global([dir='rtl']) .root:size(medium):border(round) .menuArrow {
  padding: 0 var(--wds-space-100, 6px) 0 var(--wds-space-100, 9px);
}

.root:size(large) .menuArrow {
  padding: 0 var(--wds-space-100, 6px) 0 var(--wds-space-100, 9px);
}

:global([dir='rtl']) .root:size(large) .menuArrow {
  padding: 0 var(--wds-space-100, 9px) 0 var(--wds-space-100, 6px);
}

.root:size(large):border(round) .menuArrow {
  padding: 0 var(--wds-space-100, 9px);
}

.root:not(:disabled) .menuArrow {
  color: var(--wds-color-text-primary, value(B10));
}

/* Remove native arrows for a number input */
.root input[type=number] {
  -moz-appearance: textfield;
}

.root input::-webkit-outer-spin-button,
.root input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

:--input:-webkit-autofill,
:--input:-webkit-autofill:hover,
:--input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0px 1000px var(--wds-color-fill-standard-tertiary, value(D80)) inset;
  box-shadow: 0 0 0px 1000px var(--wds-color-fill-standard-tertiary, value(D80)) inset;
}

/* remove safari autofill icon */
:--input::-webkit-contacts-auto-fill-button {
  display: none !important;
}

/* Remove IE10+ automatically x button */
:--input::-ms-clear {
  display: none;
}

.clearButton {
  -st-extends: CloseButton;
}

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