/**
 * Scroller Component Demo for tingle
 * @author gbk
 *
 * Copyright 2014-2015, Tingle Team, Alinw.
 * All rights reserved.
 */
@require '../node_modules/tingle-style/src/var'

slotItemHeight = 44px

.tSlot
  border-top 1px solid #ccc

.tSlotHeader
  background-color #f2f2f2
  height slotItemHeight
  font-size 16px
  color #424242

.tSlotCancel
  margin-left 15px

.tSlotConfirm
  margin-right 15px

.tSlotCancel, .tSlotConfirm
  min-width 29px
  line-height slotItemHeight
  font-size 14px
  white-space nowrap

.tSlotConfirm.enable
  color #f86a35

.tSlotTitle
  font-size 18px

.tSlotBody
  height slotItemHeight * 5
  overflow hidden
  background-color #f9f9f9
  font-size 14px
  > .tScroller > .tDIB
    width 100%
  > div
    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(40%, rgba(0, 0, 0, 1)), color-stop(60%, rgba(0, 0, 0, 1)), color-stop(100%, rgba(0, 0, 0, 0)));
    -webkit-mask-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0) 100%);
  li
    height slotItemHeight
    overflow hidden
    line-height slotItemHeight
    text-align center
    text-overflow ellipsis
    white-space nowrap
  .tSlotItemActive
    font-size 18px
    color #f86a35

.tSlotBody:before, .tSlotBody:after
  content ""
  display inline-block
  position absolute
  top slotItemHeight * 2
  left 0
  height 0
  width 100%
  border-top 1px solid #ccc

.tSlotBody:after
  top slotItemHeight * 3

.hairlines
  .Slot, .tSlotBody:before, .tSlotBody:after
    border-width 0.5px