mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-18 19:21:34 +08:00
list css updates
This commit is contained in:
@ -2,10 +2,10 @@
|
||||
// iOS Card
|
||||
// --------------------------------------------------
|
||||
|
||||
$card-ios-margin-top: 16px !default;
|
||||
$card-ios-margin-right: 16px !default;
|
||||
$card-ios-margin-bottom: 16px !default;
|
||||
$card-ios-margin-left: 16px !default;
|
||||
$card-ios-margin-top: 12px !default;
|
||||
$card-ios-margin-right: 12px !default;
|
||||
$card-ios-margin-bottom: 12px !default;
|
||||
$card-ios-margin-left: 12px !default;
|
||||
|
||||
$card-ios-padding-top: 13px !default;
|
||||
$card-ios-padding-right: 16px !default;
|
||||
@ -17,7 +17,7 @@ $card-ios-padding-media-bottom: 10px !default;
|
||||
|
||||
$card-ios-background-color: $list-background-color !default;
|
||||
$card-ios-box-shadow: 0 1px 2px rgba(0,0,0,.3) !default;
|
||||
$card-ios-border-radius: 2px !default;
|
||||
$card-ios-border-radius: 4px !default;
|
||||
$card-ios-font-size: 1.4rem !default;
|
||||
|
||||
$card-ios-text-color: #666 !default;
|
||||
|
@ -2,10 +2,10 @@
|
||||
// Material Design Card
|
||||
// --------------------------------------------------
|
||||
|
||||
$card-md-margin-top: 8px !default;
|
||||
$card-md-margin-right: 8px !default;
|
||||
$card-md-margin-bottom: 8px !default;
|
||||
$card-md-margin-left: 8px !default;
|
||||
$card-md-margin-top: 10px !default;
|
||||
$card-md-margin-right: 10px !default;
|
||||
$card-md-margin-bottom: 10px !default;
|
||||
$card-md-margin-left: 10px !default;
|
||||
|
||||
$card-md-padding-top: 13px !default;
|
||||
$card-md-padding-right: 16px !default;
|
||||
|
@ -1,7 +1,7 @@
|
||||
|
||||
<ion-toolbar><ion-title>Basic Cards</ion-title></ion-toolbar>
|
||||
|
||||
<ion-content class="outer-content">
|
||||
<ion-content class="outer-content" style="background:#eee">
|
||||
|
||||
<ion-card>
|
||||
|
||||
|
@ -34,6 +34,7 @@ button.item.item {
|
||||
color: inherit;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
will-change: initial;
|
||||
}
|
||||
|
||||
ion-item-content {
|
||||
|
@ -18,7 +18,6 @@
|
||||
}
|
||||
|
||||
.list[inset] {
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
|
||||
ion-header {
|
||||
|
@ -2,15 +2,16 @@
|
||||
// iOS List
|
||||
// --------------------------------------------------
|
||||
|
||||
$list-ios-margin-top: 10px !default;
|
||||
$list-ios-margin-right: 0 !default;
|
||||
$list-ios-margin-bottom: 32px !default;
|
||||
$list-ios-margin-left: 0 !default;
|
||||
$list-ios-margin-top: 10px !default;
|
||||
$list-ios-margin-right: 0 !default;
|
||||
$list-ios-margin-bottom: 32px !default;
|
||||
$list-ios-margin-left: 0 !default;
|
||||
|
||||
$list-inset-ios-margin-top: 16px !default;
|
||||
$list-inset-ios-margin-right: 16px !default;
|
||||
$list-inset-ios-margin-bottom: 16px !default;
|
||||
$list-inset-ios-margin-left: 16px !default;
|
||||
$list-inset-ios-border-radius: 4px !default;
|
||||
|
||||
$list-ios-header-padding: 10px $item-ios-padding-right 10px $item-ios-padding-left !default;
|
||||
$list-ios-header-font-size: 1.2rem !default;
|
||||
@ -34,7 +35,7 @@ $list-ios-header-color: #333 !default;
|
||||
}
|
||||
|
||||
.list[mode=ios] + .list {
|
||||
margin-top: $list-ios-margin-top;
|
||||
margin-top: $list-ios-margin-top + $list-ios-margin-bottom;
|
||||
}
|
||||
|
||||
.list[mode=ios] + .list ion-header {
|
||||
@ -44,6 +45,7 @@ $list-ios-header-color: #333 !default;
|
||||
|
||||
.list[mode=ios][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;
|
||||
|
||||
.item:first-child {
|
||||
margin-top: 0;
|
||||
|
@ -11,6 +11,7 @@ $list-inset-md-margin-top: 16px !default;
|
||||
$list-inset-md-margin-right: 16px !default;
|
||||
$list-inset-md-margin-bottom: 16px !default;
|
||||
$list-inset-md-margin-left: 16px !default;
|
||||
$list-inset-md-border-radius: 2px !default;
|
||||
|
||||
$list-md-header-padding: 16px $item-md-padding-right 16px $item-md-padding-left !default;
|
||||
$list-md-header-font-size: 1.4rem !default;
|
||||
@ -29,7 +30,7 @@ $list-md-header-color: #858585 !default;
|
||||
}
|
||||
|
||||
.list[mode=md] + .list {
|
||||
margin-top: $list-md-margin-top;
|
||||
margin-top: $list-md-margin-top + $list-md-margin-bottom;
|
||||
}
|
||||
|
||||
.list[mode=md] + .list ion-header {
|
||||
@ -39,6 +40,7 @@ $list-md-header-color: #858585 !default;
|
||||
|
||||
.list[mode=md][inset] {
|
||||
margin: $list-inset-md-margin-top $list-inset-md-margin-right $list-inset-md-margin-bottom $list-inset-md-margin-left;
|
||||
border-radius: $list-inset-md-border-radius;
|
||||
|
||||
.item:first-child {
|
||||
margin-top: 0;
|
||||
|
@ -1,6 +1,6 @@
|
||||
<ion-toolbar><ion-title>List Headers</ion-title></ion-toolbar>
|
||||
|
||||
<ion-content class="outer-content">
|
||||
<ion-content class="outer-content" style="background:#EFEFF4">
|
||||
|
||||
<ion-list>
|
||||
|
||||
|
Reference in New Issue
Block a user