diff --git a/gulpfile.js b/gulpfile.js index 8bbcbabf49..0698c03b28 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -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/')); }); diff --git a/ionic/components/card/card.scss b/ionic/components/card/card.scss index 0e7393daf9..9702ea4f66 100644 --- a/ionic/components/card/card.scss +++ b/ionic/components/card/card.scss @@ -2,12 +2,6 @@ // Card // -------------------------------------------------- -$card-inset-margin: $list-inset-margin !default; - - -.card.card { - margin: $card-inset-margin; -} .card { display: block; diff --git a/ionic/components/card/modes/ios.scss b/ionic/components/card/modes/ios.scss index 3c80b8f3a0..c40e32a251 100644 --- a/ionic/components/card/modes/ios.scss +++ b/ionic/components/card/modes/ios.scss @@ -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; +} diff --git a/ionic/components/card/modes/material.scss b/ionic/components/card/modes/material.scss index 03794fd62d..277e98fd7a 100644 --- a/ionic/components/card/modes/material.scss +++ b/ionic/components/card/modes/material.scss @@ -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; +} diff --git a/ionic/components/list/list.scss b/ionic/components/list/list.scss index 39f5d61551..24b85f1e71 100644 --- a/ionic/components/list/list.scss +++ b/ionic/components/list/list.scss @@ -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; } diff --git a/ionic/components/list/modes/ios.scss b/ionic/components/list/modes/ios.scss index 75bb865714..e8b45dc565 100644 --- a/ionic/components/list/modes/ios.scss +++ b/ionic/components/list/modes/ios.scss @@ -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; } diff --git a/ionic/components/list/modes/material.scss b/ionic/components/list/modes/material.scss index a08a83aa6d..6ca57c8806 100644 --- a/ionic/components/list/modes/material.scss +++ b/ionic/components/list/modes/material.scss @@ -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; }