meri-design-dev/custom/theme/PickerTime2400.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-picker-child-title
  display: flex
  align-items: center
  justify-content: space-around
  margin-top: 12px
  margin-bottom: 8px
  padding-left: 16px
  padding-right: 16px

.p-picker-child-title .p-picker-time-title-item
  height: 24px
  line-height: 24px
  color: $grey-500
  font-size: 14px
  text-align: center

.p-picker-time-content
  position: relative
  display: flex
  justify-content: space-around
  padding: 8px 16px
  width: 100%
  height: 208px
  overflow: hidden

.p-picker-time-content::before
  position: absolute
  display: block
  background-color: $grey-200
  border-radius: 4px
  width: 262px
  height: 24px
  z-index: 9
  content: ''

.p-picker-time-select-hms
  width: 98px

.p-picker-time-select-hms .p-picker-time-section article
  padding-left: 36px

.p-picker-time-select-hm
  width: 147px

.p-picker-time-select-hm .p-picker-time-section article
  padding-left: 60px

.p-picker-time-select-h
  width: 262px

.p-picker-time-select-h .p-picker-time-section article
  padding-left: 122px

.p-picker-time-select
  position: relative
  z-index: 10
  height: 192px
  overflow: hidden

.p-picker-time-select:hover
  overflow-y: auto

.p-picker-time-select .p-picker-time-section
  padding-bottom: 160px
  width: 100%

.p-picker-time-select .p-picker-time-text
  margin-bottom: 8px
  width: 100%
  height: 24px
  line-height: 24px
  transition: background-color .3s

.p-picker-time-select .p-picker-time-text:hover
  background-color: $grey-200
  border-radius: 4px

.p-picker-time-select .p-picker-time-text span
  color: $grey-900
  font-size: 14px
  text-align: center
  cursor: pointer
  transition: all .3s
  user-select: none

.p-picker-time-select .p-picker-time-text span:hover
  background-color: $grey-200

.p-picker-time-select .p-picker-time-text.p-picker-time-text-selected span
  color: $blue-500

.p-picker-time-select .p-picker-time-text.p-picker-time-text-disabled span
  cursor: not-allowed
  color: $grey-400

.p-loading16px
  display: inline-block
  width: 100%
  height: 100%
  line-height: 100%
  text-align: center

.p-loading16px .p-loading16px-line
  width: 100%
  height: 100%
  min-width: 12px
  min-height: 12px
  animation: loading16px .5s linear infinite

@keyframes loading16px
  0%
    transform: rotate(0)
  100%
    transform: rotate(360deg)
@keyframes loading16px
  0%
    transform: rotate(0)
  100%
    transform: rotate(360deg)
@keyframes loading16px
  0%
    transform: rotate(0)
  100%
    transform: rotate(360deg)
@keyframes loading16px
  0%
    transform: rotate(0)
  100%
    transform: rotate(360deg)
.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-button
  position: relative
  display: inline-flex
  align-items: center
  justify-content: center
  padding-left: 8px
  padding-right: 8px
  background-color: $theme
  border-width: 1px
  border-style: solid
  border-radius: 4px
  transition: all .36s
  font-size: 0
  text-align: center

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

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

.p-button+.p-button
  margin-left: 12px

.p-button .p-btn-text
  overflow: hidden
  white-space: nowrap
  text-overflow: ellipsis
  position: relative
  z-index: 1
  user-select: none

.p-button .p-button-loading
  display: inline-block
  margin-left: 4px
  vertical-align: middle

.p-button-large
  max-width: 128px
  min-width: 80px
  height: 40px
  line-height: 38px

.p-button-large .p-btn-text
  font-size: 16px

.p-button-large .p-button-loading
  width: 20px
  height: 20px

.p-button-medium
  max-width: 116px
  min-width: 80px
  height: 32px
  line-height: 30px

.p-button-medium .p-btn-text
  font-size: 14px

.p-button-medium .p-button-loading
  width: 16px
  height: 16px

.p-button-small
  max-width: 108px
  min-width: 60px
  height: 28px
  line-height: 26px

.p-button-small .p-btn-text
  font-size: 14px

.p-button-small .p-button-loading
  width: 12px
  height: 12px

.p-button-default,
.p-button-icon-text
  background-color: $theme
  border-color: $grey-400
  color: $grey-900
  cursor: pointer

.p-button-default .p-button-loading path,
.p-button-icon-text .p-button-loading path
  fill: $grey-900

.p-button-default:hover,
.p-button-icon-text:hover
  border-color: $blue-500
  color: $blue-500

.p-button-default:active,
.p-button-icon-text:active
  border-color: $blue-600
  color: $blue-600

.p-button-default::after,
.p-button-icon-text::after
  background: radial-gradient(circle,$grey-200 10%,transparent 10%)

.p-button-default .loading path,
.p-button-icon-text .loading path
  stroke: $grey-400

.p-button-primary
  background-color: $blue-500
  border-color: $blue-500
  color: $white
  cursor: pointer

.p-button-primary:hover
  background-color: $blue-400
  border-color: $blue-400

.p-button-primary:active
  background-color: $blue-600
  border-color: $blue-600

.p-button-primary::after
  background: radial-gradient(circle,$blue-300 10%,transparent 10%)

.p-button-error
  background-color: $red-500
  border-color: $red-500
  color: $white
  cursor: pointer

.p-button-error:hover
  background-color: $red-400
  border-color: $red-400

.p-button-error:active
  background-color: $red-600
  border-color: $red-600

.p-button-error::after
  background: radial-gradient(circle,$red-300 10%,transparent 10%)

.p-button-disabled,
.p-button-default-disabled,
.p-button-primary-disabled,
.p-button-error-disabled
  background-color: $grey-200
  color: $grey-400
  cursor: not-allowed
  border-color: $grey-200

.p-button-disabled:hover,
.p-button-default-disabled:hover,
.p-button-primary-disabled:hover,
.p-button-error-disabled:hover
  background-color: $grey-200
  border-color: $grey-200
  color: $grey-400

.p-button-disabled:active,
.p-button-default-disabled:active,
.p-button-primary-disabled:active,
.p-button-error-disabled:active
  background-color: $grey-200
  border-color: $grey-200
  color: $grey-400

.p-button-text-blue
  border-style: none
  color: $blue-500
  cursor: pointer

.p-button-text-blue:hover
  color: $blue-500

.p-button-text-blue:active
  color: $blue-600

.p-button-text-red
  border-style: none
  color: $red-500
  cursor: pointer

.p-button-text-red:hover
  color: $red-400

.p-button-text-red:active
  color: $red-600

.min-size
  min-width: 0

.p-button-icon,
.p-button-icon-border
  border-color: $grey-400
  padding: 0
  cursor: pointer

.p-button-icon path,
.p-button-icon-border path
  fill: $grey-900
  transition: all .36s

.p-button-icon .p-icon svg,
.p-button-icon-border .p-icon svg
  width: 100% !important
  height: 100% !important

.p-button-icon
  border-color: transparent

.p-button-icon:hover
  color: $blue-500

.p-button-icon:hover path
  fill: $blue-500

.p-button-icon:active
  color: $blue-600

.p-button-icon:active path
  fill: $blue-600

.p-button-icon::after
  color: $blue-500

.p-button-icon::after path
  fill: $blue-500

.p-button-icon-border:hover
  border-color: $blue-500
  color: $blue-500

.p-button-icon-border:hover path
  fill: $blue-500

.p-button-icon-border:active
  border-color: $blue-600
  color: $blue-600

.p-button-icon-border:active path
  fill: $blue-600

.p-button-icon-border::after
  border-color: $blue-500
  color: $blue-500

.p-button-icon-border::after path
  fill: $blue-500

.p-button-icon.p-button-large,
.p-button-icon-border.p-button-large
  width: 40px
  min-width: 40px

.p-button-icon.p-button-large .p-icon,
.p-button-icon-border.p-button-large .p-icon
  width: 24px
  height: 24px
  line-height: 24px

.p-button-icon.p-button-medium,
.p-button-icon-border.p-button-medium
  width: 32px
  min-width: 32px

.p-button-icon.p-button-medium .p-icon,
.p-button-icon-border.p-button-medium .p-icon
  width: 16px
  height: 16px
  line-height: 16px

.p-button-icon.p-button-small,
.p-button-icon-border.p-button-small
  width: 28px
  min-width: 28px

.p-button-icon.p-button-small .p-icon,
.p-button-icon-border.p-button-small .p-icon
  width: 12px
  height: 12px
  line-height: 12px

.p-button-icon-text
  border-color: transparent

.p-button-icon-text:hover
  border-color: transparent

.p-button-icon-text path
  fill: $grey-900
  transition: all .36s

.p-button-icon-text:hover
  color: $blue-500

.p-button-icon-text:hover path
  fill: $blue-500

.p-button-icon-text:active
  color: $blue-600

.p-button-icon-text:active path
  fill: $blue-600

.p-button-icon-text::after
  color: $blue-500

.p-button-icon-text::after path
  fill: $blue-500

.p-button-icon-text .p-icon
  margin-right: 4px

.p-button-icon-text .p-icon svg
  width: 100% !important
  height: 100% !important

.p-button-icon-text.p-button-large .p-icon
  width: 20px
  height: 20px
  line-height: 20px

.p-button-icon-text.p-button-medium .p-icon
  width: 16px
  height: 16px
  line-height: 16px

.p-button-icon-text.p-button-small .p-icon
  width: 12px
  height: 12px
  line-height: 12px

.p-button-icon-border-disabled
  background-color: $grey-200
  color: $grey-400
  cursor: not-allowed
  border-color: $grey-200

.p-button-icon-border-disabled svg
  cursor: not-allowed

.p-button-icon-border-disabled svg path
  fill: $grey-400

.p-button-icon-border-disabled:hover
  border-color: $grey-200

.p-button-icon-border-disabled:hover path
  fill: $grey-400

.p-button-icon-disabled
  color: $grey-400
  cursor: not-allowed

.p-button-icon-disabled svg
  cursor: not-allowed

.p-button-icon-disabled svg path
  fill: $grey-400

.p-button-icon-disabled:hover path
  fill: $grey-400

.p-button-icon-text-disabled
  color: $grey-400
  cursor: not-allowed

.p-button-icon-text-disabled svg
  cursor: not-allowed

.p-button-icon-text-disabled svg path
  fill: $grey-400

.p-button-icon-text-disabled:hover
  color: $grey-400

.p-button-icon-text-disabled:hover path
  fill: $grey-400

.p-button-text
  border-color: transparent
  cursor: pointer
  color: $grey-900

.p-button-text:hover
  color: $blue-500
  border-color: transparent

.p-button-text:active
  color: $blue-600

.p-button-text-disabled,
.p-button-text-blue-disabled,
.p-button-text-red-disabled
  cursor: not-allowed
  color: $grey-400

.p-button-text-disabled:hover,
.p-button-text-blue-disabled:hover,
.p-button-text-red-disabled:hover
  color: $grey-400

.p-date-trigger
  position: relative
  display: inline-flex
  align-items: center
  justify-content: space-between
  border-width: 1px
  border-style: solid
  border-radius: 4px
  height: 32px
  line-height: 30px
  font-size: 0
  cursor: pointer
  transition: border .3s
  user-select: none

.p-date-trigger .p-date-trigger-triangle:first-child
  border-top-left-radius: 4px
  border-bottom-left-radius: 4px

.p-date-trigger .p-date-trigger-triangle:last-child
  border-top-right-radius: 4px
  border-bottom-right-radius: 4px

.p-date-trigger-border
  border-color: $grey-400

.p-date-trigger-border:hover
  border-color: $blue-500

.p-date-trigger-border .p-date-trigger-content-calendar
  width: calc(100% - 80px)

.p-date-trigger-border-none
  border-color: transparent

.p-date-trigger-border-none:hover .p-date-trigger-text .p-date-trigger-select-date
  color: $blue-500

.p-date-trigger-border-none .p-date-trigger-content-calendar
  width: calc(100% - 40px)

.p-date-trigger-open
  border-color: $blue-500

.p-date-trigger-border-show
  border-color: $blue-500

.p-date-trigger-single
  width: 200px

.p-date-trigger-single-drop
  width: 136px

.p-date-trigger-single-drop .p-date-trigger-text
  text-align: center

.p-date-trigger-single-drop-4
  width: 136px

.p-date-trigger-single-drop-3
  width: 173px

.p-date-trigger-single-drop-2
  width: 210px

.p-date-trigger-single-drop-1
  width: 296px

.p-date-trigger-range
  width: 304px

.p-date-trigger-range-drop
  width: 296px

.p-date-trigger-icon
  text-align: center
  width: 40px
  height: 30px

.p-date-trigger-icon svg
  vertical-align: middle
  width: 16px
  height: 16px

.p-date-trigger-clear:hover path
  fill: $blue-500
  transition: fill .3s

.p-date-trigger-triangle
  text-align: center
  width: 30px
  height: 30px

.p-date-trigger-triangle:hover
  transition: background-color .3s
  background-color: $blue-100

.p-date-trigger-triangle svg
  vertical-align: middle
  width: 16px
  height: 16px

.p-date-trigger-triangle-disabled
  cursor: not-allowed

.p-date-trigger-triangle-disabled svg path
  fill: $grey-400

.p-date-picker-caption
  max-width: 114px
  font-size: 14px
  color: $grey-500
  overflow: hidden
  white-space: nowrap
  text-overflow: ellipsis

.p-date-trigger-content
  display: flex
  width: 100%
  height: 30px

.p-date-trigger-content-calendar
  display: flex
  height: 30px

.p-date-trigger-content-quick-switch
  width: calc(100% - 62px)

.p-date-trigger-content-quick-switch .p-date-trigger-text
  text-align: center

.p-date-trigger-text
  width: 100%
  text-align: left
  overflow: hidden

.p-date-trigger-text .p-date-trigger-placeholder
  color: $grey-400
  font-size: 14px

.p-date-trigger-text .p-date-trigger-select-date
  color: $grey-900
  font-size: 14px
  white-space: nowrap
  overflow: hidden
  transition: color .3s

.p-date-trigger-text-center
  text-align: center

.p-date-trigger-text-range
  width: calc(50% - 19px)
  text-align: center

.p-date-trigger-text-padding
  padding-left: 12px

.p-date-trigger-text-padding-4
  padding-left: 4px

.p-date-trigger-connector
  width: 38px
  height: 30px
  text-align: center
  color: $grey-500
  font-size: 14px

.p-date-trigger-disabled
  background-color: $grey-200
  cursor: not-allowed

.p-date-trigger-disabled:hover
  border-color: $grey-400

.p-date-trigger-disabled .p-date-picker-caption,
.p-date-trigger-disabled .p-date-trigger-select-date
  color: $grey-400

.p-date-trigger-disabled .p-date-trigger-triangle svg path
  fill: $grey-400

.p-date-trigger-disabled .p-date-trigger-triangle:hover
  background-color: $grey-200

.p-date-trigger-disabled .p-date-trigger-connector
  color: $grey-400

.p-trigger-error
  border-color: $red-500

.p-trigger-error-text
  position: absolute
  left: 0
  top: 36px
  line-height: 14px
  font-size: 14px
  color: $red-500

.p-picker
  display: inline-block
  font-size: 0

.p-picker-child
  position: relative
  font-size: 0

.p-picker-main
  outline: none
  position: absolute
  background-color: $theme
  border: 1px solid $grey-300
  box-shadow: $box-shadow-bottom
  border-radius: 4px
  min-width: 330px
  max-width: 626px
  overflow: hidden
  font-size: 0
  z-index: 7000
  transition: top .3s

.p-picker-main .p-picker-main-item-box
  padding-left: 16px
  padding-right: 16px

.p-picker-main .p-picker-main-item-box .p-picker-main-item-input-box
  position: relative
  display: flex
  align-items: center
  justify-content: space-between
  padding-top: 12px
  padding-bottom: 12px

.p-picker-main .p-picker-main-item-box .p-picker-main-item
  display: flex
  align-items: center
  justify-content: center

.p-picker-main .p-picker-main-handle
  padding: 16px
  text-align: right
  width: 100%

.p-picker-main .p-picker-main-handle .p-picker-handle-time
  margin-right: 16px
  font-size: 14px
  user-select: none
  vertical-align: middle
  transition: color .3s

.p-picker-main .p-picker-main-handle .p-picker-handle-time-normal
  color: $blue-500
  cursor: pointer

.p-picker-main .p-picker-main-handle .p-picker-handle-time-normal:hover
  color: $blue-600

.p-picker-main .p-picker-main-handle .p-picker-handle-time-disabled
  color: $grey-400
  cursor: not-allowed

.p-date-picker-handle
  display: flex
  justify-content: space-between
  padding: 16px

.p-date-picker-handle-toggle
  display: flex
  justify-content: space-between
  align-items: center

.p-date-picker-handle-no
  text-align: right

.p-date-picker-handle-left
  line-height: 28px

.p-date-picker-handle-left .p-date-picker-handle-add-segment
  padding-right: 8px

.p-date-picker-handle-left .p-date-picker-handle-text
  margin-left: 8px
  vertical-align: middle
  font-size: 14px
  color: $grey-900
  user-select: none

.p-date-picker-handle-left .p-date-picker-lock
  display: inline
  padding-left: 16px
  cursor: pointer

.p-date-picker-handle-left .p-date-picker-lock .p-date-picker-lock-svg svg
  vertical-align: middle
  width: 16px
  height: 16px

.p-date-picker-handle-left .p-date-picker-lock .p-date-picker-lock-svg .p-date-picker-lock-active path
  fill: $blue-500

.p-date-picker-handle-left .p-date-picker-lock-disabled
  cursor: not-allowed

.p-date-picker-handle-left .p-date-picker-lock-disabled .p-date-picker-lock-svg svg path
  fill: $grey-400

.p-date-picker-handle-left .p-date-picker-lock-disabled .p-date-picker-handle-text
  color: $grey-400

.p-date-picker-handle-right .p-picker-handle-time
  margin-right: 16px
  font-size: 14px
  user-select: none
  vertical-align: middle
  transition: color .3s

.p-date-picker-handle-right .p-picker-handle-time-normal
  color: $blue-500
  cursor: pointer

.p-date-picker-handle-right .p-picker-handle-time-normal:hover
  color: $blue-600

.p-date-picker-handle-right .p-picker-handle-time-disabled
  color: $grey-400
  cursor: not-allowed

.p-picker-main-item-time-select
  margin-top: 16px
  margin-bottom: 16px

.p-date-picker-handle-note
  position: relative
  display: inline

.p-date-picker-handle-note .p-date-picker-handle-note-svg
  vertical-align: middle
  width: 16px
  height: 16px
  cursor: pointer

.p-date-picker-handle-note .p-date-picker-handle-note-text
  position: absolute
  left: -24px
  top: -50px
  background-color: $theme
  padding: 4px 8px
  border: 1px solid $grey-200
  border-radius: 4px
  box-shadow: $box-shadow-bottom
  width: 236px
  line-height: 18px
  font-size: 12px
  color: $grey-900
  opacity: 0
  pointer-events: none
  transition: all .3s

.p-date-picker-handle-note:hover .p-date-picker-handle-note-text
  top: -60px
  opacity: 1

.p-picker-child-select-box
  border: 1px solid $grey-200
  width: 296px

.p-picker-child-select-box .p-picker-child-select-box-title
  border-bottom: 1px solid $grey-200
  width: 100%
  height: 32px
  color: $grey-900
  font-size: 14px

.p-picker-child-select-box .p-picker-child-select-box-title .p-picker-child-select-box-title-text
  display: flex
  align-items: center
  justify-content: center
  line-height: 32px

.p-picker-child-select-box .p-picker-child-select-box-title .p-picker-child-select-box-title-text > article
  display: ruby
  line-height: 32px
  user-select: none
  cursor: pointer
  transition: color .3s

.p-picker-child-select-box .p-picker-child-select-box-title .p-picker-child-select-box-title-text > article+article
  margin-left: 12px

.p-picker-child-select-box .p-picker-child-select-box-title .p-picker-child-select-box-title-text .p-picker-active-title:hover
  color: $blue-500

.p-picker-child-select-box .p-picker-child-select-box
  border: 0

.p-picker-child-select-box-border-left
  border-left: 0

.selectDownUpExtend-enter-active
  animation: selectDownUpExtend .3s

.selectDownUpExtend-leave-active
  animation: selectDownUpExtend .3s reverse

.selectDownUpExtendTop-enter-active
  animation: selectDownUpExtendTop .3s

.selectDownUpExtendTop-leave-active
  animation: selectDownUpExtendTop .3s reverse

@keyframes selectDownUpExtend
  from
    transform: translate3d(0,-8px,0)
    opacity: 0
    pointer-events: none
  to
    transform: translate3d(0,0,0)
    opacity: 1
    pointer-events: auto
@keyframes selectDownUpExtend
  from
    transform: translate3d(0,-8px,0)
    opacity: 0
    pointer-events: none
  to
    transform: translate3d(0,0,0)
    opacity: 1
    pointer-events: auto
@keyframes selectDownUpExtend
  from
    transform: translate3d(0,-8px,0)
    opacity: 0
    pointer-events: none
  to
    transform: translate3d(0,0,0)
    opacity: 1
    pointer-events: auto
@keyframes selectDownUpExtend
  from
    transform: translate3d(0,-8px,0)
    opacity: 0
    pointer-events: none
  to
    transform: translate3d(0,0,0)
    opacity: 1
    pointer-events: auto
@keyframes selectDownUpExtendTop
  from
    transform: translate3d(0,8px,0)
    opacity: 0
    pointer-events: none
  to
    transform: translate3d(0,0,0)
    opacity: 1
    pointer-events: auto
@keyframes selectDownUpExtendTop
  from
    transform: translate3d(0,8px,0)
    opacity: 0
    pointer-events: none
  to
    transform: translate3d(0,0,0)
    opacity: 1
    pointer-events: auto
@keyframes selectDownUpExtendTop
  from
    transform: translate3d(0,8px,0)
    opacity: 0
    pointer-events: none
  to
    transform: translate3d(0,0,0)
    opacity: 1
    pointer-events: auto
@keyframes selectDownUpExtendTop
  from
    transform: translate3d(0,8px,0)
    opacity: 0
    pointer-events: none
  to
    transform: translate3d(0,0,0)
    opacity: 1
    pointer-events: auto