javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-22 21:48:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(toggle): remove deprecated variables and fix slot padding

Browse Source
This commit is contained in:
Brandy Carney
2017-07-27 15:01:04 -04:00
parent 11e8c7d0ab
commit d62acf0235
3 changed files with 13 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
packages/core/src/components/toggle/toggle.ios.scss
View File

@ -50,9 +50,6 @@ $toggle-ios-transition-duration: 300ms !default;
/// @prop - Opacity of the disabled toggle /// @prop - Opacity of the disabled toggle
$toggle-ios-disabled-opacity: .3 !default; $toggle-ios-disabled-opacity: .3 !default;
// deprecated
$toggle-ios-item-left-padding: null !default;
/// @prop - Padding top of the toggle positioned on the start in an item /// @prop - Padding top of the toggle positioned on the start in an item
$toggle-ios-item-start-padding-top: 6px !default; $toggle-ios-item-start-padding-top: 6px !default;
@ -65,9 +62,6 @@ $toggle-ios-item-start-padding-bottom: 5px !default;
/// @prop - Padding start of the toggle positioned on the start in an item /// @prop - Padding start of the toggle positioned on the start in an item
$toggle-ios-item-start-padding-start: 0 !default; $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 /// @prop - Padding top of the toggle positioned on the end in an item
$toggle-ios-item-end-padding-top: 6px !default; $toggle-ios-item-end-padding-top: 6px !default;
@ -218,19 +212,14 @@ $toggle-ios-item-end-padding-start: $item-ios-padding-start !default;
// iOS Toggle Within An Item // iOS Toggle Within An Item
// ----------------------------------------- // -----------------------------------------
.item-ios .toggle-ios { .item-ios .toggle-ios[slot] {
@include margin($toggle-ios-media-margin); @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); @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"] { .item-ios .toggle-ios[slot="start"] {
@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); @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);
} }
}
// iOS Toggle Color Mixin // iOS Toggle Color Mixin

31
packages/core/src/components/toggle/toggle.md.scss
View File

@ -38,9 +38,6 @@ $toggle-md-handle-background-color-off: $background-md-color !default;
/// @prop - Background color of the checked toggle handle /// @prop - Background color of the checked toggle handle
$toggle-md-handle-background-color-on: $toggle-md-active-color !default; $toggle-md-handle-background-color-on: $toggle-md-active-color !default;
// deprecated
$toggle-md-media-margin: null !default;
/// @prop - Margin top of the toggle /// @prop - Margin top of the toggle
$toggle-md-media-margin-top: 0 !default; $toggle-md-media-margin-top: 0 !default;
@ -59,9 +56,6 @@ $toggle-md-transition-duration: 300ms !default;
/// @prop - Opacity of the disabled toggle /// @prop - Opacity of the disabled toggle
$toggle-md-disabled-opacity: .3 !default; $toggle-md-disabled-opacity: .3 !default;
// deprecated
$toggle-md-padding: null !default;
/// @prop - Padding top of standalone toggle /// @prop - Padding top of standalone toggle
$toggle-md-padding-top: 12px !default; $toggle-md-padding-top: 12px !default;
@ -74,9 +68,6 @@ $toggle-md-padding-bottom: $toggle-md-padding-top !default;
/// @prop - Padding start of standalone toggle /// @prop - Padding start of standalone toggle
$toggle-md-padding-start: $toggle-md-padding-end !default; $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 /// @prop - Padding top of the toggle positioned on the start in an item
$toggle-md-item-start-padding-top: 12px !default; $toggle-md-item-start-padding-top: 12px !default;
@ -89,9 +80,6 @@ $toggle-md-item-start-padding-bottom: 12px !default;
/// @prop - Padding start the toggle positioned on the start in an item /// @prop - Padding start the toggle positioned on the start in an item
$toggle-md-item-start-padding-start: 2px !default; $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 /// @prop - Padding top of the toggle positioned on the end in an item
$toggle-md-item-end-padding-top: 12px !default; $toggle-md-item-end-padding-top: 12px !default;
@ -108,6 +96,8 @@ $toggle-md-item-end-padding-start: $item-md-padding-start !default;
// ----------------------------------------- // -----------------------------------------
.toggle-md { .toggle-md {
@include padding($toggle-md-padding-top, $toggle-md-padding-end, $toggle-md-padding-bottom, $toggle-md-padding-start);
position: relative; position: relative;
width: $toggle-md-track-width; width: $toggle-md-track-width;
@ -116,10 +106,6 @@ $toggle-md-item-end-padding-start: $item-md-padding-start !default;
box-sizing: content-box; box-sizing: content-box;
contain: strict; 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);
}
} }
@ -204,23 +190,16 @@ $toggle-md-item-end-padding-start: $item-md-padding-start !default;
// Material Design Toggle Within An Item // Material Design Toggle Within An Item
// ----------------------------------------- // -----------------------------------------
.item-md .toggle-md { .item-md .toggle-md[slot] {
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 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); @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);
}
cursor: pointer;
} }
.item-md .toggle-md[slot="start"] { .item-md .toggle-md[slot="start"] {
@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); @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 { .item-md.item-toggle ion-label {
@include margin-horizontal(0, null); @include margin-horizontal(0, null);

15
packages/core/src/components/toggle/toggle.wp.scss
View File

@ -62,9 +62,6 @@ $toggle-wp-transition-duration: 300ms !default;
/// @prop - Opacity of the disabled toggle /// @prop - Opacity of the disabled toggle
$toggle-wp-disabled-opacity: .3 !default; $toggle-wp-disabled-opacity: .3 !default;
// deprecated
$toggle-wp-item-left-padding: null !default;
/// @prop - Padding top of the toggle positioned on the start in an item /// @prop - Padding top of the toggle positioned on the start in an item
$toggle-wp-item-start-padding-top: 12px !default; $toggle-wp-item-start-padding-top: 12px !default;
@ -77,9 +74,6 @@ $toggle-wp-item-start-padding-bottom: 12px !default;
/// @prop - Padding start the toggle positioned on the start in an item /// @prop - Padding start the toggle positioned on the start in an item
$toggle-wp-item-start-padding-start: 2px !default; $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 /// @prop - Padding top of the toggle positioned on the end in an item
$toggle-wp-item-end-padding-top: 12px !default; $toggle-wp-item-end-padding-top: 12px !default;
@ -186,21 +180,16 @@ $toggle-wp-item-end-padding-start: $item-wp-padding-start !default;
// Windows Toggle Within An Item // Windows Toggle Within An Item
// ----------------------------------------- // -----------------------------------------
.item-wp .toggle-wp { .item-wp .toggle-wp[slot] {
@include margin($toggle-wp-media-margin); @include margin($toggle-wp-media-margin);
@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);
cursor: pointer; 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"] { .item-wp .toggle-wp[slot="start"] {
@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); @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 { .item-wp.item-toggle ion-label {
@include margin-horizontal(0, null); @include margin-horizontal(0, null);