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

feat(checkbox): implement indeterminate state (#16951)

Browse Source 
This adds an `indeterminate` prop to the `ion-checkbox` component, which visually renders the checkbox with a dash to indicate an indeterminate state.

closes #16943
This commit is contained in:
Simon Hänisch
2019-03-04 17:16:41 +01:00
committed by Brandy Carney
parent 28fd75ee6b
commit c641ae10ed
10 changed files with 278 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,14 +6,18 @@
:host {
/**
* @prop --size: Size of the checkbox icon
*
* @prop --background: Background of the checkbox icon
* @prop --background-checked: Background of the checkbox icon when checked
*
* @prop --border-color: Border color of the checkbox icon
* @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 --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 --transition: Transition of the checkbox icon
*
* @prop --checkmark-color: Color of the checkbox checkmark when checked
*/
--background-checked: #{ion-color(primary, base)};
@ -67,19 +71,23 @@ button {
opacity: 0;
}
// Checked Checkbox
// Checked / Indeterminate Checkbox
// ---------------------------------------------
:host(.checkbox-checked) .checkbox-icon {
:host(.checkbox-checked) .checkbox-icon,
:host(.checkbox-indeterminate) .checkbox-icon {
border-color: var(--border-color-checked);
background: var(--background-checked);
}
:host(.checkbox-checked) .checkbox-icon path {
:host(.checkbox-checked) .checkbox-icon path,
:host(.checkbox-indeterminate) .checkbox-icon path {
opacity: 1;
}
// Disabled Checkbox
// ---------------------------------------------