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 = [
'android',
'ios',
//'core'
];
// 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')
.pipe(sass({
onError: function(err) {
console.log(err)
}
}))
.pipe(sass()
.on('error', sass.logError)
)
.pipe(autoprefixer(buildConfig.autoprefixer))
.pipe(gulp.dest('dist/css/'));
});
gulp.task('sass.dark', function() {
return gulp.src('scripts/build/ionic.dark.scss')
.pipe(sass({
onError: function(err) {
console.log(err)
}
}))
.pipe(sass()
.on('error', sass.logError)
)
.pipe(autoprefixer(buildConfig.autoprefixer))
.pipe(gulp.dest('dist/css/'));
});

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;
}

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

@ -2,6 +2,16 @@
// iOS List
// --------------------------------------------------
$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;
@ -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;
}