fix(padding): add padding to correct element

This commit is contained in:
Brandy Carney
2017-07-21 16:50:33 -04:00
parent 2a72316c69
commit 12da6d5246
4 changed files with 32 additions and 64 deletions

View File

@ -72,38 +72,38 @@ ion-app [no-padding] ion-scroll {
}
@mixin content-padding($mode, $content-padding) {
ion-app.#{$mode} [padding],
ion-app.#{$mode} [padding] ion-scroll {
.app-#{$mode} [padding],
.app-#{$mode} [padding] ion-scroll {
@include padding($content-padding);
}
ion-app.#{$mode} [padding-top],
ion-app.#{$mode} [padding-top] ion-scroll {
.app-#{$mode} [padding-top],
.app-#{$mode} [padding-top] ion-scroll {
@include padding($content-padding, null, null, null);
}
ion-app.#{$mode} [padding-left],
ion-app.#{$mode} [padding-left] ion-scroll {
.app-#{$mode} [padding-left],
.app-#{$mode} [padding-left] ion-scroll {
@include padding-horizontal($content-padding, null);
}
ion-app.#{$mode} [padding-right],
ion-app.#{$mode} [padding-right] ion-scroll {
.app-#{$mode} [padding-right],
.app-#{$mode} [padding-right] ion-scroll {
@include padding-horizontal(null, $content-padding);
}
ion-app.#{$mode} [padding-bottom],
ion-app.#{$mode} [padding-bottom] ion-scroll {
.app-#{$mode} [padding-bottom],
.app-#{$mode} [padding-bottom] ion-scroll {
@include padding(null, null, $content-padding, null);
}
ion-app.#{$mode} [padding-vertical],
ion-app.#{$mode} [padding-vertical] ion-scroll {
.app-#{$mode} [padding-vertical],
.app-#{$mode} [padding-vertical] ion-scroll {
@include padding($content-padding, null, $content-padding, null);
}
ion-app.#{$mode} [padding-horizontal],
ion-app.#{$mode} [padding-horizontal] ion-scroll {
.app-#{$mode} [padding-horizontal],
.app-#{$mode} [padding-horizontal] ion-scroll {
@include padding-horizontal($content-padding);
}
}
@ -118,50 +118,50 @@ ion-app [no-margin] ion-scroll {
}
@mixin content-margin($mode, $content-margin) {
ion-app.#{$mode} [margin],
ion-app.#{$mode} [margin] ion-scroll {
.app-#{$mode} [margin],
.app-#{$mode} [margin] ion-scroll {
@include margin($content-margin);
}
ion-app.#{$mode} [margin-top],
ion-app.#{$mode} [margin-top] ion-scroll {
.app-#{$mode} [margin-top],
.app-#{$mode} [margin-top] ion-scroll {
@include margin($content-margin, null, null, null);
}
ion-app.#{$mode} [margin-left],
ion-app.#{$mode} [margin-left] ion-scroll {
.app-#{$mode} [margin-left],
.app-#{$mode} [margin-left] ion-scroll {
// scss-lint:disable PropertySpelling
margin-left: $content-margin;
}
ion-app.#{$mode} [margin-start],
ion-app.#{$mode} [margin-start] ion-scroll {
.app-#{$mode} [margin-start],
.app-#{$mode} [margin-start] ion-scroll {
@include margin-horizontal($content-margin, null);
}
ion-app.#{$mode} [margin-right],
ion-app.#{$mode} [margin-right] ion-scroll {
.app-#{$mode} [margin-right],
.app-#{$mode} [margin-right] ion-scroll {
// scss-lint:disable PropertySpelling
margin-right: $content-margin;
}
ion-app.#{$mode} [margin-end],
ion-app.#{$mode} [margin-end] ion-scroll {
.app-#{$mode} [margin-end],
.app-#{$mode} [margin-end] ion-scroll {
@include margin-horizontal(null, $content-margin);
}
ion-app.#{$mode} [margin-bottom],
ion-app.#{$mode} [margin-bottom] ion-scroll {
.app-#{$mode} [margin-bottom],
.app-#{$mode} [margin-bottom] ion-scroll {
@include margin(null, null, $content-margin, null);
}
ion-app.#{$mode} [margin-vertical],
ion-app.#{$mode} [margin-vertical] ion-scroll {
.app-#{$mode} [margin-vertical],
.app-#{$mode} [margin-vertical] ion-scroll {
@include margin($content-margin, null, $content-margin, null);
}
ion-app.#{$mode} [margin-horizontal],
ion-app.#{$mode} [margin-horizontal] ion-scroll {
.app-#{$mode} [margin-horizontal],
.app-#{$mode} [margin-horizontal] ion-scroll {
@include margin-horizontal($content-margin);
}
}

View File

@ -399,10 +399,6 @@
.downloading .download-hide {
display: none;
}
[padding] {
padding: 16px;
}
</style>
</ion-content>
</ion-app>

View File

@ -138,20 +138,6 @@
dynamicProp.spellcheck = propIsSpellcheck;
}
</script>
<style>
[padding] {
padding: 16px;
}
[padding-horizontal] {
padding: 0 16px;
}
[padding] ion-segment {
margin-bottom: 16px;
}
</style>
</ion-content>
</ion-app>
</body>

View File

@ -103,20 +103,6 @@
}
}
</script>
<style>
[padding] {
padding: 16px;
}
[padding-horizontal] {
padding: 0 16px;
}
[padding] ion-segment {
margin-bottom: 16px;
}
</style>
</ion-content>
</ion-app>
</body>