From 4386e8cebbd14a421c4efe470434798749f41392 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Tue, 10 Nov 2015 17:03:52 -0500 Subject: [PATCH] refactor(list): changing border-top to border-bottom references #437 --- ionic/components/list/modes/ios.scss | 104 ++++++++---------- ionic/components/list/modes/md.scss | 55 +++++---- ionic/components/list/test/no-lines/main.html | 2 +- 3 files changed, 73 insertions(+), 88 deletions(-) diff --git a/ionic/components/list/modes/ios.scss b/ionic/components/list/modes/ios.scss index 248f3b5a0b..214acc794c 100644 --- a/ionic/components/list/modes/ios.scss +++ b/ionic/components/list/modes/ios.scss @@ -37,39 +37,37 @@ $list-ios-header-color: #333 !default; color: $list-ios-header-color; } - ion-header + .item, - ion-header + script + .item, - ion-item-group-title + .item, - ion-item-group-title + script + .item { - border-top: 1px solid $item-ios-border-color; - - .item-inner { - border-top-width: 0; - } + // Apply the border to the first item in the list + // whether there is a header or not + ion-header, + ion-item-group-title , { + border-bottom: 1px solid $item-ios-border-color; } .item { border-radius: 0; - // margin-top: -1px; + // TODO this makes the border not show on sticky + margin-top: -1px; padding-left: $item-ios-padding-left; font-size: $item-ios-font-size; + } + .item { &: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; - margin-bottom: -1px; + + .item-inner { + border-bottom: none; + } } .item-inner { padding-right: ($item-ios-padding-right / 2); - border-top: 1px solid $item-ios-border-color; + border-bottom: 1px solid $item-ios-border-color; } ion-item-content { @@ -77,21 +75,14 @@ $list-ios-header-color: #333 !default; } } - // 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; - } - } - } + // If the item has the no-lines attribute remove the border from: + // the item itself (for first or last-child items) + // the item-inner class (if it is not first or last) + // the next item's item-inner after the one with no-lines if there is one + // .item[no-lines], + // .item[no-lines] .item-inner, { + // border-width: 0; + // } [item-left] { margin: ($item-ios-padding-top / 2) $item-ios-padding-right ($item-ios-padding-bottom / 2) 0; @@ -205,25 +196,18 @@ ion-card { button, [button] { min-height: calc(100% - 1px); height: calc(100% - 1px); - //margin-top: 0.55px; + margin-top: 0.55px; margin-bottom: 0.55px; } } - ion-header + .item, - ion-header + script + .item, - ion-item-group-title + .item, - ion-item-group-title + script + .item { - border-top-width: 0.55px; - //margin-top: -0.55px; - - .item-inner { - border-width: 0; - } + ion-header, + ion-item-group-title { + border-bottom-width: 0.55px; } .item { - //margin-top: -0.55px; + margin-top: -0.55px; .item-inner { border-width: 0.55px; @@ -231,15 +215,11 @@ ion-card { &:first-child { border-top-width: 0.55px; - - .item-inner { - border-top-width: 0; - } } &:last-child { border-bottom-width: 0.55px; - //margin-bottom: -0.55px; + margin-bottom: -0.55px; } } } @@ -255,17 +235,21 @@ ion-card { .item { margin-top: 0; - border-top: 1px solid $item-ios-border-color; + border-bottom: 1px solid $item-ios-border-color; .item-inner { - border-top: none; + border-bottom: none; } } - .item:first-child, ion-header { + .item:first-child, + ion-header { margin-top: 0; border-top-right-radius: $list-inset-ios-border-radius; border-top-left-radius: $list-inset-ios-border-radius; + } + + .item:first-child { border-top: none; } @@ -291,11 +275,13 @@ ion-card { /*****************/ /* NO LINES LIST */ /*****************/ - -.list[no-lines], -&.hairlines .list[no-lines] { - .item, - .item .item-inner { - border-width: 0; - } -} +// +// .list[no-lines], +// &.hairlines .list[no-lines] { +// ion-header, +// ion-item-group-title, +// .item, +// .item .item-inner { +// border-width: 0; +// } +// } diff --git a/ionic/components/list/modes/md.scss b/ionic/components/list/modes/md.scss index d59253379e..63c8d950c3 100644 --- a/ionic/components/list/modes/md.scss +++ b/ionic/components/list/modes/md.scss @@ -28,30 +28,29 @@ $list-md-header-color: #858585 !default; } .item { - margin-top: -1px; - border-top: 1px solid $item-md-border-color; + // margin-top: -1px; + border-bottom: 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; - &:last-child { - border-bottom: 1px solid $item-md-border-color; + &:first-child { + border-top: 1px solid $item-md-border-color; } } - .item[no-lines], - .item[no-lines] + .item { - border-width: 0; - .item-inner { - border-width: 0; - } - } + // .item[no-lines], + // .item[no-lines] + .item { + // border-width: 0; + // .item-inner { + // border-width: 0; + // } + // } - ion-header + .item, - ion-header + script + .item, - ion-item-group-title + .item, - ion-item-group-title + script + .item { + ion-header, + ion-item-group-title { + border-bottom: 1px solid $item-md-border-color; margin-left: 0; padding-left: $item-md-padding-left; } @@ -236,7 +235,7 @@ $list-md-header-color: #858585 !default; } .item:not(ion-input):last-child:after { - border-top: none; + border-bottom: none; } + .list[inset] { @@ -249,15 +248,15 @@ $list-md-header-color: #858585 !default; /* NO LINES LIST */ /*****************/ -.list[no-lines] { - .item { - border-width: 0; - } - - ion-header + .item, - ion-header + script + .item, - ion-item-group-title + .item, - ion-item-group-title + script + .item { - border-width: 1px !important; - } -} +// .list[no-lines] { +// .item { +// border-width: 0; +// } +// +// ion-header + .item, +// ion-header + script + .item, +// ion-item-group-title + .item, +// ion-item-group-title + script + .item { +// border-width: 1px !important; +// } +// } diff --git a/ionic/components/list/test/no-lines/main.html b/ionic/components/list/test/no-lines/main.html index b555792be1..96b718ba80 100644 --- a/ionic/components/list/test/no-lines/main.html +++ b/ionic/components/list/test/no-lines/main.html @@ -3,7 +3,7 @@ - List Header + List With No Lines