From 6d2118f0499e67997b0d8493d6012c4be8d28a08 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Tue, 23 May 2017 14:01:06 -0400 Subject: [PATCH] chore(ionic): update to latest ionic master css for the web components --- src/components/badge/badge.ios.scss | 3 +- src/components/badge/badge.md.scss | 4 +- src/components/badge/badge.scss | 8 +- src/components/badge/badge.wp.scss | 4 +- .../card-content/card-content.ios.scss | 21 ++-- .../card-content/card-content.md.scss | 10 +- .../card-content/card-content.wp.scss | 11 ++- .../card-header/card-header.ios.scss | 22 ++++- .../card-header/card-header.md.scss | 22 ++++- .../card-header/card-header.wp.scss | 22 ++++- src/components/card-title/card-title.ios.scss | 43 +++++++-- src/components/card-title/card-title.md.scss | 43 +++++++-- src/components/card-title/card-title.wp.scss | 43 +++++++-- src/components/card/card.ios.scss | 27 +++--- src/components/card/card.md.scss | 22 +++-- src/components/card/card.wp.scss | 22 +++-- src/components/toggle/toggle.ios.scss | 65 +++++++++---- src/components/toggle/toggle.md.scss | 95 +++++++++++++++---- src/components/toggle/toggle.scss | 11 ++- src/components/toggle/toggle.wp.scss | 53 ++++++++--- 20 files changed, 412 insertions(+), 139 deletions(-) diff --git a/src/components/badge/badge.ios.scss b/src/components/badge/badge.ios.scss index bcc0ebf8ce..7e9a22b45e 100644 --- a/src/components/badge/badge.ios.scss +++ b/src/components/badge/badge.ios.scss @@ -16,7 +16,8 @@ $badge-ios-text-color: color-contrast($colors-ios, $badge-ios-background .badge-ios { - border-radius: $badge-ios-border-radius; + @include border-radius($badge-ios-border-radius); + color: $badge-ios-text-color; background-color: $badge-ios-background-color; } diff --git a/src/components/badge/badge.md.scss b/src/components/badge/badge.md.scss index ac9680a815..49bb3d5eee 100644 --- a/src/components/badge/badge.md.scss +++ b/src/components/badge/badge.md.scss @@ -16,7 +16,8 @@ $badge-md-text-color: color-contrast($colors-md, $badge-md-backgro .badge-md { - border-radius: $badge-md-border-radius; + @include border-radius($badge-md-border-radius); + color: $badge-md-text-color; background-color: $badge-md-background-color; } @@ -33,3 +34,4 @@ $badge-md-text-color: color-contrast($colors-md, $badge-md-backgro } } + diff --git a/src/components/badge/badge.scss b/src/components/badge/badge.scss index 12dc374b2d..7d112db4cb 100644 --- a/src/components/badge/badge.scss +++ b/src/components/badge/badge.scss @@ -12,9 +12,10 @@ $badge-font-weight: bold !default; ion-badge { - display: inline-block; + @include padding(3px, 8px); + @include text-align(center); - padding: 3px 8px; + display: inline-block; min-width: 10px; @@ -22,7 +23,6 @@ ion-badge { font-weight: $badge-font-weight; line-height: 1; - text-align: center; white-space: nowrap; vertical-align: baseline; @@ -35,4 +35,4 @@ ion-badge.upgraded { ion-badge:empty { display: none; -} \ No newline at end of file +} diff --git a/src/components/badge/badge.wp.scss b/src/components/badge/badge.wp.scss index b860dc5a87..77e77c7823 100644 --- a/src/components/badge/badge.wp.scss +++ b/src/components/badge/badge.wp.scss @@ -16,7 +16,8 @@ $badge-wp-text-color: color-contrast($colors-wp, $badge-wp-backgro .badge-wp { - border-radius: $badge-wp-border-radius; + @include border-radius($badge-wp-border-radius); + color: $badge-wp-text-color; background-color: $badge-wp-background-color; } @@ -33,3 +34,4 @@ $badge-wp-text-color: color-contrast($colors-wp, $badge-wp-backgro } } + diff --git a/src/components/card-content/card-content.ios.scss b/src/components/card-content/card-content.ios.scss index 6b1f921a09..01f5cacbae 100644 --- a/src/components/card-content/card-content.ios.scss +++ b/src/components/card-content/card-content.ios.scss @@ -5,29 +5,38 @@ // iOS Card Header // -------------------------------------------------- -/// @prop - Font size of the card -$card-ios-font-size: 1.4rem !default; - /// @prop - Padding top of the card $card-ios-padding-top: 13px !default; -/// @prop - Padding right of the card +// deprecated $card-ios-padding-right: 16px !default; +/// @prop - Padding end of the card +$card-ios-padding-end: $card-ios-padding-right; /// @prop - Padding bottom of the card $card-ios-padding-bottom: 14px !default; -/// @prop - Padding left of the card +// deprecated $card-ios-padding-left: 16px !default; +/// @prop - Padding start of the card +$card-ios-padding-start: $card-ios-padding-left; + +/// @prop - Font size of the card +$card-ios-font-size: 1.4rem !default; .card-content-ios { - padding: $card-ios-padding-top $card-ios-padding-right $card-ios-padding-bottom $card-ios-padding-left; + @include padding($card-ios-padding-top, $card-ios-padding-end, $card-ios-padding-bottom, $card-ios-padding-start); font-size: $card-ios-font-size; line-height: 1.4; } +.card-header-ios + .card-content-ios, +.card-ios .item + .card-content-ios { + padding-top: 0; +} + // Generate iOS Card Content Colors // -------------------------------------------------- diff --git a/src/components/card-content/card-content.md.scss b/src/components/card-content/card-content.md.scss index b098f640c6..ba4b8a4d7a 100644 --- a/src/components/card-content/card-content.md.scss +++ b/src/components/card-content/card-content.md.scss @@ -8,14 +8,18 @@ /// @prop - Padding top of the card $card-md-padding-top: 13px !default; -/// @prop - Padding right of the card +// deprecated $card-md-padding-right: 16px !default; +/// @prop - Padding right of the card +$card-md-padding-end: $card-md-padding-right; /// @prop - Padding bottom of the card $card-md-padding-bottom: 13px !default; -/// @prop - Padding left of the card +// deprecated $card-md-padding-left: 16px !default; +/// @prop - Padding start of the card +$card-md-padding-start: $card-md-padding-left; /// @prop - Font size of the card $card-md-font-size: 1.4rem !default; @@ -25,7 +29,7 @@ $card-md-line-height: 1.5 !default; .card-content-md { - padding: $card-md-padding-top $card-md-padding-right $card-md-padding-bottom $card-md-padding-left; + @include padding($card-md-padding-top, $card-md-padding-end, $card-md-padding-bottom, $card-md-padding-start); font-size: $card-md-font-size; line-height: $card-md-line-height; diff --git a/src/components/card-content/card-content.wp.scss b/src/components/card-content/card-content.wp.scss index d538b74134..b0695f59a5 100644 --- a/src/components/card-content/card-content.wp.scss +++ b/src/components/card-content/card-content.wp.scss @@ -8,14 +8,18 @@ /// @prop - Padding top of the card $card-wp-padding-top: 13px !default; -/// @prop - Padding right of the card +// deprecated $card-wp-padding-right: 16px !default; +/// @prop - Padding end of the card +$card-wp-padding-end: $card-wp-padding-right; /// @prop - Padding bottom of the card $card-wp-padding-bottom: 13px !default; -/// @prop - Padding left of the card +// deprecated $card-wp-padding-left: 16px !default; +/// @prop - Padding start of the card +$card-wp-padding-start: $card-wp-padding-left; /// @prop - Font size of the card $card-wp-font-size: 1.4rem !default; @@ -25,13 +29,14 @@ $card-wp-line-height: 1.5 !default; .card-content-wp { - padding: $card-wp-padding-top $card-wp-padding-right $card-wp-padding-bottom $card-wp-padding-left; + @include padding($card-wp-padding-top, $card-wp-padding-end, $card-wp-padding-bottom, $card-wp-padding-start); font-size: $card-wp-font-size; line-height: $card-wp-line-height; } + // Generate Windows Card Content Colors // -------------------------------------------------- diff --git a/src/components/card-header/card-header.ios.scss b/src/components/card-header/card-header.ios.scss index b9dfb05915..b76dc9d31d 100644 --- a/src/components/card-header/card-header.ios.scss +++ b/src/components/card-header/card-header.ios.scss @@ -11,19 +11,33 @@ $card-ios-header-font-size: 1.6rem !default; /// @prop - Font weight of the card header $card-ios-header-font-weight: 500 !default; -/// @prop - Padding of the card header -$card-ios-header-padding: 16px !default; +// deprecated +$card-ios-header-padding: null !default; + +/// @prop - Padding top of the card header +$card-ios-header-padding-top: 16px !default; + +/// @prop - Padding end of the card header +$card-ios-header-padding-end: $card-ios-header-padding-top !default; + +/// @prop - Padding bottom of the card header +$card-ios-header-padding-bottom: $card-ios-header-padding-top !default; + +/// @prop - Padding start of the card header +$card-ios-header-padding-start: $card-ios-header-padding-end !default; /// @prop - Color of the card header $card-ios-header-color: #333 !default; .card-header-ios { - padding: $card-ios-header-padding; - font-size: $card-ios-header-font-size; font-weight: $card-ios-header-font-weight; color: $card-ios-header-color; + + @include deprecated-variable(padding, $card-ios-header-padding) { + @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/src/components/card-header/card-header.md.scss b/src/components/card-header/card-header.md.scss index 4d0819c533..22735833df 100644 --- a/src/components/card-header/card-header.md.scss +++ b/src/components/card-header/card-header.md.scss @@ -8,18 +8,32 @@ /// @prop - Font size of the card header $card-md-header-font-size: 1.6rem !default; -/// @prop - Padding of the card header -$card-md-header-padding: 16px !default; +// deprecated +$card-md-header-padding: null !default; + +/// @prop - Padding top of the card header +$card-md-header-padding-top: 16px !default; + +/// @prop - Padding end of the card header +$card-md-header-padding-end: $card-md-header-padding-top !default; + +/// @prop - Padding bottom of the card header +$card-md-header-padding-bottom: $card-md-header-padding-top !default; + +/// @prop - Padding start of the card header +$card-md-header-padding-start: $card-md-header-padding-end !default; /// @prop - Color of the card header $card-md-header-color: #222 !default; .card-header-md { - padding: $card-md-header-padding; - font-size: $card-md-header-font-size; color: $card-md-header-color; + + @include deprecated-variable(padding, $card-md-header-padding) { + @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/src/components/card-header/card-header.wp.scss b/src/components/card-header/card-header.wp.scss index 7288c3bc41..e981d673bf 100644 --- a/src/components/card-header/card-header.wp.scss +++ b/src/components/card-header/card-header.wp.scss @@ -8,19 +8,33 @@ /// @prop - Font size of the card header $card-wp-header-font-size: 1.6rem !default; -/// @prop - Padding of the card header -$card-wp-header-padding: 16px !default; +// deprecated +$card-wp-header-padding: null !default; + +/// @prop - Padding top of the card header +$card-wp-header-padding-top: 16px !default; + +/// @prop - Padding end of the card header +$card-wp-header-padding-end: $card-wp-header-padding-top !default; + +/// @prop - Padding bottom of the card header +$card-wp-header-padding-bottom: $card-wp-header-padding-top !default; + +/// @prop - Padding start of the card header +$card-wp-header-padding-start: $card-wp-header-padding-end !default; /// @prop - Color of the card header $card-wp-header-color: #222 !default; .card-header-wp { - padding: $card-wp-header-padding; - font-size: $card-wp-header-font-size; color: $card-wp-header-color; + + @include deprecated-variable(padding, $card-wp-header-padding) { + @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/src/components/card-title/card-title.ios.scss b/src/components/card-title/card-title.ios.scss index 6c9aa363db..47e7d7f0c8 100644 --- a/src/components/card-title/card-title.ios.scss +++ b/src/components/card-title/card-title.ios.scss @@ -8,11 +8,35 @@ /// @prop - Font size of the card title $card-ios-title-font-size: 1.8rem !default; -/// @prop - Padding of the card title -$card-ios-title-padding: 8px 0 8px 0 !default; +// deprecated +$card-ios-title-padding: null !default; -/// @prop - Margin of the card title -$card-ios-title-margin: 2px 0 2px !default; +/// @prop - Padding top of the card title +$card-ios-title-padding-top: 8px !default; + +/// @prop - Padding end of the card title +$card-ios-title-padding-end: 0 !default; + +/// @prop - Padding bottom of the card title +$card-ios-title-padding-bottom: 8px !default; + +/// @prop - Padding start of the card title +$card-ios-title-padding-start: 0 !default; + +// deprecated +$card-ios-title-margin: null !default; + +/// @prop - Margin top of the card title +$card-ios-title-margin-top: 2px !default; + +/// @prop - Margin end of the card title +$card-ios-title-margin-end: 0 !default; + +/// @prop - Margin bottom of the card title +$card-ios-title-margin-bottom: 2px !default; + +/// @prop - Margin start of the card title +$card-ios-title-margin-start: 0 !default; /// @prop - Color of the card title $card-ios-title-text-color: #222 !default; @@ -21,12 +45,17 @@ $card-ios-title-text-color: #222 !default; .card-title-ios { display: block; - margin: $card-ios-title-margin; - padding: $card-ios-title-padding; - font-size: $card-ios-title-font-size; line-height: 1.2; color: $card-ios-title-text-color; + + @include deprecated-variable(margin, $card-ios-title-margin) { + @include margin($card-ios-title-margin-top, $card-ios-title-margin-end, $card-ios-title-margin-bottom, $card-ios-title-margin-start); + } + + @include deprecated-variable(padding, $card-ios-title-padding) { + @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/src/components/card-title/card-title.md.scss b/src/components/card-title/card-title.md.scss index 6231bde4f1..68a4db793a 100644 --- a/src/components/card-title/card-title.md.scss +++ b/src/components/card-title/card-title.md.scss @@ -8,11 +8,35 @@ /// @prop - Font size of the card title $card-md-title-font-size: 2.4rem !default; -/// @prop - Padding of the card title -$card-md-title-padding: 8px 0 8px 0 !default; +// deprecated +$card-md-title-padding: null !default; -/// @prop - Margin of the card title -$card-md-title-margin: 2px 0 2px !default; +/// @prop - Padding top of the card title +$card-md-title-padding-top: 8px !default; + +/// @prop - Padding end of the card title +$card-md-title-padding-end: 0 !default; + +/// @prop - Padding bottom of the card title +$card-md-title-padding-bottom: 8px !default; + +/// @prop - Padding start of the card title +$card-md-title-padding-start: 0 !default; + +// deprecated +$card-md-title-margin: null !default; + +/// @prop - Margin top of the card title +$card-md-title-margin-top: 2px !default; + +/// @prop - Margin end of the card title +$card-md-title-margin-end: 0 !default; + +/// @prop - Margin bottom of the card title +$card-md-title-margin-bottom: 2px !default; + +/// @prop - Margin start of the card title +$card-md-title-margin-start: $card-md-title-margin-end !default; /// @prop - Color of the card title $card-md-title-text-color: #222 !default; @@ -21,12 +45,17 @@ $card-md-title-text-color: #222 !default; .card-title-md { display: block; - margin: $card-md-title-margin; - padding: $card-md-title-padding; - font-size: $card-md-title-font-size; line-height: 1.2; color: $card-md-title-text-color; + + @include deprecated-variable(margin, $card-md-title-margin) { + @include margin($card-md-title-margin-top, $card-md-title-margin-end, $card-md-title-margin-bottom, $card-md-title-margin-start); + } + + @include deprecated-variable(padding, $card-md-title-padding) { + @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/src/components/card-title/card-title.wp.scss b/src/components/card-title/card-title.wp.scss index 0953772861..36429d4ad2 100644 --- a/src/components/card-title/card-title.wp.scss +++ b/src/components/card-title/card-title.wp.scss @@ -8,11 +8,35 @@ /// @prop - Font size of card title $card-wp-title-font-size: 2.4rem !default; -/// @prop - Padding of the card title -$card-wp-title-padding: 8px 0 8px 0 !default; +// deprecated +$card-wp-title-padding: null !default; -/// @prop - Margin of the card title -$card-wp-title-margin: 2px 0 !default; +/// @prop - Padding top of the card title +$card-wp-title-padding-top: 8px !default; + +/// @prop - Padding end of the card title +$card-wp-title-padding-end: 0 !default; + +/// @prop - Padding bottom of the card title +$card-wp-title-padding-bottom: 8px !default; + +/// @prop - Padding start of the card title +$card-wp-title-padding-start: 0 !default; + +// deprecated +$card-wp-title-margin: null !default; + +/// @prop - Margin top of the card title +$card-wp-title-margin-top: 2px !default; + +/// @prop - Margin end of the card title +$card-wp-title-margin-end: 0 !default; + +/// @prop - Margin bottom of the card title +$card-wp-title-margin-bottom: $card-wp-title-margin-top !default; + +/// @prop - Margin start of the card title +$card-wp-title-margin-start: $card-wp-title-margin-end !default; /// @prop - Color of the card title $card-wp-title-text-color: #222 !default; @@ -21,12 +45,17 @@ $card-wp-title-text-color: #222 !default; .card-title-wp { display: block; - margin: $card-wp-title-margin; - padding: $card-wp-title-padding; - font-size: $card-wp-title-font-size; line-height: 1.2; color: $card-wp-title-text-color; + + @include deprecated-variable(margin, $card-wp-title-margin) { + @include margin($card-wp-title-margin-top, $card-wp-title-margin-end, $card-wp-title-margin-bottom, $card-wp-title-margin-start); + } + + @include deprecated-variable(padding, $card-wp-title-padding) { + @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/src/components/card/card.ios.scss b/src/components/card/card.ios.scss index 55ae677001..17fecbf3bf 100755 --- a/src/components/card/card.ios.scss +++ b/src/components/card/card.ios.scss @@ -8,14 +8,18 @@ /// @prop - Margin top of the card $card-ios-margin-top: 12px !default; -/// @prop - Margin right of the card +// deprecated $card-ios-margin-right: 12px !default; +/// @prop - Margin end of the card +$card-ios-margin-end: $card-ios-margin-right !default; /// @prop - Margin bottom of the card $card-ios-margin-bottom: 12px !default; -/// @prop - Margin left of the card +// deprecated $card-ios-margin-left: 12px !default; +/// @prop - Margin start of the card +$card-ios-margin-start: $card-ios-margin-left; /// @prop - Padding top of the media on the card $card-ios-padding-media-top: 10px !default; @@ -43,11 +47,11 @@ $card-ios-text-color: #666 !default; .card-ios { - margin: $card-ios-margin-top $card-ios-margin-right $card-ios-margin-bottom $card-ios-margin-left; + @include margin($card-ios-margin-top, $card-ios-margin-end, $card-ios-margin-bottom, $card-ios-margin-start); + @include border-radius($card-ios-border-radius); - width: calc(100% - #{($card-ios-margin-right + $card-ios-margin-left)}); + width: calc(100% - #{($card-ios-margin-end + $card-ios-margin-start)}); - border-radius: $card-ios-border-radius; font-size: $card-ios-font-size; background: $card-ios-background-color; @@ -68,24 +72,19 @@ $card-ios-text-color: #666 !default; border: 0; } -.card-header-ios + .card-content-ios, -.card-ios .item + .card-content-ios { - padding-top: 0; -} - .card .note-ios { font-size: 1.3rem; } .card-ios h1 { - margin: 0 0 2px; + @include margin(0, 0, 2px); font-size: 2.4rem; font-weight: normal; } .card-ios h2 { - margin: 2px 0; + @include margin(2px, 0); font-size: 1.6rem; font-weight: normal; @@ -95,14 +94,14 @@ $card-ios-text-color: #666 !default; .card-ios h4, .card-ios h5, .card-ios h6 { - margin: 2px 0; + @include margin(2px, 0); font-size: 1.4rem; font-weight: normal; } .card-ios p { - margin: 0 0 2px; + @include margin(0, 0, 2px); font-size: 1.4rem; color: $card-ios-text-color; diff --git a/src/components/card/card.md.scss b/src/components/card/card.md.scss index b756b65d25..64f6e7e975 100755 --- a/src/components/card/card.md.scss +++ b/src/components/card/card.md.scss @@ -8,14 +8,18 @@ /// @prop - Margin top of the card $card-md-margin-top: 10px !default; -/// @prop - Margin right of the card +// deprecated $card-md-margin-right: 10px !default; +/// @prop - Margin end of the card +$card-md-margin-end: $card-md-margin-right !default; /// @prop - Margin bottom of the card $card-md-margin-bottom: 10px !default; -/// @prop - Margin left of the card +// deprecated $card-md-margin-left: 10px !default; +/// @prop - Margin start of the card +$card-md-margin-start: $card-md-margin-left; /// @prop - Padding top of the media on the card $card-md-padding-media-top: 10px !default; @@ -49,11 +53,11 @@ $card-md-text-color: #222 !default; .card-md { - margin: $card-md-margin-top $card-md-margin-right $card-md-margin-bottom $card-md-margin-left; + @include margin($card-md-margin-top, $card-md-margin-end, $card-md-margin-bottom, $card-md-margin-start); + @include border-radius($card-md-border-radius); - width: calc(100% - #{($card-md-margin-right + $card-md-margin-left)}); + width: calc(100% - #{($card-md-margin-end + $card-md-margin-start)}); - border-radius: $card-md-border-radius; font-size: $card-md-font-size; background: $card-md-background-color; @@ -84,7 +88,7 @@ $card-md-text-color: #222 !default; } .card-md h1 { - margin: 0 0 2px; + @include margin(0, 0, 2px); font-size: 2.4rem; font-weight: normal; @@ -92,7 +96,7 @@ $card-md-text-color: #222 !default; } .card-md h2 { - margin: 2px 0; + @include margin(2px, 0); font-size: 1.6rem; font-weight: normal; @@ -103,7 +107,7 @@ $card-md-text-color: #222 !default; .card-md h4, .card-md h5, .card-md h6 { - margin: 2px 0; + @include margin(2px, 0); font-size: 1.4rem; font-weight: normal; @@ -111,7 +115,7 @@ $card-md-text-color: #222 !default; } .card-md p { - margin: 0 0 2px; + @include margin(0, 0, 2px); font-size: 1.4rem; font-weight: normal; diff --git a/src/components/card/card.wp.scss b/src/components/card/card.wp.scss index 47ae8d99d9..3bc61345ee 100755 --- a/src/components/card/card.wp.scss +++ b/src/components/card/card.wp.scss @@ -8,14 +8,18 @@ /// @prop - Margin top of the card $card-wp-margin-top: 8px !default; -/// @prop - Margin right of the card +// deprecated $card-wp-margin-right: 8px !default; +/// @prop - Margin end of the card +$card-wp-margin-end: $card-wp-margin-right !default; /// @prop - Margin bottom of the card $card-wp-margin-bottom: 8px !default; -/// @prop - Margin left of the card +// deprecated $card-wp-margin-left: 8px !default; +/// @prop - Margin start of the card +$card-wp-margin-start: $card-wp-margin-left; /// @prop - Padding top of the media on the card $card-wp-padding-media-top: 10px !default; @@ -52,11 +56,11 @@ $card-wp-text-color: #222 !default; .card-wp { - margin: $card-wp-margin-top $card-wp-margin-right $card-wp-margin-bottom $card-wp-margin-left; + @include margin($card-wp-margin-top, $card-wp-margin-end, $card-wp-margin-bottom, $card-wp-margin-start); + @include border-radius($card-wp-border-radius); - width: calc(100% - #{($card-wp-margin-right + $card-wp-margin-left)}); + width: calc(100% - #{($card-wp-margin-end + $card-wp-margin-start)}); - border-radius: $card-wp-border-radius; font-size: $card-wp-font-size; background: $card-wp-background-color; @@ -87,7 +91,7 @@ $card-wp-text-color: #222 !default; } .card-wp h1 { - margin: 0 0 2px; + @include margin(0, 0, 2px); font-size: 2.4rem; font-weight: normal; @@ -95,7 +99,7 @@ $card-wp-text-color: #222 !default; } .card-wp h2 { - margin: 2px 0; + @include margin(2px, 0); font-size: 1.6rem; font-weight: normal; @@ -106,7 +110,7 @@ $card-wp-text-color: #222 !default; .card-wp h4, .card-wp h5, .card-wp h6 { - margin: 2px 0; + @include margin(2px, 0); font-size: 1.4rem; font-weight: normal; @@ -114,7 +118,7 @@ $card-wp-text-color: #222 !default; } .card-wp p { - margin: 0 0 2px; + @include margin(0, 0, 2px); font-size: 1.4rem; font-weight: normal; diff --git a/src/components/toggle/toggle.ios.scss b/src/components/toggle/toggle.ios.scss index 838ae48808..ab19e69230 100644 --- a/src/components/toggle/toggle.ios.scss +++ b/src/components/toggle/toggle.ios.scss @@ -50,12 +50,35 @@ $toggle-ios-transition-duration: 300ms !default; /// @prop - Opacity of the disabled toggle $toggle-ios-disabled-opacity: .3 !default; -/// @prop - Padding of the toggle positioned on the left in an item -$toggle-ios-item-left-padding: 6px 16px 5px 0 !default; +// deprecated +$toggle-ios-item-left-padding: null !default; -/// @prop - Padding of the toggle positioned on the right in an item -$toggle-ios-item-right-padding: 6px ($item-ios-padding-right / 2) 5px ($item-ios-padding-left) !default; +/// @prop - Padding top of the toggle positioned on the start in an item +$toggle-ios-item-start-padding-top: 6px !default; +/// @prop - Padding end of the toggle positioned on the start in an item +$toggle-ios-item-start-padding-end: 16px !default; + +/// @prop - Padding bottom of the toggle positioned on the start in an item +$toggle-ios-item-start-padding-bottom: 5px !default; + +/// @prop - Padding start of the toggle positioned on the start in an item +$toggle-ios-item-start-padding-start: 0 !default; + +// deprecated +$toggle-ios-item-right-padding: null !default; + +/// @prop - Padding top of the toggle positioned on the end in an item +$toggle-ios-item-end-padding-top: 6px !default; + +/// @prop - Padding end of the toggle positioned on the end in an item +$toggle-ios-item-end-padding-end: ($item-ios-padding-end / 2) !default; + +/// @prop - Padding bottom of the toggle positioned on the end in an item +$toggle-ios-item-end-padding-bottom: 5px !default; + +/// @prop - Padding start of the toggle positioned on the end in an item +$toggle-ios-item-end-padding-start: $item-ios-padding-start !default; // iOS Toggle // ----------------------------------------- @@ -76,14 +99,14 @@ $toggle-ios-item-right-padding: 6px ($item-ios-padding-right / 2) 5px ($i // ----------------------------------------- .toggle-ios .toggle-icon { + @include border-radius($toggle-ios-border-radius); + position: relative; display: block; width: 100%; height: 100%; - border-radius: $toggle-ios-border-radius; - background-color: $toggle-ios-border-color-off; transition: background-color $toggle-ios-transition-duration; @@ -95,13 +118,11 @@ $toggle-ios-item-right-padding: 6px ($item-ios-padding-right / 2) 5px ($i // ----------------------------------------- .toggle-ios .toggle-icon::before { - position: absolute; - top: $toggle-ios-border-width; - right: $toggle-ios-border-width; - bottom: $toggle-ios-border-width; - left: $toggle-ios-border-width; + @include position($toggle-ios-border-width, $toggle-ios-border-width, $toggle-ios-border-width, $toggle-ios-border-width); + @include border-radius($toggle-ios-border-radius); + + position: absolute; - border-radius: $toggle-ios-border-radius; background-color: $toggle-ios-background-color-off; content: ""; @@ -114,14 +135,14 @@ $toggle-ios-item-right-padding: 6px ($item-ios-padding-right / 2) 5px ($i // ----------------------------------------- .toggle-ios .toggle-inner { + @include position($toggle-ios-border-width, null, null, $toggle-ios-border-width); + @include border-radius($toggle-ios-handle-border-radius); + position: absolute; - top: $toggle-ios-border-width; - left: $toggle-ios-border-width; width: $toggle-ios-handle-width; height: $toggle-ios-handle-height; - border-radius: $toggle-ios-handle-border-radius; background-color: $toggle-ios-handle-background-color; box-shadow: $toggle-ios-handle-box-shadow; @@ -157,6 +178,7 @@ $toggle-ios-item-right-padding: 6px ($item-ios-padding-right / 2) 5px ($i } + // iOS Toggle Background Oval: Activated and Checked // ----------------------------------------- @@ -179,7 +201,7 @@ $toggle-ios-item-right-padding: 6px ($item-ios-padding-right / 2) 5px ($i .toggle-ios.toggle-activated.toggle-checked .toggle-inner { // when pressing down on the toggle and IS checked // make the knob wider and move it left a bit - left: $toggle-ios-border-width - 6; + @include position-horizontal($toggle-ios-border-width - 6, null); } @@ -198,12 +220,17 @@ $toggle-ios-item-right-padding: 6px ($item-ios-padding-right / 2) 5px ($i // ----------------------------------------- .item-ios .toggle-ios { - margin: $toggle-ios-media-margin; - padding: $toggle-ios-item-right-padding; + @include margin($toggle-ios-media-margin); + + @include deprecated-variable(padding, $toggle-ios-item-right-padding) { + @include padding($toggle-ios-item-end-padding-top, $toggle-ios-item-end-padding-end, $toggle-ios-item-end-padding-bottom, $toggle-ios-item-end-padding-start); + } } .item-ios .toggle-ios[slot="start"] { - padding: $toggle-ios-item-left-padding; + @include deprecated-variable(padding, $toggle-ios-item-left-padding) { + @include padding($toggle-ios-item-start-padding-top, $toggle-ios-item-start-padding-end, $toggle-ios-item-start-padding-bottom, $toggle-ios-item-start-padding-start); + } } diff --git a/src/components/toggle/toggle.md.scss b/src/components/toggle/toggle.md.scss index 3212bccaa7..6d9e77a57c 100644 --- a/src/components/toggle/toggle.md.scss +++ b/src/components/toggle/toggle.md.scss @@ -38,8 +38,20 @@ $toggle-md-handle-background-color-off: $background-md-color !default; /// @prop - Background color of the checked toggle handle $toggle-md-handle-background-color-on: $toggle-md-active-color !default; -/// @prop - Margin of the toggle -$toggle-md-media-margin: 0 !default; +// deprecated +$toggle-md-media-margin: null !default; + +/// @prop - Margin top of the toggle +$toggle-md-media-margin-top: 0 !default; + +/// @prop - Margin end of the toggle +$toggle-md-media-margin-end: $toggle-md-media-margin-top !default; + +/// @prop - Margin bottom of the toggle +$toggle-md-media-margin-bottom: $toggle-md-media-margin-top !default; + +/// @prop - Margin start of the toggle +$toggle-md-media-margin-start: $toggle-md-media-margin-end !default; /// @prop - Transition duration of the toggle icon $toggle-md-transition-duration: 300ms !default; @@ -47,15 +59,50 @@ $toggle-md-transition-duration: 300ms !default; /// @prop - Opacity of the disabled toggle $toggle-md-disabled-opacity: .3 !default; -/// @prop - Padding of standalone toggle -$toggle-md-padding: 12px !default; +// deprecated +$toggle-md-padding: null !default; -/// @prop - Padding of the toggle positioned on the left in an item -$toggle-md-item-left-padding: 12px 18px 12px 2px !default; +/// @prop - Padding top of standalone toggle +$toggle-md-padding-top: 12px !default; -/// @prop - Padding of the toggle positioned on the right in an item -$toggle-md-item-right-padding: 12px ($item-md-padding-right / 2) 12px $item-md-padding-left !default; +/// @prop - Padding end of standalone toggle +$toggle-md-padding-end: $toggle-md-padding-top !default; +/// @prop - Padding bottom of standalone toggle +$toggle-md-padding-bottom: $toggle-md-padding-top !default; + +/// @prop - Padding start of standalone toggle +$toggle-md-padding-start: $toggle-md-padding-end !default; + +// deprecated +$toggle-md-item-left-padding: null !default; + +/// @prop - Padding top of the toggle positioned on the start in an item +$toggle-md-item-start-padding-top: 12px !default; + +/// @prop - Padding end of the toggle positioned on the start in an item +$toggle-md-item-start-padding-end: 18px !default; + +/// @prop - Padding bottom of the toggle positioned on the start in an item +$toggle-md-item-start-padding-bottom: 12px !default; + +/// @prop - Padding start the toggle positioned on the start in an item +$toggle-md-item-start-padding-start: 2px !default; + +// deprecated +$toggle-md-item-right-padding: null !default; + +/// @prop - Padding top of the toggle positioned on the end in an item +$toggle-md-item-end-padding-top: 12px !default; + +/// @prop - Padding end of the toggle positioned on the end in an item +$toggle-md-item-end-padding-end: ($item-md-padding-end / 2) !default; + +/// @prop - Padding bottom of the toggle positioned on the end in an item +$toggle-md-item-end-padding-bottom: 12px !default; + +/// @prop - Padding start of the toggle positioned on the end in an item +$toggle-md-item-end-padding-start: $item-md-padding-start !default; // Material Design Toggle // ----------------------------------------- @@ -63,14 +110,16 @@ $toggle-md-item-right-padding: 12px ($item-md-padding-right / 2) 12px .toggle-md { position: relative; - padding: $toggle-md-padding; - width: $toggle-md-track-width; height: $toggle-md-track-height; box-sizing: content-box; contain: strict; + + @include deprecated-variable(padding, $toggle-md-padding) { + @include padding($toggle-md-padding-top, $toggle-md-padding-end, $toggle-md-padding-bottom, $toggle-md-padding-start); + } } @@ -78,13 +127,14 @@ $toggle-md-item-right-padding: 12px ($item-md-padding-right / 2) 12px // ----------------------------------------- .toggle-md .toggle-icon { + @include border-radius($toggle-md-track-height); + position: relative; display: block; width: 100%; height: 100%; - border-radius: $toggle-md-track-height; background-color: $toggle-md-track-background-color-off; transition: background-color $toggle-md-transition-duration; @@ -97,14 +147,14 @@ $toggle-md-item-right-padding: 12px ($item-md-padding-right / 2) 12px // ----------------------------------------- .toggle-md .toggle-inner { + @include position(($toggle-md-handle-height - $toggle-md-track-height) / -2, null, null, 0); + @include border-radius($toggle-md-handle-border-radius); + position: absolute; - top: ($toggle-md-handle-height - $toggle-md-track-height) / -2; - left: 0; width: $toggle-md-handle-width; height: $toggle-md-handle-height; - border-radius: $toggle-md-handle-border-radius; background-color: $toggle-md-handle-background-color-off; box-shadow: $toggle-md-handle-box-shadow; @@ -154,18 +204,25 @@ $toggle-md-item-right-padding: 12px ($item-md-padding-right / 2) 12px // ----------------------------------------- .item-md .toggle-md { - margin: $toggle-md-media-margin; - padding: $toggle-md-item-right-padding; - cursor: pointer; + + @include deprecated-variable(margin, $toggle-md-media-margin) { + @include margin($toggle-md-media-margin-top, $toggle-md-media-margin-end, $toggle-md-media-margin-bottom, $toggle-md-media-margin-start); + } + + @include deprecated-variable(padding, $toggle-md-item-right-padding) { + @include padding($toggle-md-item-end-padding-top, $toggle-md-item-end-padding-end, $toggle-md-item-end-padding-bottom, $toggle-md-item-end-padding-start); + } } .item-md .toggle-md[slot="start"] { - padding: $toggle-md-item-left-padding; + @include deprecated-variable(padding, $toggle-md-item-left-padding) { + @include padding($toggle-md-item-start-padding-top, $toggle-md-item-start-padding-end, $toggle-md-item-start-padding-bottom, $toggle-md-item-start-padding-start); + } } .item-md.item-toggle ion-label { - margin-left: 0; + @include margin-horizontal(0, null); } diff --git a/src/components/toggle/toggle.scss b/src/components/toggle/toggle.scss index 273b435d1c..4b1800d5c5 100644 --- a/src/components/toggle/toggle.scss +++ b/src/components/toggle/toggle.scss @@ -16,23 +16,24 @@ ion-toggle.upgraded { ion-toggle ion-gesture { display: block; - visibility: inherit; width: 100%; height: 100%; + + visibility: inherit; } .toggle-cover { + @include position-horizontal(0, null); + position: absolute; top: 0; - left: 0; width: 100%; height: 100%; border: 0; - - background: transparent; + outline: none; font-family: inherit; font-style: inherit; @@ -41,6 +42,6 @@ ion-toggle ion-gesture { line-height: 1; text-transform: none; + background: transparent; cursor: pointer; - outline: none; } diff --git a/src/components/toggle/toggle.wp.scss b/src/components/toggle/toggle.wp.scss index 4613f4e6c8..ef19118935 100644 --- a/src/components/toggle/toggle.wp.scss +++ b/src/components/toggle/toggle.wp.scss @@ -62,12 +62,35 @@ $toggle-wp-transition-duration: 300ms !default; /// @prop - Opacity of the disabled toggle $toggle-wp-disabled-opacity: .3 !default; -/// @prop - Padding of the toggle positioned on the left in an item -$toggle-wp-item-left-padding: 12px 18px 12px 2px !default; +// deprecated +$toggle-wp-item-left-padding: null !default; -/// @prop - Padding of the toggle positioned on the right in an item -$toggle-wp-item-right-padding: 12px ($item-wp-padding-right / 2) 12px $item-wp-padding-left !default; +/// @prop - Padding top of the toggle positioned on the start in an item +$toggle-wp-item-start-padding-top: 12px !default; +/// @prop - Padding end of the toggle positioned on the start in an item +$toggle-wp-item-start-padding-end: 18px !default; + +/// @prop - Padding bottom of the toggle positioned on the start in an item +$toggle-wp-item-start-padding-bottom: 12px !default; + +/// @prop - Padding start the toggle positioned on the start in an item +$toggle-wp-item-start-padding-start: 2px !default; + +// deprecated +$toggle-wp-item-right-padding: null !default; + +/// @prop - Padding top of the toggle positioned on the end in an item +$toggle-wp-item-end-padding-top: 12px !default; + +/// @prop - Padding end of the toggle positioned on the end in an item +$toggle-wp-item-end-padding-end: ($item-wp-padding-end / 2) !default; + +/// @prop - Padding bottom of the toggle positioned on the end in an item +$toggle-wp-item-end-padding-bottom: 12px !default; + +/// @prop - Padding start of the toggle positioned on the end in an item +$toggle-wp-item-end-padding-start: $item-wp-padding-start !default; // Windows Toggle // ----------------------------------------- @@ -88,6 +111,8 @@ $toggle-wp-item-right-padding: 12px ($item-wp-padding-right / 2) 12px // ----------------------------------------- .toggle-wp .toggle-icon { + @include border-radius($toggle-wp-track-height); + position: relative; display: block; @@ -95,7 +120,6 @@ $toggle-wp-item-right-padding: 12px ($item-wp-padding-right / 2) 12px height: 100%; border: $toggle-wp-track-border-width solid $toggle-wp-track-border-color-off; - border-radius: $toggle-wp-track-height; background-color: $toggle-wp-track-background-color-off; pointer-events: none; @@ -108,14 +132,14 @@ $toggle-wp-item-right-padding: 12px ($item-wp-padding-right / 2) 12px // ----------------------------------------- .toggle-wp .toggle-inner { + @include position($toggle-wp-handle-top, null, null, $toggle-wp-handle-left); + @include border-radius($toggle-wp-handle-border-radius); + position: absolute; - top: $toggle-wp-handle-top; - left: $toggle-wp-handle-left; width: $toggle-wp-handle-width; height: $toggle-wp-handle-height; - border-radius: $toggle-wp-handle-border-radius; background-color: $toggle-wp-handle-background-color-off; transition-duration: $toggle-wp-transition-duration; @@ -162,18 +186,23 @@ $toggle-wp-item-right-padding: 12px ($item-wp-padding-right / 2) 12px // ----------------------------------------- .item-wp .toggle-wp { - margin: $toggle-wp-media-margin; - padding: $toggle-wp-item-right-padding; + @include margin($toggle-wp-media-margin); cursor: pointer; + + @include deprecated-variable(padding, $toggle-wp-item-right-padding) { + @include padding($toggle-wp-item-end-padding-top, $toggle-wp-item-end-padding-end, $toggle-wp-item-end-padding-bottom, $toggle-wp-item-end-padding-start); + } } .item-wp .toggle-wp[slot="start"] { - padding: $toggle-wp-item-left-padding; + @include deprecated-variable(padding, $toggle-wp-item-left-padding) { + @include padding($toggle-wp-item-start-padding-top, $toggle-wp-item-start-padding-end, $toggle-wp-item-start-padding-bottom, $toggle-wp-item-start-padding-start); + } } .item-wp.item-toggle ion-label { - margin-left: 0; + @include margin-horizontal(0, null); }