Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jan 3, 2020
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions core/api.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1270,8 +1270,10 @@ ion-toggle,event,ionChange,ToggleChangeEventDetail,true
ion-toggle,event,ionFocus,void,true
ion-toggle,css-prop,--background
ion-toggle,css-prop,--background-checked
ion-toggle,css-prop,--border-radius
ion-toggle,css-prop,--handle-background
ion-toggle,css-prop,--handle-background-checked
ion-toggle,css-prop,--handle-border-radius

ion-toolbar,shadow
ion-toolbar,prop,color,string | undefined,undefined,false,false
Expand Down
2 changes: 2 additions & 0 deletions core/src/components/toggle/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 |


----------------------------------------------
Expand Down
5 changes: 5 additions & 0 deletions core/src/components/toggle/test/basic/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down
8 changes: 5 additions & 3 deletions core/src/components/toggle/toggle.ios.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -29,7 +31,7 @@
// -----------------------------------------

.toggle-icon {
@include border-radius($toggle-ios-border-radius);
@include border-radius(var(--border-radius));

display: block;
position: relative;
Expand All @@ -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;

Expand Down
6 changes: 4 additions & 2 deletions core/src/components/toggle/toggle.md.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand All @@ -34,7 +36,7 @@
// -----------------------------------------

.toggle-icon {
@include border-radius($toggle-md-track-height);
@include border-radius(var(--border-radius));

display: block;
position: relative;
Expand All @@ -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;

Expand Down
2 changes: 2 additions & 0 deletions core/src/components/toggle/toggle.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
Expand Down