diff --git a/ionic/components/item/modes/md.scss b/ionic/components/item/modes/md.scss index 651d0bcf52..3c0f67390f 100644 --- a/ionic/components/item/modes/md.scss +++ b/ionic/components/item/modes/md.scss @@ -42,6 +42,135 @@ ion-note { color: $item-md-note-color; } +.item { + padding-right: ($item-md-padding-right / 2); + padding-left: ($item-md-padding-left); + font-size: $item-md-font-size; + text-transform: none; + + 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; + } +} + +.item-inner { + border-bottom: 1px solid $item-md-border-color; +} + +ion-item-content { + margin: $item-md-padding-top ($item-md-padding-right / 2) $item-md-padding-bottom 0; +} + +button.item.activated { + box-shadow: none; +} + +[item-left], +[item-right] { + margin: $item-md-padding-media-top ($item-md-padding-right / 2) $item-md-padding-media-bottom 0; +} + +icon[item-left], +icon[item-right] { + margin-top: $item-md-padding-icon-top; + margin-left: 0; + 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] + .item-inner, +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; + } +} + .item, a.item, button.item { diff --git a/ionic/components/list/modes/ios.scss b/ionic/components/list/modes/ios.scss index 6016fedefe..9cb37bb381 100644 --- a/ionic/components/list/modes/ios.scss +++ b/ionic/components/list/modes/ios.scss @@ -19,6 +19,8 @@ $list-ios-header-font-weight: 500 !default; $list-ios-header-letter-spacing: 0.1rem !default; $list-ios-header-color: #333 !default; +$list-ios-border-color: $list-border-color !default; + /****************/ /* DEFAULT LIST */ @@ -39,16 +41,16 @@ $list-ios-header-color: #333 !default; ion-header, ion-item-group-title { - border-bottom: 1px solid $item-ios-border-color; + border-bottom: 1px solid $list-ios-border-color; } > .item:first-child { - border-top: 1px solid $item-ios-border-color; + border-top: 1px solid $list-ios-border-color; } > .item:last-child, > ion-item-sliding:last-child .item { - border-bottom: 1px solid $item-ios-border-color; + border-bottom: 1px solid $list-ios-border-color; .item-inner { border-bottom: none; @@ -56,7 +58,7 @@ $list-ios-header-color: #333 !default; } .item-inner { - border-bottom: 1px solid $item-ios-border-color; + border-bottom: 1px solid $list-ios-border-color; } // If the item has the no-lines attribute remove the bottom border from: @@ -68,7 +70,7 @@ $list-ios-header-color: #333 !default; } ion-item-options { - border-bottom: 1px solid $item-ios-border-color; + border-bottom: 1px solid $list-ios-border-color; button, [button] { min-height: 100%; @@ -135,7 +137,7 @@ $list-ios-header-color: #333 !default; .item { margin-top: 0; - border-bottom: 1px solid $item-ios-border-color; + border-bottom: 1px solid $list-ios-border-color; .item-inner { border-bottom: none; diff --git a/ionic/components/list/modes/md.scss b/ionic/components/list/modes/md.scss index bac8854a72..c0836995ac 100644 --- a/ionic/components/list/modes/md.scss +++ b/ionic/components/list/modes/md.scss @@ -17,174 +17,43 @@ $list-md-header-padding: 16px $item-md-padding-right 16px $item-md-paddi $list-md-header-font-size: 1.4rem !default; $list-md-header-color: #858585 !default; +$list-md-border-color: $item-md-border-color !default; + /****************/ /* DEFAULT LIST */ /****************/ .list { + margin: 0 $list-md-margin-right $list-md-margin-bottom $list-md-margin-left; + ion-header, - ion-item-group-title , { - border-bottom: 1px solid $item-md-border-color; + ion-item-group-title { + border-bottom: 1px solid $list-md-border-color; + margin-left: 0; + padding: $list-md-header-padding; + font-size: $list-md-header-font-size; + color: $list-md-header-color; } - .item { - padding-right: ($item-md-padding-right / 2); - padding-left: ($item-md-padding-left); - font-size: $item-md-font-size; - text-transform: none; - - .item-inner { - border-bottom: 1px solid $item-md-border-color; - } + .item-inner { + border-bottom: 1px solid $list-md-border-color; } - > .item:first-child { - border-top: 1px solid $item-md-border-color; + > .item:first-child, + > ion-item-sliding:first-child .item { + border-top: 1px solid $list-md-border-color; } > .item:last-child, > ion-item-sliding:last-child .item { - border-bottom: 1px solid $item-md-border-color; + border-bottom: 1px solid $list-md-border-color; .item-inner { border-bottom: none; } } - // If the item has the no-lines attribute remove the bottom border from: - // the item itself (for last-child items) - // the item-inner class (if it is not last) - .item[no-lines], - .item[no-lines] .item-inner { - border-width: 0; - } - - ion-header, - ion-item-group-title { - border-bottom: 1px solid $item-md-border-color; - 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 0; - } - - icon[item-left], - icon[item-right] { - margin-top: $item-md-padding-icon-top; - margin-left: 0; - 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] + .item-inner, - 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); @@ -202,15 +71,13 @@ $list-md-header-color: #858585 !default; } } } -} -.list { - margin: 0 $list-md-margin-right $list-md-margin-bottom $list-md-margin-left; - - ion-header { - padding: $list-md-header-padding; - font-size: $list-md-header-font-size; - color: $list-md-header-color; + // If the item has the no-lines attribute remove the bottom border from: + // the item itself (for last-child items) + // the item-inner class (if it is not last) + .item[no-lines], + .item[no-lines] .item-inner { + border-width: 0; } + .list { @@ -234,22 +101,16 @@ $list-md-header-color: #858585 !default; .item:first-child { border-top-width: 0; - margin-top: 0; border-top-right-radius: $list-inset-md-border-radius; border-top-left-radius: $list-inset-md-border-radius; } .item:last-child { border-bottom-width: 0; - margin-bottom: 0; border-bottom-right-radius: $list-inset-md-border-radius; border-bottom-left-radius: $list-inset-md-border-radius; } - .item:not(ion-input):last-child:after { - border-bottom: none; - } - + .list[inset] { margin-top: 0; }