javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(list): removed absolutely positioned borders, changed to an inner div

Browse Source 
references #437
This commit is contained in:
Brandy Carney
2015-11-05 14:15:09 -05:00
parent 9df5b5982f
commit f6bf079878
5 changed files with 174 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
ionic/components/list/modes/ios.scss
View File

@@ -31,25 +31,18 @@ $list-ios-header-color: #333 !default;
letter-spacing: $list-ios-header-letter-spacing;
text-transform: uppercase;
color: $list-ios-header-color;
}
&:after {
position: absolute;
z-index: 1;
right: 0;
bottom: 0;
left: 0;
border-top: 1px solid $item-ios-border-color;
content: '';
pointer-events: none;
ion-header + .item {
border-top: 1px solid $item-ios-border-color;
.item-inner {
border-top-width: 0;
}
}
}
&.hairlines .list ion-header:after {
border-top-width: 0.55px;
}
.list + .list {
margin-top: $list-ios-margin-top + $list-ios-margin-bottom;
}
@@ -63,24 +56,22 @@ $list-ios-header-color: #333 !default;
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;
ion-header {
border-radius: inherit;
}
.item:first-child {
margin-top: 0;
border-top-right-radius: $list-inset-ios-border-radius;
border-top-left-radius: $list-inset-ios-border-radius;
&:before {
border-top: none;
}
border-top: none;
}
.item:last-child {
margin-bottom: 0;
border-bottom-right-radius: $list-inset-ios-border-radius;
border-bottom-left-radius: $list-inset-ios-border-radius;
&:after {
border-top: none;
}
border-bottom: none;
}
}
@@ -90,9 +81,8 @@ $list-ios-header-color: #333 !default;
&.hairlines .list[no-lines],
.list[no-lines] {
ion-header:after,
.item:before,
.item:after {
.item,
.item .item-inner {
border-width: 0;
}
}

90
ionic/components/list/test/no-lines/main.html
View File

@@ -27,4 +27,94 @@
</ion-note>
</ion-item>
</ion-list>
<ion-list>
<ion-header>
List With No Lines First Item
</ion-header>
<ion-item no-lines>
<icon pizza item-left></icon>
Pizza
<ion-note item-right>
Always
</ion-note>
</ion-item>
<ion-item>
<icon beer item-left></icon>
Beer
<ion-note item-right>
Yes Plz
</ion-note>
</ion-item>
<ion-item>
<icon wine item-left></icon>
Wine
<ion-note item-right>
All the time
</ion-note>
</ion-item>
</ion-list>
<ion-list>
<ion-header>
List With No Lines Middle Item
</ion-header>
<ion-item>
<icon pizza item-left></icon>
Pizza
<ion-note item-right>
Always
</ion-note>
</ion-item>
<ion-item no-lines>
<icon beer item-left></icon>
Beer
<ion-note item-right>
Yes Plz
</ion-note>
</ion-item>
<ion-item>
<icon wine item-left></icon>
Wine
<ion-note item-right>
All the time
</ion-note>
</ion-item>
</ion-list>
<ion-list>
<ion-header>
List With No Lines Last Item
</ion-header>
<ion-item>
<icon pizza item-left></icon>
Pizza
<ion-note item-right>
Always
</ion-note>
</ion-item>
<ion-item>
<icon beer item-left></icon>
Beer
<ion-note item-right>
Yes Plz
</ion-note>
</ion-item>
<ion-item no-lines>
<icon wine item-left></icon>
Wine
<ion-note item-right>
All the time
</ion-note>
</ion-item>
</ion-list>
</ion-content>