From 2cf3eb180c060e94d63549359d06e7b956fc234b Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Thu, 7 Dec 2017 18:38:06 -0500 Subject: [PATCH] refactor(components): move sass values to variables --- packages/core/src/components/badge/badge.scss | 5 +++-- .../core/src/components/badge/badge.vars.scss | 15 +++++++++++++++ .../components/datetime/datetime.ios.vars.scss | 10 +++++----- .../components/datetime/datetime.md.vars.scss | 10 +++++----- .../core/src/components/datetime/datetime.scss | 10 +++++----- .../src/components/datetime/datetime.vars.scss | 16 ++++++++++++++++ .../components/item-divider/item-divider.scss | 4 ++-- .../item-divider/item-divider.vars.scss | 8 ++++++++ packages/core/src/components/toast/toast.scss | 2 +- .../core/src/components/toast/toast.vars.scss | 3 +++ 10 files changed, 63 insertions(+), 20 deletions(-) create mode 100644 packages/core/src/components/datetime/datetime.vars.scss create mode 100644 packages/core/src/components/item-divider/item-divider.vars.scss diff --git a/packages/core/src/components/badge/badge.scss b/packages/core/src/components/badge/badge.scss index bda2bc26a9..11cf7a9919 100644 --- a/packages/core/src/components/badge/badge.scss +++ b/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; diff --git a/packages/core/src/components/badge/badge.vars.scss b/packages/core/src/components/badge/badge.vars.scss index d978b12282..88fa757b36 100644 --- a/packages/core/src/components/badge/badge.vars.scss +++ b/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; diff --git a/packages/core/src/components/datetime/datetime.ios.vars.scss b/packages/core/src/components/datetime/datetime.ios.vars.scss index dcdb07cfd0..93f21cec30 100644 --- a/packages/core/src/components/datetime/datetime.ios.vars.scss +++ b/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; diff --git a/packages/core/src/components/datetime/datetime.md.vars.scss b/packages/core/src/components/datetime/datetime.md.vars.scss index 9843de3f1c..5716392e2d 100644 --- a/packages/core/src/components/datetime/datetime.md.vars.scss +++ b/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; diff --git a/packages/core/src/components/datetime/datetime.scss b/packages/core/src/components/datetime/datetime.scss index 2bd06cc2a4..b1e2e9f0ae 100644 --- a/packages/core/src/components/datetime/datetime.scss +++ b/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; } diff --git a/packages/core/src/components/datetime/datetime.vars.scss b/packages/core/src/components/datetime/datetime.vars.scss new file mode 100644 index 0000000000..d23950ae31 --- /dev/null +++ b/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; \ No newline at end of file diff --git a/packages/core/src/components/item-divider/item-divider.scss b/packages/core/src/components/item-divider/item-divider.scss index 643b4766a4..0675cd7ffb 100644 --- a/packages/core/src/components/item-divider/item-divider.scss +++ b/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] { diff --git a/packages/core/src/components/item-divider/item-divider.vars.scss b/packages/core/src/components/item-divider/item-divider.vars.scss new file mode 100644 index 0000000000..40747d65ea --- /dev/null +++ b/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; diff --git a/packages/core/src/components/toast/toast.scss b/packages/core/src/components/toast/toast.scss index 33fea4c9a5..e107db6064 100644 --- a/packages/core/src/components/toast/toast.scss +++ b/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 { diff --git a/packages/core/src/components/toast/toast.vars.scss b/packages/core/src/components/toast/toast.vars.scss index c108470135..3b860bed7d 100644 --- a/packages/core/src/components/toast/toast.vars.scss +++ b/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;