From 66ae3a4601a6694e252fcf3ed9f6dc2398abf801 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandy@ionic.io>
Date: Thu, 21 Sep 2017 14:16:24 -0400
Subject: [PATCH] style(scss): fix lint errors

---
 .../action-sheet/action-sheet.ios.scss        | 23 ++++++++++-----
 .../action-sheet/action-sheet.md.scss         | 14 +++++-----
 .../components/action-sheet/action-sheet.scss |  2 +-
 .../action-sheet/action-sheet.wp.scss         | 13 +++++----
 .../core/src/components/alert/alert.ios.scss  | 24 ++++++++--------
 .../core/src/components/alert/alert.md.scss   | 27 +++++++++---------
 .../core/src/components/alert/alert.wp.scss   | 28 +++++++++----------
 packages/core/src/components/app/app.scss     |  2 +-
 .../src/components/button/button.ios.scss     | 16 +++++------
 .../core/src/components/button/button.md.scss | 16 +++++------
 .../core/src/components/button/button.wp.scss | 16 +++++------
 .../card-header/card-header.ios.scss          |  4 +--
 .../card-header/card-header.md.scss           |  4 +--
 .../card-header/card-header.wp.scss           |  4 +--
 .../components/card-title/card-title.ios.scss |  8 +++---
 .../components/card-title/card-title.md.scss  |  8 +++---
 .../components/card-title/card-title.wp.scss  |  8 +++---
 .../src/components/checkbox/checkbox.ios.scss |  6 ++--
 .../src/components/checkbox/checkbox.md.scss  |  6 ++--
 .../src/components/checkbox/checkbox.scss     |  2 +-
 .../src/components/checkbox/checkbox.wp.scss  |  6 ++--
 .../chip-button/chip-button.ios.scss          |  3 +-
 .../chip-button/chip-button.md.scss           |  2 +-
 .../components/chip-button/chip-button.scss   |  2 +-
 .../chip-button/chip-button.wp.scss           |  6 ++--
 .../core/src/components/chip/chip.ios.scss    |  7 +++--
 .../core/src/components/chip/chip.md.scss     | 10 ++++---
 .../core/src/components/chip/chip.wp.scss     | 10 ++++---
 .../core/src/components/content/content.scss  |  2 +-
 packages/core/src/components/fab/fab.scss     |  5 +++-
 .../core/src/components/input/input.wp.scss   |  4 +--
 .../item-divider/item-divider.md.scss         |  2 +-
 .../item-divider/item-divider.wp.scss         |  2 +-
 .../item-sliding/item-sliding.ios.scss        |  2 +-
 .../item-sliding/item-sliding.md.scss         |  2 +-
 .../components/item-sliding/item-sliding.scss |  3 +-
 .../item-sliding/item-sliding.wp.scss         |  2 +-
 .../core/src/components/item/item.ios.scss    |  5 ++--
 .../list-header/list-header.md.scss           |  2 +-
 .../components/list-header/list-header.scss   |  6 +++-
 .../list-header/list-header.wp.scss           |  2 +-
 .../src/components/loading/loading.ios.scss   |  4 +--
 .../src/components/loading/loading.md.scss    |  4 +--
 .../core/src/components/loading/loading.scss  |  5 ++--
 .../src/components/loading/loading.wp.scss    |  4 +--
 packages/core/src/components/modal/modal.scss | 19 ++++++-------
 packages/core/src/components/page/page.scss   |  6 ++--
 .../src/components/popover/popover.ios.scss   |  2 +-
 .../src/components/popover/popover.md.scss    |  2 +-
 .../core/src/components/popover/popover.scss  |  7 +++--
 .../src/components/popover/popover.wp.scss    |  3 +-
 .../core/src/components/radio/radio.ios.scss  |  6 ++--
 .../core/src/components/radio/radio.md.scss   |  6 ++--
 packages/core/src/components/radio/radio.scss |  2 +-
 packages/core/src/components/range/range.scss |  7 ++---
 .../components/searchbar/searchbar.ios.scss   |  3 +-
 .../components/searchbar/searchbar.md.scss    |  4 +--
 .../components/searchbar/searchbar.wp.scss    |  6 ++--
 .../src/components/segment/segment.ios.scss   |  3 +-
 .../src/components/segment/segment.md.scss    |  7 +++--
 .../core/src/components/segment/segment.scss  |  2 +-
 .../src/components/segment/segment.wp.scss    |  6 ++--
 .../core/src/components/select/select.md.scss |  4 +--
 .../core/src/components/select/select.scss    |  2 +-
 .../skeleton-text/skeleton-text.scss          |  7 +++--
 .../core/src/components/tabs/tabs.ios.scss    |  4 +--
 .../core/src/components/tabs/tabs.md.scss     | 24 ++++++++--------
 .../core/src/components/tabs/tabs.wp.scss     |  4 +--
 .../core/src/components/title/title.wp.scss   |  4 +--
 .../core/src/components/toast/toast.ios.scss  |  4 +--
 .../core/src/components/toast/toast.md.scss   |  4 +--
 .../core/src/components/toast/toast.wp.scss   |  4 +--
 .../components/toolbar/toolbar-button.scss    |  6 ++--
 .../src/components/toolbar/toolbar.ios.scss   |  2 +-
 .../src/components/toolbar/toolbar.md.scss    |  2 +-
 .../src/components/toolbar/toolbar.wp.scss    |  2 +-
 76 files changed, 262 insertions(+), 235 deletions(-)

diff --git a/packages/core/src/components/action-sheet/action-sheet.ios.scss b/packages/core/src/components/action-sheet/action-sheet.ios.scss
index 1569bc314a..a07294f9c6 100644
--- a/packages/core/src/components/action-sheet/action-sheet.ios.scss
+++ b/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;
-  font-size: $action-sheet-ios-button-icon-font-size;
-  padding-right: $action-sheet-ios-button-icon-padding-right;
+  @include margin($action-sheet-ios-button-icon-margin-top, null, null, null);
+
+  @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 {
diff --git a/packages/core/src/components/action-sheet/action-sheet.md.scss b/packages/core/src/components/action-sheet/action-sheet.md.scss
index cda483a729..f3c3960c89 100644
--- a/packages/core/src/components/action-sheet/action-sheet.md.scss
+++ b/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 {
diff --git a/packages/core/src/components/action-sheet/action-sheet.scss b/packages/core/src/components/action-sheet/action-sheet.scss
index f83aa05106..e1993583cd 100644
--- a/packages/core/src/components/action-sheet/action-sheet.scss
+++ b/packages/core/src/components/action-sheet/action-sheet.scss
@@ -39,4 +39,4 @@ ion-action-sheet {
 
 ion-action-sheet-controller {
   display: none;
-}
\ No newline at end of file
+}
diff --git a/packages/core/src/components/action-sheet/action-sheet.wp.scss b/packages/core/src/components/action-sheet/action-sheet.wp.scss
index 6a95be7a1b..7f4474aebe 100644
--- a/packages/core/src/components/action-sheet/action-sheet.wp.scss
+++ b/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 {
diff --git a/packages/core/src/components/alert/alert.ios.scss b/packages/core/src/components/alert/alert.ios.scss
index 898c53c12c..c6e82b55f4 100644
--- a/packages/core/src/components/alert/alert.ios.scss
+++ b/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);
 }
 
 
diff --git a/packages/core/src/components/alert/alert.md.scss b/packages/core/src/components/alert/alert.md.scss
index d79d81bc88..15b468c02e 100644
--- a/packages/core/src/components/alert/alert.md.scss
+++ b/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 {
diff --git a/packages/core/src/components/alert/alert.wp.scss b/packages/core/src/components/alert/alert.wp.scss
index 63116daf7e..98b98b367a 100644
--- a/packages/core/src/components/alert/alert.wp.scss
+++ b/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) {
diff --git a/packages/core/src/components/app/app.scss b/packages/core/src/components/app/app.scss
index ac715823e3..9bd1e74e42 100644
--- a/packages/core/src/components/app/app.scss
+++ b/packages/core/src/components/app/app.scss
@@ -425,4 +425,4 @@ ion-footer {
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/packages/core/src/components/button/button.ios.scss b/packages/core/src/components/button/button.ios.scss
index 0c2c0df551..cb06ef7de1 100644
--- a/packages/core/src/components/button/button.ios.scss
+++ b/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"] {
diff --git a/packages/core/src/components/button/button.md.scss b/packages/core/src/components/button/button.md.scss
index 8a6ed779ab..50ddde0863 100644
--- a/packages/core/src/components/button/button.md.scss
+++ b/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"] {
diff --git a/packages/core/src/components/button/button.wp.scss b/packages/core/src/components/button/button.wp.scss
index 0c40113b43..81a434c8ee 100644
--- a/packages/core/src/components/button/button.wp.scss
+++ b/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"] {
diff --git a/packages/core/src/components/card-header/card-header.ios.scss b/packages/core/src/components/card-header/card-header.ios.scss
index 3fbb5d090d..2672d68ace 100644
--- a/packages/core/src/components/card-header/card-header.ios.scss
+++ b/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);
 }
 
 
diff --git a/packages/core/src/components/card-header/card-header.md.scss b/packages/core/src/components/card-header/card-header.md.scss
index 05eb87af42..75a6f6f52c 100644
--- a/packages/core/src/components/card-header/card-header.md.scss
+++ b/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);
 }
 
 
diff --git a/packages/core/src/components/card-header/card-header.wp.scss b/packages/core/src/components/card-header/card-header.wp.scss
index 16575ebaf0..9456bf53b3 100644
--- a/packages/core/src/components/card-header/card-header.wp.scss
+++ b/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);
 }
 
 
diff --git a/packages/core/src/components/card-title/card-title.ios.scss b/packages/core/src/components/card-title/card-title.ios.scss
index dbce9d74c2..418f569930 100644
--- a/packages/core/src/components/card-title/card-title.ios.scss
+++ b/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);
 }
 
 
diff --git a/packages/core/src/components/card-title/card-title.md.scss b/packages/core/src/components/card-title/card-title.md.scss
index c53ff6253e..7630bc9d99 100644
--- a/packages/core/src/components/card-title/card-title.md.scss
+++ b/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);
 }
 
 
diff --git a/packages/core/src/components/card-title/card-title.wp.scss b/packages/core/src/components/card-title/card-title.wp.scss
index 1542a649e1..77c4df392d 100644
--- a/packages/core/src/components/card-title/card-title.wp.scss
+++ b/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);
 }
 
 
diff --git a/packages/core/src/components/checkbox/checkbox.ios.scss b/packages/core/src/components/checkbox/checkbox.ios.scss
index b835e3467e..8ff04187b4 100644
--- a/packages/core/src/components/checkbox/checkbox.ios.scss
+++ b/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);
 }
 
diff --git a/packages/core/src/components/checkbox/checkbox.md.scss b/packages/core/src/components/checkbox/checkbox.md.scss
index cf67fef533..6e85fb250a 100644
--- a/packages/core/src/components/checkbox/checkbox.md.scss
+++ b/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);
 }
 
diff --git a/packages/core/src/components/checkbox/checkbox.scss b/packages/core/src/components/checkbox/checkbox.scss
index 84b0ceb33a..5f377baa4b 100644
--- a/packages/core/src/components/checkbox/checkbox.scss
+++ b/packages/core/src/components/checkbox/checkbox.scss
@@ -19,4 +19,4 @@ ion-checkbox {
 
   background: transparent;
   cursor: pointer;
-}
\ No newline at end of file
+}
diff --git a/packages/core/src/components/checkbox/checkbox.wp.scss b/packages/core/src/components/checkbox/checkbox.wp.scss
index 18667a6ce7..a9fe3e61b7 100644
--- a/packages/core/src/components/checkbox/checkbox.wp.scss
+++ b/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);
 }
 
diff --git a/packages/core/src/components/chip-button/chip-button.ios.scss b/packages/core/src/components/chip-button/chip-button.ios.scss
index ce3b7afe70..b18ec04edb 100644
--- a/packages/core/src/components/chip-button/chip-button.ios.scss
+++ b/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;
     }
   }
-
 }
diff --git a/packages/core/src/components/chip-button/chip-button.md.scss b/packages/core/src/components/chip-button/chip-button.md.scss
index 1a32857e06..27d9d7e937 100644
--- a/packages/core/src/components/chip-button/chip-button.md.scss
+++ b/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 {
diff --git a/packages/core/src/components/chip-button/chip-button.scss b/packages/core/src/components/chip-button/chip-button.scss
index 2ce2dd15ed..df5f8e647e 100644
--- a/packages/core/src/components/chip-button/chip-button.scss
+++ b/packages/core/src/components/chip-button/chip-button.scss
@@ -28,4 +28,4 @@ $chip-button-size:              32px !default;
 
   width: $chip-button-size;
   height: $chip-button-size;
-}
\ No newline at end of file
+}
diff --git a/packages/core/src/components/chip-button/chip-button.wp.scss b/packages/core/src/components/chip-button/chip-button.wp.scss
index 75e76a12b8..7baf2c643a 100644
--- a/packages/core/src/components/chip-button/chip-button.wp.scss
+++ b/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;
     }
   }
-
-
-}
\ No newline at end of file
+}
diff --git a/packages/core/src/components/chip/chip.ios.scss b/packages/core/src/components/chip/chip.ios.scss
index dbdd643551..f1743e64a7 100644
--- a/packages/core/src/components/chip/chip.ios.scss
+++ b/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;
   }
 
 }
diff --git a/packages/core/src/components/chip/chip.md.scss b/packages/core/src/components/chip/chip.md.scss
index 27973714f6..4c5ffaaccc 100644
--- a/packages/core/src/components/chip/chip.md.scss
+++ b/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;
   }
 
 }
diff --git a/packages/core/src/components/chip/chip.wp.scss b/packages/core/src/components/chip/chip.wp.scss
index 90dc15b404..29563c2583 100644
--- a/packages/core/src/components/chip/chip.wp.scss
+++ b/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;
   }
 
 }
diff --git a/packages/core/src/components/content/content.scss b/packages/core/src/components/content/content.scss
index 336a77f1d5..7f45cb8079 100644
--- a/packages/core/src/components/content/content.scss
+++ b/packages/core/src/components/content/content.scss
@@ -164,4 +164,4 @@ ion-app [no-margin] ion-scroll {
   .app-#{$mode} [margin-horizontal] ion-scroll {
     @include margin-horizontal($content-margin);
   }
-}
\ No newline at end of file
+}
diff --git a/packages/core/src/components/fab/fab.scss b/packages/core/src/components/fab/fab.scss
index 0628171742..00a00a7355 100755
--- a/packages/core/src/components/fab/fab.scss
+++ b/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%;
 }
 
 
diff --git a/packages/core/src/components/input/input.wp.scss b/packages/core/src/components/input/input.wp.scss
index 8818c657b8..f19c012ea2 100644
--- a/packages/core/src/components/input/input.wp.scss
+++ b/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-floating [item-end] {
+.item-wp.item-label-stacked [slot="end"],
+.item-wp.item-label-floating [slot="end"] {
   align-self: flex-end;
 }
 
diff --git a/packages/core/src/components/item-divider/item-divider.md.scss b/packages/core/src/components/item-divider/item-divider.md.scss
index c56f3871e7..8d2947f330 100644
--- a/packages/core/src/components/item-divider/item-divider.md.scss
+++ b/packages/core/src/components/item-divider/item-divider.md.scss
@@ -50,4 +50,4 @@ $item-md-divider-padding-start:      $item-md-padding-start !default;
       background-color: color-shade($color-base);
     }
   }
-}
\ No newline at end of file
+}
diff --git a/packages/core/src/components/item-divider/item-divider.wp.scss b/packages/core/src/components/item-divider/item-divider.wp.scss
index 41ec27e524..512cbc08b4 100644
--- a/packages/core/src/components/item-divider/item-divider.wp.scss
+++ b/packages/core/src/components/item-divider/item-divider.wp.scss
@@ -50,4 +50,4 @@ $item-wp-divider-padding-start:      $item-wp-padding-start !default;
       background-color: color-shade($color-base);
     }
   }
-}
\ No newline at end of file
+}
diff --git a/packages/core/src/components/item-sliding/item-sliding.ios.scss b/packages/core/src/components/item-sliding/item-sliding.ios.scss
index 4a64b94d60..eafcaef801 100644
--- a/packages/core/src/components/item-sliding/item-sliding.ios.scss
+++ b/packages/core/src/components/item-sliding/item-sliding.ios.scss
@@ -62,4 +62,4 @@ $item-ios-sliding-button-icon-color:         color-contrast($colors-ios, $item-i
     fill: $color-contrast;
   }
 
-}
\ No newline at end of file
+}
diff --git a/packages/core/src/components/item-sliding/item-sliding.md.scss b/packages/core/src/components/item-sliding/item-sliding.md.scss
index 2571d45b84..147f85a0ed 100644
--- a/packages/core/src/components/item-sliding/item-sliding.md.scss
+++ b/packages/core/src/components/item-sliding/item-sliding.md.scss
@@ -61,4 +61,4 @@ $item-md-sliding-button-icon-color:          color-contrast($colors-md, $item-md
     fill: $color-contrast;
   }
 
-}
\ No newline at end of file
+}
diff --git a/packages/core/src/components/item-sliding/item-sliding.scss b/packages/core/src/components/item-sliding/item-sliding.scss
index 975e2cfd86..618975587e 100644
--- a/packages/core/src/components/item-sliding/item-sliding.scss
+++ b/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;
diff --git a/packages/core/src/components/item-sliding/item-sliding.wp.scss b/packages/core/src/components/item-sliding/item-sliding.wp.scss
index 587a14963f..2aacca95fe 100644
--- a/packages/core/src/components/item-sliding/item-sliding.wp.scss
+++ b/packages/core/src/components/item-sliding/item-sliding.wp.scss
@@ -61,4 +61,4 @@ $item-wp-sliding-button-icon-color:          color-contrast($colors-wp, $item-wp
     fill: $color-contrast;
   }
 
-}
\ No newline at end of file
+}
diff --git a/packages/core/src/components/item/item.ios.scss b/packages/core/src/components/item/item.ios.scss
index 7cb42a366e..1e71e9b879 100644
--- a/packages/core/src/components/item/item.ios.scss
+++ b/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 {
     }
   }
 }
-
diff --git a/packages/core/src/components/list-header/list-header.md.scss b/packages/core/src/components/list-header/list-header.md.scss
index 89c20bffec..e79862bff8 100644
--- a/packages/core/src/components/list-header/list-header.md.scss
+++ b/packages/core/src/components/list-header/list-header.md.scss
@@ -43,4 +43,4 @@ $list-md-header-color:           #757575 !default;
     color: $color-contrast;
     background-color: $color-base;
   }
-}
\ No newline at end of file
+}
diff --git a/packages/core/src/components/list-header/list-header.scss b/packages/core/src/components/list-header/list-header.scss
index ca1e8621ca..48d6d94b1d 100644
--- a/packages/core/src/components/list-header/list-header.scss
+++ b/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;
-}
\ No newline at end of file
+}
diff --git a/packages/core/src/components/list-header/list-header.wp.scss b/packages/core/src/components/list-header/list-header.wp.scss
index 71fefb7e4c..ca70876668 100644
--- a/packages/core/src/components/list-header/list-header.wp.scss
+++ b/packages/core/src/components/list-header/list-header.wp.scss
@@ -34,4 +34,4 @@ $list-wp-header-color:           $list-wp-text-color !default;
     color: $color-contrast;
     background-color: $color-base;
   }
-}
\ No newline at end of file
+}
diff --git a/packages/core/src/components/loading/loading.ios.scss b/packages/core/src/components/loading/loading.ios.scss
index 19693c6e38..1328e36a61 100644
--- a/packages/core/src/components/loading/loading.ios.scss
+++ b/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);
 }
 
 
diff --git a/packages/core/src/components/loading/loading.md.scss b/packages/core/src/components/loading/loading.md.scss
index 7c4677e5ef..993df8b61a 100644
--- a/packages/core/src/components/loading/loading.md.scss
+++ b/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);
 }
 
 
diff --git a/packages/core/src/components/loading/loading.scss b/packages/core/src/components/loading/loading.scss
index e8522bb07a..12c4b946cb 100644
--- a/packages/core/src/components/loading/loading.scss
+++ b/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;
 
diff --git a/packages/core/src/components/loading/loading.wp.scss b/packages/core/src/components/loading/loading.wp.scss
index b8cdcaa7b0..61841f254b 100644
--- a/packages/core/src/components/loading/loading.wp.scss
+++ b/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);
 }
 
 
diff --git a/packages/core/src/components/modal/modal.scss b/packages/core/src/components/modal/modal.scss
index 0d5c7f1491..9dcf3a357c 100644
--- a/packages/core/src/components/modal/modal.scss
+++ b/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;
 
diff --git a/packages/core/src/components/page/page.scss b/packages/core/src/components/page/page.scss
index 999e2544bf..c337a22d51 100644
--- a/packages/core/src/components/page/page.scss
+++ b/packages/core/src/components/page/page.scss
@@ -13,13 +13,13 @@ 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 {
   // show the page now that it's ready
   opacity: 1;
-}
\ No newline at end of file
+}
diff --git a/packages/core/src/components/popover/popover.ios.scss b/packages/core/src/components/popover/popover.ios.scss
index 5e07da496f..fa58051ba2 100644
--- a/packages/core/src/components/popover/popover.ios.scss
+++ b/packages/core/src/components/popover/popover.ios.scss
@@ -78,4 +78,4 @@ $popover-ios-arrow-background:          $popover-ios-background !default;
 
 .popover-ios.popover-bottom .popover-arrow::after {
   top: -6px;
-}
\ No newline at end of file
+}
diff --git a/packages/core/src/components/popover/popover.md.scss b/packages/core/src/components/popover/popover.md.scss
index bd527957da..05ca1db0e8 100644
--- a/packages/core/src/components/popover/popover.md.scss
+++ b/packages/core/src/components/popover/popover.md.scss
@@ -49,4 +49,4 @@ $popover-md-box-shadow:                0 3px 12px 2px $popover-md-box-shadow-col
 .popover-md .popover-viewport {
   // opacity: 0;
   transition-delay: 100ms;
-}
\ No newline at end of file
+}
diff --git a/packages/core/src/components/popover/popover.scss b/packages/core/src/components/popover/popover.scss
index 5c2519cb1e..e0cb2969c6 100644
--- a/packages/core/src/components/popover/popover.scss
+++ b/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;
 
@@ -71,4 +72,4 @@ ion-popover-controller {
 
 .popover-backdrop.backdrop-no-tappable {
   cursor: auto;
-}
\ No newline at end of file
+}
diff --git a/packages/core/src/components/popover/popover.wp.scss b/packages/core/src/components/popover/popover.wp.scss
index a97663e696..f364bee679 100644
--- a/packages/core/src/components/popover/popover.wp.scss
+++ b/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;
-}
\ No newline at end of file
+}
diff --git a/packages/core/src/components/radio/radio.ios.scss b/packages/core/src/components/radio/radio.ios.scss
index f9f16f31f9..6536f37a57 100644
--- a/packages/core/src/components/radio/radio.ios.scss
+++ b/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);
-
-  &[item-start] {
+  &[slot="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);
   }
 }
diff --git a/packages/core/src/components/radio/radio.md.scss b/packages/core/src/components/radio/radio.md.scss
index 6daaee76b4..021092bf33 100644
--- a/packages/core/src/components/radio/radio.md.scss
+++ b/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);
-
-  &[item-start] {
+  &[slot="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);
   }
 }
diff --git a/packages/core/src/components/radio/radio.scss b/packages/core/src/components/radio/radio.scss
index c359b47752..e434802a29 100644
--- a/packages/core/src/components/radio/radio.scss
+++ b/packages/core/src/components/radio/radio.scss
@@ -19,4 +19,4 @@ ion-radio {
 
   background: transparent;
   cursor: pointer;
-}
\ No newline at end of file
+}
diff --git a/packages/core/src/components/range/range.scss b/packages/core/src/components/range/range.scss
index cd13f04164..9fbd57bd5d 100644
--- a/packages/core/src/components/range/range.scss
+++ b/packages/core/src/components/range/range.scss
@@ -37,11 +37,10 @@ ion-range {
   }
 
   ion-icon {
-  min-height: 2.4rem;
-
-  font-size: 2.4rem;
-  line-height: 1;
+    min-height: 2.4rem;
 
+    font-size: 2.4rem;
+    line-height: 1;
   }
 
   ion-gesture,
diff --git a/packages/core/src/components/searchbar/searchbar.ios.scss b/packages/core/src/components/searchbar/searchbar.ios.scss
index bb36eb8a0f..2273433fc3 100644
--- a/packages/core/src/components/searchbar/searchbar.ios.scss
+++ b/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);
 }
 
@@ -266,4 +267,4 @@ $searchbar-ios-toolbar-input-background:  rgba(0, 0, 0, .08) !default;
   transition: $searchbar-ios-cancel-transition;
 
   pointer-events: none;
-}
\ No newline at end of file
+}
diff --git a/packages/core/src/components/searchbar/searchbar.md.scss b/packages/core/src/components/searchbar/searchbar.md.scss
index 2672d2ae08..564b603713 100644
--- a/packages/core/src/components/searchbar/searchbar.md.scss
+++ b/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;
 }
 
 
diff --git a/packages/core/src/components/searchbar/searchbar.wp.scss b/packages/core/src/components/searchbar/searchbar.wp.scss
index b2beb84ece..6798e853da 100644
--- a/packages/core/src/components/searchbar/searchbar.wp.scss
+++ b/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 {
@@ -203,4 +203,4 @@ $searchbar-wp-input-clear-icon-size:     22px !default;
     border-color: $color-base;
   }
 
-}
\ No newline at end of file
+}
diff --git a/packages/core/src/components/segment/segment.ios.scss b/packages/core/src/components/segment/segment.ios.scss
index 7819dc5474..f72a04dcd9 100644
--- a/packages/core/src/components/segment/segment.ios.scss
+++ b/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;
@@ -228,4 +229,4 @@ $segment-button-ios-toolbar-icon-line-height:   2.4rem !default;
   .toolbar-ios-#{$color-name} .segment-ios .segment-button.segment-activated {
     color: $color-base;
   }
-}
\ No newline at end of file
+}
diff --git a/packages/core/src/components/segment/segment.md.scss b/packages/core/src/components/segment/segment.md.scss
index f39b8aa9db..0d4179760a 100644
--- a/packages/core/src/components/segment/segment.md.scss
+++ b/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;
@@ -137,4 +138,4 @@ $segment-button-md-icon-line-height:           $segment-button-md-line-height !d
 
 @each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
   @include md-segment-button($color-name, $color-base, $color-contrast);
-}
\ No newline at end of file
+}
diff --git a/packages/core/src/components/segment/segment.scss b/packages/core/src/components/segment/segment.scss
index 7303cafe26..2eb7452ad6 100644
--- a/packages/core/src/components/segment/segment.scss
+++ b/packages/core/src/components/segment/segment.scss
@@ -25,4 +25,4 @@ ion-segment {
   text-overflow: ellipsis;
   white-space: nowrap;
   cursor: pointer;
-}
\ No newline at end of file
+}
diff --git a/packages/core/src/components/segment/segment.wp.scss b/packages/core/src/components/segment/segment.wp.scss
index 24ae3cddef..7187ab7bed 100644
--- a/packages/core/src/components/segment/segment.wp.scss
+++ b/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;
   }
@@ -125,4 +125,4 @@ $segment-button-wp-buttons-justify-content:    flex-start !default;
 
 @each $color-name, $color-base, $color-contrast in get-colors($colors-wp) {
   @include wp-segment-button($color-name, $color-base);
-}
\ No newline at end of file
+}
diff --git a/packages/core/src/components/select/select.md.scss b/packages/core/src/components/select/select.md.scss
index 7b9cf7398b..e2fceaaf7d 100644
--- a/packages/core/src/components/select/select.md.scss
+++ b/packages/core/src/components/select/select.md.scss
@@ -67,9 +67,9 @@ $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 {
   color: initial;
-}
\ No newline at end of file
+}
diff --git a/packages/core/src/components/select/select.scss b/packages/core/src/components/select/select.scss
index c85951c86b..55db4824ec 100644
--- a/packages/core/src/components/select/select.scss
+++ b/packages/core/src/components/select/select.scss
@@ -55,4 +55,4 @@ ion-select {
 // TODO remove
 .select-option {
   display: none;
-}
\ No newline at end of file
+}
diff --git a/packages/core/src/components/skeleton-text/skeleton-text.scss b/packages/core/src/components/skeleton-text/skeleton-text.scss
index e31e421c74..a43faa556e 100644
--- a/packages/core/src/components/skeleton-text/skeleton-text.scss
+++ b/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;
-}
\ No newline at end of file
+}
diff --git a/packages/core/src/components/tabs/tabs.ios.scss b/packages/core/src/components/tabs/tabs.ios.scss
index a5ca8e4991..115e6d1f1d 100644
--- a/packages/core/src/components/tabs/tabs.ios.scss
+++ b/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),
diff --git a/packages/core/src/components/tabs/tabs.md.scss b/packages/core/src/components/tabs/tabs.md.scss
index bc7e20211e..82c66e01d9 100644
--- a/packages/core/src/components/tabs/tabs.md.scss
+++ b/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
diff --git a/packages/core/src/components/tabs/tabs.wp.scss b/packages/core/src/components/tabs/tabs.wp.scss
index ea9cf12b0a..655843fe1a 100644
--- a/packages/core/src/components/tabs/tabs.wp.scss
+++ b/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] {
diff --git a/packages/core/src/components/title/title.wp.scss b/packages/core/src/components/title/title.wp.scss
index d05dbb1117..5676cbdb7f 100644
--- a/packages/core/src/components/title/title.wp.scss
+++ b/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) {
diff --git a/packages/core/src/components/toast/toast.ios.scss b/packages/core/src/components/toast/toast.ios.scss
index 240daecace..ae8a0f2153 100644
--- a/packages/core/src/components/toast/toast.ios.scss
+++ b/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);
 }
diff --git a/packages/core/src/components/toast/toast.md.scss b/packages/core/src/components/toast/toast.md.scss
index 8bfab6221c..4626d5b703 100644
--- a/packages/core/src/components/toast/toast.md.scss
+++ b/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);
 }
diff --git a/packages/core/src/components/toast/toast.wp.scss b/packages/core/src/components/toast/toast.wp.scss
index 9b438244f2..8f47dead51 100644
--- a/packages/core/src/components/toast/toast.wp.scss
+++ b/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 {
diff --git a/packages/core/src/components/toolbar/toolbar-button.scss b/packages/core/src/components/toolbar/toolbar-button.scss
index c116979ebb..51680db1ee 100644
--- a/packages/core/src/components/toolbar/toolbar-button.scss
+++ b/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;
-}
\ No newline at end of file
+  @include padding-horizontal(.4em, null);
+}
diff --git a/packages/core/src/components/toolbar/toolbar.ios.scss b/packages/core/src/components/toolbar/toolbar.ios.scss
index c7c6050b03..78a42e65be 100644
--- a/packages/core/src/components/toolbar/toolbar.ios.scss
+++ b/packages/core/src/components/toolbar/toolbar.ios.scss
@@ -342,4 +342,4 @@ $navbar-ios-height:                         $toolbar-ios-height !default;
 
 .bar-button-strong-ios {
   font-weight: $toolbar-ios-button-strong-font-weight;
-}
\ No newline at end of file
+}
diff --git a/packages/core/src/components/toolbar/toolbar.md.scss b/packages/core/src/components/toolbar/toolbar.md.scss
index d0d8cbd461..435255ee84 100644
--- a/packages/core/src/components/toolbar/toolbar.md.scss
+++ b/packages/core/src/components/toolbar/toolbar.md.scss
@@ -380,4 +380,4 @@ $navbar-md-height:                       $toolbar-md-height !default;
 
 .bar-button-strong-md {
   font-weight: $toolbar-md-button-strong-font-weight;
-}
\ No newline at end of file
+}
diff --git a/packages/core/src/components/toolbar/toolbar.wp.scss b/packages/core/src/components/toolbar/toolbar.wp.scss
index a7966c479a..059dee8af4 100644
--- a/packages/core/src/components/toolbar/toolbar.wp.scss
+++ b/packages/core/src/components/toolbar/toolbar.wp.scss
@@ -325,4 +325,4 @@ $navbar-wp-height:                       $toolbar-wp-height !default;
 
 .bar-button-strong-wp {
   font-weight: $toolbar-wp-button-strong-font-weight;
-}
\ No newline at end of file
+}