wix-style-react/dist/src/MultiSelect/InputWithTags.st.css

wix-style-react

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

:import {
  -st-from: '../Foundation/stylable/typography.st.css';
  -st-named: text-medium-normal;
}

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

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

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

@st-import [
  --wds-input-size-large,
  --wds-input-size-medium,
  --wds-input-size-small,
  --wds-input-size-tiny,
  --wds-input-padding-vertical-medium,
  --wds-input-padding-horizontal-medium,
  --wds-space-100,
  ] from "@wix/design-system-tokens/all.st.css";

.inputWrapper {
  flex-grow: 1;
  width: min-content;
  min-width: 1px;
}

.inputWrapper div {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.inputWrapper div:hover {
  background-color: transparent !important;
}

.emptyInput {
  width: 100%;
}

.selectMode {
  position: relative;
  padding-right: 55px;
}

.inputSuffix {
  position: absolute;
  top: 0;
  right: 6px;
  box-sizing: border-box;
  display: flex;
  height: var(--wds-input-size-small, 30px);
}

.inputSuffix .menuArrow {
  color: value(B10);
  margin: auto 6px;
}

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

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

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

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

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

.inputSuffix .statusIndicator {
  margin: auto 6px;
}

.suffixes {
  height: 100%;
}

.hiddenDiv {
  -st-mixin: text-medium-normal;

  visibility: hidden;
  height: 0;
}

.root {
  -st-states: hasFocus,
    disabled,
    border(enum(standard, round, bottomLine, none)),
    size(enum(tiny, small, medium, large)),
    status(enum(error, warning, loading)),
    readOnly,
    newColorsBranding;
  
  background-color: value(D80);
  padding-inline: var(--wds-input-padding-horizontal-medium, 6px);
  padding-block: var(--wds-input-padding-vertical-medium, 6px);
  outline: 1px solid value(B30);
  outline-offset: -1px;
  border-radius: 6px;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  gap: var(--wds-space-100, 6px);
  overflow-y: hidden;
  user-select: none;
}

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

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

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

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

.root:newColorsBranding {
  outline: solid 1px value(B40);
}

.root:disabled {
  background-color: value(D10-05);
}

.root:readOnly {
  background-color: value(D10-03);
  outline: 1px solid value(D60);
}

.root:disabled .inputSuffix .menuArrow {
  color: value(D10-30);
}

.root:hover:not(:hasFocus):not(:disabled) {
  background: value(B50);
}

.hasMaxHeight {
  overflow-y: auto;
}

.root:status(error) {
  outline-color: value(R10);
  position: relative;
  padding-right: 55px;
}

.root:status(warning) {
  outline-color: value(Y10);
  position: relative;
  padding-right: 55px;
}

.root:status(loading) {
  position: relative;
  padding-right: 55px;
}

.root:disabled {
  outline-color: value(D10-20);
}

.root:hasFocus {
  outline-color: value(B10);
  box-shadow: 0 0 0 3px value(F00);
}

.root:hasFocus:status(error):not(:border(none)):not(:border(bottomLine)) {
  outline-color: value(R10);
  box-shadow: 0 0 0 3px value(R30);
}

.root:newColorsBranding:hasFocus:status(error):not(:border(none)):not(:border(bottomLine)) {
  box-shadow: 0 0 0 3px value(R40);
}

.root:hasFocus:status(warning):not(:border(none)):not(:border(bottomLine)) {
  outline-color: value(Y10);
  box-shadow: 0 0 0 3px value(Y30);
}

.root:newColorsBranding:hasFocus:status(warning):not(:border(none)):not(:border(bottomLine)) {
  box-shadow: 0 0 0 3px value(Y40);
}

.root:border(none),
.root:hover:border(none),
.root:hover:border(none):not(:hasFocus):not(:disabled),
.root:border(bottomLine),
.root:hover:border(bottomLine),
.root:hover:border(bottomLine):not(:hasFocus):not(:disabled) {
  border: none;
  outline: none;
  background: none;
  border: none;
  box-shadow: none;
}

.root:border(round) {
  -st-mixin: borderRadiusMixin(40px);
}

.root:border(bottomLine) {
  -st-mixin: borderRadiusMixin(0px);
}

.root:border(bottomLine)::before {
  content: ' ';
  transition: width .2s value(ease-8);
  width: 0;
  position: absolute;
  height: 1px;
  background: value(B10);
  bottom: 0;
}

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

.root:border(bottomLine):status(error)::before {
  background: value(R10);
}

.root:border(bottomLine):status(warning)::before {
  background: value(Y10);
}

.customSuffix {
  margin-block: auto;
}

.tagsContainer {
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  gap: var(--wds-space-100, 6px);
}

.tagsContainer .draggedTag {
  background-color: value(B30);
}

.tagsContainer .draggedTagPlaceholder {
  background-color: value(D60);
}

.tagsContainer .draggedTagPlaceholder:hover {
  background-color: value(D60);
}

.tagsContainer .draggedTagPlaceholder * {
  visibility: hidden;
}

.input {
  -st-extends: Input;
}

.input:size(large)::input,
.input:size(medium)::input,
.input:size(small)::input,
.input:size(tiny)::input {
  padding: 0;
}

/* Height override */
.input:size(tiny), 
.input:size(small),
.input:size(medium),
.input:size(large) {
  height: 100%;
}

/* st-namespace-reference="../../../src/MultiSelect/InputWithTags.st.css" */