mealcomes/theme-chalk/input.css

MealComes 用于学习前端的组件库

.mc-input {
  --mc-input-text-color: var(--mc-text-color-regular);
  --mc-input-border: var(--mc-border);
  --mc-input-hover-border: var(--mc-border-color-hover);
  --mc-input-focus-border: var(--mc-color-primary);
  --mc-input-transparent-border: 0 0 0 1px transparent inset;
  --mc-input-border-color: var(--mc-border-color);
  --mc-input-border-radius: var(--mc-border-radius-base);
  --mc-input-bg-color: var(--mc-fill-color-blank);
  --mc-input-icon-color: var(--mc-text-color-placeholder);
  --mc-input-placeholder-color: var(--mc-text-color-placeholder);
  --mc-input-hover-border-color: var(--mc-border-color-hover);
  --mc-input-clear-hover-color: var(--mc-text-color-secondary);
  --mc-input-focus-border-color: var(--mc-color-primary);
  --mc-input-width: 100%;
}

.mc-input {
  --mc-input-height: var(--mc-component-size);
  position: relative;
  font-size: var(--mc-font-size-base);
  display: inline-flex;
  width: var(--mc-input-width);
  line-height: var(--mc-input-height);
  box-sizing: border-box;
  vertical-align: middle;
}
.mc-input::-webkit-scrollbar {
  z-index: 11;
  width: 6px;
}
.mc-input::-webkit-scrollbar:horizontal {
  height: 6px;
}
.mc-input::-webkit-scrollbar-thumb {
  border-radius: 5px;
  width: 6px;
  background: getCssVar("text-color", "disabled");
}
.mc-input::-webkit-scrollbar-corner {
  background: getCssVar("fill-color", "blank");
}
.mc-input::-webkit-scrollbar-track {
  background: getCssVar("fill-color", "blank");
}
.mc-input::-webkit-scrollbar-track-piece {
  background: getCssVar("fill-color", "blank");
  width: 6px;
}
.mc-input .mc-input__clear, .mc-input .mc-input__password {
  color: var(--mc-input-icon-color);
  font-size: 14px;
  cursor: pointer;
}
.mc-input .mc-input__clear:hover, .mc-input .mc-input__password:hover {
  color: var(--mc-input-clear-hover-color);
}
.mc-input__wrapper {
  display: inline-flex;
  flex-grow: 1;
  align-items: center;
  justify-content: center;
  padding: 1px 11px;
  background-color: var(--mc-input-bg-color, var(--mc-fill-color-blank));
  background-image: none;
  border-radius: var(--mc-input-border-radius, var(--mc-border-radius-base));
  cursor: text;
  transition: var(--mc-transition-box-shadow);
  transform: translate3d(0, 0, 0);
  box-shadow: 0 0 0 1px var(--mc-input-border-color, var(--mc-border-color)) inset;
}
.mc-input__wrapper:hover {
  box-shadow: 0 0 0 1px var(--mc-input-hover-border-color) inset;
}
.mc-input__wrapper.is-focus {
  box-shadow: 0 0 0 1px var(--mc-input-focus-border-color) inset;
}

.mc-input {
  --mc-input-inner-height: calc(var(--mc-input-height, 32px) - 2px);
}
.mc-input__inner {
  width: 100%;
  flex-grow: 1;
  -webkit-appearance: none;
  color: var(--mc-input-text-color, var(--mc-text-color-regular));
  font-size: inherit;
  height: var(--mc-input-inner-height);
  line-height: var(--mc-input-inner-height);
  padding: 0;
  outline: none;
  border: none;
  background: none;
  box-sizing: border-box;
}
.mc-input__inner:focus {
  outline: none;
}
.mc-input__inner::placeholder {
  color: var(--mc-input-placeholder-color, var(--mc-text-color-placeholder));
}
.mc-input__inner[type=password]::-ms-reveal {
  display: none;
}
.mc-input__inner[type=number] {
  line-height: 1;
}

.mc-input__prefix {
  display: inline-flex;
  white-space: nowrap;
  flex-shrink: 0;
  flex-wrap: nowrap;
  height: 100%;
  line-height: var(--mc-input-inner-height);
  text-align: center;
  color: var(--mc-input-icon-color, var(--mc-text-color-placeholder));
  transition: all var(--mc-transition-duration);
  pointer-events: none;
}

.mc-input__prefix-inner {
  pointer-events: all;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.mc-input__prefix-inner > :last-child {
  margin-right: 8px;
}
.mc-input__prefix-inner > :first-child, .mc-input__prefix-inner > :first-child.mc-input__icon {
  margin-left: 0;
}

.mc-input__suffix {
  display: inline-flex;
  white-space: nowrap;
  flex-shrink: 0;
  flex-wrap: nowrap;
  height: 100%;
  line-height: var(--mc-input-inner-height);
  text-align: center;
  color: var(--mc-input-icon-color, var(--mc-text-color-placeholder));
  transition: all var(--mc-transition-duration);
  pointer-events: none;
}

.mc-input__suffix-inner {
  pointer-events: all;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.mc-input__suffix-inner > :first-child {
  margin-left: 8px;
}

.mc-input .mc-input__icon {
  height: inherit;
  line-height: inherit;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all var(--mc-transition-duration);
  margin-left: 8px;
}
.mc-input.is-disabled {
  cursor: not-allowed;
}
.mc-input.is-disabled .mc-input__wrapper {
  background-color: var(--mc-disabled-bg-color);
  cursor: not-allowed;
  box-shadow: 0 0 0 1px var(--mc-disabled-border-color) inset;
}
.mc-input.is-disabled .mc-input__inner {
  color: var(--mc-disabled-text-color);
  -webkit-text-fill-color: var(--mc-disabled-text-color);
  cursor: not-allowed;
}
.mc-input.is-disabled .mc-input__inner::placeholder {
  color: var(--mc-text-color-placeholder);
}
.mc-input.is-disabled .mc-input__icon {
  cursor: not-allowed;
}
.mc-input.is-disabled .mc-input__prefix-inner,
.mc-input.is-disabled .mc-input__suffix-inner {
  pointer-events: none;
}

.mc-input--large {
  --mc-input-height: var(--mc-component-size-large);
  font-size: 14px;
}
.mc-input--large__wrapper {
  padding: 1px 15px;
}

.mc-input--large {
  --mc-input-inner-height: calc(var(--mc-input-height, 40px) - 2px);
}

.mc-input--small {
  --mc-input-height: var(--mc-component-size-small);
  font-size: 12px;
}
.mc-input--small__wrapper {
  padding: 1px 7px;
}

.mc-input--small {
  --mc-input-inner-height: calc(var(--mc-input-height, 24px) - 2px);
}

.mc-input-group {
  display: inline-flex;
  width: 100%;
  align-items: stretch;
}
.mc-input-group__prepend {
  background-color: var(--mc-fill-color-light);
  color: var(--mc-color-info);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  border-radius: var(--mc-input-border-radius);
  padding: 0 20px;
  white-space: nowrap;
  border-right: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  box-shadow: 1px 0 0 0 var(--mc-input-border-color) inset, 0 1px 0 0 var(--mc-input-border-color) inset, 0 -1px 0 0 var(--mc-input-border-color) inset;
}
.mc-input-group__prepend:focus {
  outline: none;
}
.mc-input-group__prepend .mc-select,
.mc-input-group__prepend .mc-button {
  display: inline-block;
  flex: 1;
  margin: 0 -20px;
}
.mc-input-group__prepend button.mc-button,
.mc-input-group__prepend button.mc-button:hover,
.mc-input-group__prepend div.mc-select .mc-select__wrapper,
.mc-input-group__prepend div.mc-select:hover .mc-select__wrapper {
  border-color: transparent;
  background-color: transparent;
  color: inherit;
}
.mc-input-group__prepend .mc-button,
.mc-input-group__prepend .mc-input {
  font-size: inherit;
}

.mc-input-group__append {
  background-color: var(--mc-fill-color-light);
  color: var(--mc-color-info);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  border-radius: var(--mc-input-border-radius);
  padding: 0 20px;
  white-space: nowrap;
  border-left: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  box-shadow: 0 1px 0 0 var(--mc-input-border-color) inset, 0 -1px 0 0 var(--mc-input-border-color) inset, -1px 0 0 0 var(--mc-input-border-color) inset;
}
.mc-input-group__append:focus {
  outline: none;
}
.mc-input-group__append .mc-select,
.mc-input-group__append .mc-button {
  display: inline-block;
  flex: 1;
  margin: 0 -20px;
}
.mc-input-group__append button.mc-button,
.mc-input-group__append button.mc-button:hover,
.mc-input-group__append div.mc-select .mc-select__wrapper,
.mc-input-group__append div.mc-select:hover .mc-select__wrapper {
  border-color: transparent;
  background-color: transparent;
  color: inherit;
}
.mc-input-group__append .mc-button,
.mc-input-group__append .mc-input {
  font-size: inherit;
}

.mc-input-group--prepend > .mc-input__wrapper {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.mc-input-group--prepend__prepend .mc-select .mc-select__wrapper {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  box-shadow: 1px 0 0 0 var(--mc-input-border-color) inset, 0 1px 0 0 var(--mc-input-border-color) inset, 0 -1px 0 0 var(--mc-input-border-color) inset;
}

.mc-input-group--append > .mc-input__wrapper {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.mc-input-group--append__append .mc-select .mc-select__wrapper {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  box-shadow: 0 1px 0 0 var(--mc-input-border-color) inset, 0 -1px 0 0 var(--mc-input-border-color) inset, -1px 0 0 0 var(--mc-input-border-color) inset;
}