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

feat(toggle): add --border-radius and --handle-border-radius variables (#20141)

Browse Source
This commit is contained in:
Liam DeBeasi
2020-01-03 12:14:02 -05:00
committed by GitHub
parent 83f77e2972
commit 02a46a1007
6 changed files with 20 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
core/src/components/toggle/readme.md
View File

@ -202,8 +202,10 @@ export const ToggleExample: React.FC = () => (
| ----------------------------- | -------------------------------------------- |
| `--background` | Background of the toggle |
| `--background-checked` | Background of the toggle when checked |
| `--border-radius` | Border radius of the toggle track |
| `--handle-background` | Background of the toggle handle |
| `--handle-background-checked` | Background of the toggle handle when checked |
| `--handle-border-radius` | Border radius of the toggle handle |
----------------------------------------------

5
core/src/components/toggle/test/basic/index.html
View File

@ -70,6 +70,11 @@
<ion-label>Button w/ right side default icon, really long text that should ellipsis</ion-label>
<ion-icon name="information-circle" slot="end"></ion-icon>
</ion-item>
<ion-item>
<ion-label>Custom</ion-label>
<ion-toggle slot="start" style="--border-radius: 0px;--handle-border-radius: 0px;" checked></ion-toggle>
</ion-item>
</ion-list>

8
core/src/components/toggle/toggle.ios.scss
View File

@ -9,7 +9,9 @@
--background-checked: #{ion-color(primary, base)};
--handle-background: #{$toggle-ios-handle-background-color};
--handle-background-checked: #{$toggle-ios-handle-background-color};
--border-radius: #{$toggle-ios-border-radius};
--handle-border-radius: #{$toggle-ios-handle-border-radius};
box-sizing: content-box;
position: relative;
@ -29,7 +31,7 @@
// -----------------------------------------
.toggle-icon {
@include border-radius($toggle-ios-border-radius);
@include border-radius(var(--border-radius));
display: block;
position: relative;
@ -55,7 +57,7 @@
.toggle-inner {
@include position($toggle-ios-border-width, null, null, $toggle-ios-border-width);
@include border-radius($toggle-ios-handle-border-radius);
@include border-radius(var(--handle-border-radius));
position: absolute;

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

@ -9,6 +9,8 @@
--background-checked: #{ion-color(primary, base, $toggle-md-track-background-color-alpha-on)};
--handle-background: #{$toggle-md-handle-background-color-off};
--handle-background-checked: #{ion-color(primary, base)};
--border-radius: #{$toggle-md-track-height};
--handle-border-radius: #{$toggle-md-handle-border-radius};
@include padding($toggle-md-padding-top, $toggle-md-padding-end, $toggle-md-padding-bottom, $toggle-md-padding-start);
@ -34,7 +36,7 @@
// -----------------------------------------
.toggle-icon {
@include border-radius($toggle-md-track-height);
@include border-radius(var(--border-radius));
display: block;
position: relative;
@ -54,7 +56,7 @@
.toggle-inner {
@include position(($toggle-md-handle-height - $toggle-md-track-height) / -2, null, null, 0);
@include border-radius($toggle-md-handle-border-radius);
@include border-radius(var(--handle-border-radius));
position: absolute;

2
core/src/components/toggle/toggle.scss
View File

@ -9,6 +9,8 @@
* @prop --background-checked: Background of the toggle when checked
* @prop --handle-background: Background of the toggle handle
* @prop --handle-background-checked: Background of the toggle handle when checked
* @prop --border-radius: Border radius of the toggle track
* @prop --handle-border-radius: Border radius of the toggle handle
*/
/* stylelint-disable-next-line declaration-no-important */