feat(loading): add margin start variable (#11980)

* Use margin variable * feat(loading): add sass variable to override content margin
ionic-team · Jun 12, 2017 · 3e0d43e · 3e0d43e
1 parent d0847aa
commit 3e0d43e
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 3 deletions.
diff --git a/src/components/loading/loading.ios.scss b/src/components/loading/loading.ios.scss
@@ -36,6 +36,9 @@ $loading-ios-background:                #f8f8f8 !default;
 /// @prop - Font weight of the loading content
 $loading-ios-content-font-weight:       bold !default;
 
+/// @prop - Margin start of the loading content next to a spinner
+$loading-ios-content-margin-start:      $content-ios-margin !default;
+
 /// @prop - Color of the loading spinner
 $loading-ios-spinner-color:             #69717d !default;
 
@@ -78,7 +81,7 @@ $loading-ios-spinner-dots-color:        $loading-ios-spinner-color !default;
 }
 
 .loading-ios .loading-spinner + .loading-content {
-  @include margin-horizontal(16px, null);
+  @include margin-horizontal($loading-ios-content-margin-start, null);
 }
 
 

diff --git a/src/components/loading/loading.md.scss b/src/components/loading/loading.md.scss
@@ -39,6 +39,9 @@ $loading-md-box-shadow-color:          rgba(0, 0, 0, .4) !default;
 /// @prop - Box shadow of the loading wrapper
 $loading-md-box-shadow:                0 16px 20px $loading-md-box-shadow-color !default;
 
+/// @prop - Margin start of the loading content next to a spinner
+$loading-md-content-margin-start:      $content-md-margin !default;
+
 /// @prop - Color of the loading spinner
 $loading-md-spinner-color:             color($colors-md, primary) !default;
 
@@ -79,7 +82,7 @@ $loading-md-spinner-dots-color:        $loading-md-spinner-color !default;
 // -----------------------------------------
 
 .loading-md .loading-spinner + .loading-content {
-  @include margin-horizontal(16px, null);
+  @include margin-horizontal($loading-md-content-margin-start, null);
 }
 
 

diff --git a/src/components/loading/loading.wp.scss b/src/components/loading/loading.wp.scss
@@ -33,6 +33,9 @@ $loading-wp-text-color:                #fff !default;
 /// @prop - Background of the loading wrapper
 $loading-wp-background:                #000 !default;
 
+/// @prop - Margin start of the loading content next to a spinner
+$loading-wp-content-margin-start:      $content-wp-margin !default;
+
 /// @prop - Color of the loading spinner
 $loading-wp-spinner-color:             $loading-wp-text-color !default;
 
@@ -71,7 +74,7 @@ $loading-wp-spinner-dots-color:        $loading-wp-spinner-color !default;
 // -----------------------------------------
 
 .loading-wp .loading-spinner + .loading-content {
-  @include margin-horizontal(16px, null);
+  @include margin-horizontal($loading-wp-content-margin-start, null);
 }