bmui/src/style/field.styl

Bluemoon Moon Components

.{$PREFIX}-field_arrow1
  min-height: 50px
  background-color: #fff
  border-bottom: 1px solid $color_b1
  display: flex
  align-items: center
  padding: 10px 12px
  &-title
    flex-shrink: 0
    color: $color_t2
    font-size: $size6
    margin-right: 12px
  &-content
    color: $color_t1
    font-size: $size4
    flex-grow: 1
    overflow: hidden
    white-space: nowrap
    text-overflow: ellipsis
    text-align: right
  &-empty
    color: $color_t3
  &-icon
    $icon("component_arrow_right@3x")
    width: 30px
    height: 30px
    flex-shrink: 0
    margin: 0 -4px 0 8px

.{$PREFIX}-field_arrow2
  min-height: 70px
  background-color: #fff
  border-bottom: 1px solid $color_b1
  padding: 10px 12px
  &-title
    color: $color_t2
    font-size: $size6
    margin-bottom: 4px
  &-wrap
    display: flex
    align-items: center
  &-content
    color: $color_t1
    font-size: $size4
    flex-grow: 1
    overflow: hidden
    white-space: nowrap
    text-overflow: ellipsis
  &-empty
    color: $color_t3
  &-icon
    $icon("component_arrow_right@3x")
    width: 30px
    height: 30px
    flex-shrink: 0
    margin: 0 -4px 0 8px

.{$PREFIX}-field_text1
  min-height: 50px
  background-color: #fff
  border-bottom: 1px solid $color_b1
  display: flex
  align-items: center
  padding: 5px 12px
  &-title
    flex-shrink: 0
    color: $color_t2
    font-size: $size6
    margin-right: 12px
  &-input
    color: $color_t1
    font-size: $size4
    flex-grow: 1
    overflow: hidden
    white-space: nowrap
    text-overflow: ellipsis
    text-align: right
  &-empty
    color: $color_t3
  &-del
    $icon("delete@3x")
    flex-shrink: 0
    margin: 0 -4px 0 8px
    width: 30px
    height: 30px
  &-arrow
    $icon("component_arrow_right@3x")
    width: 30px
    height: 30px
    flex-shrink: 0
    margin: 0 -4px 0 8px

.{$PREFIX}-field_text2
  min-height: 70px
  background-color: #fff
  border-bottom: 1px solid $color_b1
  padding: 12px
  &-title
    color: $color_t2
    font-size: $size6
    margin-bottom: 4px
  &-wrap
    display: flex
    min-height: 30px
    align-items: center
    margin-bottom: -4px
  &-input
    color: $color_t1
    font-size: $size4
    flex-grow: 1
  &-empty
    color: $color_t3
  &-del
    $icon("delete@3x")
    flex-shrink: 0
    margin: 0 -4px 0 8px
    width: 30px
    height: 30px
  &-arrow
    $icon("component_arrow_right@3x")
    width: 30px
    height: 30px
    flex-shrink: 0
    margin: 0 -4px 0 8px

.{$PREFIX}-field_paragraph
  background-color: #fff
  border-bottom: 1px solid $color_b1
  padding: 12px
  &-wrap
    display: flex
    align-items: center
    justify-content: space-between
    font-size: $size6
    margin-bottom: 8px
  &-title
    color: $color_t2
  &-count
    color: $color_main2
  &-input
    height: 80px
    font-size: $size4
    color: $color_t1

.{$PREFIX}-field_btn
  background-color: #fff
  border-bottom: 1px solid $color_b1
  min-height: 50px
  font-size: $size4
  color: $color_t1
  display: flex
  width: 100%
  align-items: center
  padding: 12px
  &-title
    font-size: $size6
    color: $color_t2
    flex-shrink: 0
    margin-right: 12px
  &-content
    text-align: right
    flex-grow: 1
    min-height: 30px
  &-btn[class|=bmui]
    flex-shrink: 0
    align-self: stretch
    font-size: 12px
    color: $color_main1
    border-left: 1px solid $color_main1
    padding: 0 8px
    margin: 0 -12px 0 8px
    &:disabled, &-disabled
      color: $color_t3
      border-left-color: $color_t3
  &-status-loading, &-status-success, &-status-warning, &-status-fail
    flex-shrink: 0
    width: 30px
    height: 30px
    margin-left: 8px
  &-status-loading
    $icon('component_status_snake', '.svg')
    animation: convert($PREFIX + '-field-rotate') 1s infinite linear
  &-status-success
    $icon('component_status_success', '.svg')
  &-status-warning
    $icon('component_status_warning', '.svg')
  &-status-fail
    $icon('component_status_fail', '.svg')