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

card inset list updates

Browse Source
This commit is contained in:
Adam Bradley
2015-08-19 20:53:55 -05:00
parent 14c6aedb19
commit c878289ed4
7 changed files with 114 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
ionic/components/card/card.scss
View File

@@ -2,12 +2,6 @@
// Card
// --------------------------------------------------
$card-inset-margin: $list-inset-margin !default;
.card.card {
margin: $card-inset-margin;
}
.card {
display: block;

11
ionic/components/card/modes/ios.scss
View File

@@ -2,6 +2,11 @@
// 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-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;
@@ -12,6 +17,8 @@ $card-ios-header-padding: 10px;
.card.list[mode=ios] {
margin: $card-ios-margin-top $card-ios-margin-right $card-ios-margin-bottom $card-ios-margin-left;
background: $card-ios-background-color;
box-shadow: $card-ios-box-shadow;
border-radius: $card-ios-border-radius;
@@ -42,3 +49,7 @@ $card-ios-header-padding: 10px;
}
}
.card.list[mode=ios] + .card {
margin-top: 0;
}

11
ionic/components/card/modes/material.scss
View File

@@ -2,6 +2,11 @@
// Material Design Card
// --------------------------------------------------
$card-md-margin-top: 16px !default;
$card-md-margin-right: 16px !default;
$card-md-margin-bottom: 16px !default;
$card-md-margin-left: 16px !default;
$card-md-background-color: $list-background-color !default;
$card-md-box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12) !default;
$card-md-border-radius: 2px !default;
@@ -13,6 +18,8 @@ $card-md-header-padding: 16px;
.card.list[mode=md] {
margin: $card-md-margin-top $card-md-margin-right $card-md-margin-bottom $card-md-margin-left;
background: $card-md-background-color;
box-shadow: $card-md-box-shadow;
border-radius: $card-md-border-radius;
@@ -77,3 +84,7 @@ $card-md-header-padding: 16px;
}
}
.card.list[mode=md] + .card {
margin-top: 0;
}

4
ionic/components/list/list.scss
View File

@@ -2,8 +2,6 @@
// List
// --------------------------------------------------
$list-inset-margin: 10px !default;
.list {
display: block;
@@ -20,8 +18,6 @@ $list-inset-margin: 10px !default;
}
.list[inset] {
margin: $list-inset-margin;
border: 1px solid $list-border-color;
}

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

@@ -2,11 +2,21 @@
// iOS List
// --------------------------------------------------
$list-ios-header-padding: 10px $item-ios-padding-right 10px $item-ios-padding-left !default;
$list-ios-header-font-size: 1.2rem !default;
$list-ios-header-font-weight: 500 !default;
$list-ios-header-letter-spacing: 0.1rem !default;
$list-ios-header-color: #333 !default;
$list-ios-margin-top: 10px !default;
$list-ios-margin-right: 0 !default;
$list-ios-margin-bottom: 10px !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-ios-header-padding: 10px $item-ios-padding-right 10px $item-ios-padding-left !default;
$list-ios-header-font-size: 1.2rem !default;
$list-ios-header-font-weight: 500 !default;
$list-ios-header-letter-spacing: 0.1rem !default;
$list-ios-header-color: #333 !default;
.list[mode=ios] {
@@ -20,8 +30,37 @@ $list-ios-header-color: #333 !default;
color: $list-ios-header-color;
}
&[inset] ion-header {
padding-top: 10px;
}
.list[mode=ios] + .list {
margin-top: $list-ios-margin-top;
}
.list[mode=ios] + .list:not(.card) ion-header {
margin-top: -$list-ios-margin-top;
padding-top: 0;
}
.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;
.item:first-child {
margin-top: 0;
&:before {
border-top: none;
}
}
.item:last-child {
margin-bottom: 0;
&:after {
border-top: none;
}
}
}
.list[mode=ios][inset] + .list[inset] {
margin-top: 0;
}

44
ionic/components/list/modes/material.scss
View File

@@ -6,14 +6,19 @@ $list-md-margin-top: 16px !default;
$list-md-margin-right: 0 !default;
$list-md-margin-bottom: 16px !default;
$list-md-margin-left: 0 !default;
$list-md-header-padding: 0 $item-md-padding-right 16px $item-md-padding-left !default;
$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-md-header-padding: 16px $item-md-padding-right 16px $item-md-padding-left !default;
$list-md-header-font-size: 1.4rem !default;
$list-md-header-color: #858585 !default;
.list[mode=md] {
margin: $list-md-margin-top $list-md-margin-right $list-md-margin-bottom $list-md-margin-left;
margin: 0 $list-md-margin-right $list-md-margin-bottom $list-md-margin-left;
ion-header {
padding: $list-md-header-padding;
@@ -23,6 +28,35 @@ $list-md-header-color: #858585 !default;
}
.list[mode=md] + .list ion-header {
margin-top: -$list-md-margin-top;
.list[mode=md] + .list {
margin-top: $list-md-margin-top;
}
.list[mode=md] + .list:not(.card) ion-header {
margin-top: -$list-md-margin-top;
padding-top: 0;
}
.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;
.item:first-child {
margin-top: 0;
&:before {
border-top: none;
}
}
.item:last-child {
margin-bottom: 0;
&:after {
border-top: none;
}
}
}
.list[mode=md][inset] + .list[inset] {
margin-top: 0;
}