meri-design-dev/custom/theme/InputNumber.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-input-number.p-input-number-both-button
  width: 162px

.p-input-number.p-input-number-both-button input,
.p-input-number.p-input-number-both-button .p-placeholder
  text-align: center

.p-input-number.p-input-number-both-button .p-in-left-button
  margin-left: -8px
  margin-right: -1px
  border-top-left-radius: 4px
  border-bottom-left-radius: 4px

.p-input-number.p-input-number-both-button .p-in-right-button
  margin-right: -8px
  margin-left: -1px
  border-top-right-radius: 4px
  border-bottom-right-radius: 4px

.p-input-number.p-input-number-both-button .p-in-left-button,
.p-input-number.p-input-number-both-button .p-in-right-button
  display: flex
  align-items: center
  justify-content: center
  width: 32px

.p-input-number.p-input-number-both-button .p-in-left-button path,
.p-input-number.p-input-number-both-button .p-in-right-button path
  fill: $grey-500

.p-input-number.p-input-number-both-button .p-in-left-button.p-in-disabled-button,
.p-input-number.p-input-number-both-button .p-in-right-button.p-in-disabled-button
  background-color: $grey-200
  cursor: not-allowed

.p-input-number.p-input-number-both-button .p-in-left-button.p-in-disabled-button .p-icon,
.p-input-number.p-input-number-both-button .p-in-right-button.p-in-disabled-button .p-icon
  cursor: not-allowed

.p-input-number.p-input-number-both-button .p-in-left-button.p-in-disabled-button:hover,
.p-input-number.p-input-number-both-button .p-in-right-button.p-in-disabled-button:hover
  border-color: $grey-400

.p-input-number.p-input-number-both-button .p-in-left-button.p-in-disabled-button:hover path,
.p-input-number.p-input-number-both-button .p-in-right-button.p-in-disabled-button:hover path
  fill: $grey-500

.p-input-number.p-input-number-both-button .p-in-left-button.p-in-disabled-button:hover,
.p-input-number.p-input-number-both-button .p-in-right-button.p-in-disabled-button:hover
  background-color: $grey-200

.p-input-number.p-input-number-both-button .p-in-left-button:hover,
.p-input-number.p-input-number-both-button .p-in-right-button:hover
  z-index: 5

.p-input-number.p-input-number-both-button .p-in-left-button:hover path,
.p-input-number.p-input-number-both-button .p-in-right-button:hover path
  fill: $blue-500

.p-input-number.p-input-number-both-button .p-in-left-button:active,
.p-input-number.p-input-number-both-button .p-in-right-button:active
  background-color: $blue-100

.p-input-number.p-input-number-both-button .p-in-left-button .p-icon,
.p-input-number.p-input-number-both-button .p-in-right-button .p-icon
  width: 16px
  height: 16px

.p-input-number.p-input-number-both-button .p-in-left-button,
.p-input-number.p-input-number-both-button .p-in-right-button,
.p-input-number.p-input-number-both-button .p-input-number-box
  transition: all .3s
  height: 32px
  border: 1px solid $grey-400

.p-input-number.p-input-number-both-button .p-in-left-button:hover,
.p-input-number.p-input-number-both-button .p-in-right-button:hover,
.p-input-number.p-input-number-both-button .p-input-number-box:hover
  border-color: $blue-500

.p-input-number.p-input-number-both-button .p-input-number-box
  z-index: 3

.p-input-number.p-input-number-both-button .p-input-number-box.p-input-number-focus
  border-color: $blue-500

.p-input-number.p-input-number-normal
  border: 1px solid $grey-400
  width: 240px

.p-input-number.p-input-number-normal.p-input-number-focus,
.p-input-number.p-input-number-normal:hover
  border-color: $blue-500

.p-input-number.p-input-number-normal.p-input-number-error
  position: relative
  border-color: $red-500

.p-input-number.p-input-number-normal.p-input-number-error input
  caret-color: $red-500

.p-input-number.p-input-number-normal.p-input-number-error .p-input-number-error-info
  position: absolute
  left: 0
  bottom: -20px
  color: $red-500
  font-size: 14px

.p-input-number.p-input-number-normal.p-input-number-error:hover
  border-color: $red-500

.p-input-number.p-input-number-right-arrow
  border: 1px solid $grey-400
  width: 240px

.p-input-number.p-input-number-right-arrow .p-in-right-arrow
  width: 32px
  height: 30px
  margin-right: -8px

.p-input-number.p-input-number-right-arrow .p-in-right-arrow-top
  border-bottom: 1px solid $grey-400
  border-top-right-radius: 4px

.p-input-number.p-input-number-right-arrow .p-in-right-arrow-top:hover
  border-bottom-color: $blue-500
  z-index: 10

.p-input-number.p-input-number-right-arrow .p-in-right-arrow-btm
  border-top: 1px solid $grey-400
  border-bottom-right-radius: 4px
  margin-top: -1px

.p-input-number.p-input-number-right-arrow .p-in-right-arrow-btm:hover
  border-top-color: $blue-500
  z-index: 5

.p-input-number.p-input-number-right-arrow .p-in-right-arrow-btm svg
  transform: rotate(180deg)

.p-input-number.p-input-number-right-arrow .p-in-right-arrow-top,
.p-input-number.p-input-number-right-arrow .p-in-right-arrow-btm
  position: relative
  border-left: 1px solid $grey-400
  height: 15.5px
  line-height: 15.5px
  transition: all .3s
  display: flex
  align-items: center
  justify-content: center

.p-input-number.p-input-number-right-arrow .p-in-right-arrow-top svg,
.p-input-number.p-input-number-right-arrow .p-in-right-arrow-btm svg
  width: 16px
  height: 16px

.p-input-number.p-input-number-right-arrow .p-in-right-arrow-top path,
.p-input-number.p-input-number-right-arrow .p-in-right-arrow-btm path
  fill: $grey-500

.p-input-number.p-input-number-right-arrow .p-in-right-arrow-top.p-in-disabled-button,
.p-input-number.p-input-number-right-arrow .p-in-right-arrow-btm.p-in-disabled-button
  background-color: $grey-200
  cursor: not-allowed

.p-input-number.p-input-number-right-arrow .p-in-right-arrow-top.p-in-disabled-button:active,
.p-input-number.p-input-number-right-arrow .p-in-right-arrow-btm.p-in-disabled-button:active
  background-color: $grey-200

.p-input-number.p-input-number-right-arrow .p-in-right-arrow-top.p-in-disabled-button:hover,
.p-input-number.p-input-number-right-arrow .p-in-right-arrow-btm.p-in-disabled-button:hover
  border-left-color: $grey-400
  border-top-color: $grey-400
  border-bottom-color: $grey-400

.p-input-number.p-input-number-right-arrow .p-in-right-arrow-top.p-in-disabled-button:hover path,
.p-input-number.p-input-number-right-arrow .p-in-right-arrow-btm.p-in-disabled-button:hover path
  fill: $grey-500

.p-input-number.p-input-number-right-arrow .p-in-right-arrow-top:hover,
.p-input-number.p-input-number-right-arrow .p-in-right-arrow-btm:hover
  border-left-color: $blue-500

.p-input-number.p-input-number-right-arrow .p-in-right-arrow-top:hover path,
.p-input-number.p-input-number-right-arrow .p-in-right-arrow-btm:hover path
  fill: $blue-500

.p-input-number.p-input-number-right-arrow .p-in-right-arrow-top:active,
.p-input-number.p-input-number-right-arrow .p-in-right-arrow-btm:active
  background-color: $blue-100

.p-input-number.p-input-number-right-arrow:hover
  border-color: $blue-500

.p-input-number.p-input-number-right-arrow.p-input-number-focus
  border-color: $blue-500

.p-input-number
  display: inline-flex
  align-items: center
  padding-left: 8px
  padding-right: 8px
  border-radius: 4px
  min-width: 180px
  max-width: 600px
  height: 32px
  font-size: 0
  transition: border .3s

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

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

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

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

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

.p-input-number-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-number-box .p-placeholder
  position: absolute
  left: 0
  top: 0
  color: $grey-400
  z-index: 1
  width: 100%
  overflow: hidden

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

.p-input-number-disabled.p-input-number.p-input-number-both-button .p-input-number-box,
.p-input-number-disabled.p-input-number .p-input-number-box
  border-color: $grey-400

.p-input-number-disabled.p-input-number.p-input-number-both-button:hover,
.p-input-number-disabled.p-input-number:hover
  border-color: $grey-400

.p-input-number-disabled.p-input-number.p-input-number-both-button .p-icon,
.p-input-number-disabled.p-input-number .p-icon
  cursor: not-allowed

.p-input-number-disabled.p-input-number.p-input-number-both-button .p-in-left-button:hover,
.p-input-number-disabled.p-input-number .p-in-left-button:hover,
.p-input-number-disabled.p-input-number.p-input-number-both-button .p-in-right-button:hover,
.p-input-number-disabled.p-input-number .p-in-right-button:hover,
.p-input-number-disabled.p-input-number.p-input-number-both-button .p-in-right-arrow-top:hover,
.p-input-number-disabled.p-input-number .p-in-right-arrow-top:hover,
.p-input-number-disabled.p-input-number.p-input-number-both-button .p-in-right-arrow-btm:hover,
.p-input-number-disabled.p-input-number .p-in-right-arrow-btm:hover
  border-color: $grey-400

.p-input-number-disabled.p-input-number.p-input-number-both-button .p-in-left-button:hover path,
.p-input-number-disabled.p-input-number .p-in-left-button:hover path,
.p-input-number-disabled.p-input-number.p-input-number-both-button .p-in-right-button:hover path,
.p-input-number-disabled.p-input-number .p-in-right-button:hover path,
.p-input-number-disabled.p-input-number.p-input-number-both-button .p-in-right-arrow-top:hover path,
.p-input-number-disabled.p-input-number .p-in-right-arrow-top:hover path,
.p-input-number-disabled.p-input-number.p-input-number-both-button .p-in-right-arrow-btm:hover path,
.p-input-number-disabled.p-input-number .p-in-right-arrow-btm:hover path
  fill: $grey-500

.p-input-number-disabled.p-input-number.p-input-number-both-button .p-in-left-button:hover,
.p-input-number-disabled.p-input-number .p-in-left-button:hover,
.p-input-number-disabled.p-input-number.p-input-number-both-button .p-in-right-button:hover,
.p-input-number-disabled.p-input-number .p-in-right-button:hover,
.p-input-number-disabled.p-input-number.p-input-number-both-button .p-in-right-arrow-top:hover,
.p-input-number-disabled.p-input-number .p-in-right-arrow-top:hover,
.p-input-number-disabled.p-input-number.p-input-number-both-button .p-in-right-arrow-btm:hover,
.p-input-number-disabled.p-input-number .p-in-right-arrow-btm:hover
  background-color: $grey-200