UITableViewCellAccessoryDetailDisclosureButton.css

index.slim

a.accessory.detail-disclosure-button
br
a.accessory.detail-disclosure-button.x10

style.sass

@import compass

$support-ios3: true
$support-others: true

=border-radius($radius)
  @if $support-ios3
    -webkit-border-radius: $radius
  border-radius: $radius

=box-shadow($shadow)
  @if $support-ios3
    -webkit-box-shadow: $shadow
  box-shadow: $shadow

=radial-gradient($old-webkit, $new-webkit, $old-moz, $w3c, $color1, $stop1, $color2, $stop2, $color3, $stop3)
  @if $support-ios3
    background-image: -webkit-gradient(radial, $old-webkit, color-stop($stop1, $color1), color-stop($stop2, $color2), color-stop($stop3, $color3))
  background-image: -webkit-radial-gradient($new-webkit, $color1 $stop1, $color2 $stop2, $color3 $stop3)
  @if $support-others
    background-image: -moz-radial-gradient($old-moz, $color1 $stop1, $color2 $stop2, $color3 $stop3)
    background-image: radial-gradient($w3c, $color1 $stop1, $color2 $stop2, $color3 $stop3)

a
  text-decoration: none
  -webkit-user-select: none
  -webkit-touch-callout: none
  -webkit-tap-highlight-color: transparent
  -webkit-box-sizing: border-box
  -moz-box-sizing: border-box
  box-sizing: border-box

a.accessory,
.accessory a
  font-size: 0
  content: ''
  display: inline-block

  min-width: 23px
  min-height: 23px
  +radial-gradient((center 125%, 0, center 125%, 26.5), (center 102%, 120% 100%), (center 125%, circle), (ellipse 120% 100% at center 101%), (rgba(121, 121, 121, 0.29)), (59%), (rgba(179, 179, 179, 0.42)), (62%), (rgba(212, 212, 212, 0.56)), (100%))
  border: 2px solid #fff
  +border-radius(11.5px)
  +box-shadow((0 0 1px rgba(0, 0, 0, 0.5), 0 2px 3px rgba(0, 0, 0, 0.3)))

a.accessory.x10,
.accessory.x10 a
  min-width: 230px
  min-height: 230px
  +radial-gradient((center 125%, 0, center 125%, 265), (center 102%, 120% 100%), (center 125%, circle), (ellipse 120% 100% at center 101%), (rgba(121, 121, 121, 0.29)), (59%), (rgba(179, 179, 179, 0.42)), (62%), (rgba(212, 212, 212, 0.56)), (100%))
  border: 20px solid #fff
  +border-radius(115px)
  +box-shadow((0 0 10px rgba(0, 0, 0, 0.5), 0 20px 30px rgba(0, 0, 0, 0.3)))

a.detail-disclosure-button,
.detail-disclosure-button a
  background-color: hsl(215, 100%, 50%)
  &:active
    background-color: hsl(215, 100%, 28%)

a.detail-disclosure-button::after,
.detail-disclosure-button a::after
  content: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D'19'%20height%3D'19'%20viewBox%3D'0%200%2038%2038'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cpath%20id%3D'd'%20d%3D'm14.8%2C7.8%2011.2%2C11.2-11.2%2C11.2'%20fill%3D'none'%20stroke-width%3D'6'%2F%3E%3C%2Fdefs%3E%3Cuse%20xlink%3Ahref%3D'%23d'%20stroke%3D'%23000'%20opacity%3D'.5'%20transform%3D'translate(0%2C-1.5)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23d'%20stroke%3D'%23fff'%2F%3E%3C%2Fsvg%3E")

a.detail-disclosure-button.x10::after,
.detail-disclosure-button.x10 a::after
  content: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D'190'%20height%3D'190'%20viewBox%3D'0%200%20380%20380'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cpath%20id%3D'd'%20d%3D'm148%2C78%20112%2C112-112%2C112'%20fill%3D'none'%20stroke-width%3D'60'%2F%3E%3C%2Fdefs%3E%3Cuse%20xlink%3Ahref%3D'%23d'%20stroke%3D'%23000'%20opacity%3D'.5'%20transform%3D'translate(0%2C-15)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23d'%20stroke%3D'%23fff'%2F%3E%3C%2Fsvg%3E")

UITableViewCellAccessoryDetailDisclosureButton.css.markdown

UITableViewCellAccessoryDetailDisclosureButton.css

The cell has an accessory control that is a blue button with a chevron image as content. It is intended for configuration purposes. The control tracks touches.

http://bit.ly/Yi1pQ7

A Pen by Peter T Bosse II on CodePen.

License.