diff --git a/ionic/components/item/item-media.scss b/ionic/components/item/item-media.scss index 66fb649b98..50eb573211 100644 --- a/ionic/components/item/item-media.scss +++ b/ionic/components/item/item-media.scss @@ -3,17 +3,19 @@ // -------------------------------------------------- // Icons, avatars, thumbnails, notes, etc. +.item > icon[small]:first-child, +.item-inner > icon[small]:first-child { + min-width: 18px; +} -.item > icon:first-child { +.item > icon:first-child, +.item-inner > icon:first-child { min-width: 24px; text-align: center; } -.list .item > icon[small]:first-child { - min-width: 18px; -} - -.item > icon { +.item > icon, +.item-inner > icon { line-height: 1; font-size: 2.4rem; diff --git a/ionic/components/item/item.scss b/ionic/components/item/item.scss index 966a0684b7..0329601170 100644 --- a/ionic/components/item/item.scss +++ b/ionic/components/item/item.scss @@ -56,11 +56,15 @@ button.item.item { } .item-inner { - height: 100%; + // height: 100%; width: 100%; display: flex; + margin: 0; + padding: 0; + border: 0; align-items: center; overflow: hidden; + align-self: stretch; } ion-item-content { diff --git a/ionic/components/item/modes/md.scss b/ionic/components/item/modes/md.scss index 6e1eabcc5f..651d0bcf52 100644 --- a/ionic/components/item/modes/md.scss +++ b/ionic/components/item/modes/md.scss @@ -42,161 +42,6 @@ ion-note { color: $item-md-note-color; } -.list { - .item-group { - - } - - .item { - margin-top: -1px; - border-top: 1px solid $item-md-border-color; - padding-right: ($item-md-padding-right / 2); - margin-left: $item-md-padding-left; - font-size: $item-md-font-size; - text-transform: none; - } - - ion-header + .item { - margin-left: 0; - padding-left: $item-md-padding-left; - } - - ion-item-content { - margin: $item-md-padding-top ($item-md-padding-right / 2) $item-md-padding-bottom ($item-md-padding-left / 2); - } - - [item-left], - [item-right] { - margin: $item-md-padding-media-top ($item-md-padding-right / 2) $item-md-padding-media-bottom ($item-md-padding-left / 2); - } - - icon[item-left], - icon[item-right] { - margin-top: $item-md-padding-icon-top; - margin-bottom: $item-md-padding-icon-bottom; - } - - button[item-left], - button[item-right], - [button][item-left], - [button][item-right] { - padding: 0 0.6em; - min-height: 26px; - font-size: 1.2rem; - } - - [item-left].icon-only, - [item-right].icon-only, - [item-left].icon-only icon, - [item-right].icon-only icon { - padding: 0 1px; - } - - [item-left][clear], - [item-right][clear] { - padding: 0 8px; - } - - [item-left].icon-left icon, - [item-right].icon-left icon { - margin-left: 0; - margin-bottom: 1px; - padding-right: 0.3em; - } - - [item-left].icon-right icon, - [item-right].icon-right icon { - margin-right: 0; - margin-bottom: 1px; - } - - [text-wrap] ion-item-content { - font-size: $item-md-body-text-font-size; - line-height: $item-md-body-text-line-height; - } - - .item[actions] ion-item-content { - margin: 4px; - } - - icon[item-left] + ion-item-content, - icon[item-left] + [text-input] { - margin-left: $item-md-padding-left + ($item-md-padding-left / 2); - } - - ion-avatar { - min-width: $item-md-avatar-size; - min-height: $item-md-avatar-size; - - img { - max-width: $item-md-avatar-size; - max-height: $item-md-avatar-size; - border-radius: $item-md-avatar-size / 2; - } - } - - ion-thumbnail { - min-width: $item-md-thumbnail-size; - min-height: $item-md-thumbnail-size; - - img { - max-width: $item-md-thumbnail-size; - max-height: $item-md-thumbnail-size; - } - } - - h1 { - margin: 0 0 2px; - font-size: 2.4rem; - font-weight: normal; - } - - h2 { - margin: 2px 0 2px; - font-size: 1.6rem; - font-weight: normal; - } - - h3, - h4, - h5, - h6 { - line-height: normal; - margin: 2px 0 2px; - font-size: 1.4rem; - font-weight: normal; - } - - p { - line-height: normal; - color: #666; - font-size: 1.4rem; - margin: 0 0 2px; - } - - button.item.activated { - box-shadow: none; - } - - ion-item-options { - button, [button] { - height: calc(100% - 2px); - margin: 1px 0 1px 0; - box-shadow: none; - - border: none; - border-radius: 0; - display: inline-flex; - align-items: center; - box-sizing: border-box; - - &:before{ - margin: 0 auto; - } - } - } -} - .item, a.item, button.item { diff --git a/ionic/components/list/modes/ios.scss b/ionic/components/list/modes/ios.scss index 6cde210989..b52da5238a 100644 --- a/ionic/components/list/modes/ios.scss +++ b/ionic/components/list/modes/ios.scss @@ -37,7 +37,8 @@ $list-ios-header-color: #333 !default; color: $list-ios-header-color; } - ion-header + .item { + ion-header + .item, + ion-item-group-title + .item { border-top: 1px solid $item-ios-border-color; .item-inner { @@ -70,7 +71,7 @@ $list-ios-header-color: #333 !default; } ion-item-content { - margin: $item-ios-padding-top ($item-ios-padding-right / 2) $item-ios-padding-bottom 0; + //margin: $item-ios-padding-top ($item-ios-padding-right / 2) $item-ios-padding-bottom 0; } } @@ -91,11 +92,11 @@ $list-ios-header-color: #333 !default; } [item-left] { - margin: 0 $item-ios-padding-right 0 0; + margin: ($item-ios-padding-top / 2) $item-ios-padding-right ($item-ios-padding-bottom / 2) 0; } [item-right] { - margin: 0 ($item-ios-padding-right / 2) 0 ($item-ios-padding-left / 2); + margin: ($item-ios-padding-top / 2) ($item-ios-padding-right / 2) ($item-ios-padding-bottom / 2) ($item-ios-padding-left / 2); } icon[item-left], @@ -202,14 +203,15 @@ ion-card { button, [button] { min-height: calc(100% - 1px); height: calc(100% - 1px); - // margin-top: 0.55px; - // margin-bottom: 0.55px; + margin-top: 0.55px; + margin-bottom: 0.55px; } } - ion-header + .item { - // border-top-width: 0.55px; - // margin-top: -0.55px; + ion-header + .item, + ion-item-group-title + .item { + border-top-width: 0.55px; + margin-top: -0.55px; .item-inner { border-width: 0; @@ -217,14 +219,14 @@ ion-card { } .item { - // margin-top: -0.55px; + margin-top: -0.55px; .item-inner { - // border-width: 0.55px; + border-width: 0.55px; } &:first-child { - // border-top-width: 0.55px; + border-top-width: 0.55px; .item-inner { border-top-width: 0; @@ -232,8 +234,8 @@ ion-card { } &:last-child { - // border-bottom-width: 0.55px; - // margin-bottom: -0.55px; + border-bottom-width: 0.55px; + margin-bottom: -0.55px; } } } @@ -277,7 +279,7 @@ ion-card { &.hairlines .list[inset] { .item { - // border-width: 0.55px; + border-width: 0.55px; } } diff --git a/ionic/components/list/modes/md.scss b/ionic/components/list/modes/md.scss index 4d5984b858..f44f6ca56d 100644 --- a/ionic/components/list/modes/md.scss +++ b/ionic/components/list/modes/md.scss @@ -22,6 +22,162 @@ $list-md-header-color: #858585 !default; /* DEFAULT LIST */ /****************/ +.list { + .item-group { + + } + + .item { + margin-top: -1px; + border-top: 1px solid $item-md-border-color; + padding-right: ($item-md-padding-right / 2); + margin-left: $item-md-padding-left; + font-size: $item-md-font-size; + text-transform: none; + } + + ion-header + .item, + ion-item-group-title + .item { + margin-left: 0; + padding-left: $item-md-padding-left; + } + + ion-item-content { + margin: $item-md-padding-top ($item-md-padding-right / 2) $item-md-padding-bottom 0; + } + + [item-left], + [item-right] { + margin: $item-md-padding-media-top ($item-md-padding-right / 2) $item-md-padding-media-bottom ($item-md-padding-left / 2); + } + + icon[item-left], + icon[item-right] { + margin-top: $item-md-padding-icon-top; + margin-bottom: $item-md-padding-icon-bottom; + } + + button[item-left], + button[item-right], + [button][item-left], + [button][item-right] { + padding: 0 0.6em; + min-height: 26px; + font-size: 1.2rem; + } + + [item-left].icon-only, + [item-right].icon-only, + [item-left].icon-only icon, + [item-right].icon-only icon { + padding: 0 1px; + } + + [item-left][clear], + [item-right][clear] { + padding: 0 8px; + } + + [item-left].icon-left icon, + [item-right].icon-left icon { + margin-left: 0; + margin-bottom: 1px; + padding-right: 0.3em; + } + + [item-left].icon-right icon, + [item-right].icon-right icon { + margin-right: 0; + margin-bottom: 1px; + } + + [text-wrap] ion-item-content { + font-size: $item-md-body-text-font-size; + line-height: $item-md-body-text-line-height; + } + + .item[actions] ion-item-content { + margin: 4px; + } + + icon[item-left] + ion-item-content, + icon[item-left] + [text-input] { + margin-left: $item-md-padding-left + ($item-md-padding-left / 2); + } + + ion-avatar { + min-width: $item-md-avatar-size; + min-height: $item-md-avatar-size; + + img { + max-width: $item-md-avatar-size; + max-height: $item-md-avatar-size; + border-radius: $item-md-avatar-size / 2; + } + } + + ion-thumbnail { + min-width: $item-md-thumbnail-size; + min-height: $item-md-thumbnail-size; + + img { + max-width: $item-md-thumbnail-size; + max-height: $item-md-thumbnail-size; + } + } + + h1 { + margin: 0 0 2px; + font-size: 2.4rem; + font-weight: normal; + } + + h2 { + margin: 2px 0 2px; + font-size: 1.6rem; + font-weight: normal; + } + + h3, + h4, + h5, + h6 { + line-height: normal; + margin: 2px 0 2px; + font-size: 1.4rem; + font-weight: normal; + } + + p { + line-height: normal; + color: #666; + font-size: 1.4rem; + margin: 0 0 2px; + } + + button.item.activated { + box-shadow: none; + } + + ion-item-options { + button, [button] { + height: calc(100% - 2px); + margin: 1px 0 1px 0; + box-shadow: none; + + border: none; + border-radius: 0; + display: inline-flex; + align-items: center; + box-sizing: border-box; + + &:before{ + margin: 0 auto; + } + } + } +} + .list { margin: 0 $list-md-margin-right $list-md-margin-bottom $list-md-margin-left; @@ -81,7 +237,8 @@ $list-md-header-color: #858585 !default; border-width: 0; } - ion-header + .item { + ion-header + .item, + ion-item-group-title + .item { border-width: 1px !important; } }