meri-design-dev/custom/theme/Input.styl

基于vue框架的ui库

/*!
 * @meri-design-dev v0.0.13
 * (c) 2019-2020 wangyongcun
 * Released under the MIT License.
 * 2024-04-29 11:26:20
 */
.p-icon
  text-align: center
  cursor: pointer
  font-size: 0

.p-icon + .p-icon
  margin-left: 8px

.p-icon svg
  vertical-align: middle

.p-icon svg path
  transition: fill .3s

.p-textarea.p-textarea-max .p-textarea-max-error-info
  position: absolute
  left: 12px
  bottom: -20px
  color: $red-500
  font-size: 14px
  line-height: 18px
  height: 18px

.p-textarea.p-textarea-max .p-word-num
  color: #f54e45

.p-textarea.p-textarea-max .p-textarea-box
  border: 1px solid $red-500

.p-textarea.p-textarea-max .p-textarea-box:hover
  border: 1px solid $red-500

.p-textarea
  background-color: $theme
  display: inline-flex
  position: relative

.p-textarea + .p-textarea
  margin-left: 28px

.p-textarea .p-word-num
  height: 20px
  font-size: 12px
  color: #8d9399
  line-height: 20px
  position: absolute
  right: 8px
  bottom: 2px

.p-textarea .p-textarea-placeholder
  position: absolute
  left: 8px
  top: 8px
  color: $grey-400
  z-index: 1
  font-size: 14px
  pointer-events: none

.p-textarea .p-textarea-box
  transition: all .3s
  padding: 8px
  border: 1px solid $grey-400
  border-radius: 4px
  width: 600px
  max-width: 600px
  margin: 0
  outline: none
  caret-color: $blue-500
  color: $grey-900
  background: none
  overflow-y: auto

.p-textarea .p-textarea-box.p-textarea-resize
  resize: none

.p-textarea .p-textarea-box:hover
  border-color: $blue-500

.p-textarea .p-textarea-box:active
  border-color: $blue-600

.p-textarea.p-input-focus
  box-shadow: none !important

.p-textarea.p-input-focus .p-textarea-box
  border-color: $blue-500

.p-input
  display: inline-flex
  align-items: center
  padding-left: 8px
  padding-right: 8px
  border: 1px solid $grey-400
  border-radius: 4px
  width: 240px
  max-width: 600px
  height: 32px
  font-size: 0
  transition: border .3s,box-shadow .3s

.p-input + .p-input
  margin-left: 28px

.p-input .left-button
  margin-left: -8px
  margin-right: 8px
  border-top-left-radius: 4px
  border-bottom-left-radius: 4px
  border-right: 1px solid $grey-400

.p-input .right-button
  margin-left: 8px
  margin-right: -8px
  border-top-right-radius: 4px
  border-bottom-right-radius: 4px
  border-left: 1px solid $grey-400

.p-input .left-button,
.p-input .right-button
  width: 76px
  height: 30px
  line-height: 30px
  cursor: pointer

.p-input .left-button .left-button-text,
.p-input .right-button .left-button-text,
.p-input .left-button .right-button-text,
.p-input .right-button .right-button-text
  color: $grey-900
  font-size: 14px
  text-align: center
  overflow: hidden
  text-overflow: ellipsis
  white-space: nowrap

.p-input:hover
  border-color: $blue-500

.p-input:active
  border-color: $blue-600

.p-input:after
  content: ' '
  color: transparent

.p-input:before
  content: ' '
  color: transparent

.p-input .p-input-box
  flex: 1
  font-size: 14px
  position: relative
  height: 30px

.p-input .p-input-box input,
.p-input .p-input-box .p-placeholder
  height: 30px
  line-height: 30px

.p-input .p-input-box input
  margin: 0
  padding: 0
  outline: none
  background: none
  border: 0
  color: $grey-900
  width: 100%
  position: relative
  z-index: 2
  caret-color: $blue-500

.p-input .p-input-box .p-placeholder
  position: absolute
  left: 0
  top: 0
  color: $grey-400
  z-index: 1
  width: 100%
  overflow: hidden

.p-input .p-input-icon-clear
  padding-left: 8px
  cursor: pointer
  height: 30px
  line-height: 30px

.p-input .p-input-icon-clear svg
  width: 14px
  height: 14px
  transition: all .3s
  vertical-align: middle

.p-input .p-input-icon-clear svg path
  transition: all .3s

.p-input .p-input-icon-clear:hover path
  fill: $blue-500

.p-input .p-input-icon-clear:active path
  fill: $blue-600

.p-input .p-input-icon-search
  padding-right: 8px
  text-align: center

.p-input .p-input-icon-search .p-icon
  width: 16px
  height: 30px
  line-height: 30px

.p-input .p-input-icon-search .p-icon svg
  vertical-align: middle

.p-input-focus
  border-color: $blue-500

.p-input.p-input-disabled,
.p-textarea.p-input-disabled
  background-color: $grey-200
  border-color: $grey-400
  cursor: not-allowed

.p-input.p-input-disabled textarea.p-textarea-box,
.p-textarea.p-input-disabled textarea.p-textarea-box
  color: $grey-400
  cursor: not-allowed

.p-input.p-input-disabled textarea.p-textarea-box:hover,
.p-textarea.p-input-disabled textarea.p-textarea-box:hover
  border-color: $grey-400

.p-input.p-input-disabled:hover,
.p-textarea.p-input-disabled:hover
  border-color: $grey-400

.p-input.p-input-error,
.p-textarea.p-input-error
  position: relative
  border-color: $red-500

.p-input.p-input-error .p-input-box input,
.p-textarea.p-input-error .p-input-box input
  caret-color: $red-500

.p-input.p-input-error textarea.p-textarea-box,
.p-textarea.p-input-error textarea.p-textarea-box
  caret-color: $red-500
  border-color: $red-400

.p-input.p-input-error textarea.p-textarea-box:hover,
.p-textarea.p-input-error textarea.p-textarea-box:hover
  border-color: $red-400

.p-input.p-input-error .p-input-error-info,
.p-textarea.p-input-error .p-input-error-info
  position: absolute
  left: 0
  bottom: -20px
  color: $red-500
  font-size: 14px
  line-height: 18px
  height: 18px

.p-input.p-input-error:hover,
.p-textarea.p-input-error:hover
  border-color: $red-500

.p-input-finish input,
.p-input-finish textarea
  cursor: pointer