// iOS Item // -------------------------------------------------- $item-ios-border-color: #c8c7cc !default; $item-ios-font-size: 1.6rem !default; $item-ios-padding-top: 13px !default; $item-ios-padding-right: 15px !default; $item-ios-padding-bottom: 14px !default; $item-ios-padding-left: 15px !default; $item-ios-avatar-size: 4rem !default; $item-ios-thumbnail-size: 8rem !default; $item-ios-note-color: #999 !default; .list[mode="ios"] { .item { font-size: $item-ios-font-size; margin-top: -1px; &:before { position: absolute; content: ''; top: 0; right: 0; left: $item-ios-padding-left; border-top: 1px solid $item-ios-border-color; } &:after { position: absolute; content: ''; right: 0; bottom: 0; left: $item-ios-padding-left; border-top: 1px solid $item-ios-border-color; } } .text-input, .input-label, .item-media, .item-content, .item-note { margin: $item-ios-padding-top $item-ios-padding-right $item-ios-padding-bottom $item-ios-padding-left; } .item-note { color: $item-ios-note-color; } .item > icon { margin-left: $item-ios-padding-left; margin-right: $item-ios-padding-right; } icon[forward] { font-size: 2rem; color: #cfcfcf; } button { margin: 0 $item-ios-padding-right 0 $item-ios-padding-left; padding: 2px 6px; min-height: 26px; } .badge { margin-right: $item-ios-padding-right; } .avatar { max-width: $item-ios-avatar-size; max-height: $item-ios-avatar-size; border-radius: $item-ios-avatar-size / 2; } .thumbnail { max-width: $item-ios-thumbnail-size; max-height: $item-ios-thumbnail-size; } .vertical-align-top { button, [button] { margin-top: $item-ios-padding-top; } > icon { margin-top: $item-ios-padding-top / 2; } } .item-input { &:before, &:after { left: 0; } } } /* .list[mode="ios"] { margin-top: -1px; .item { background: $item-ios-background-color; min-height: $item-ios-min-height; padding-left: $item-ios-padding-left; .item-media + .item-content { margin-left: $item-ios-padding-left; } .item-content { min-height: $item-ios-min-height; padding: 0; } .item:last-of-type .item-content:after { background: none; } .item-accessory { color: $item-ios-accessory-color; } .item-subtitle { width: 100%; color: #808080; } .item-full { // No left ios-style padding padding-left: 0; button { width: 100%; font-size: 1.3em; } } } } */