refactor(list): fixing some more UI issues with the border change

references #437
This commit is contained in:
Brandy Carney
2015-11-05 19:14:54 -05:00
parent 6869f7baf8
commit 53164b41ca
2 changed files with 28 additions and 19 deletions

View File

@@ -59,6 +59,7 @@ button.item.item {
height: 100%;
width: 100%;
display: flex;
align-items: center;
}
ion-item-content {

View File

@@ -20,9 +20,9 @@ $list-ios-header-letter-spacing: 0.1rem !default;
$list-ios-header-color: #333 !default;
/******************/
/** DEFAULT LIST **/
/******************/
/****************/
/* DEFAULT LIST */
/****************/
.list {
margin: 0 $list-ios-margin-right $list-ios-margin-bottom $list-ios-margin-left;
@@ -61,6 +61,7 @@ $list-ios-header-color: #333 !default;
&:last-child {
border-bottom: 1px solid $item-ios-border-color;
margin-bottom: -1px;
}
.item-inner {
@@ -90,11 +91,11 @@ $list-ios-header-color: #333 !default;
}
[item-left] {
margin: $item-ios-padding-media-top $item-ios-padding-right $item-ios-padding-media-bottom 0;
margin: 0 $item-ios-padding-right 0 0;
}
[item-right] {
margin: $item-ios-padding-top ($item-ios-padding-right / 2) $item-ios-padding-bottom ($item-ios-padding-left / 2);
margin: 0 ($item-ios-padding-right / 2) 0 ($item-ios-padding-left / 2);
}
icon[item-left],
@@ -201,13 +202,14 @@ 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;
// border-top-width: 0.55px;
// margin-top: -0.55px;
.item-inner {
border-width: 0;
@@ -215,24 +217,30 @@ ion-card {
}
.item {
margin-top: -0.55px;
border-width: 0.55px;
// margin-top: -0.55px;
.item-inner {
border-width: 0.55px;
// border-width: 0.55px;
}
&:first-child {
// border-top-width: 0.55px;
.item-inner {
border-top-width: 0px;
border-top-width: 0;
}
}
&:last-child {
// border-bottom-width: 0.55px;
// margin-bottom: -0.55px;
}
}
}
/****************/
/** INSET LIST **/
/****************/
/**************/
/* 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;
@@ -268,13 +276,13 @@ ion-card {
&.hairlines .list[inset] {
.item {
border-width: 0.55px;
// border-width: 0.55px;
}
}
/*******************/
/** NO LINES LIST **/
/*******************/
/*****************/
/* NO LINES LIST */
/*****************/
.list[no-lines],
&.hairlines .list[no-lines] {