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

fix(checkbox): match MD spec (#16186)

Browse Source 
* fix(checkbox): prevent transition inheritance

* fix(checkbox): use SVG for checkbox icon

* fix(checkbox): match MD spec size

* refactor(checkbox): use height/width custom props over size

* fix(checkbox): match MD spec off state border color

* feat(checkbox): animate check path for MD
This commit is contained in:
Cam Wiegert
2018-11-01 14:13:06 -05:00
committed by GitHub
parent 9b33e28d4b
commit 240171a928
7 changed files with 37 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
core/src/components/checkbox/checkbox.md.scss
View File

@ -5,10 +5,11 @@
// --------------------------------------------------
:host {
--size: #{$checkbox-md-icon-size};
--height: #{$checkbox-md-icon-size};
--width: #{$checkbox-md-icon-size};
// Border
--border-radius: calc(var(--size) * .125);
--border-radius: calc(var(--height) * .125);
--border-width: #{$checkbox-md-icon-border-width};
--border-style: #{$checkbox-md-icon-border-style};
--border-color: #{$checkbox-md-icon-border-color-off};
@ -18,23 +19,17 @@
--transition: #{background $checkbox-md-transition-duration $checkbox-md-transition-easing};
}
// Material Design Checkbox Inner Checkmark: Checked
// -----------------------------------------
:host(.checkbox-checked) .checkbox-inner {
@include position(calc(var(--size) * .05), null, null, calc(var(--size) * .3));
.checkbox-icon path {
stroke-dasharray: 30;
stroke-dashoffset: 30;
stroke-width: 3;
}
position: absolute;
:host(.checkbox-checked) .checkbox-icon path {
stroke-dashoffset: 0;
width: calc(var(--size) * .3125);
height: calc(var(--size) * .625);
transform: rotate(45deg);
border-width: calc(var(--size) * .125);
border-top-width: 0;
border-left-width: 0;
border-style: $checkbox-md-icon-checkmark-style;
transition: stroke-dashoffset 90ms linear 90ms;
}