javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-10 00:27:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(toggle): on/off icons for toggle (#25459)

Browse Source 
Resolves #20524
This commit is contained in:
Sean Perkins
2022-07-06 12:39:34 -04:00
committed by GitHub
parent 7cdc388b78
commit bc0bdc438b
33 changed files with 493 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
core/src/components/toggle/toggle.md.scss
View File

@ -34,6 +34,10 @@
background: current-color(base);
}
:host(.toggle-checked) .toggle-inner {
color: var(--ion-color-contrast, $toggle-md-on-off-label-checked-color);
}
// Material Design Toggle Background Track: Unchecked
// ----------------------------------------------------------
@ -41,14 +45,26 @@
transition: background-color $toggle-md-transition-duration;
}
// Material Design Toggle Inner Knob: Unchecked
// ----------------------------------------------------------
.toggle-inner {
will-change: background-color, transform;
display: flex;
align-items: center;
justify-content: center;
color: $toggle-md-on-off-label-color;
}
.toggle-inner .toggle-switch-icon {
@include padding(1px);
width: 100%;
height: 100%;
}
// Material Design Toggle: Disabled
// ----------------------------------------------------------
@ -68,17 +84,31 @@
// opacity: $toggle-md-disabled-opacity;
// }
// Material Design Toggle Within An Item
// ----------------------------------------------------------
:host(.in-item[slot]) {
@include margin($toggle-md-media-margin-top, $toggle-md-media-margin-end, $toggle-md-media-margin-bottom, $toggle-md-media-margin-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);
@include margin(
$toggle-md-media-margin-top,
$toggle-md-media-margin-end,
$toggle-md-media-margin-bottom,
$toggle-md-media-margin-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;
}
:host(.in-item[slot="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);
@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
);
}