refactor(components): move sass values to variables

packages/core/src/components/badge/badge.scss

@@ -4,15 +4,16 @@
 // --------------------------------------------------
 
 ion-badge {
-  @include padding(3px, 8px);
+  @include padding($badge-ios-padding-top, $badge-ios-padding-end, $badge-ios-padding-bottom, $badge-ios-padding-start);
   @include text-align(center);
 
   display: inline-block;
 
-  min-width: 10px;
+  min-width: $badge-min-width;
 
   font-size: $badge-font-size;
   font-weight: $badge-font-weight;
+
   line-height: 1;
 
   white-space: nowrap;

packages/core/src/components/badge/badge.vars.scss

@@ -3,6 +3,21 @@
 // Badge
 // --------------------------------------------------
 
+/// @prop - Padding top of the badge
+$badge-ios-padding-top:           3px !default;
+
+/// @prop - Padding end of the badge
+$badge-ios-padding-end:           8px !default;
+
+/// @prop - Padding bottom of the badge
+$badge-ios-padding-bottom:        $badge-ios-padding-top !default;
+
+/// @prop - Padding start of the badge
+$badge-ios-padding-start:         $badge-ios-padding-end !default;
+
+/// @prop - Minimum width of the badge
+$badge-min-width:                 10px !default;
+
 /// @prop - Font size of the badge
 $badge-font-size:                 13px !default;
 

packages/core/src/components/datetime/datetime.ios.vars.scss

@@ -5,17 +5,17 @@
 // iOS Datetime
 // --------------------------------------------------
 
-/// @prop - Padding top of the Datetime component
+/// @prop - Padding top of the datetime
 $datetime-ios-padding-top:         $item-ios-padding-top !default;
 
-/// @prop - Padding end of the Datetime component
+/// @prop - Padding end of the datetime
 $datetime-ios-padding-end:         ($item-ios-padding-end / 2) !default;
 
-/// @prop - Padding bottom of the Datetime component
+/// @prop - Padding bottom of the datetime
 $datetime-ios-padding-bottom:      $item-ios-padding-bottom !default;
 
-/// @prop - Padding start of the Datetime component
+/// @prop - Padding start of the datetime
 $datetime-ios-padding-start:       $item-ios-padding-start !default;
 
-/// @prop - Color of the Datetime placeholder
+/// @prop - Color of the datetime placeholder
 $datetime-ios-placeholder-color:   #999 !default;

packages/core/src/components/datetime/datetime.md.vars.scss

@@ -5,17 +5,17 @@
 // Material Design Datetime
 // --------------------------------------------------
 
-/// @prop - Padding top of the Datetime component
+/// @prop - Padding top of the datetime
 $datetime-md-padding-top:         $item-md-padding-top !default;
 
-/// @prop - Padding end of the Datetime component
+/// @prop - Padding end of the datetime
 $datetime-md-padding-end:         ($item-md-padding-end / 2) !default;
 
-/// @prop - Padding bottom of the Datetime component
+/// @prop - Padding bottom of the datetime
 $datetime-md-padding-bottom:      $item-md-padding-bottom !default;
 
-/// @prop - Padding start of the Datetime component
+/// @prop - Padding start of the datetime
 $datetime-md-padding-start:       $item-md-padding-start !default;
 
-/// @prop - Color of the Datetime placeholder
+/// @prop - Color of the datetime placeholder
 $datetime-md-placeholder-color:   #999 !default;

packages/core/src/components/datetime/datetime.scss

@@ -1,4 +1,4 @@
-@import "../../themes/ionic.globals";
+@import "./datetime.vars";
 
 // Datetime
 // --------------------------------------------------
@@ -13,18 +13,18 @@ ion-datetime {
 
   flex: 1;
 
-  min-width: 16px;
-  min-height: 1.2em;
+  min-width: $datetime-text-min-width;
+  min-height: $datetime-text-min-height;
 
   font-size: inherit;
-  line-height: 1.2;
+  line-height: $datetime-text-line-height;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
 .datetime-disabled,
 .item-datetime-disabled ion-label {
-  opacity: .4;
+  opacity: $datetime-disabled-opacity;
 
   pointer-events: none;
 }

packages/core/src/components/datetime/datetime.vars.scss

@@ -0,0 +1,16 @@
+@import "../../themes/ionic.globals";
+
+// Datetime
+// --------------------------------------------------
+
+/// @prop - Minimum width of the datetime text
+$datetime-text-min-width:             16px !default;
+
+/// @prop - Minimum height of the datetime text
+$datetime-text-min-height:            1.2em !default;
+
+/// @prop - Line height of the datetime text
+$datetime-text-line-height:           1.2 !default;
+
+/// @prop - Opacity of the disabled datetime
+$datetime-disabled-opacity:           .4 !default;

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

@@ -1,4 +1,4 @@
-@import "../../themes/ionic.globals";
+@import "./item-divider.vars";
 
 
 // Item Divider
@@ -17,7 +17,7 @@ ion-item-divider {
 
   width: 100%;
 
-  min-height: 30px;
+  min-height: $item-divider-min-height;
 }
 
 ion-item-divider[sticky] {

packages/core/src/components/item-divider/item-divider.vars.scss

@@ -0,0 +1,8 @@
+@import "../../themes/ionic.globals";
+
+
+// Item Divider
+// --------------------------------------------------
+
+/// @prop - Minimum height for the divider
+$item-divider-min-height:        30px !default;

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

@@ -31,7 +31,7 @@ ion-toast {
 }
 
 .toast-button {
-  font-size: 15px;
+  font-size: $toast-button-font-size;
 }
 
 .toast-message {

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

@@ -8,3 +8,6 @@ $toast-width:                             100% !default;
 
 /// @prop - Max width of the toast
 $toast-max-width:                         700px !default;
+
+/// @prop - Font size of the toast button
+$toast-button-font-size:                  15px !default;