style(scss): fix lint errors

packages/core/src/components/action-sheet/action-sheet.ios.scss

@@ -62,7 +62,7 @@ $action-sheet-ios-button-icon-fill-color:               $action-sheet-ios-button
 $action-sheet-ios-button-icon-font-size:                1.4em !default;
 
 /// @prop - Padding right of the action sheet button icon
-$action-sheet-ios-button-icon-padding-right:            0.1em !default;
+$action-sheet-ios-button-icon-padding-right:            .1em !default;
 
 /// @prop - Height of the action sheet button icon
 $action-sheet-ios-button-icon-height:                   .7em !default;
@@ -123,11 +123,14 @@ $action-sheet-ios-button-cancel-font-weight:            600 !default;
 }
 
 .action-sheet-ios .action-sheet-title {
-  @include padding($action-sheet-ios-title-padding);
-  @include text-align($action-sheet-ios-text-align);
   @include border-radius($action-sheet-ios-title-border-radius);
 
+  @include padding($action-sheet-ios-title-padding);
+
+  @include text-align($action-sheet-ios-text-align);
+
   border-bottom: $action-sheet-ios-button-border-width $action-sheet-ios-button-border-style $action-sheet-ios-border-color;
+
   font-size: $action-sheet-ios-title-font-size;
   font-weight: $action-sheet-ios-title-font-weight;
   color: $action-sheet-ios-title-color;
@@ -135,22 +138,28 @@ $action-sheet-ios-button-cancel-font-weight:            600 !default;
 
 .action-sheet-ios .action-sheet-button {
   @include margin(0);
+
   @include padding($action-sheet-ios-button-padding);
 
   min-height: $action-sheet-ios-button-min-height;
 
   border-bottom: $action-sheet-ios-button-border-width $action-sheet-ios-button-border-style $action-sheet-ios-border-color;
+
   font-size: $action-sheet-ios-button-font-size;
   color: $action-sheet-ios-button-text-color;
   background: $action-sheet-ios-button-background;
 }
 
 .action-sheet-ios .action-sheet-button .action-sheet-icon {
-  fill: $action-sheet-ios-button-icon-fill-color;
+  @include margin($action-sheet-ios-button-icon-margin-top, null, null, null);
-  font-size: $action-sheet-ios-button-icon-font-size;
+
-  padding-right: $action-sheet-ios-button-icon-padding-right;
+  @include padding-horizontal(null, $action-sheet-ios-button-icon-padding-right);
+
   height: $action-sheet-ios-button-icon-height;
-  margin-top: $action-sheet-ios-button-icon-margin-top;
+
+  font-size: $action-sheet-ios-button-icon-font-size;
+
+  fill: $action-sheet-ios-button-icon-fill-color;
 }
 
 .action-sheet-ios .action-sheet-button:last-child {

packages/core/src/components/action-sheet/action-sheet.md.scss

@@ -90,15 +90,17 @@ $action-sheet-md-icon-margin-start:                     0 !default;
 
 .action-sheet-md .action-sheet-title,
 .action-sheet-md .action-sheet-sub-title {
+  @include padding($action-sheet-md-title-padding-top, $action-sheet-md-title-padding-end, $action-sheet-md-title-padding-bottom, $action-sheet-md-title-padding-start);
+
   @include text-align($action-sheet-md-text-align);
 
   font-size: $action-sheet-md-title-font-size;
   color: $action-sheet-md-title-color;
-
-  @include padding($action-sheet-md-title-padding-top, $action-sheet-md-title-padding-end, $action-sheet-md-title-padding-bottom, $action-sheet-md-title-padding-start);
 }
 
 .action-sheet-md .action-sheet-button {
+  @include padding($action-sheet-md-button-padding-top, $action-sheet-md-button-padding-end, $action-sheet-md-button-padding-bottom, $action-sheet-md-button-padding-start);
+
   @include text-align($action-sheet-md-text-align);
 
   position: relative;
@@ -109,9 +111,6 @@ $action-sheet-md-icon-margin-start:                     0 !default;
   font-size: $action-sheet-md-button-font-size;
   color: $action-sheet-md-button-text-color;
   background: $action-sheet-md-button-background;
-
-
-  @include padding($action-sheet-md-button-padding-top, $action-sheet-md-button-padding-end, $action-sheet-md-button-padding-bottom, $action-sheet-md-button-padding-start);
 }
 
 .action-sheet-md .action-sheet-button.activated {
@@ -119,15 +118,16 @@ $action-sheet-md-icon-margin-start:                     0 !default;
 }
 
 .action-sheet-md .action-sheet-icon {
+  @include margin($action-sheet-md-icon-margin-top, $action-sheet-md-icon-margin-end, $action-sheet-md-icon-margin-bottom, $action-sheet-md-icon-margin-start);
+
   @include padding(0);
+
   @include text-align($action-sheet-md-icon-text-align);
 
   width: $action-sheet-md-icon-width;
 
   font-size: $action-sheet-md-icon-font-size;
   vertical-align: $action-sheet-md-icon-vertical-align;
-
-  @include margin($action-sheet-md-icon-margin-top, $action-sheet-md-icon-margin-end, $action-sheet-md-icon-margin-bottom, $action-sheet-md-icon-margin-start);
 }
 
 .action-sheet-md .action-sheet-group {

packages/core/src/components/action-sheet/action-sheet.wp.scss

@@ -97,15 +97,17 @@ $action-sheet-wp-icon-margin-start:               0 !default;
 }
 
 .action-sheet-wp .action-sheet-title {
+  @include padding($action-sheet-wp-title-padding-top, $action-sheet-wp-title-padding-end, $action-sheet-wp-title-padding-bottom, $action-sheet-wp-title-padding-start);
+
   @include text-align($action-sheet-wp-title-text-align);
 
   font-size: $action-sheet-wp-title-font-size;
   color: $action-sheet-wp-title-color;
-
-  @include padding($action-sheet-wp-title-padding-top, $action-sheet-wp-title-padding-end, $action-sheet-wp-title-padding-bottom, $action-sheet-wp-title-padding-start);
 }
 
 .action-sheet-wp .action-sheet-button {
+  @include padding($action-sheet-wp-button-padding-top, $action-sheet-wp-button-padding-end, $action-sheet-wp-button-padding-bottom, $action-sheet-wp-button-padding-start);
+
   @include text-align($action-sheet-wp-button-text-align);
 
   min-height: $action-sheet-wp-button-height;
@@ -113,8 +115,6 @@ $action-sheet-wp-icon-margin-start:               0 !default;
   font-size: $action-sheet-wp-button-font-size;
   color: $action-sheet-wp-button-text-color;
   background: $action-sheet-wp-button-background;
-
-  @include padding($action-sheet-wp-button-padding-top, $action-sheet-wp-button-padding-end, $action-sheet-wp-button-padding-bottom, $action-sheet-wp-button-padding-start);
 }
 
 .action-sheet-wp .action-sheet-button.activated {
@@ -122,15 +122,16 @@ $action-sheet-wp-icon-margin-start:               0 !default;
 }
 
 .action-sheet-wp .action-sheet-icon {
+  @include margin($action-sheet-wp-icon-margin-top, $action-sheet-wp-icon-margin-end, $action-sheet-wp-icon-margin-bottom, $action-sheet-wp-icon-margin-start);
+
   @include padding(0);
+
   @include text-align($action-sheet-wp-icon-text-align);
 
   width: $action-sheet-wp-icon-width;
 
   font-size: $action-sheet-wp-icon-font-size;
   vertical-align: $action-sheet-wp-icon-vertical-align;
-
-  @include margin($action-sheet-wp-icon-margin-top, $action-sheet-wp-icon-margin-end, $action-sheet-wp-icon-margin-bottom, $action-sheet-wp-icon-margin-start);
 }
 
 .action-sheet-wp .action-sheet-container {

packages/core/src/components/alert/alert.ios.scss

@@ -319,12 +319,12 @@ $alert-ios-checkbox-icon-transform:             rotate(45deg) !default;
 
 .alert-ios .alert-message,
 .alert-ios .alert-input-group {
+  @include padding($alert-ios-message-padding-top, $alert-ios-message-padding-end, $alert-ios-message-padding-bottom, $alert-ios-message-padding-start);
+
   @include text-align($alert-ios-message-text-align);
 
   font-size: $alert-ios-message-font-size;
   color: $alert-ios-message-text-color;
-
-  @include padding($alert-ios-message-padding-top, $alert-ios-message-padding-end, $alert-ios-message-padding-bottom, $alert-ios-message-padding-start);
 }
 
 .alert-ios .alert-message {
@@ -341,13 +341,15 @@ $alert-ios-checkbox-icon-transform:             rotate(45deg) !default;
 
 .alert-ios .alert-input {
   @include appearance(none);
-  @include margin($alert-ios-input-margin-top, null, null, null);
+
   @include border-radius($alert-ios-input-border-radius);
 
+  @include margin($alert-ios-input-margin-top, null, null, null);
+
+  @include padding($alert-ios-input-padding-top, $alert-ios-input-padding-end, $alert-ios-input-padding-bottom, $alert-ios-input-padding-start);
+
   border: $alert-ios-input-border;
   background-color: $alert-ios-input-background-color;
-
-  @include padding($alert-ios-input-padding-top, $alert-ios-input-padding-end, $alert-ios-input-padding-bottom, $alert-ios-input-padding-start);
 }
 
 
@@ -377,6 +379,8 @@ $alert-ios-checkbox-icon-transform:             rotate(45deg) !default;
 // --------------------------------------------------
 
 .alert-ios .alert-radio-label {
+  @include padding($alert-ios-radio-label-padding-top, $alert-ios-radio-label-padding-end, $alert-ios-radio-label-padding-bottom, $alert-ios-radio-label-padding-start);
+
   overflow: hidden;
 
   flex: 1;
@@ -387,8 +391,6 @@ $alert-ios-checkbox-icon-transform:             rotate(45deg) !default;
   white-space: nowrap;
 
   color: $alert-ios-radio-label-text-color;
-
-  @include padding($alert-ios-radio-label-padding-top, $alert-ios-radio-label-padding-end, $alert-ios-radio-label-padding-bottom, $alert-ios-radio-label-padding-start);
 }
 
 
@@ -436,6 +438,8 @@ $alert-ios-checkbox-icon-transform:             rotate(45deg) !default;
 // --------------------------------------------------
 
 .alert-ios .alert-checkbox-label {
+  @include padding($alert-ios-checkbox-label-padding-top, $alert-ios-checkbox-label-padding-end, $alert-ios-checkbox-label-padding-bottom, $alert-ios-checkbox-label-padding-start);
+
   overflow: hidden;
 
   flex: 1;
@@ -444,8 +448,6 @@ $alert-ios-checkbox-icon-transform:             rotate(45deg) !default;
   white-space: nowrap;
 
   color: $alert-ios-checkbox-label-text-color;
-
-  @include padding($alert-ios-checkbox-label-padding-top, $alert-ios-checkbox-label-padding-end, $alert-ios-checkbox-label-padding-bottom, $alert-ios-checkbox-label-padding-start);
 }
 
 .alert-ios [aria-checked=true] .alert-checkbox-label {
@@ -458,6 +460,8 @@ $alert-ios-checkbox-icon-transform:             rotate(45deg) !default;
 .alert-ios .alert-checkbox-icon {
   @include border-radius($alert-ios-checkbox-border-radius);
 
+  @include margin($alert-ios-checkbox-margin-top, $alert-ios-checkbox-margin-end, $alert-ios-checkbox-margin-bottom, $alert-ios-checkbox-margin-start);
+
   position: relative;
 
   width: $alert-ios-checkbox-size;
@@ -467,8 +471,6 @@ $alert-ios-checkbox-icon-transform:             rotate(45deg) !default;
   border-style: $alert-ios-checkbox-border-style;
   border-color: $alert-ios-checkbox-border-color-off;
   background-color: $alert-ios-checkbox-background-color-off;
-
-  @include margin($alert-ios-checkbox-margin-top, $alert-ios-checkbox-margin-end, $alert-ios-checkbox-margin-bottom, $alert-ios-checkbox-margin-start);
 }
 
 

packages/core/src/components/alert/alert.md.scss

@@ -350,9 +350,9 @@ $alert-md-checkbox-icon-transform:            rotate(45deg) !default;
 
 .alert-md .alert-message,
 .alert-md .alert-input-group {
-  color: $alert-md-message-text-color;
-
   @include padding($alert-md-message-padding-top, $alert-md-message-padding-end, $alert-md-message-padding-bottom, $alert-md-message-padding-start);
+
+  color: $alert-md-message-text-color;
 }
 
 .alert-md .alert-message {
@@ -412,6 +412,8 @@ $alert-md-checkbox-icon-transform:            rotate(45deg) !default;
 // --------------------------------------------------
 
 .alert-md .alert-radio-label {
+  @include padding($alert-md-radio-label-padding-top, $alert-md-radio-label-padding-end, $alert-md-radio-label-padding-bottom, $alert-md-radio-label-padding-start);
+
   overflow: hidden;
 
   flex: 1;
@@ -420,8 +422,6 @@ $alert-md-checkbox-icon-transform:            rotate(45deg) !default;
   white-space: nowrap;
 
   color: $alert-md-radio-label-text-color;
-
-  @include padding($alert-md-radio-label-padding-top, $alert-md-radio-label-padding-end, $alert-md-radio-label-padding-bottom, $alert-md-radio-label-padding-start);
 }
 
 // Material Design Alert Radio Unchecked Circle
@@ -480,6 +480,8 @@ $alert-md-checkbox-icon-transform:            rotate(45deg) !default;
 // --------------------------------------------------
 
 .alert-md .alert-checkbox-label {
+  @include padding($alert-md-checkbox-label-padding-top, $alert-md-checkbox-label-padding-end, $alert-md-checkbox-label-padding-bottom, $alert-md-checkbox-label-padding-start);
+
   overflow: hidden;
 
   flex: 1;
@@ -488,8 +490,6 @@ $alert-md-checkbox-icon-transform:            rotate(45deg) !default;
   white-space: nowrap;
 
   color: $alert-md-checkbox-label-text-color;
-
-  @include padding($alert-md-checkbox-label-padding-top, $alert-md-checkbox-label-padding-end, $alert-md-checkbox-label-padding-bottom, $alert-md-checkbox-label-padding-start);
 }
 
 .alert-md [aria-checked=true] .alert-checkbox-label {
@@ -542,16 +542,21 @@ $alert-md-checkbox-icon-transform:            rotate(45deg) !default;
 // --------------------------------------------------
 
 .alert-md .alert-button-group {
+  @include padding($alert-md-button-group-padding-top, $alert-md-button-group-padding-end, $alert-md-button-group-padding-bottom, $alert-md-button-group-padding-start);
+
   flex-wrap: $alert-md-button-group-flex-wrap;
   justify-content: $alert-md-button-group-justify-content;
-
-  @include padding($alert-md-button-group-padding-top, $alert-md-button-group-padding-end, $alert-md-button-group-padding-bottom, $alert-md-button-group-padding-start);
 }
 
 .alert-md .alert-button {
-  @include text-align($alert-md-button-text-align);
   @include border-radius($alert-md-button-border-radius);
 
+  @include margin($alert-md-button-margin-top, $alert-md-button-margin-end, $alert-md-button-margin-bottom, $alert-md-button-margin-start);
+
+  @include padding($alert-md-button-padding-top, $alert-md-button-padding-end, $alert-md-button-padding-bottom, $alert-md-button-padding-start);
+
+  @include text-align($alert-md-button-text-align);
+
   // necessary for ripple to work properly
   position: relative;
   overflow: hidden;
@@ -560,10 +565,6 @@ $alert-md-checkbox-icon-transform:            rotate(45deg) !default;
   text-transform: $alert-md-button-text-transform;
   color: $alert-md-button-text-color;
   background-color: $alert-md-button-background-color;
-
-  @include margin($alert-md-button-margin-top, $alert-md-button-margin-end, $alert-md-button-margin-bottom, $alert-md-button-margin-start);
-
-  @include padding($alert-md-button-padding-top, $alert-md-button-padding-end, $alert-md-button-padding-bottom, $alert-md-button-padding-start);
 }
 
 .alert-md .alert-button.activated {

packages/core/src/components/alert/alert.wp.scss

@@ -363,9 +363,9 @@ $alert-wp-checkbox-icon-transform:             rotate(45deg) !default;
 
 .alert-wp .alert-message,
 .alert-wp .alert-input-group {
-  color: $alert-wp-message-text-color;
-
   @include padding($alert-wp-message-padding-top, $alert-wp-message-padding-end, $alert-wp-message-padding-bottom, $alert-wp-message-padding-start);
+
+  color: $alert-wp-message-text-color;
 }
 
 .alert-wp .alert-message {
@@ -383,13 +383,13 @@ $alert-wp-checkbox-icon-transform:             rotate(45deg) !default;
 // --------------------------------------------------
 
 .alert-wp .alert-input {
-  border: $alert-wp-input-border-width $alert-wp-input-border-style $alert-wp-input-border-color;
-  line-height: $alert-wp-input-line-height;
-  color: $alert-wp-input-text-color;
-
   @include margin($alert-wp-input-margin-top, $alert-wp-input-margin-end, $alert-wp-input-margin-bottom, $alert-wp-input-margin-start);
 
   @include padding($alert-wp-input-padding-top, $alert-wp-input-padding-end, $alert-wp-input-padding-bottom, $alert-wp-input-padding-start);
+
+  border: $alert-wp-input-border-width $alert-wp-input-border-style $alert-wp-input-border-color;
+  line-height: $alert-wp-input-line-height;
+  color: $alert-wp-input-text-color;
 }
 
 .alert-wp .alert-input:focus {
@@ -423,6 +423,8 @@ $alert-wp-checkbox-icon-transform:             rotate(45deg) !default;
 // --------------------------------------------------
 
 .alert-wp .alert-radio-label {
+  @include padding($alert-wp-radio-label-padding-top, $alert-wp-radio-label-padding-end, $alert-wp-radio-label-padding-bottom, $alert-wp-radio-label-padding-start);
+
   overflow: hidden;
 
   flex: 1;
@@ -431,8 +433,6 @@ $alert-wp-checkbox-icon-transform:             rotate(45deg) !default;
   white-space: nowrap;
 
   color: $alert-wp-radio-label-text-color;
-
-  @include padding($alert-wp-radio-label-padding-top, $alert-wp-radio-label-padding-end, $alert-wp-radio-label-padding-bottom, $alert-wp-radio-label-padding-start);
 }
 
 // Windows Alert Radio Unchecked Circle
@@ -490,6 +490,8 @@ $alert-wp-checkbox-icon-transform:             rotate(45deg) !default;
 // --------------------------------------------------
 
 .alert-wp .alert-checkbox-label {
+  @include padding($alert-wp-checkbox-label-padding-top, $alert-wp-checkbox-label-padding-end, $alert-wp-checkbox-label-padding-bottom, $alert-wp-checkbox-label-padding-start);
+
   overflow: hidden;
 
   flex: 1;
@@ -498,8 +500,6 @@ $alert-wp-checkbox-icon-transform:             rotate(45deg) !default;
   white-space: nowrap;
 
   color: $alert-wp-checkbox-label-text-color;
-
-  @include padding($alert-wp-checkbox-label-padding-top, $alert-wp-checkbox-label-padding-end, $alert-wp-checkbox-label-padding-bottom, $alert-wp-checkbox-label-padding-start);
 }
 
 .alert-wp [aria-checked=true] .alert-checkbox-label {
@@ -556,10 +556,10 @@ $alert-wp-checkbox-icon-transform:             rotate(45deg) !default;
 // --------------------------------------------------
 
 .alert-wp .alert-button-group {
+  @include padding($alert-wp-button-group-padding-top, $alert-wp-button-group-padding-end, $alert-wp-button-group-padding-bottom, $alert-wp-button-group-padding-start);
+
   flex-wrap: $alert-wp-button-group-flex-wrap;
   justify-content: $alert-wp-button-group-justify-content;
-
-  @include padding($alert-wp-button-group-padding-top, $alert-wp-button-group-padding-end, $alert-wp-button-group-padding-bottom, $alert-wp-button-group-padding-start);
 }
 
 .alert-wp .alert-button-group-vertical .alert-button {
@@ -575,13 +575,13 @@ $alert-wp-checkbox-icon-transform:             rotate(45deg) !default;
 .alert-wp .alert-button {
   @include border-radius($alert-wp-button-border-radius);
 
+  @include padding($alert-wp-button-padding-top, $alert-wp-button-padding-end, $alert-wp-button-padding-bottom, $alert-wp-button-padding-start);
+
   width: $alert-wp-button-width;
 
   font-weight: $alert-wp-button-font-weight;
   color: $alert-wp-button-text-color;
   background: $alert-wp-button-background;
-
-  @include padding($alert-wp-button-padding-top, $alert-wp-button-padding-end, $alert-wp-button-padding-bottom, $alert-wp-button-padding-start);
 }
 
 .alert-wp .alert-button:first-child:not(:only-child) {

packages/core/src/components/button/button.ios.scss

@@ -187,16 +187,16 @@ $button-ios-strong-font-weight:                     600 !default;
 .button-ios {
   @include border-radius($button-ios-border-radius);
 
+  @include margin($button-ios-margin-top, $button-ios-margin-end, $button-ios-margin-bottom, $button-ios-margin-start);
+
+  @include padding($button-ios-padding-top, $button-ios-padding-end, $button-ios-padding-bottom, $button-ios-padding-start);
+
   height: $button-ios-height;
 
   font-size: $button-ios-font-size;
 
   color: $button-ios-text-color;
   background-color: $button-ios-background-color;
-
-  @include margin($button-ios-margin-top, $button-ios-margin-end, $button-ios-margin-bottom, $button-ios-margin-start);
-
-  @include padding($button-ios-padding-top, $button-ios-padding-end, $button-ios-padding-bottom, $button-ios-padding-start);
 }
 
 .button-ios.activated {
@@ -232,19 +232,19 @@ $button-ios-strong-font-weight:                     600 !default;
 // --------------------------------------------------
 
 .button-large-ios {
+  @include padding($button-ios-large-padding-top, $button-ios-large-padding-end, $button-ios-large-padding-bottom, $button-ios-large-padding-start);
+
   height: $button-ios-large-height;
 
   font-size: $button-ios-large-font-size;
-
-  @include padding($button-ios-large-padding-top, $button-ios-large-padding-end, $button-ios-large-padding-bottom, $button-ios-large-padding-start);
 }
 
 .button-small-ios {
+  @include padding($button-ios-small-padding-top, $button-ios-small-padding-end, $button-ios-small-padding-bottom, $button-ios-small-padding-start);
+
   height: $button-ios-small-height;
 
   font-size: $button-ios-small-font-size;
-
-  @include padding($button-ios-small-padding-top, $button-ios-small-padding-end, $button-ios-small-padding-bottom, $button-ios-small-padding-start);
 }
 
 .button-small-ios ion-icon[slot="icon-only"] {

packages/core/src/components/button/button.md.scss

@@ -224,6 +224,10 @@ $button-md-strong-font-weight:                  bold !default;
 .button-md {
   @include border-radius($button-md-border-radius);
 
+  @include margin($button-md-margin-top, $button-md-margin-end, $button-md-margin-bottom, $button-md-margin-start);
+
+  @include padding($button-md-padding-top, $button-md-padding-end, $button-md-padding-bottom, $button-md-padding-start);
+
   overflow: hidden;
 
   height: $button-md-height;
@@ -239,10 +243,6 @@ $button-md-strong-font-weight:                  bold !default;
   transition: box-shadow $button-md-transition-duration $button-md-transition-timing-function,
               background-color $button-md-transition-duration $button-md-transition-timing-function,
               color $button-md-transition-duration $button-md-transition-timing-function;
-
-  @include margin($button-md-margin-top, $button-md-margin-end, $button-md-margin-bottom, $button-md-margin-start);
-
-  @include padding($button-md-padding-top, $button-md-padding-end, $button-md-padding-bottom, $button-md-padding-start);
 }
 
 .button-md:hover:not(.disable-hover) {
@@ -291,19 +291,19 @@ $button-md-strong-font-weight:                  bold !default;
 // --------------------------------------------------
 
 .button-large-md {
+  @include padding($button-md-large-padding-top, $button-md-large-padding-end, $button-md-large-padding-bottom, $button-md-large-padding-start);
+
   height: $button-md-large-height;
 
   font-size: $button-md-large-font-size;
-
-  @include padding($button-md-large-padding-top, $button-md-large-padding-end, $button-md-large-padding-bottom, $button-md-large-padding-start);
 }
 
 .button-small-md {
+  @include padding($button-md-small-padding-top, $button-md-small-padding-end, $button-md-small-padding-bottom, $button-md-small-padding-start);
+
   height: $button-md-small-height;
 
   font-size: $button-md-small-font-size;
-
-  @include padding($button-md-small-padding-top, $button-md-small-padding-end, $button-md-small-padding-bottom, $button-md-small-padding-start);
 }
 
 .button-small-md ion-icon[slot="icon-only"] {

packages/core/src/components/button/button.wp.scss

@@ -178,6 +178,10 @@ $button-wp-strong-font-weight:                            bold !default;
 .button-wp {
   @include border-radius($button-wp-border-radius);
 
+  @include margin($button-wp-margin-top, $button-wp-margin-end, $button-wp-margin-bottom, $button-wp-margin-start);
+
+  @include padding($button-wp-padding-top, $button-wp-padding-end, $button-wp-padding-bottom, $button-wp-padding-start);
+
   height: $button-wp-height;
 
   border: $button-wp-border-width $button-wp-border-style $button-wp-border-color;
@@ -186,10 +190,6 @@ $button-wp-strong-font-weight:                            bold !default;
 
   color: $button-wp-text-color;
   background-color: $button-wp-background-color;
-
-  @include margin($button-wp-margin-top, $button-wp-margin-end, $button-wp-margin-bottom, $button-wp-margin-start);
-
-  @include padding($button-wp-padding-top, $button-wp-padding-end, $button-wp-padding-bottom, $button-wp-padding-start);
 }
 
 .button-wp:hover:not(.disable-hover) {
@@ -230,19 +230,19 @@ $button-wp-strong-font-weight:                            bold !default;
 // --------------------------------------------------
 
 .button-large-wp {
+  @include padding($button-wp-large-padding-top, $button-wp-large-padding-end, $button-wp-large-padding-bottom, $button-wp-large-padding-start);
+
   height: $button-wp-large-height;
 
   font-size: $button-wp-large-font-size;
-
-  @include padding($button-wp-large-padding-top, $button-wp-large-padding-end, $button-wp-large-padding-bottom, $button-wp-large-padding-start);
 }
 
 .button-small-wp {
+  @include padding($button-wp-small-padding-top, $button-wp-small-padding-end, $button-wp-small-padding-bottom, $button-wp-small-padding-start);
+
   height: $button-wp-small-height;
 
   font-size: $button-wp-small-font-size;
-
-  @include padding($button-wp-small-padding-top, $button-wp-small-padding-end, $button-wp-small-padding-bottom, $button-wp-small-padding-start);
 }
 
 .button-small-wp ion-icon[slot="icon-only"] {

packages/core/src/components/card-header/card-header.ios.scss

@@ -28,11 +28,11 @@ $card-ios-header-color:                #333 !default;
 
 
 .card-header-ios {
+  @include padding($card-ios-header-padding-top, $card-ios-header-padding-end, $card-ios-header-padding-bottom, $card-ios-header-padding-start);
+
   font-size: $card-ios-header-font-size;
   font-weight: $card-ios-header-font-weight;
   color: $card-ios-header-color;
-
-  @include padding($card-ios-header-padding-top, $card-ios-header-padding-end, $card-ios-header-padding-bottom, $card-ios-header-padding-start);
 }
 
 

packages/core/src/components/card-header/card-header.md.scss

@@ -25,10 +25,10 @@ $card-md-header-color:                #222 !default;
 
 
 .card-header-md {
+  @include padding($card-md-header-padding-top, $card-md-header-padding-end, $card-md-header-padding-bottom, $card-md-header-padding-start);
+
   font-size: $card-md-header-font-size;
   color: $card-md-header-color;
-
-  @include padding($card-md-header-padding-top, $card-md-header-padding-end, $card-md-header-padding-bottom, $card-md-header-padding-start);
 }
 
 

packages/core/src/components/card-header/card-header.wp.scss

@@ -25,11 +25,11 @@ $card-wp-header-color:                #222 !default;
 
 
 .card-header-wp {
+  @include padding($card-wp-header-padding-top, $card-wp-header-padding-end, $card-wp-header-padding-bottom, $card-wp-header-padding-start);
+
   font-size: $card-wp-header-font-size;
 
   color: $card-wp-header-color;
-
-  @include padding($card-wp-header-padding-top, $card-wp-header-padding-end, $card-wp-header-padding-bottom, $card-wp-header-padding-start);
 }
 
 

packages/core/src/components/card-title/card-title.ios.scss

@@ -37,15 +37,15 @@ $card-ios-title-text-color:            #222 !default;
 
 
 .card-title-ios {
+  @include margin($card-ios-title-margin-top, $card-ios-title-margin-end, $card-ios-title-margin-bottom, $card-ios-title-margin-start);
+
+  @include padding($card-ios-title-padding-top, $card-ios-title-padding-end, $card-ios-title-padding-bottom, $card-ios-title-padding-start);
+
   display: block;
 
   font-size: $card-ios-title-font-size;
   line-height: 1.2;
   color: $card-ios-title-text-color;
-
-  @include margin($card-ios-title-margin-top, $card-ios-title-margin-end, $card-ios-title-margin-bottom, $card-ios-title-margin-start);
-
-  @include padding($card-ios-title-padding-top, $card-ios-title-padding-end, $card-ios-title-padding-bottom, $card-ios-title-padding-start);
 }
 
 

packages/core/src/components/card-title/card-title.md.scss

@@ -37,15 +37,15 @@ $card-md-title-text-color:            #222 !default;
 
 
 .card-title-md {
+  @include margin($card-md-title-margin-top, $card-md-title-margin-end, $card-md-title-margin-bottom, $card-md-title-margin-start);
+
+  @include padding($card-md-title-padding-top, $card-md-title-padding-end, $card-md-title-padding-bottom, $card-md-title-padding-start);
+
   display: block;
 
   font-size: $card-md-title-font-size;
   line-height: 1.2;
   color: $card-md-title-text-color;
-
-  @include margin($card-md-title-margin-top, $card-md-title-margin-end, $card-md-title-margin-bottom, $card-md-title-margin-start);
-
-  @include padding($card-md-title-padding-top, $card-md-title-padding-end, $card-md-title-padding-bottom, $card-md-title-padding-start);
 }
 
 

packages/core/src/components/card-title/card-title.wp.scss

@@ -37,15 +37,15 @@ $card-wp-title-text-color:            #222 !default;
 
 
 .card-title-wp {
+  @include margin($card-wp-title-margin-top, $card-wp-title-margin-end, $card-wp-title-margin-bottom, $card-wp-title-margin-start);
+
+  @include padding($card-wp-title-padding-top, $card-wp-title-padding-end, $card-wp-title-padding-bottom, $card-wp-title-padding-start);
+
   display: block;
 
   font-size: $card-wp-title-font-size;
   line-height: 1.2;
   color: $card-wp-title-text-color;
-
-  @include margin($card-wp-title-margin-top, $card-wp-title-margin-end, $card-wp-title-margin-bottom, $card-wp-title-margin-start);
-
-  @include padding($card-wp-title-padding-top, $card-wp-title-padding-end, $card-wp-title-padding-bottom, $card-wp-title-padding-start);
 }
 
 

packages/core/src/components/checkbox/checkbox.ios.scss

@@ -127,13 +127,13 @@ $checkbox-ios-item-end-margin-start:      0 !default;
 // -----------------------------------------
 
 .item.item-ios .checkbox-ios {
+  @include margin($checkbox-ios-item-start-margin-top, $checkbox-ios-item-start-margin-end, $checkbox-ios-item-start-margin-bottom, $checkbox-ios-item-start-margin-start);
+
   position: static;
   display: block;
-
-  @include margin($checkbox-ios-item-start-margin-top, $checkbox-ios-item-start-margin-end, $checkbox-ios-item-start-margin-bottom, $checkbox-ios-item-start-margin-start);
 }
 
-.item.item-ios .checkbox-ios[item-end] {
+.item.item-ios .checkbox-ios[slot="end"] {
   @include margin($checkbox-ios-item-end-margin-top, $checkbox-ios-item-end-margin-end, $checkbox-ios-item-end-margin-bottom, $checkbox-ios-item-end-margin-start);
 }
 

packages/core/src/components/checkbox/checkbox.md.scss

@@ -146,13 +146,13 @@ $checkbox-md-item-end-margin-start:      0 !default;
 // -----------------------------------------
 
 .item.item-md .checkbox-md {
+  @include margin($checkbox-md-item-start-margin-top, $checkbox-md-item-start-margin-end, $checkbox-md-item-start-margin-bottom, $checkbox-md-item-start-margin-start);
+
   position: static;
   display: block;
-
-  @include margin($checkbox-md-item-start-margin-top, $checkbox-md-item-start-margin-end, $checkbox-md-item-start-margin-bottom, $checkbox-md-item-start-margin-start);
 }
 
-.item.item-md .checkbox-md[item-end] {
+.item.item-md .checkbox-md[slot="end"] {
   @include margin($checkbox-md-item-end-margin-top, $checkbox-md-item-end-margin-end, $checkbox-md-item-end-margin-bottom, $checkbox-md-item-end-margin-start);
 }
 

packages/core/src/components/checkbox/checkbox.wp.scss

@@ -136,13 +136,13 @@ $checkbox-wp-item-end-margin-start:      0 !default;
 // -----------------------------------------
 
 .item.item-wp .checkbox-wp {
+  @include margin($checkbox-wp-item-start-margin-top, $checkbox-wp-item-start-margin-end, $checkbox-wp-item-start-margin-bottom, $checkbox-wp-item-start-margin-start);
+
   position: static;
   display: block;
-
-  @include margin($checkbox-wp-item-start-margin-top, $checkbox-wp-item-start-margin-end, $checkbox-wp-item-start-margin-bottom, $checkbox-wp-item-start-margin-start);
 }
 
-.item.item-wp .checkbox-wp[item-end] {
+.item.item-wp .checkbox-wp[slot="end"] {
   @include margin($checkbox-wp-item-end-margin-top, $checkbox-wp-item-end-margin-end, $checkbox-wp-item-end-margin-bottom, $checkbox-wp-item-end-margin-start);
 }
 

packages/core/src/components/chip-button/chip-button.ios.scss

@@ -33,8 +33,8 @@ $chip-button-ios-clear-icon-fill-color:     color($colors-ios, primary) !default
 // --------------------------------------------------
 
 .chip-button-clear-ios {
-  background-color: $chip-button-ios-clear-background-color;
   color: $chip-button-ios-clear-text-color;
+  background-color: $chip-button-ios-clear-background-color;
 }
 
 .chip-button-clear-ios .icon {
@@ -85,5 +85,4 @@ $chip-button-ios-clear-icon-fill-color:     color($colors-ios, primary) !default
       fill: $color-contrast;
     }
   }
-
 }

packages/core/src/components/chip-button/chip-button.md.scss

@@ -33,8 +33,8 @@ $chip-button-md-clear-icon-fill-color:     color($colors-md, primary) !default;
 // --------------------------------------------------
 
 .chip-button-clear-md {
-  background-color: $chip-button-md-clear-background-color;
   color: $chip-button-md-clear-text-color;
+  background-color: $chip-button-md-clear-background-color;
 }
 
 .chip-button-clear-md .icon {

packages/core/src/components/chip-button/chip-button.wp.scss

@@ -33,8 +33,8 @@ $chip-button-wp-clear-icon-fill-color:     color($colors-wp, primary) !default;
 // --------------------------------------------------
 
 .chip-button-clear-wp {
-  background-color: $chip-button-wp-clear-background-color;
   color: $chip-button-wp-clear-text-color;
+  background-color: $chip-button-wp-clear-background-color;
 }
 
 .chip-button-clear-wp .icon {
@@ -63,6 +63,4 @@ $chip-button-wp-clear-icon-fill-color:     color($colors-wp, primary) !default;
       fill: $color-base;
     }
   }
-
-
 }

packages/core/src/components/chip/chip.ios.scss

@@ -52,6 +52,7 @@ $chip-ios-icon-fill-color:                  color-contrast($colors-ios, $chip-io
 
 .chip-ios {
   @include border-radius($chip-ios-border-radius);
+
   @include margin($chip-ios-margin-top, $chip-ios-margin-end, $chip-ios-margin-bottom, $chip-ios-margin-start);
 
   height: $chip-ios-height;
@@ -67,8 +68,9 @@ $chip-ios-icon-fill-color:                  color-contrast($colors-ios, $chip-io
 }
 
 .chip-ios > ion-icon {
-  fill: $chip-ios-icon-fill-color;
   background-color: $chip-ios-icon-background-color;
+
+  fill: $chip-ios-icon-fill-color;
 }
 
 
@@ -83,8 +85,9 @@ $chip-ios-icon-fill-color:                  color-contrast($colors-ios, $chip-io
   }
 
   .chip-ios .icon-ios-#{$color-name} {
-    fill: $color-contrast;
     background-color: $color-base;
+
+    fill: $color-contrast;
   }
 
 }

packages/core/src/components/chip/chip.md.scss

@@ -53,14 +53,14 @@ $chip-md-icon-fill-color:                  color-contrast($colors-md, $chip-md-i
 .chip-md {
   @include border-radius($chip-md-border-radius);
 
+  @include margin($chip-md-margin-top, $chip-md-margin-end, $chip-md-margin-bottom, $chip-md-margin-start);
+
   height: $chip-md-height;
 
   font-size: $chip-md-font-size;
   line-height: $chip-md-height;
   color: $chip-md-text-color;
   background: $chip-md-background-color;
-
-  @include margin($chip-md-margin-top, $chip-md-margin-end, $chip-md-margin-bottom, $chip-md-margin-start);
 }
 
 .chip-md > ion-label {
@@ -68,8 +68,9 @@ $chip-md-icon-fill-color:                  color-contrast($colors-md, $chip-md-i
 }
 
 .chip-md > ion-icon {
-  fill: $chip-md-icon-fill-color;
   background-color: $chip-md-icon-background-color;
+
+  fill: $chip-md-icon-fill-color;
 }
 
 
@@ -84,8 +85,9 @@ $chip-md-icon-fill-color:                  color-contrast($colors-md, $chip-md-i
   }
 
   .chip-md .icon-md-#{$color-name} {
-    fill: $color-contrast;
     background-color: $color-base;
+
+    fill: $color-contrast;
   }
 
 }

packages/core/src/components/chip/chip.wp.scss

@@ -53,14 +53,14 @@ $chip-wp-icon-fill-color:                  color-contrast($colors-wp, $chip-wp-i
 .chip-wp {
   @include border-radius($chip-wp-border-radius);
 
+  @include margin($chip-wp-margin-top, $chip-wp-margin-end, $chip-wp-margin-bottom, $chip-wp-margin-start);
+
   height: $chip-wp-height;
 
   font-size: $chip-wp-font-size;
   line-height: $chip-wp-height;
   color: $chip-wp-text-color;
   background: $chip-wp-background-color;
-
-  @include margin($chip-wp-margin-top, $chip-wp-margin-end, $chip-wp-margin-bottom, $chip-wp-margin-start);
 }
 
 .chip-wp > ion-label {
@@ -68,8 +68,9 @@ $chip-wp-icon-fill-color:                  color-contrast($colors-wp, $chip-wp-i
 }
 
 .chip-wp > ion-icon {
-  fill: $chip-wp-icon-fill-color;
   background-color: $chip-wp-icon-background-color;
+
+  fill: $chip-wp-icon-fill-color;
 }
 
 
@@ -84,8 +85,9 @@ $chip-wp-icon-fill-color:                  color-contrast($colors-wp, $chip-wp-i
   }
 
   .chip-wp .icon-wp-#{$color-name} {
-    fill: $color-contrast;
     background-color: $color-base;
+
+    fill: $color-contrast;
   }
 
 }

packages/core/src/components/fab/fab.scss

@@ -193,6 +193,7 @@ ion-fab-list[side=right] {
   @include position(0, 0, null, 0);
 
   position: absolute;
+
   height: 100%;
 
   opacity: 0;
@@ -202,10 +203,12 @@ ion-fab-list[side=right] {
 }
 
 .fab-close-icon .icon-inner {
-  height: 100%;
   display: flex;
+
   align-items: center;
   justify-content: center;
+
+  height: 100%;
 }
 
 

packages/core/src/components/input/input.wp.scss

@@ -130,8 +130,8 @@ $text-input-wp-highlight-color-invalid:     $text-input-highlight-color-invalid
   width: calc(100% - #{$text-input-wp-margin-end});
 }
 
-.item-wp.item-label-stacked [item-end],
+.item-wp.item-label-stacked [slot="end"],
-.item-wp.item-label-floating [item-end] {
+.item-wp.item-label-floating [slot="end"] {
   align-self: flex-end;
 }
 

packages/core/src/components/item-sliding/item-sliding.scss

@@ -72,14 +72,13 @@ ion-item-options[side=left] {
 
   @include padding(0, .7em);
 
-  border: 0;
-
   display: inline-flex;
 
   align-items: center;
 
   height: 100%;
 
+  border: 0;
   box-shadow: none;
 
   box-sizing: border-box;

packages/core/src/components/item/item.ios.scss

@@ -91,14 +91,14 @@ $item-ios-detail-push-svg:                "<svg xmlns='http://www.w3.org/2000/sv
 }
 
 .item-ios p {
+  @include margin($item-ios-paragraph-margin-top, $item-ios-paragraph-margin-end, $item-ios-paragraph-margin-bottom, $item-ios-paragraph-margin-start);
+
   overflow: inherit;
 
   font-size: $item-ios-paragraph-font-size;
   line-height: normal;
   text-overflow: inherit;
   color: $item-ios-paragraph-text-color;
-
-  @include margin($item-ios-paragraph-margin-top, $item-ios-paragraph-margin-end, $item-ios-paragraph-margin-bottom, $item-ios-paragraph-margin-start);
 }
 
 .item-ios h2:last-child,
@@ -246,4 +246,3 @@ ion-item-group .item-wrapper:last-child .item-ios .item-inner {
     }
   }
 }
-

packages/core/src/components/list-header/list-header.scss

@@ -6,11 +6,15 @@
 
 ion-list-header {
   @include margin(0);
+
   @include padding(0);
+
   display: flex;
   overflow: hidden;
+
   align-items: center;
   justify-content: space-between;
+
   width: 100%;
   min-height: 4rem;
 }

packages/core/src/components/loading/loading.ios.scss

@@ -57,13 +57,13 @@ $loading-ios-spinner-dots-color:        $loading-ios-spinner-color !default;
 .loading-ios .loading-wrapper {
   @include border-radius($loading-ios-border-radius);
 
+  @include padding($loading-ios-padding-top, $loading-ios-padding-end, $loading-ios-padding-bottom, $loading-ios-padding-start);
+
   max-width: $loading-ios-max-width;
   max-height: $loading-ios-max-height;
 
   color: $loading-ios-text-color;
   background: $loading-ios-background;
-
-  @include padding($loading-ios-padding-top, $loading-ios-padding-end, $loading-ios-padding-bottom, $loading-ios-padding-start);
 }
 
 

packages/core/src/components/loading/loading.md.scss

@@ -60,6 +60,8 @@ $loading-md-spinner-dots-color:        $loading-md-spinner-color !default;
 .loading-md .loading-wrapper {
   @include border-radius($loading-md-border-radius);
 
+  @include padding($loading-md-padding-top, $loading-md-padding-end, $loading-md-padding-bottom, $loading-md-padding-start);
+
   max-width: $loading-md-max-width;
   max-height: $loading-md-max-height;
 
@@ -67,8 +69,6 @@ $loading-md-spinner-dots-color:        $loading-md-spinner-color !default;
   background: $loading-md-background;
 
   box-shadow: $loading-md-box-shadow;
-
-  @include padding($loading-md-padding-top, $loading-md-padding-end, $loading-md-padding-bottom, $loading-md-padding-start);
 }
 
 

packages/core/src/components/loading/loading.scss

@@ -36,9 +36,10 @@ ion-loading-controller {
 }
 
 .loading-backdrop {
+  @include position(0, null, null, 0);
+
   position: absolute;
-  top: 0;
+
-  left: 0;
   z-index: $z-index-backdrop;
   display: block;
 

packages/core/src/components/loading/loading.wp.scss

@@ -54,13 +54,13 @@ $loading-wp-spinner-dots-color:        $loading-wp-spinner-color !default;
 .loading-wp .loading-wrapper {
   @include border-radius($loading-wp-border-radius);
 
+  @include padding($loading-wp-padding-top, $loading-wp-padding-end, $loading-wp-padding-bottom, $loading-wp-padding-start);
+
   max-width: $loading-wp-max-width;
   max-height: $loading-wp-max-height;
 
   color: $loading-wp-text-color;
   background: $loading-wp-background;
-
-  @include padding($loading-wp-padding-top, $loading-wp-padding-end, $loading-wp-padding-bottom, $loading-wp-padding-start);
 }
 
 

packages/core/src/components/modal/modal.scss

@@ -44,9 +44,10 @@ ion-modal-controller {
 }
 
 .modal-backdrop {
+  @include position(0, null, null, 0);
+
   position: absolute;
-  top: 0;
+
-  left: 0;
   z-index: $z-index-backdrop;
   display: block;
 
@@ -56,18 +57,16 @@ ion-modal-controller {
   background-color: $modal-backdrop-color;
   opacity: .01;
   transform: translateZ(0);
+
+  @media not all and (min-width: $modal-inset-min-width) and (min-height: $modal-inset-min-height-small) {
+    visibility: hidden;
+  }
 }
 
 .modal-backdrop.backdrop-no-tappable {
   cursor: auto;
 }
 
-.modal-backdrop {
-  @media not all and (min-width: $modal-inset-min-width) and (min-height: $modal-inset-min-height-small) {
-    visibility: hidden;
-  }
-}
-
 .modal-backdrop.hide-backdrop {
   visibility: hidden;
 }
@@ -99,9 +98,9 @@ ion-modal-controller {
 }
 
 .modal-content {
+  @include position(0, null, null, 0);
+
   position: absolute;
-  top: 0;
-  left: 0;
 
   display: block;
 

packages/core/src/components/page/page.scss

@@ -13,10 +13,10 @@ ion-page {
   width: 100%;
   height: 100%;
 
-  contain: strict;
-
   // do not show, but still render so we can get dimensions
   opacity: 0;
+
+  contain: strict;
 }
 
 ion-page.show-page {

packages/core/src/components/popover/popover.scss

@@ -55,9 +55,10 @@ ion-popover-controller {
 // --------------------------------------------------
 
 .popover-backdrop {
+  @include position(0, null, null, 0);
+
   position: absolute;
-  top: 0;
+
-  left: 0;
   z-index: $z-index-backdrop;
   display: block;
 

packages/core/src/components/popover/popover.wp.scss

@@ -44,6 +44,5 @@ $popover-wp-background:                $background-wp-color !default;
 }
 
 .popover-wp .popover-viewport {
-  // opacity: 0;
   transition-delay: 100ms;
 }

packages/core/src/components/radio/radio.ios.scss

@@ -94,12 +94,12 @@ $radio-ios-item-end-margin-start:     ($item-ios-padding-start / 2) !default;
 // -----------------------------------------
 
 .item-ios .radio-ios {
+  @include margin($radio-ios-item-end-margin-top, $radio-ios-item-end-margin-end, $radio-ios-item-end-margin-bottom, $radio-ios-item-end-margin-start);
+
   position: static;
   display: block;
 
-  @include margin($radio-ios-item-end-margin-top, $radio-ios-item-end-margin-end, $radio-ios-item-end-margin-bottom, $radio-ios-item-end-margin-start);
+  &[slot="start"] {
-
-  &[item-start] {
     @include margin($radio-ios-item-start-margin-top, $radio-ios-item-start-margin-end, $radio-ios-item-start-margin-bottom, $radio-ios-item-start-margin-start);
   }
 }

packages/core/src/components/radio/radio.md.scss

@@ -128,12 +128,12 @@ $radio-md-item-end-margin-start:     0 !default;
 // -----------------------------------------
 
 .item-md .radio-md {
+  @include margin($radio-md-item-end-margin-top, $radio-md-item-end-margin-end, $radio-md-item-end-margin-bottom, $radio-md-item-end-margin-start);
+
   position: static;
   display: block;
 
-  @include margin($radio-md-item-end-margin-top, $radio-md-item-end-margin-end, $radio-md-item-end-margin-bottom, $radio-md-item-end-margin-start);
+  &[slot="start"] {
-
-  &[item-start] {
     @include margin($radio-md-item-start-margin-top, $radio-md-item-start-margin-end, $radio-md-item-start-margin-bottom, $radio-md-item-start-margin-start);
   }
 }

packages/core/src/components/range/range.scss

@@ -37,11 +37,10 @@ ion-range {
   }
 
   ion-icon {
-  min-height: 2.4rem;
+    min-height: 2.4rem;
-
-  font-size: 2.4rem;
-  line-height: 1;
 
+    font-size: 2.4rem;
+    line-height: 1;
   }
 
   ion-gesture,

packages/core/src/components/searchbar/searchbar.ios.scss

@@ -78,6 +78,7 @@ $searchbar-ios-toolbar-input-background:  rgba(0, 0, 0, .08) !default;
 
 @mixin ios-searchbar-icon($svg-icon, $fg-color) {
   $svg: str-replace($svg-icon, 'fg-color', $fg-color);
+
   @include svg-background-image($svg, true);
 }
 

packages/core/src/components/searchbar/searchbar.md.scss

@@ -63,9 +63,9 @@ $searchbar-md-input-clear-icon-size:     22px !default;
 // -----------------------------------------
 
 .searchbar-md {
-  background: $searchbar-md-background-color;
-
   @include padding($searchbar-md-padding-top, $searchbar-md-padding-end, $searchbar-md-padding-bottom, $searchbar-md-padding-start);
+
+  background: $searchbar-md-background-color;
 }
 
 

packages/core/src/components/searchbar/searchbar.wp.scss

@@ -81,9 +81,9 @@ $searchbar-wp-input-clear-icon-size:     22px !default;
 // -----------------------------------------
 
 .searchbar-wp {
-  background: $searchbar-wp-background-color;
-
   @include padding($searchbar-wp-padding-top, $searchbar-wp-padding-end, $searchbar-wp-padding-bottom, $searchbar-wp-padding-start);
+
+  background: $searchbar-wp-background-color;
 }
 
 .searchbar-wp .searchbar-input-container {

packages/core/src/components/segment/segment.ios.scss

@@ -75,6 +75,7 @@ $segment-button-ios-toolbar-icon-line-height:   2.4rem !default;
 
 .segment-ios ion-segment-button {
   display: flex;
+
   flex: 1;
 
   width: 0;

packages/core/src/components/segment/segment.md.scss

@@ -55,10 +55,13 @@ $segment-button-md-icon-line-height:           $segment-button-md-line-height !d
 
 .segment-md ion-segment-button {
   display: flex;
+
   flex: 1;
 }
 
 .segment-md .segment-button {
+  @include padding($segment-button-md-padding-top, $segment-button-md-padding-end, $segment-button-md-padding-bottom, $segment-button-md-padding-start);
+
   flex: 1;
 
   width: 0;
@@ -78,8 +81,6 @@ $segment-button-md-icon-line-height:           $segment-button-md-line-height !d
   opacity: $segment-button-md-opacity;
   transition: 100ms all linear;
 
-  @include padding($segment-button-md-padding-top, $segment-button-md-padding-end, $segment-button-md-padding-bottom, $segment-button-md-padding-start);
-
   ion-icon {
     font-size: $segment-button-md-icon-size;
     line-height: $segment-button-md-icon-line-height;

packages/core/src/components/segment/segment.wp.scss

@@ -61,6 +61,8 @@ $segment-button-wp-buttons-justify-content:    flex-start !default;
 }
 
 .segment-wp .segment-button {
+  @include padding($segment-button-wp-padding-top, $segment-button-wp-padding-end, $segment-button-wp-padding-bottom, $segment-button-wp-padding-start);
+
   height: $segment-button-wp-height;
 
   font-size: $segment-button-wp-font-size;
@@ -73,8 +75,6 @@ $segment-button-wp-buttons-justify-content:    flex-start !default;
   background-color: $segment-button-wp-background-color;
   opacity: $segment-button-wp-opacity;
 
-  @include padding($segment-button-wp-padding-top, $segment-button-wp-padding-end, $segment-button-wp-padding-bottom, $segment-button-wp-padding-start);
-
   &.segment-activated {
     opacity: $segment-button-wp-opacity-activated;
   }

packages/core/src/components/select/select.md.scss

@@ -67,7 +67,7 @@ $select-md-placeholder-color:   $select-md-icon-color !default;
 }
 
 .select-popover-md .item-radio-checked {
-  background-color: #DCDCDC;
+  background-color: #dcdcdc;
 }
 
 .select-popover-md .item-radio-checked ion-label {

packages/core/src/components/skeleton-text/skeleton-text.scss

@@ -6,13 +6,16 @@
 
 ion-skeleton-text {
   display: inline-block;
+
   width: 100%;
+
   pointer-events: none;
   user-select: none;
 }
 
 ion-skeleton-text span {
   display: inline-block;
-  font-size: 0.8rem;
+
+  font-size: .8rem;
   background-color: #ececec;
 }

packages/core/src/components/tabs/tabs.ios.scss

@@ -57,13 +57,13 @@ $tabs-ios-tab-icon-size:            30px !default;
 }
 
 .tabs-ios .tab-button {
+  @include padding($tabs-ios-tab-padding-top, $tabs-ios-tab-padding-end, $tabs-ios-tab-padding-bottom, $tabs-ios-tab-padding-start);
+
   max-width: $tabs-ios-tab-max-width;
   min-height: $tabs-ios-tab-min-height;
 
   font-size: $tabs-ios-tab-font-size;
   color: $tabs-ios-tab-text-color;
-
-  @include padding($tabs-ios-tab-padding-top, $tabs-ios-tab-padding-end, $tabs-ios-tab-padding-bottom, $tabs-ios-tab-padding-start);
 }
 
 .tabs-ios .tab-button:hover:not(.disable-hover),

packages/core/src/components/tabs/tabs.md.scss

@@ -141,18 +141,18 @@ $tabs-md-tab-icon-size:                       2.4rem !default;
 // --------------------------------------------------
 
 .tabs-md .tab-button {
+  @include padding($tabs-md-tab-padding-top, $tabs-md-tab-padding-end, $tabs-md-tab-padding-bottom, $tabs-md-tab-padding-start);
+
   min-height: $tabs-md-tab-min-height;
 
   font-weight: $tabs-md-tab-font-weight;
   color: $tabs-md-tab-text-color;
-
-  @include padding($tabs-md-tab-padding-top, $tabs-md-tab-padding-end, $tabs-md-tab-padding-bottom, $tabs-md-tab-padding-start);
 }
 
 .tabs-md .tab-button[aria-selected=true] {
-  color: $tabs-md-tab-text-color-active;
-
   @include padding($tabs-md-tab-padding-active-top, $tabs-md-tab-padding-active-end, $tabs-md-tab-padding-active-bottom, $tabs-md-tab-padding-active-start);
+
+  color: $tabs-md-tab-text-color-active;
 }
 
 
@@ -160,14 +160,14 @@ $tabs-md-tab-icon-size:                       2.4rem !default;
 // --------------------------------------------------
 
 .tabs-md .tab-button-text {
+  @include margin($tabs-md-tab-text-margin-top, $tabs-md-tab-text-margin-end, $tabs-md-tab-text-margin-bottom, $tabs-md-tab-text-margin-start);
+
+  @include transform-origin($tabs-md-tab-text-transform-origin-x, $tabs-md-tab-text-transform-origin-y);
+
   font-size: $tabs-md-tab-font-size;
 
   text-transform: $tabs-md-tab-text-capitalization;
   transition: $tabs-md-tab-text-transition;
-
-  @include margin($tabs-md-tab-text-margin-top, $tabs-md-tab-text-margin-end, $tabs-md-tab-text-margin-bottom, $tabs-md-tab-text-margin-start);
-
-  @include transform-origin($tabs-md-tab-text-transform-origin-x, $tabs-md-tab-text-transform-origin-y);
 }
 
 .tabs-md .tab-button[aria-selected=true] .tab-button-text {
@@ -190,6 +190,8 @@ $tabs-md-tab-icon-size:                       2.4rem !default;
 .tabs-md .tab-button-icon {
   @include margin(1px, null, null, null);
 
+  @include transform-origin($tabs-md-tab-icon-transform-origin-x, $tabs-md-tab-icon-transform-origin-y);
+
   min-width: $tabs-md-tab-icon-size;
 
   font-size: $tabs-md-tab-icon-size;
@@ -197,15 +199,13 @@ $tabs-md-tab-icon-size:                       2.4rem !default;
   color: $tabs-md-tab-icon-color;
 
   transition: $tabs-md-tab-icon-transition;
-
-  @include transform-origin($tabs-md-tab-icon-transform-origin-x, $tabs-md-tab-icon-transform-origin-y);
 }
 
 // Tab layout: icon-top, icon-only, title-only
 .tabs-md .tab-button[aria-selected=true] .tab-button-icon {
-  color: $tabs-md-tab-icon-color-active;
-
   @include transform(translate3d($tabs-md-tab-icon-transform-x-active, $tabs-md-tab-icon-transform-y-active, $tabs-md-tab-icon-transform-z-active));
+
+  color: $tabs-md-tab-icon-color-active;
 }
 
 // Tab layout: icon-end

packages/core/src/components/tabs/tabs.wp.scss

@@ -61,6 +61,8 @@ $tabs-wp-tab-icon-size:                 2.4rem !default;
 .tabs-wp .tab-button {
   @include border-radius(0);
 
+  @include padding($tabs-wp-tab-padding-top, $tabs-wp-tab-padding-end, $tabs-wp-tab-padding-bottom, $tabs-wp-tab-padding-start);
+
   min-height: $tabs-wp-tab-min-height;
 
   border-bottom: $tabs-wp-tab-border;
@@ -68,8 +70,6 @@ $tabs-wp-tab-icon-size:                 2.4rem !default;
   font-weight: $tabs-wp-tab-font-weight;
   color: $tabs-wp-tab-color;
   box-shadow: none;
-
-  @include padding($tabs-wp-tab-padding-top, $tabs-wp-tab-padding-end, $tabs-wp-tab-padding-bottom, $tabs-wp-tab-padding-start);
 }
 
 .tabs-wp .tab-button[aria-selected=true] {

packages/core/src/components/title/title.wp.scss

@@ -31,12 +31,12 @@ $toolbar-wp-title-text-color:            color-contrast($colors-wp, $toolbar-wp-
 
 
 .toolbar-title-wp {
+  @include padding($toolbar-wp-title-padding-top, $toolbar-wp-title-padding-end, $toolbar-wp-title-padding-bottom, $toolbar-wp-title-padding-start);
+
   font-size: $toolbar-wp-title-font-size;
   font-weight: $toolbar-wp-title-font-weight;
   text-transform: $toolbar-wp-title-text-transform;
   color: $toolbar-wp-title-text-color;
-
-  @include padding($toolbar-wp-title-padding-top, $toolbar-wp-title-padding-end, $toolbar-wp-title-padding-bottom, $toolbar-wp-title-padding-start);
 }
 
 @each $color-name, $color-base, $color-contrast in get-colors($colors-wp) {

packages/core/src/components/toast/toast.ios.scss

@@ -61,9 +61,9 @@ $toast-ios-title-padding-start:                   $toast-ios-title-padding-end !
 }
 
 .toast-ios .toast-message {
+  @include padding($toast-ios-title-padding-top, $toast-ios-title-padding-end, $toast-ios-title-padding-bottom, $toast-ios-title-padding-start);
+
   font-size: $toast-ios-title-font-size;
 
   color: $toast-ios-title-color;
-
-  @include padding($toast-ios-title-padding-top, $toast-ios-title-padding-end, $toast-ios-title-padding-bottom, $toast-ios-title-padding-start);
 }

packages/core/src/components/toast/toast.md.scss

@@ -58,9 +58,9 @@ $toast-md-title-padding-start:                   $toast-md-title-padding-end !de
 }
 
 .toast-md .toast-message {
+  @include padding($toast-md-title-padding-top, $toast-md-title-padding-end, $toast-md-title-padding-bottom, $toast-md-title-padding-start);
+
   font-size: $toast-md-title-font-size;
 
   color: $toast-md-title-color;
-
-  @include padding($toast-md-title-padding-top, $toast-md-title-padding-end, $toast-md-title-padding-bottom, $toast-md-title-padding-start);
 }

packages/core/src/components/toast/toast.wp.scss

@@ -64,11 +64,11 @@ $toast-wp-title-padding-start:                   $toast-wp-title-padding-end !de
 }
 
 .toast-message {
+  @include padding($toast-wp-title-padding-top, $toast-wp-title-padding-end, $toast-wp-title-padding-bottom, $toast-wp-title-padding-start);
+
   font-size: $toast-wp-title-font-size;
 
   color: $toast-wp-title-color;
-
-  @include padding($toast-wp-title-padding-top, $toast-wp-title-padding-end, $toast-wp-title-padding-bottom, $toast-wp-title-padding-start);
 }
 
 .toast-button {

packages/core/src/components/toolbar/toolbar-button.scss

@@ -68,11 +68,11 @@
 ion-icon[slot="start"] {
   @include button-icon();
 
-  padding-right: .3em;
+  @include padding-horizontal(null, .3em);
 }
 
 ion-icon[slot="end"] {
   @include button-icon();
 
-  padding-left: .4em;
+  @include padding-horizontal(.4em, null);
 }