javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 03:00:58 +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

18
core/src/components/checkbox/checkbox.scss
View File

@ -10,15 +10,17 @@
* @prop --border-radius: Border radius of the checkbox icon
* @prop --border-width: Border width of the checkbox icon
* @prop --border-style: Border style of the checkbox icon
* @prop --size: Size of the checkbox icon
* @prop --transition: Transition of the checkbox icon
* @prop --background-checked: Background of the checkbox icon when checked
* @prop --border-color-checked: Border color of the checkbox icon when checked
* @prop --checkmark-color: Color of the checkbox checkmark when checked
* @prop --height: Height of the checkbox icon
* @prop --width: Width of the checkbox icon
*/
--background-checked: #{ion-color(primary, base)};
--border-color-checked: #{ion-color(primary, base)};
--checkmark-color: #{ion-color(primary, contrast)};
--transition: none;
display: inline-block;
position: relative;
@ -42,8 +44,8 @@ input {
position: relative;
width: var(--size);
height: var(--size);
width: var(--width);
height: var(--height);
transition: var(--transition);
@ -56,8 +58,10 @@ input {
contain: strict;
}
.checkbox-inner {
border-color: var(--checkmark-color);
.checkbox-icon path {
fill: none;
stroke: var(--checkmark-color);
stroke-width: 1;
opacity: 0;
}
@ -71,7 +75,7 @@ input {
background: var(--background-checked);
}
:host(.checkbox-checked) .checkbox-inner {
:host(.checkbox-checked) .checkbox-icon path {
opacity: 1;
}
@ -80,4 +84,4 @@ input {
:host(.checkbox-disabled) {
pointer-events: none;
}
}