better-picker/src/picker/picker.styl

h5 picker inspired by ios UIPickerView

@import "../util/mixin.styl"

.picker
  display: none
  position: fixed
  top: 0
  z-index: 100
  width: 100%
  height: 100%
  overflow: hidden
  text-align: center
  font-family: 'PingFang SC', 'STHeitiSC-Light', 'Helvetica-Light', arial, sans-serif, 'Droid Sans Fallback'
  font-size: 14px
  unselectable()
  .picker-mask
    position: absolute
    z-index: 500
    width: 100%
    height: 100%
    transition: all 0.5s
    -webkit-transition: all 0.5s
    background: rgba(0, 0, 0, 0)
    opacity: 0
    &.show
      background: rgba(0, 0, 0, 0.6)
      opacity: 1
  .picker-panel
    position: absolute
    z-index: 600
    bottom: 0
    width: 100%
    height: 243px
    background: #fff
    transform: translateY(243px)
    -webkit-transform: translateY(243px)
    transition: all 0.5s
    -webkit-transition: all 0.5s
    &.show
      transform: translateY(0)
      -webkit-transform: translateY(0)
    .picker-choose
      position: relative
      height: 50px
      color: #878787
      font-size: 14px
      .picker-title
        line-height: 50px
        font-size: 19px
        text-align: center
        color: #333
      .confirm, .cancel
        position: absolute
        padding: 10px
        top: 6px
      .confirm
        right: 0
        color: #fa8919
      .cancel
        left: 0
    .picker-content
      position: relative
      .mask-top, .mask-bottom
        position: absolute
        z-index: 10
        width: 100%
        height: 68px
        pointer-events: none
        transform: translateZ(0)
        -webkit-transform: translateZ(0)
      .mask-top
        border-bottom-1px(#ccc)
        top: 0
        gradient-from-bottom(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.8))
      .mask-bottom
        border-top-1px(#ccc)
        bottom: 0
        gradient-from-top(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.8))
    .wheel-wrapper
      flex-box()
      padding: 0 10px
      .wheel
        flex()
        height: 173px
        overflow: hidden
        font-size: 21px
        .wheel-scroll
          margin-top: 68px
          line-height: 36px
          .wheel-item
            height: 36px
            overflow: hidden
            white-space: nowrap
            color: #333
  .picker-footer
    height: 20px

@media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5)
  .border-1px
    &::after, &::before
      -webkit-transform: scaleY(.7)
      -webkit-transform-origin: 0 0
      transform: scaleY(.7)
    &::after
      -webkit-transform-origin: left bottom

@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2)
  .border-1px
    &::after, &::before
      -webkit-transform: scaleY(.5)
      transform: scaleY(.5)