javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-09 16:16:41 +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

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

@ -13,23 +13,28 @@
// Background
--background: #{$checkbox-md-icon-background-color-off};
// Transition
--transition: #{background $checkbox-md-transition-duration $checkbox-md-transition-easing};
// Size
--size: #{$checkbox-md-icon-size};
width: var(--size);
width: var(--size);
height: var(--size);
}
.checkbox-icon path {
stroke-dasharray: 30;
stroke-dashoffset: 30;
stroke-width: 3;
}
:host(.checkbox-checked) .checkbox-icon path {
// Material Design Checkbox: Checked / Indeterminate
// --------------------------------------------------------
:host(.checkbox-checked) .checkbox-icon path,
:host(.checkbox-indeterminate) .checkbox-icon path {
stroke-dashoffset: 0;
transition: stroke-dashoffset 90ms linear 90ms;
@ -37,21 +42,23 @@
// Material Design Checkbox: Disabled
// -----------------------------------------
// --------------------------------------------------------
// TODO .item-md.item-checkbox-disabled ion-label
:host(.checkbox-disabled) {
opacity: $checkbox-md-disabled-opacity;
}
// Material Design Checkbox Within An Item
// -----------------------------------------
// --------------------------------------------------------
:host(.in-item) {
// end position by default
@include margin($checkbox-md-item-end-margin-top, $checkbox-md-item-end-margin-end, $checkbox-md-item-end-margin-bottom, $checkbox-md-item-end-margin-start);
display: block;
position: static;
}