javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 19:21:34 +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

19
gulpfile.js
View File

@ -220,7 +220,6 @@ gulp.task('e2e', function() {
var platforms = [ var platforms = [
'android', 'android',
'ios', 'ios',
//'core'
]; ];
// Get each test folder with gulp.src // Get each test folder with gulp.src
@ -283,24 +282,20 @@ gulp.task('e2e', function() {
} }
}); });
gulp.task('sass', function() { gulp.task('sass', function(done) {
return gulp.src('ionic/ionic.scss') return gulp.src('ionic/ionic.scss')
.pipe(sass({ .pipe(sass()
onError: function(err) { .on('error', sass.logError)
console.log(err) )
}
}))
.pipe(autoprefixer(buildConfig.autoprefixer)) .pipe(autoprefixer(buildConfig.autoprefixer))
.pipe(gulp.dest('dist/css/')); .pipe(gulp.dest('dist/css/'));
}); });
gulp.task('sass.dark', function() { gulp.task('sass.dark', function() {
return gulp.src('scripts/build/ionic.dark.scss') return gulp.src('scripts/build/ionic.dark.scss')
.pipe(sass({ .pipe(sass()
onError: function(err) { .on('error', sass.logError)
console.log(err) )
}
}))
.pipe(autoprefixer(buildConfig.autoprefixer)) .pipe(autoprefixer(buildConfig.autoprefixer))
.pipe(gulp.dest('dist/css/')); .pipe(gulp.dest('dist/css/'));
}); });

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

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

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

@ -2,6 +2,11 @@
// iOS Card // 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-background-color: $list-background-color !default;
$card-ios-box-shadow: 0 1px 2px rgba(0,0,0,.3) !default; $card-ios-box-shadow: 0 1px 2px rgba(0,0,0,.3) !default;
$card-ios-border-radius: 2px !default; $card-ios-border-radius: 2px !default;
@ -12,6 +17,8 @@ $card-ios-header-padding: 10px;
.card.list[mode=ios] { .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; background: $card-ios-background-color;
box-shadow: $card-ios-box-shadow; box-shadow: $card-ios-box-shadow;
border-radius: $card-ios-border-radius; 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 // 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-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-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; $card-md-border-radius: 2px !default;
@ -13,6 +18,8 @@ $card-md-header-padding: 16px;
.card.list[mode=md] { .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; background: $card-md-background-color;
box-shadow: $card-md-box-shadow; box-shadow: $card-md-box-shadow;
border-radius: $card-md-border-radius; 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
// -------------------------------------------------- // --------------------------------------------------
$list-inset-margin: 10px !default;
.list { .list {
display: block; display: block;
@ -20,8 +18,6 @@ $list-inset-margin: 10px !default;
} }
.list[inset] { .list[inset] {
margin: $list-inset-margin;
border: 1px solid $list-border-color; border: 1px solid $list-border-color;
} }

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

@ -2,11 +2,21 @@
// iOS List // iOS List
// -------------------------------------------------- // --------------------------------------------------
$list-ios-header-padding: 10px $item-ios-padding-right 10px $item-ios-padding-left !default; $list-ios-margin-top: 10px !default;
$list-ios-header-font-size: 1.2rem !default; $list-ios-margin-right: 0 !default;
$list-ios-header-font-weight: 500 !default; $list-ios-margin-bottom: 10px !default;
$list-ios-header-letter-spacing: 0.1rem !default; $list-ios-margin-left: 0 !default;
$list-ios-header-color: #333 !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] { .list[mode=ios] {
@ -20,8 +30,37 @@ $list-ios-header-color: #333 !default;
color: $list-ios-header-color; 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-right: 0 !default;
$list-md-margin-bottom: 16px !default; $list-md-margin-bottom: 16px !default;
$list-md-margin-left: 0 !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-font-size: 1.4rem !default;
$list-md-header-color: #858585 !default; $list-md-header-color: #858585 !default;
.list[mode=md] { .list[mode=md] {
margin: 0 $list-md-margin-right $list-md-margin-bottom $list-md-margin-left;
margin: $list-md-margin-top $list-md-margin-right $list-md-margin-bottom $list-md-margin-left;
ion-header { ion-header {
padding: $list-md-header-padding; padding: $list-md-header-padding;
@ -23,6 +28,35 @@ $list-md-header-color: #858585 !default;
} }
.list[mode=md] + .list ion-header { .list[mode=md] + .list {
margin-top: -$list-md-margin-top; 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;
} }