diff --git a/ionic/components/checkbox/modes/ios.scss b/ionic/components/checkbox/modes/ios.scss index d671f70014..a908839c66 100644 --- a/ionic/components/checkbox/modes/ios.scss +++ b/ionic/components/checkbox/modes/ios.scss @@ -38,7 +38,7 @@ ion-checkbox { media-checkbox { display: block; - margin: $item-ios-padding-media-top ($item-ios-padding-right / 2) $item-ios-padding-media-bottom ($item-ios-padding-left / 2); + margin: $item-ios-padding-media-top $item-ios-padding-right $item-ios-padding-media-bottom 2px; } checkbox-icon { diff --git a/ionic/components/item/item.scss b/ionic/components/item/item.scss index 61ffdc307f..5003934006 100644 --- a/ionic/components/item/item.scss +++ b/ionic/components/item/item.scss @@ -79,10 +79,6 @@ ion-item-content { white-space: normal; } -.list .item { - border-radius: 0; -} - .item { h1 { diff --git a/ionic/components/item/modes/ios.scss b/ionic/components/item/modes/ios.scss index 6215e46607..1ba3ade7d6 100644 --- a/ionic/components/item/modes/ios.scss +++ b/ionic/components/item/modes/ios.scss @@ -52,136 +52,6 @@ ion-note { } } -.list { - - .item { - margin-top: -1px; - padding-left: $item-ios-padding-left; - font-size: $item-ios-font-size; - - &:first-child { - border-top: 1px solid $item-ios-border-color; - - .item-inner { - border-top-width: 0; - } - } - - &:last-child { - border-bottom: 1px solid $item-ios-border-color; - } - - .item-inner { - padding-right: ($item-ios-padding-right / 2); - border-top: 1px solid $item-ios-border-color; - } - - ion-item-content { - margin: $item-ios-padding-top ($item-ios-padding-right / 2) $item-ios-padding-bottom 0; - } - } - - // If the item has the no-lines attribute we want to remove the border from it - // and the border from the next item if there is one - .item[no-lines] { - border-width: 0; - - .item-inner { - border-width: 0; - } - - + .item { - .item-inner { - border-width: 0; - } - } - } - - [item-left] { - margin: $item-ios-padding-media-top $item-ios-padding-right $item-ios-padding-media-bottom 0; - } - - [item-right] { - margin: $item-ios-padding-top ($item-ios-padding-right / 2) $item-ios-padding-bottom ($item-ios-padding-left / 2); - } - - icon[item-left], - icon[item-right] { - margin-top: $item-ios-padding-icon-top; - margin-bottom: $item-ios-padding-icon-bottom; - } - - button[item-left], - button[item-right], - [button][item-left], - [button][item-right] { - padding: 0 0.5em; - font-size: 1.3rem; - min-height: 25px; - } - - [item-left].icon-only, - [item-right].icon-only, - [item-left].icon-only icon, - [item-right].icon-only icon, - [item-left][clear], - [item-right][clear] { - padding: 0 1px; - } - - [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; - } - - ion-avatar { - min-width: $item-ios-avatar-size; - min-height: $item-ios-avatar-size; - - img { - max-width: $item-ios-avatar-size; - max-height: $item-ios-avatar-size; - border-radius: $item-ios-avatar-size / 2; - } - } - - ion-thumbnail { - min-width: $item-ios-thumbnail-size; - min-height: $item-ios-thumbnail-size; - - img { - max-width: $item-ios-thumbnail-size; - max-height: $item-ios-thumbnail-size; - } - } - - ion-item-options { - button, [button] { - min-height: calc(100% - 2px); - height: calc(100% - 2px); - margin: 1px 0 2px 0; - - border: none; - border-radius: 0; - display: inline-flex; - align-items: center; - box-sizing: border-box; - - &:before{ - margin: 0 auto; - } - } - } -} - .item.activated, a.item.activated, button.item.activated { @@ -194,51 +64,3 @@ a.item, button.item { transition-duration: 200ms; } - -.list, -ion-card { - button[ion-item]:not([detail-none]), - a[ion-item]:not([detail-none]) { - @include ios-detail-push-icon($item-ios-detail-push-color); - background-repeat: no-repeat; - background-position: right ($item-ios-padding-right - 2) center; - background-size: 14px 14px; - margin-right: 32px; - } -} - -// Hairlines for iOS need to be set at 0.55px to show on iPhone 6 and 6 Plus -&.hairlines .list { - - ion-item-options { - button, [button] { - min-height: calc(100% - 1px); - height: calc(100% - 1px); - margin-top: 0.55px; - margin-bottom: 0.55px; - } - } - - ion-header + .item { - border-top-width: 0.55px; - - .item-inner { - border-width: 0; - } - } - - .item { - margin-top: -0.55px; - border-width: 0.55px; - - .item-inner { - border-width: 0.55px; - } - - &:first-child { - .item-inner { - border-top-width: 0px; - } - } - } -} diff --git a/ionic/components/list/modes/ios.scss b/ionic/components/list/modes/ios.scss index df6fecd18d..3ae0dd1b00 100644 --- a/ionic/components/list/modes/ios.scss +++ b/ionic/components/list/modes/ios.scss @@ -20,6 +20,10 @@ $list-ios-header-letter-spacing: 0.1rem !default; $list-ios-header-color: #333 !default; +/******************/ +/** DEFAULT LIST **/ +/******************/ + .list { margin: 0 $list-ios-margin-right $list-ios-margin-bottom $list-ios-margin-left; @@ -41,17 +45,195 @@ $list-ios-header-color: #333 !default; } } + .item { + border-radius: 0; + margin-top: -1px; + padding-left: $item-ios-padding-left; + font-size: $item-ios-font-size; + + &:first-child { + border-top: 1px solid $item-ios-border-color; + + .item-inner { + border-top-width: 0; + } + } + + &:last-child { + border-bottom: 1px solid $item-ios-border-color; + } + + .item-inner { + padding-right: ($item-ios-padding-right / 2); + border-top: 1px solid $item-ios-border-color; + } + + ion-item-content { + margin: $item-ios-padding-top ($item-ios-padding-right / 2) $item-ios-padding-bottom 0; + } + } + + // If the item has the no-lines attribute we want to remove the border from it + // and the border from the next item if there is one + .item[no-lines] { + border-width: 0; + + .item-inner { + border-width: 0; + } + + + .item { + .item-inner { + border-width: 0; + } + } + } + + [item-left] { + margin: $item-ios-padding-media-top $item-ios-padding-right $item-ios-padding-media-bottom 0; + } + + [item-right] { + margin: $item-ios-padding-top ($item-ios-padding-right / 2) $item-ios-padding-bottom ($item-ios-padding-left / 2); + } + + icon[item-left], + icon[item-right] { + margin-top: $item-ios-padding-icon-top; + margin-bottom: $item-ios-padding-icon-bottom; + } + + button[item-left], + button[item-right], + [button][item-left], + [button][item-right] { + padding: 0 0.5em; + font-size: 1.3rem; + min-height: 25px; + } + + [item-left].icon-only, + [item-right].icon-only, + [item-left].icon-only icon, + [item-right].icon-only icon, + [item-left][clear], + [item-right][clear] { + padding: 0 1px; + } + + [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; + } + + ion-avatar { + min-width: $item-ios-avatar-size; + min-height: $item-ios-avatar-size; + + img { + max-width: $item-ios-avatar-size; + max-height: $item-ios-avatar-size; + border-radius: $item-ios-avatar-size / 2; + } + } + + ion-thumbnail { + min-width: $item-ios-thumbnail-size; + min-height: $item-ios-thumbnail-size; + + img { + max-width: $item-ios-thumbnail-size; + max-height: $item-ios-thumbnail-size; + } + } + + ion-item-options { + button, [button] { + min-height: calc(100% - 2px); + height: calc(100% - 2px); + margin: 1px 0 2px 0; + + border: none; + border-radius: 0; + display: inline-flex; + align-items: center; + box-sizing: border-box; + + &:before{ + margin: 0 auto; + } + } + } +} + +.list, +ion-card { + button[ion-item]:not([detail-none]), + a[ion-item]:not([detail-none]) { + @include ios-detail-push-icon($item-ios-detail-push-color); + background-repeat: no-repeat; + background-position: right ($item-ios-padding-right - 2) center; + background-size: 14px 14px; + margin-right: 32px; + } } .list + .list { margin-top: $list-ios-margin-top + $list-ios-margin-bottom; + + ion-header { + margin-top: -$list-ios-margin-top; + padding-top: 0; + } } -.list + .list ion-header { - margin-top: -$list-ios-margin-top; - padding-top: 0; +&.hairlines .list { + + ion-item-options { + button, [button] { + min-height: calc(100% - 1px); + height: calc(100% - 1px); + margin-top: 0.55px; + margin-bottom: 0.55px; + } + } + + ion-header + .item { + border-top-width: 0.55px; + + .item-inner { + border-width: 0; + } + } + + .item { + margin-top: -0.55px; + border-width: 0.55px; + + .item-inner { + border-width: 0.55px; + } + + &:first-child { + .item-inner { + border-top-width: 0px; + } + } + } } +/****************/ +/** INSET LIST **/ +/****************/ + .list[inset] { margin: $list-inset-ios-margin-top $list-inset-ios-margin-right $list-inset-ios-margin-bottom $list-inset-ios-margin-left; border-radius: $list-inset-ios-border-radius; @@ -84,16 +266,20 @@ $list-ios-header-color: #333 !default; margin-top: 0; } -&.hairlines .list[no-lines], -.list[no-lines] { - .item, - .item .item-inner { - border-width: 0; - } -} - &.hairlines .list[inset] { .item { border-width: 0.55px; } } + +/*******************/ +/** NO LINES LIST **/ +/*******************/ + +.list[no-lines], +&.hairlines .list[no-lines] { + .item, + .item .item-inner { + border-width: 0; + } +}