mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-20 12:29:55 +08:00
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:
@ -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);
|
||||
|
@ -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);
|
||||
|
@ -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
|
||||
// --------------------------------------------------
|
||||
|
||||
|
@ -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);
|
||||
|
Reference in New Issue
Block a user