fix(content): fix padding/margin attributes so all work on scroll-content

created a mixin for padding and margin and pass the mode variable in.
This commit is contained in:
Brandy Carney
2016-04-14 17:15:48 -04:00
parent cf7ed4d43d
commit 9020d5278a
4 changed files with 89 additions and 186 deletions

View File

@ -26,72 +26,10 @@ ion-tab.has-views {
// iOS Content Padding
// --------------------------------------------------
[padding],
[padding] > scroll-content {
padding: $content-ios-padding;
}
[padding-top] {
padding-top: $content-ios-padding;
}
[padding-left] {
padding-left: $content-ios-padding;
}
[padding-right] {
padding-right: $content-ios-padding;
}
[padding-bottom] {
padding-bottom: $content-ios-padding;
}
[padding-vertical] {
padding-top: $content-ios-padding;
padding-bottom: $content-ios-padding;
}
[padding-horizontal] {
padding-right: $content-ios-padding;
padding-left: $content-ios-padding;
}
[no-padding] {
padding: 0;
}
@include content-padding($content-ios-padding);
// iOS Content Margin
// --------------------------------------------------
[margin],
[margin] > scroll-content {
margin: $content-ios-margin;
}
[margin-top] {
margin-top: $content-ios-margin;
}
[margin-left] {
margin-left: $content-ios-margin;
}
[margin-right] {
margin-right: $content-ios-margin;
}
[margin-bottom] {
margin-bottom: $content-ios-margin;
}
[margin-vertical] {
margin-top: $content-ios-margin;
margin-bottom: $content-ios-margin;
}
[margin-horizontal] {
margin-right: $content-ios-margin;
margin-left: $content-ios-margin;
}
@include content-margin($content-ios-margin);

View File

@ -16,68 +16,10 @@ ion-content {
// Material Design Content Padding
// --------------------------------------------------
[padding],
[padding] > scroll-content {
padding: $content-md-padding;
}
[padding-top] {
padding-top: $content-md-padding;
}
[padding-left] {
padding-left: $content-md-padding;
}
[padding-right] {
padding-right: $content-md-padding;
}
[padding-bottom] {
padding-bottom: $content-md-padding;
}
[padding-vertical] {
padding-top: $content-md-padding;
padding-bottom: $content-md-padding;
}
[padding-horizontal] {
padding-right: $content-md-padding;
padding-left: $content-md-padding;
}
@include content-padding($content-md-padding);
// Material Design Content Margin
// --------------------------------------------------
[margin],
[margin] > scroll-content {
margin: $content-md-margin;
}
[margin-top] {
margin-top: $content-md-margin;
}
[margin-left] {
margin-left: $content-md-margin;
}
[margin-right] {
margin-right: $content-md-margin;
}
[margin-bottom] {
margin-bottom: $content-md-margin;
}
[margin-vertical] {
margin-top: $content-md-margin;
margin-bottom: $content-md-margin;
}
[margin-horizontal] {
margin-right: $content-md-margin;
margin-left: $content-md-margin;
}
@include content-margin($content-md-margin);

View File

@ -7,18 +7,99 @@
// Content Padding
// --------------------------------------------------
[no-padding] {
[no-padding],
[no-padding] > scroll-content {
padding: 0;
}
@mixin content-padding($content-padding) {
[padding],
[padding] scroll-content {
padding: $content-padding;
}
[padding-top],
[padding-top] scroll-content {
padding-top: $content-padding;
}
[padding-left],
[padding-left] scroll-content {
padding-left: $content-padding;
}
[padding-right],
[padding-right] scroll-content {
padding-right: $content-padding;
}
[padding-bottom],
[padding-bottom] scroll-content {
padding-bottom: $content-padding;
}
[padding-vertical],
[padding-vertical] scroll-content {
padding-top: $content-padding;
padding-bottom: $content-padding;
}
[padding-horizontal],
[padding-horizontal] scroll-content {
padding-right: $content-padding;
padding-left: $content-padding;
}
}
// Content Margin
// --------------------------------------------------
[no-margin] {
[no-margin],
[no-margin] > scroll-content {
margin: 0;
}
@mixin content-margin($content-margin) {
[margin],
[margin] scroll-content {
margin: $content-margin;
}
[margin-top],
[margin-top] scroll-content {
margin-top: $content-margin;
}
[margin-left],
[margin-left] scroll-content {
margin-left: $content-margin;
}
[margin-right],
[margin-right] scroll-content {
margin-right: $content-margin;
}
[margin-bottom],
[margin-bottom] scroll-content {
margin-bottom: $content-margin;
}
[margin-vertical],
[margin-vertical] scroll-content {
margin-top: $content-margin;
margin-bottom: $content-margin;
}
[margin-horizontal],
[margin-horizontal] scroll-content {
margin-right: $content-margin;
margin-left: $content-margin;
}
}
// Content Fixed
// --------------------------------------------------

View File

@ -16,68 +16,10 @@ ion-content {
// Windows Content Padding
// --------------------------------------------------
[padding],
[padding] > scroll-content {
padding: $content-wp-padding;
}
[padding-top] {
padding-top: $content-wp-padding;
}
[padding-left] {
padding-left: $content-wp-padding;
}
[padding-right] {
padding-right: $content-wp-padding;
}
[padding-bottom] {
padding-bottom: $content-wp-padding;
}
[padding-vertical] {
padding-top: $content-wp-padding;
padding-bottom: $content-wp-padding;
}
[padding-horizontal] {
padding-right: $content-wp-padding;
padding-left: $content-wp-padding;
}
@include content-padding($content-wp-padding);
// Windows Content Margin
// --------------------------------------------------
[margin],
[margin] > scroll-content {
margin: $content-wp-margin;
}
[margin-top] {
margin-top: $content-wp-margin;
}
[margin-left] {
margin-left: $content-wp-margin;
}
[margin-right] {
margin-right: $content-wp-margin;
}
[margin-bottom] {
margin-bottom: $content-wp-margin;
}
[margin-vertical] {
margin-top: $content-wp-margin;
margin-bottom: $content-wp-margin;
}
[margin-horizontal] {
margin-right: $content-wp-margin;
margin-left: $content-wp-margin;
}
@include content-margin($content-wp-margin);