Skip to content

Commit

Permalink
fix(list): show bottom border on last item in a list followed by a li…
Browse files Browse the repository at this point in the history 
…st (#20798)
  • Loading branch information
@brandyscarney @liamdebeasi
brandyscarney authored and liamdebeasi committed Mar 25, 2020
1 parent 253cd96 commit 7bc5191
Show file tree
Hide file tree
Showing 3 changed files with 58 additions and 52 deletions.
2 changes: 1 addition & 1 deletion core/src/components/list/list.ios.scss
View file
Expand Up @@ -5,7 +5,7 @@
// --------------------------------------------------

.list-ios {
@include margin(-1px, $list-ios-margin-end, $list-ios-margin-bottom, $list-ios-margin-start);
@include margin($list-ios-margin-top, $list-ios-margin-end, $list-ios-margin-bottom, $list-ios-margin-start);

background: $item-ios-background;
}
Expand Down
8 changes: 4 additions & 4 deletions core/src/components/list/list.ios.vars.scss
View file
Expand Up @@ -5,16 +5,16 @@
// --------------------------------------------------

/// @prop - Margin top of the list
$list-ios-margin-top: 10px !default;
$list-ios-margin-top: null !default;

/// @prop - Margin end of the list
$list-ios-margin-end: 0 !default;
$list-ios-margin-end: null !default;

/// @prop - Margin bottom of the list
$list-ios-margin-bottom: 0 !default;
$list-ios-margin-bottom: null !default;

/// @prop - Margin start of the list
$list-ios-margin-start: 0 !default;
$list-ios-margin-start: null !default;

/// @prop - Border bottom of the item in a list
$list-ios-item-border-bottom-width: $item-ios-border-bottom-width !default;
Expand Down
100 changes: 53 additions & 47 deletions core/src/components/list/test/icons/index.html
View file
Expand Up @@ -4,21 +4,23 @@
<head>
<meta charset="UTF-8">
<title>List - Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="../../../../../css/core.css" rel="stylesheet">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
<script src="../../../../../scripts/testing/scripts.js"></script>
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
</head>

<body>
<ion-app>
<ion-header>
<ion-toolbar color="tertiary">
<ion-title>Topics</ion-title>
<ion-toolbar>
<ion-title>Trip</ion-title>
<ion-buttons slot="end">
<ion-button>
<ion-icon slot="icon-only" name="search"></ion-icon>
<ion-icon slot="icon-only" name="search-outline"></ion-icon>
</ion-button>
<ion-button>
<ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
Expand All @@ -27,83 +29,87 @@
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list lines="none">
<ion-item>
<ion-icon name="film" slot="start"></ion-icon>
<ion-list>
<ion-list-header lines="full">
<ion-label>
Categories
</ion-label>
</ion-list-header>
<ion-item button>
<ion-icon name="film-outline" slot="start"></ion-icon>
<ion-label>
Attractions
</ion-label>
</ion-item>
<ion-item>
<ion-icon name="beer" slot="start"></ion-icon>
<ion-item button>
<ion-icon name="restaurant-outline" slot="start"></ion-icon>
<ion-label>
Dining
</ion-label>
</ion-item>
<ion-item>
<ion-icon name="create" slot="start"></ion-icon>
<ion-item button>
<ion-icon name="create-outline" slot="start"></ion-icon>
<ion-label>
Education
</ion-label>
</ion-item>
<ion-item>
<ion-icon name="heart" slot="start"></ion-icon>
<ion-label>
Health
</ion-label>
</ion-item>
<ion-item>
<ion-icon name="people" slot="start"></ion-icon>
<ion-item button lines="full">
<ion-icon name="airplane-outline" slot="start"></ion-icon>
<ion-label>
Family
Travel
</ion-label>
</ion-item>
<ion-item>
<ion-icon name="cut" slot="start"></ion-icon>
</ion-list>

<ion-list>
<ion-list-header lines="full">
<ion-label>
Office
Information
</ion-label>
</ion-item>
</ion-list-header>
<ion-item>
<ion-icon name="pricetag" slot="start"></ion-icon>
<ion-icon name="people-outline" slot="start"></ion-icon>
<ion-label>
Promotions
Attendees
</ion-label>
<ion-select slot="end" value="1">
<ion-select-option value="1">1</ion-select-option>
<ion-select-option value="2">2</ion-select-option>
<ion-select-option value="3">3</ion-select-option>
</ion-select>
</ion-item>
<ion-item>
<ion-icon name="radio" slot="start"></ion-icon>
<ion-item lines="full">
<ion-icon name="repeat-outline" slot="start"></ion-icon>
<ion-label>
Radio
Round-trip
</ion-label>
<ion-toggle checked></ion-toggle>
</ion-item>
<ion-item>
<ion-icon name="pizza" slot="start"></ion-icon>
</ion-list>

<ion-list>
<ion-list-header lines="full">
<ion-label>
Food
Contact
</ion-label>
</ion-item>
</ion-list-header>
<ion-item>
<ion-icon name="basketball" slot="start"></ion-icon>
<ion-icon name="person-outline" slot="start"></ion-icon>
<ion-label>
Sports
Name
</ion-label>
<ion-input placeholder="xxxxx"></ion-input>
</ion-item>
<ion-item>
<ion-icon name="airplane" slot="start"></ion-icon>
<ion-item lines="full">
<ion-icon name="call-outline" slot="start"></ion-icon>
<ion-label>
Travel
Phone Number
</ion-label>
<ion-input placeholder="(xxx) xxx-xxxx" type="number"></ion-input>
</ion-item>
</ion-list>
</ion-content>
</ion-app>

<style>
body {
margin: 0;
}

</style>
</body>

</html>

0 comments on commit 7bc5191

Please sign in to comment.