<div class="acl-single-checkbox">
<input id="demo-1" type="checkbox" checked>
<label for="demo-1"></label>
</div>
<h4>Disabled Styling</h4>
<div class="acl-single-checkbox">
<input id="demo-2" type="checkbox" disabled="disabled" checked>
<label for="demo-2"></label>
</div>
<div class="acl-single-checkbox">
<input id="demo-2" type="checkbox" disabled="disabled">
<label for="demo-2"></label>
</div>
<h4>Legacy Styling</h4>
<div class="acl-single-checkbox acl-single-checkbox--green">
<input id="demo-3" type="checkbox" checked>
<label for="demo-3"></label>
</div>
<div class="acl-single-checkbox">
<input id="demo-1" type="checkbox" checked>
<label for="demo-1"></label>
</div>
<h4>Disabled Styling</h4>
<div class="acl-single-checkbox">
<input id="demo-2" type="checkbox" disabled="disabled" checked>
<label for="demo-2"></label>
</div>
<div class="acl-single-checkbox">
<input id="demo-2" type="checkbox" disabled="disabled">
<label for="demo-2"></label>
</div>
<h4>Legacy Styling</h4>
<div class="acl-single-checkbox acl-single-checkbox--green">
<input id="demo-3" type="checkbox" checked>
<label for="demo-3"></label>
</div>
/* No context defined. */
# Change Log
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
# [4.0.0](https://github.com/material-components/material-components-web/compare/v3.2.0...v4.0.0) (2019-11-02)
### Bug Fixes
* **checkbox:** Change minimum ripple size of checkbox & switch 24px => 28px ([#5140](https://github.com/material-components/material-components-web/issues/5140)) ([3eae309](https://github.com/material-components/material-components-web/commit/3eae309))
* **checkbox:** Fix checkbox terminology in sass mixins ([#5014](https://github.com/material-components/material-components-web/issues/5014)) ([2161c02](https://github.com/material-components/material-components-web/commit/2161c02))
* **checkbox:** Remove RTL styles from checkbox ripple ([#5134](https://github.com/material-components/material-components-web/issues/5134)) ([a646516](https://github.com/material-components/material-components-web/commit/a646516))
* **touch-target:** Add class to touch target wrapper. ([#5174](https://github.com/material-components/material-components-web/issues/5174)) ([e7799b8](https://github.com/material-components/material-components-web/commit/e7799b8))
* **touch-target:** Add missing dependency - touch target to com… ([#5098](https://github.com/material-components/material-components-web/issues/5098)) ([9306bd0](https://github.com/material-components/material-components-web/commit/9306bd0))
### Features
* **checkbox:** Add disabled state color mixins ([#5167](https://github.com/material-components/material-components-web/issues/5167)) ([01628ef](https://github.com/material-components/material-components-web/commit/01628ef))
* **checkbox:** Add support for 48px touch target ([#5025](https://github.com/material-components/material-components-web/issues/5025)) ([b5685a8](https://github.com/material-components/material-components-web/commit/b5685a8))
* **checkbox:** Move ripple to child node ([#4981](https://github.com/material-components/material-components-web/issues/4981)) ([9712b24](https://github.com/material-components/material-components-web/commit/9712b24))
* **density:** Add density subsystem to components ([#5059](https://github.com/material-components/material-components-web/issues/5059)) ([73a5e4c](https://github.com/material-components/material-components-web/commit/73a5e4c))
### BREAKING CHANGES
* **checkbox:** `acl-checkbox-ink-color` mixin now only applies to enabled checkboxes
* **density:** Renamed sass mixins & variables in MDC Data Table - `acl-data-table-header-row-height` => `acl-data-table-header-cell-height` & `acl-data-table-row-height` => `acl-data-table-cell-height`. Also removed `acl-button--dense` variant, use button's density mixin instead.
# [4.0.0-canary.062ade5c0.0](https://github.com/material-components/material-components-web/compare/v3.2.0...v4.0.0-canary.062ade5c0.0) (2019-10-17)
### Bug Fixes
* **checkbox:** Change minimum ripple size of checkbox & switch 24px => 28px ([#5140](https://github.com/material-components/material-components-web/issues/5140)) ([3eae309](https://github.com/material-components/material-components-web/commit/3eae309))
* **checkbox:** Fix checkbox terminology in sass mixins ([#5014](https://github.com/material-components/material-components-web/issues/5014)) ([2161c02](https://github.com/material-components/material-components-web/commit/2161c02))
* **checkbox:** Remove RTL styles from checkbox ripple ([#5134](https://github.com/material-components/material-components-web/issues/5134)) ([a646516](https://github.com/material-components/material-components-web/commit/a646516))
* **touch-target:** Add class to touch target wrapper. ([#5174](https://github.com/material-components/material-components-web/issues/5174)) ([e7799b8](https://github.com/material-components/material-components-web/commit/e7799b8))
* **touch-target:** Add missing dependency - touch target to com… ([#5098](https://github.com/material-components/material-components-web/issues/5098)) ([9306bd0](https://github.com/material-components/material-components-web/commit/9306bd0))
### Features
* **checkbox:** Add support for 48px touch target ([#5025](https://github.com/material-components/material-components-web/issues/5025)) ([b5685a8](https://github.com/material-components/material-components-web/commit/b5685a8))
* **checkbox:** Move ripple to child node ([#4981](https://github.com/material-components/material-components-web/issues/4981)) ([9712b24](https://github.com/material-components/material-components-web/commit/9712b24))
* **density:** Add density subsystem to components ([#5059](https://github.com/material-components/material-components-web/issues/5059)) ([73a5e4c](https://github.com/material-components/material-components-web/commit/73a5e4c))
### BREAKING CHANGES
* **density:** Renamed sass mixins & variables in MDC Data Table - `acl-data-table-header-row-height` => `acl-data-table-header-cell-height` & `acl-data-table-row-height` => `acl-data-table-cell-height`. Also removed `acl-button--dense` variant, use button's density mixin instead.
# [4.0.0-canary.735147131.0](https://github.com/material-components/material-components-web/compare/v3.2.0...v4.0.0-canary.735147131.0) (2019-10-16)
### Bug Fixes
* **checkbox:** Change minimum ripple size of checkbox & switch 24px => 28px ([#5140](https://github.com/material-components/material-components-web/issues/5140)) ([3eae309](https://github.com/material-components/material-components-web/commit/3eae309))
* **checkbox:** Fix checkbox terminology in sass mixins ([#5014](https://github.com/material-components/material-components-web/issues/5014)) ([2161c02](https://github.com/material-components/material-components-web/commit/2161c02))
* **checkbox:** Remove RTL styles from checkbox ripple ([#5134](https://github.com/material-components/material-components-web/issues/5134)) ([a646516](https://github.com/material-components/material-components-web/commit/a646516))
* **touch-target:** Add class to touch target wrapper. ([#5174](https://github.com/material-components/material-components-web/issues/5174)) ([e7799b8](https://github.com/material-components/material-components-web/commit/e7799b8))
* **touch-target:** Add missing dependency - touch target to com… ([#5098](https://github.com/material-components/material-components-web/issues/5098)) ([9306bd0](https://github.com/material-components/material-components-web/commit/9306bd0))
### Features
* **checkbox:** Add support for 48px touch target ([#5025](https://github.com/material-components/material-components-web/issues/5025)) ([b5685a8](https://github.com/material-components/material-components-web/commit/b5685a8))
* **checkbox:** Move ripple to child node ([#4981](https://github.com/material-components/material-components-web/issues/4981)) ([9712b24](https://github.com/material-components/material-components-web/commit/9712b24))
* **density:** Add density subsystem to components ([#5059](https://github.com/material-components/material-components-web/issues/5059)) ([73a5e4c](https://github.com/material-components/material-components-web/commit/73a5e4c))
### BREAKING CHANGES
* **density:** Renamed sass mixins & variables in MDC Data Table - `acl-data-table-header-row-height` => `acl-data-table-header-cell-height` & `acl-data-table-row-height` => `acl-data-table-cell-height`. Also removed `acl-button--dense` variant, use button's density mixin instead.
# [4.0.0-canary.5dc45b82a.0](https://github.com/material-components/material-components-web/compare/v3.2.0...v4.0.0-canary.5dc45b82a.0) (2019-10-16)
### Bug Fixes
* **checkbox:** Change minimum ripple size of checkbox & switch 24px => 28px ([#5140](https://github.com/material-components/material-components-web/issues/5140)) ([3eae309](https://github.com/material-components/material-components-web/commit/3eae309))
* **checkbox:** Fix checkbox terminology in sass mixins ([#5014](https://github.com/material-components/material-components-web/issues/5014)) ([2161c02](https://github.com/material-components/material-components-web/commit/2161c02))
* **checkbox:** Remove RTL styles from checkbox ripple ([#5134](https://github.com/material-components/material-components-web/issues/5134)) ([a646516](https://github.com/material-components/material-components-web/commit/a646516))
* **touch-target:** Add missing dependency - touch target to com… ([#5098](https://github.com/material-components/material-components-web/issues/5098)) ([9306bd0](https://github.com/material-components/material-components-web/commit/9306bd0))
### Features
* **checkbox:** Add support for 48px touch target ([#5025](https://github.com/material-components/material-components-web/issues/5025)) ([b5685a8](https://github.com/material-components/material-components-web/commit/b5685a8))
* **checkbox:** Move ripple to child node ([#4981](https://github.com/material-components/material-components-web/issues/4981)) ([9712b24](https://github.com/material-components/material-components-web/commit/9712b24))
* **density:** Add density subsystem to components ([#5059](https://github.com/material-components/material-components-web/issues/5059)) ([73a5e4c](https://github.com/material-components/material-components-web/commit/73a5e4c))
### BREAKING CHANGES
* **density:** Renamed sass mixins & variables in MDC Data Table - `acl-data-table-header-row-height` => `acl-data-table-header-cell-height` & `acl-data-table-row-height` => `acl-data-table-cell-height`. Also removed `acl-button--dense` variant, use button's density mixin instead.
# [4.0.0-canary.22d7ad2fb.0](https://github.com/material-components/material-components-web/compare/v3.2.0...v4.0.0-canary.22d7ad2fb.0) (2019-10-15)
### Bug Fixes
* **checkbox:** Change minimum ripple size of checkbox & switch 24px => 28px ([#5140](https://github.com/material-components/material-components-web/issues/5140)) ([3eae309](https://github.com/material-components/material-components-web/commit/3eae309))
* **checkbox:** Fix checkbox terminology in sass mixins ([#5014](https://github.com/material-components/material-components-web/issues/5014)) ([2161c02](https://github.com/material-components/material-components-web/commit/2161c02))
* **checkbox:** Remove RTL styles from checkbox ripple ([#5134](https://github.com/material-components/material-components-web/issues/5134)) ([a646516](https://github.com/material-components/material-components-web/commit/a646516))
* **touch-target:** Add missing dependency - touch target to com… ([#5098](https://github.com/material-components/material-components-web/issues/5098)) ([9306bd0](https://github.com/material-components/material-components-web/commit/9306bd0))
### Features
* **checkbox:** Add support for 48px touch target ([#5025](https://github.com/material-components/material-components-web/issues/5025)) ([b5685a8](https://github.com/material-components/material-components-web/commit/b5685a8))
* **checkbox:** Move ripple to child node ([#4981](https://github.com/material-components/material-components-web/issues/4981)) ([9712b24](https://github.com/material-components/material-components-web/commit/9712b24))
* **density:** Add density subsystem to components ([#5059](https://github.com/material-components/material-components-web/issues/5059)) ([73a5e4c](https://github.com/material-components/material-components-web/commit/73a5e4c))
### BREAKING CHANGES
* **density:** Renamed sass mixins & variables in MDC Data Table - `acl-data-table-header-row-height` => `acl-data-table-header-cell-height` & `acl-data-table-row-height` => `acl-data-table-cell-height`. Also removed `acl-button--dense` variant, use button's density mixin instead.
# [4.0.0-canary.199534d61.0](https://github.com/material-components/material-components-web/compare/v3.2.0...v4.0.0-canary.199534d61.0) (2019-09-27)
### Bug Fixes
* **checkbox:** Fix checkbox terminology in sass mixins ([#5014](https://github.com/material-components/material-components-web/issues/5014)) ([2161c02](https://github.com/material-components/material-components-web/commit/2161c02))
* **touch-target:** Add missing dependency - touch target to com… ([#5098](https://github.com/material-components/material-components-web/issues/5098)) ([9306bd0](https://github.com/material-components/material-components-web/commit/9306bd0))
### Features
* **checkbox:** Add support for 48px touch target ([#5025](https://github.com/material-components/material-components-web/issues/5025)) ([b5685a8](https://github.com/material-components/material-components-web/commit/b5685a8))
* **checkbox:** Move ripple to child node ([#4981](https://github.com/material-components/material-components-web/issues/4981)) ([9712b24](https://github.com/material-components/material-components-web/commit/9712b24))
* **density:** Add density subsystem to components ([#5059](https://github.com/material-components/material-components-web/issues/5059)) ([73a5e4c](https://github.com/material-components/material-components-web/commit/73a5e4c))
### BREAKING CHANGES
* **density:** Renamed sass mixins & variables in MDC Data Table - `acl-data-table-header-row-height` => `acl-data-table-header-cell-height` & `acl-data-table-row-height` => `acl-data-table-cell-height`. Also removed `acl-button--dense` variant, use button's density mixin instead.
# [4.0.0-canary.905884690.0](https://github.com/material-components/material-components-web/compare/v3.2.0...v4.0.0-canary.905884690.0) (2019-09-16)
### Bug Fixes
* **checkbox:** Fix checkbox terminology in sass mixins ([#5014](https://github.com/material-components/material-components-web/issues/5014)) ([2161c02](https://github.com/material-components/material-components-web/commit/2161c02))
* **touch-target:** Add missing dependency - touch target to com… ([#5098](https://github.com/material-components/material-components-web/issues/5098)) ([9306bd0](https://github.com/material-components/material-components-web/commit/9306bd0))
### Features
* **checkbox:** Add support for 48px touch target ([#5025](https://github.com/material-components/material-components-web/issues/5025)) ([b5685a8](https://github.com/material-components/material-components-web/commit/b5685a8))
* **checkbox:** Move ripple to child node ([#4981](https://github.com/material-components/material-components-web/issues/4981)) ([9712b24](https://github.com/material-components/material-components-web/commit/9712b24))
* **density:** Add density subsystem to components ([#5059](https://github.com/material-components/material-components-web/issues/5059)) ([73a5e4c](https://github.com/material-components/material-components-web/commit/73a5e4c))
### BREAKING CHANGES
* **density:** Renamed sass mixins & variables in MDC Data Table - `acl-data-table-header-row-height` => `acl-data-table-header-cell-height` & `acl-data-table-row-height` => `acl-data-table-cell-height`. Also removed `acl-button--dense` variant, use button's density mixin instead.
# [4.0.0-canary.e851d4f40.0](https://github.com/material-components/material-components-web/compare/v3.2.0...v4.0.0-canary.e851d4f40.0) (2019-09-13)
### Bug Fixes
* **checkbox:** Fix checkbox terminology in sass mixins ([#5014](https://github.com/material-components/material-components-web/issues/5014)) ([2161c02](https://github.com/material-components/material-components-web/commit/2161c02))
### Features
* **checkbox:** Add support for 48px touch target ([#5025](https://github.com/material-components/material-components-web/issues/5025)) ([b5685a8](https://github.com/material-components/material-components-web/commit/b5685a8))
* **checkbox:** Move ripple to child node ([#4981](https://github.com/material-components/material-components-web/issues/4981)) ([9712b24](https://github.com/material-components/material-components-web/commit/9712b24))
* **density:** Add density subsystem to components ([#5059](https://github.com/material-components/material-components-web/issues/5059)) ([73a5e4c](https://github.com/material-components/material-components-web/commit/73a5e4c))
### BREAKING CHANGES
* **density:** Renamed sass mixins & variables in MDC Data Table - `acl-data-table-header-row-height` => `acl-data-table-header-cell-height` & `acl-data-table-row-height` => `acl-data-table-cell-height`. Also removed `acl-button--dense` variant, use button's density mixin instead.
# [4.0.0-canary.e09c3b770.0](https://github.com/material-components/material-components-web/compare/v3.2.0...v4.0.0-canary.e09c3b770.0) (2019-09-13)
### Bug Fixes
* **checkbox:** Fix checkbox terminology in sass mixins ([#5014](https://github.com/material-components/material-components-web/issues/5014)) ([2161c02](https://github.com/material-components/material-components-web/commit/2161c02))
### Features
* **checkbox:** Add support for 48px touch target ([#5025](https://github.com/material-components/material-components-web/issues/5025)) ([b5685a8](https://github.com/material-components/material-components-web/commit/b5685a8))
* **checkbox:** Move ripple to child node ([#4981](https://github.com/material-components/material-components-web/issues/4981)) ([9712b24](https://github.com/material-components/material-components-web/commit/9712b24))
* **density:** Add density subsystem to components ([#5059](https://github.com/material-components/material-components-web/issues/5059)) ([73a5e4c](https://github.com/material-components/material-components-web/commit/73a5e4c))
### BREAKING CHANGES
* **density:** Renamed sass mixins & variables in MDC Data Table - `acl-data-table-header-row-height` => `acl-data-table-header-cell-height` & `acl-data-table-row-height` => `acl-data-table-cell-height`. Also removed `acl-button--dense` variant, use button's density mixin instead.
# [4.0.0-canary.b58076d4b.0](https://github.com/material-components/material-components-web/compare/v3.2.0...v4.0.0-canary.b58076d4b.0) (2019-09-13)
### Bug Fixes
* **checkbox:** Fix checkbox terminology in sass mixins ([#5014](https://github.com/material-components/material-components-web/issues/5014)) ([2161c02](https://github.com/material-components/material-components-web/commit/2161c02))
### Features
* **checkbox:** Add support for 48px touch target ([#5025](https://github.com/material-components/material-components-web/issues/5025)) ([b5685a8](https://github.com/material-components/material-components-web/commit/b5685a8))
* **checkbox:** Move ripple to child node ([#4981](https://github.com/material-components/material-components-web/issues/4981)) ([9712b24](https://github.com/material-components/material-components-web/commit/9712b24))
* **density:** Add density subsystem to components ([#5059](https://github.com/material-components/material-components-web/issues/5059)) ([73a5e4c](https://github.com/material-components/material-components-web/commit/73a5e4c))
### BREAKING CHANGES
* **density:** Renamed sass mixins & variables in MDC Data Table - `acl-data-table-header-row-height` => `acl-data-table-header-cell-height` & `acl-data-table-row-height` => `acl-data-table-cell-height`. Also removed `acl-button--dense` variant, use button's density mixin instead.
# [4.0.0-canary.22916a234.0](https://github.com/material-components/material-components-web/compare/v3.2.0...v4.0.0-canary.22916a234.0) (2019-09-13)
### Bug Fixes
* **checkbox:** Fix checkbox terminology in sass mixins ([#5014](https://github.com/material-components/material-components-web/issues/5014)) ([2161c02](https://github.com/material-components/material-components-web/commit/2161c02))
### Features
* **checkbox:** Add support for 48px touch target ([#5025](https://github.com/material-components/material-components-web/issues/5025)) ([b5685a8](https://github.com/material-components/material-components-web/commit/b5685a8))
* **checkbox:** Move ripple to child node ([#4981](https://github.com/material-components/material-components-web/issues/4981)) ([9712b24](https://github.com/material-components/material-components-web/commit/9712b24))
* **density:** Add density subsystem to components ([#5059](https://github.com/material-components/material-components-web/issues/5059)) ([73a5e4c](https://github.com/material-components/material-components-web/commit/73a5e4c))
### BREAKING CHANGES
* **density:** Renamed sass mixins & variables in MDC Data Table - `acl-data-table-header-row-height` => `acl-data-table-header-cell-height` & `acl-data-table-row-height` => `acl-data-table-cell-height`. Also removed `acl-button--dense` variant, use button's density mixin instead.
# [4.0.0-canary.c7e991001.0](https://github.com/material-components/material-components-web/compare/v3.2.0...v4.0.0-canary.c7e991001.0) (2019-09-13)
### Bug Fixes
* **checkbox:** Fix checkbox terminology in sass mixins ([#5014](https://github.com/material-components/material-components-web/issues/5014)) ([2161c02](https://github.com/material-components/material-components-web/commit/2161c02))
### Features
* **checkbox:** Add support for 48px touch target ([#5025](https://github.com/material-components/material-components-web/issues/5025)) ([b5685a8](https://github.com/material-components/material-components-web/commit/b5685a8))
* **checkbox:** Move ripple to child node ([#4981](https://github.com/material-components/material-components-web/issues/4981)) ([9712b24](https://github.com/material-components/material-components-web/commit/9712b24))
* **density:** Add density subsystem to components ([#5059](https://github.com/material-components/material-components-web/issues/5059)) ([73a5e4c](https://github.com/material-components/material-components-web/commit/73a5e4c))
### BREAKING CHANGES
* **density:** Renamed sass mixins & variables in MDC Data Table - `acl-data-table-header-row-height` => `acl-data-table-header-cell-height` & `acl-data-table-row-height` => `acl-data-table-cell-height`. Also removed `acl-button--dense` variant, use button's density mixin instead.
# [5.0.0-canary.b8513889d.0](https://github.com/material-components/material-components-web/compare/v3.2.0...v5.0.0-canary.b8513889d.0) (2019-09-13)
### Bug Fixes
* **checkbox:** Fix checkbox terminology in sass mixins ([#5014](https://github.com/material-components/material-components-web/issues/5014)) ([2161c02](https://github.com/material-components/material-components-web/commit/2161c02))
### Features
* **checkbox:** Add support for 48px touch target ([#5025](https://github.com/material-components/material-components-web/issues/5025)) ([b5685a8](https://github.com/material-components/material-components-web/commit/b5685a8))
* **checkbox:** Move ripple to child node ([#4981](https://github.com/material-components/material-components-web/issues/4981)) ([9712b24](https://github.com/material-components/material-components-web/commit/9712b24))
* **density:** Add density subsystem to components ([#5059](https://github.com/material-components/material-components-web/issues/5059)) ([73a5e4c](https://github.com/material-components/material-components-web/commit/73a5e4c))
### BREAKING CHANGES
* **density:** Renamed sass mixins & variables in MDC Data Table - `acl-data-table-header-row-height` => `acl-data-table-header-cell-height` & `acl-data-table-row-height` => `acl-data-table-cell-height`. Also removed `acl-button--dense` variant, use button's density mixin instead.
# [4.0.0-canary.0c808fb33.0](https://github.com/material-components/material-components-web/compare/v3.2.0...v4.0.0-canary.0c808fb33.0) (2019-09-13)
### Bug Fixes
* **checkbox:** Fix checkbox terminology in sass mixins ([#5014](https://github.com/material-components/material-components-web/issues/5014)) ([2161c02](https://github.com/material-components/material-components-web/commit/2161c02))
### Features
* **checkbox:** Add support for 48px touch target ([#5025](https://github.com/material-components/material-components-web/issues/5025)) ([b5685a8](https://github.com/material-components/material-components-web/commit/b5685a8))
* **checkbox:** Move ripple to child node ([#4981](https://github.com/material-components/material-components-web/issues/4981)) ([9712b24](https://github.com/material-components/material-components-web/commit/9712b24))
* **density:** Add density subsystem to components ([#5059](https://github.com/material-components/material-components-web/issues/5059)) ([73a5e4c](https://github.com/material-components/material-components-web/commit/73a5e4c))
### BREAKING CHANGES
* **density:** Renamed sass mixins & variables in MDC Data Table - `acl-data-table-header-row-height` => `acl-data-table-header-cell-height` & `acl-data-table-row-height` => `acl-data-table-cell-height`. Also removed `acl-button--dense` variant, use button's density mixin instead.
# [4.0.0-canary.e3497b3e6.0](https://github.com/material-components/material-components-web/compare/v3.2.0...v4.0.0-canary.e3497b3e6.0) (2019-09-13)
### Bug Fixes
* **checkbox:** Fix checkbox terminology in sass mixins ([#5014](https://github.com/material-components/material-components-web/issues/5014)) ([2161c02](https://github.com/material-components/material-components-web/commit/2161c02))
### Features
* **checkbox:** Add support for 48px touch target ([#5025](https://github.com/material-components/material-components-web/issues/5025)) ([b5685a8](https://github.com/material-components/material-components-web/commit/b5685a8))
* **checkbox:** Move ripple to child node ([#4981](https://github.com/material-components/material-components-web/issues/4981)) ([9712b24](https://github.com/material-components/material-components-web/commit/9712b24))
* **density:** Add density subsystem to components ([#5059](https://github.com/material-components/material-components-web/issues/5059)) ([73a5e4c](https://github.com/material-components/material-components-web/commit/73a5e4c))
### BREAKING CHANGES
* **density:** Renamed sass mixins & variables in MDC Data Table - `acl-data-table-header-row-height` => `acl-data-table-header-cell-height` & `acl-data-table-row-height` => `acl-data-table-cell-height`. Also removed `acl-button--dense` variant, use button's density mixin instead.
# [4.0.0-canary.79d881baf.0](https://github.com/material-components/material-components-web/compare/v3.2.0...v4.0.0-canary.79d881baf.0) (2019-09-13)
### Bug Fixes
* **checkbox:** Fix checkbox terminology in sass mixins ([#5014](https://github.com/material-components/material-components-web/issues/5014)) ([2161c02](https://github.com/material-components/material-components-web/commit/2161c02))
### Features
* **checkbox:** Add support for 48px touch target ([#5025](https://github.com/material-components/material-components-web/issues/5025)) ([b5685a8](https://github.com/material-components/material-components-web/commit/b5685a8))
* **checkbox:** Move ripple to child node ([#4981](https://github.com/material-components/material-components-web/issues/4981)) ([9712b24](https://github.com/material-components/material-components-web/commit/9712b24))
* **density:** Add density subsystem to components ([#5059](https://github.com/material-components/material-components-web/issues/5059)) ([73a5e4c](https://github.com/material-components/material-components-web/commit/73a5e4c))
### BREAKING CHANGES
* **density:** Renamed sass mixins & variables in MDC Data Table - `acl-data-table-header-row-height` => `acl-data-table-header-cell-height` & `acl-data-table-row-height` => `acl-data-table-cell-height`. Also removed `acl-button--dense` variant, use button's density mixin instead.
# [4.0.0-canary.79d881baf.0](https://github.com/material-components/material-components-web/compare/v3.2.0...v4.0.0-canary.79d881baf.0) (2019-09-13)
### Bug Fixes
* **checkbox:** Fix checkbox terminology in sass mixins ([#5014](https://github.com/material-components/material-components-web/issues/5014)) ([2161c02](https://github.com/material-components/material-components-web/commit/2161c02))
### Features
* **checkbox:** Add support for 48px touch target ([#5025](https://github.com/material-components/material-components-web/issues/5025)) ([b5685a8](https://github.com/material-components/material-components-web/commit/b5685a8))
* **checkbox:** Move ripple to child node ([#4981](https://github.com/material-components/material-components-web/issues/4981)) ([9712b24](https://github.com/material-components/material-components-web/commit/9712b24))
* **density:** Add density subsystem to components ([#5059](https://github.com/material-components/material-components-web/issues/5059)) ([73a5e4c](https://github.com/material-components/material-components-web/commit/73a5e4c))
### BREAKING CHANGES
* **density:** Renamed sass mixins & variables in MDC Data Table - `acl-data-table-header-row-height` => `acl-data-table-header-cell-height` & `acl-data-table-row-height` => `acl-data-table-cell-height`. Also removed `acl-button--dense` variant, use button's density mixin instead.
# [4.0.0-canary.79d881baf.0](https://github.com/material-components/material-components-web/compare/v3.2.0...v4.0.0-canary.79d881baf.0) (2019-09-13)
### Bug Fixes
* **checkbox:** Fix checkbox terminology in sass mixins ([#5014](https://github.com/material-components/material-components-web/issues/5014)) ([2161c02](https://github.com/material-components/material-components-web/commit/2161c02))
### Features
* **checkbox:** Add support for 48px touch target ([#5025](https://github.com/material-components/material-components-web/issues/5025)) ([b5685a8](https://github.com/material-components/material-components-web/commit/b5685a8))
* **checkbox:** Move ripple to child node ([#4981](https://github.com/material-components/material-components-web/issues/4981)) ([9712b24](https://github.com/material-components/material-components-web/commit/9712b24))
* **density:** Add density subsystem to components ([#5059](https://github.com/material-components/material-components-web/issues/5059)) ([73a5e4c](https://github.com/material-components/material-components-web/commit/73a5e4c))
### BREAKING CHANGES
* **density:** Renamed sass mixins & variables in MDC Data Table - `acl-data-table-header-row-height` => `acl-data-table-header-cell-height` & `acl-data-table-row-height` => `acl-data-table-cell-height`. Also removed `acl-button--dense` variant, use button's density mixin instead.
# [4.0.0-canary.eab7903af.0](https://github.com/material-components/material-components-web/compare/v3.2.0...v4.0.0-canary.eab7903af.0) (2019-09-13)
### Bug Fixes
* **checkbox:** Fix checkbox terminology in sass mixins ([#5014](https://github.com/material-components/material-components-web/issues/5014)) ([2161c02](https://github.com/material-components/material-components-web/commit/2161c02))
### Features
* **checkbox:** Add support for 48px touch target ([#5025](https://github.com/material-components/material-components-web/issues/5025)) ([b5685a8](https://github.com/material-components/material-components-web/commit/b5685a8))
* **checkbox:** Move ripple to child node ([#4981](https://github.com/material-components/material-components-web/issues/4981)) ([9712b24](https://github.com/material-components/material-components-web/commit/9712b24))
* **density:** Add density subsystem to components ([#5059](https://github.com/material-components/material-components-web/issues/5059)) ([73a5e4c](https://github.com/material-components/material-components-web/commit/73a5e4c))
### BREAKING CHANGES
* **density:** Renamed sass mixins & variables in MDC Data Table - `acl-data-table-header-row-height` => `acl-data-table-header-cell-height` & `acl-data-table-row-height` => `acl-data-table-cell-height`. Also removed `acl-button--dense` variant, use button's density mixin instead.
# [4.0.0-canary.eab7903af.0](https://github.com/material-components/material-components-web/compare/v3.2.0...v4.0.0-canary.eab7903af.0) (2019-09-13)
### Bug Fixes
* **checkbox:** Fix checkbox terminology in sass mixins ([#5014](https://github.com/material-components/material-components-web/issues/5014)) ([2161c02](https://github.com/material-components/material-components-web/commit/2161c02))
### Features
* **checkbox:** Add support for 48px touch target ([#5025](https://github.com/material-components/material-components-web/issues/5025)) ([b5685a8](https://github.com/material-components/material-components-web/commit/b5685a8))
* **checkbox:** Move ripple to child node ([#4981](https://github.com/material-components/material-components-web/issues/4981)) ([9712b24](https://github.com/material-components/material-components-web/commit/9712b24))
* **density:** Add density subsystem to components ([#5059](https://github.com/material-components/material-components-web/issues/5059)) ([73a5e4c](https://github.com/material-components/material-components-web/commit/73a5e4c))
### BREAKING CHANGES
* **density:** Renamed sass mixins & variables in MDC Data Table - `acl-data-table-header-row-height` => `acl-data-table-header-cell-height` & `acl-data-table-row-height` => `acl-data-table-cell-height`. Also removed `acl-button--dense` variant, use button's density mixin instead.
# [3.2.0](https://github.com/material-components/material-components-web/compare/v3.1.1...v3.2.0) (2019-09-12)
**Note:** Version bump only for package ..//checkbox
# [4.0.0-edc72a4d7.0](https://github.com/material-components/material-components-web/compare/v3.1.1...v4.0.0-edc72a4d7.0) (2019-09-09)
### Bug Fixes
* **checkbox:** Adjust touch target size when density applied ([#5050](https://github.com/material-components/material-components-web/issues/5050)) ([7dee664](https://github.com/material-components/material-components-web/commit/7dee664))
* **checkbox:** Fix checkbox terminology in sass mixins ([#5014](https://github.com/material-components/material-components-web/issues/5014)) ([2161c02](https://github.com/material-components/material-components-web/commit/2161c02))
### Features
* **checkbox:** Add support for 48px touch target ([#5025](https://github.com/material-components/material-components-web/issues/5025)) ([b5685a8](https://github.com/material-components/material-components-web/commit/b5685a8))
* **checkbox:** Added density mixin to checkbox ([#5016](https://github.com/material-components/material-components-web/issues/5016)) ([092716b](https://github.com/material-components/material-components-web/commit/092716b))
* **checkbox:** Move ripple to child node ([#4981](https://github.com/material-components/material-components-web/issues/4981)) ([9712b24](https://github.com/material-components/material-components-web/commit/9712b24))
# [4.0.0-canary.1](https://github.com/material-components/material-components-web/compare/v3.1.1...v4.0.0-canary.1) (2019-09-09)
### Bug Fixes
* **checkbox:** Adjust touch target size when density applied ([#5050](https://github.com/material-components/material-components-web/issues/5050)) ([7dee664](https://github.com/material-components/material-components-web/commit/7dee664))
* **checkbox:** Fix checkbox terminology in sass mixins ([#5014](https://github.com/material-components/material-components-web/issues/5014)) ([2161c02](https://github.com/material-components/material-components-web/commit/2161c02))
### Features
* **checkbox:** Add support for 48px touch target ([#5025](https://github.com/material-components/material-components-web/issues/5025)) ([b5685a8](https://github.com/material-components/material-components-web/commit/b5685a8))
* **checkbox:** Added density mixin to checkbox ([#5016](https://github.com/material-components/material-components-web/issues/5016)) ([092716b](https://github.com/material-components/material-components-web/commit/092716b))
* **checkbox:** Move ripple to child node ([#4981](https://github.com/material-components/material-components-web/issues/4981)) ([9712b24](https://github.com/material-components/material-components-web/commit/9712b24))
# [4.0.0-canary.1](https://github.com/material-components/material-components-web/compare/v3.1.1...v4.0.0-canary.1) (2019-09-09)
### Bug Fixes
* **checkbox:** Adjust touch target size when density applied ([#5050](https://github.com/material-components/material-components-web/issues/5050)) ([7dee664](https://github.com/material-components/material-components-web/commit/7dee664))
* **checkbox:** Fix checkbox terminology in sass mixins ([#5014](https://github.com/material-components/material-components-web/issues/5014)) ([2161c02](https://github.com/material-components/material-components-web/commit/2161c02))
### Features
* **checkbox:** Add support for 48px touch target ([#5025](https://github.com/material-components/material-components-web/issues/5025)) ([b5685a8](https://github.com/material-components/material-components-web/commit/b5685a8))
* **checkbox:** Added density mixin to checkbox ([#5016](https://github.com/material-components/material-components-web/issues/5016)) ([092716b](https://github.com/material-components/material-components-web/commit/092716b))
* **checkbox:** Move ripple to child node ([#4981](https://github.com/material-components/material-components-web/issues/4981)) ([9712b24](https://github.com/material-components/material-components-web/commit/9712b24))
# [4.0.0-canary.0](https://github.com/material-components/material-components-web/compare/v3.1.1...v4.0.0-canary.0) (2019-09-05)
### Bug Fixes
* **checkbox:** Adjust touch target size when density applied ([a9e6949](https://github.com/material-components/material-components-web/commit/a9e6949))
* **checkbox:** Fix checkbox terminology in sass mixins ([#5014](https://github.com/material-components/material-components-web/issues/5014)) ([2161c02](https://github.com/material-components/material-components-web/commit/2161c02))
### Features
* **checkbox:** Add support for 48px touch target ([#5025](https://github.com/material-components/material-components-web/issues/5025)) ([b5685a8](https://github.com/material-components/material-components-web/commit/b5685a8))
* **checkbox:** Added density mixin to checkbox ([#5016](https://github.com/material-components/material-components-web/issues/5016)) ([092716b](https://github.com/material-components/material-components-web/commit/092716b))
* **checkbox:** Move ripple to child node ([#4981](https://github.com/material-components/material-components-web/issues/4981)) ([9712b24](https://github.com/material-components/material-components-web/commit/9712b24))
# [4.0.0-canary.0](https://github.com/material-components/material-components-web/compare/v3.1.1...v4.0.0-canary.0) (2019-09-05)
### Bug Fixes
* **checkbox:** Adjust touch target size when density applied ([a9e6949](https://github.com/material-components/material-components-web/commit/a9e6949))
* **checkbox:** Fix checkbox terminology in sass mixins ([#5014](https://github.com/material-components/material-components-web/issues/5014)) ([2161c02](https://github.com/material-components/material-components-web/commit/2161c02))
### Features
* **checkbox:** Add support for 48px touch target ([#5025](https://github.com/material-components/material-components-web/issues/5025)) ([b5685a8](https://github.com/material-components/material-components-web/commit/b5685a8))
* **checkbox:** Added density mixin to checkbox ([#5016](https://github.com/material-components/material-components-web/issues/5016)) ([092716b](https://github.com/material-components/material-components-web/commit/092716b))
* **checkbox:** Move ripple to child node ([#4981](https://github.com/material-components/material-components-web/issues/4981)) ([9712b24](https://github.com/material-components/material-components-web/commit/9712b24))
# [4.0.0-canary.0](https://github.com/material-components/material-components-web/compare/v3.1.1...v4.0.0-canary.0) (2019-09-05)
### Bug Fixes
* **checkbox:** Adjust touch target size when density applied ([a9e6949](https://github.com/material-components/material-components-web/commit/a9e6949))
* **checkbox:** Fix checkbox terminology in sass mixins ([#5014](https://github.com/material-components/material-components-web/issues/5014)) ([2161c02](https://github.com/material-components/material-components-web/commit/2161c02))
### Features
* **checkbox:** Add support for 48px touch target ([#5025](https://github.com/material-components/material-components-web/issues/5025)) ([b5685a8](https://github.com/material-components/material-components-web/commit/b5685a8))
* **checkbox:** Added density mixin to checkbox ([#5016](https://github.com/material-components/material-components-web/issues/5016)) ([092716b](https://github.com/material-components/material-components-web/commit/092716b))
* **checkbox:** Move ripple to child node ([#4981](https://github.com/material-components/material-components-web/issues/4981)) ([9712b24](https://github.com/material-components/material-components-web/commit/9712b24))
# [4.0.0-a9e694931.0](https://github.com/material-components/material-components-web/compare/v3.1.1...v4.0.0-a9e694931.0) (2019-09-05)
### Bug Fixes
* **checkbox:** Adjust touch target size when density applied ([a9e6949](https://github.com/material-components/material-components-web/commit/a9e6949))
* **checkbox:** Fix checkbox terminology in sass mixins ([#5014](https://github.com/material-components/material-components-web/issues/5014)) ([2161c02](https://github.com/material-components/material-components-web/commit/2161c02))
### Features
* **checkbox:** Add support for 48px touch target ([#5025](https://github.com/material-components/material-components-web/issues/5025)) ([b5685a8](https://github.com/material-components/material-components-web/commit/b5685a8))
* **checkbox:** Added density mixin to checkbox ([#5016](https://github.com/material-components/material-components-web/issues/5016)) ([092716b](https://github.com/material-components/material-components-web/commit/092716b))
* **checkbox:** Move ripple to child node ([#4981](https://github.com/material-components/material-components-web/issues/4981)) ([9712b24](https://github.com/material-components/material-components-web/commit/9712b24))
# [4.0.0-snapshot.0](https://github.com/material-components/material-components-web/compare/v3.1.1...v4.0.0-snapshot.0) (2019-09-05)
### Bug Fixes
* **checkbox:** Adjust touch target size when density applied ([a9e6949](https://github.com/material-components/material-components-web/commit/a9e6949))
* **checkbox:** Fix checkbox terminology in sass mixins ([#5014](https://github.com/material-components/material-components-web/issues/5014)) ([2161c02](https://github.com/material-components/material-components-web/commit/2161c02))
### Features
* **checkbox:** Add support for 48px touch target ([#5025](https://github.com/material-components/material-components-web/issues/5025)) ([b5685a8](https://github.com/material-components/material-components-web/commit/b5685a8))
* **checkbox:** Added density mixin to checkbox ([#5016](https://github.com/material-components/material-components-web/issues/5016)) ([092716b](https://github.com/material-components/material-components-web/commit/092716b))
* **checkbox:** Move ripple to child node ([#4981](https://github.com/material-components/material-components-web/issues/4981)) ([9712b24](https://github.com/material-components/material-components-web/commit/9712b24))
# [4.0.0-alpha.0](https://github.com/material-components/material-components-web/compare/v3.1.0...v4.0.0-alpha.0) (2019-08-07)
**Note:** Version bump only for package ..//checkbox
# [3.1.0](https://github.com/material-components/material-components-web/compare/v3.0.0...v3.1.0) (2019-07-22)
### Bug Fixes
* **checkbox:** Fixed checkbox container fill color when animati… ([#4879](https://github.com/material-components/material-components-web/issues/4879)) ([d393fb5](https://github.com/material-components/material-components-web/commit/d393fb5))
* **checkbox:** Fixed hover focus colors for unchecked checkbox ([#4868](https://github.com/material-components/material-components-web/issues/4868)) ([1d8fbf5](https://github.com/material-components/material-components-web/commit/1d8fbf5))
### Features
* **data-table:** Added data table component ([#4889](https://github.com/material-components/material-components-web/issues/4889)) ([7d3380a](https://github.com/material-components/material-components-web/commit/7d3380a))
# [3.1.0-alpha.0](https://github.com/material-components/material-components-web/compare/v3.0.0...v3.1.0-alpha.0) (2019-07-16)
### Bug Fixes
* **checkbox:** Fixed checkbox container fill color when animati… ([#4879](https://github.com/material-components/material-components-web/issues/4879)) ([d393fb5](https://github.com/material-components/material-components-web/commit/d393fb5))
* **checkbox:** Fixed hover focus colors for unchecked checkbox ([#4868](https://github.com/material-components/material-components-web/issues/4868)) ([1d8fbf5](https://github.com/material-components/material-components-web/commit/1d8fbf5))
### Features
* **data-table:** Added data table component ([#4889](https://github.com/material-components/material-components-web/issues/4889)) ([7d3380a](https://github.com/material-components/material-components-web/commit/7d3380a))
# [3.1.0](https://github.com/material-components/material-components-web/compare/v3.0.0...v3.1.0) (2019-07-16)
### Bug Fixes
* **checkbox:** Fixed checkbox container fill color when animati… ([#4879](https://github.com/material-components/material-components-web/issues/4879)) ([d393fb5](https://github.com/material-components/material-components-web/commit/d393fb5))
* **checkbox:** Fixed hover focus colors for unchecked checkbox ([#4868](https://github.com/material-components/material-components-web/issues/4868)) ([1d8fbf5](https://github.com/material-components/material-components-web/commit/1d8fbf5))
### Features
* **data-table:** Added data table component ([#4889](https://github.com/material-components/material-components-web/issues/4889)) ([7d3380a](https://github.com/material-components/material-components-web/commit/7d3380a))
//
// Copyright 2016 Google Inc.
//
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in
// all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
// THE SOFTWARE.
//
@import '../theme/functions';
@function acl-checkbox-transition-enter($property, $delay: 0ms, $duration: $acl-checkbox-transition-duration) {
@return acl-animation-enter($property, $duration, $delay);
}
@function acl-checkbox-transition-exit($property, $delay: 0ms, $duration: $acl-checkbox-transition-duration) {
@return acl-animation-exit-temporary($property, $duration, $delay);
}
//
// Copyright 2017 Google Inc.
//
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in
// all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
// THE SOFTWARE.
//
@import '../animation/variables';
@import '../theme/mixins';
@import './variables';
@mixin acl-checkbox-container-keyframes_($from-stroke-color, $to-stroke-color, $from-fill-color, $to-fill-color, $uid) {
@keyframes acl-checkbox-fade-in-background-#{$uid} {
0% {
@include acl-theme-prop(border-color, $from-stroke-color);
@include acl-theme-prop(background-color, $from-fill-color);
}
50% {
@include acl-theme-prop(border-color, $to-stroke-color);
@include acl-theme-prop(background-color, $to-fill-color);
}
}
@keyframes acl-checkbox-fade-out-background-#{$uid} {
0%,
80% {
@include acl-theme-prop(border-color, $to-stroke-color);
@include acl-theme-prop(background-color, $to-fill-color);
}
100% {
@include acl-theme-prop(border-color, $from-stroke-color);
@include acl-theme-prop(background-color, $from-fill-color);
}
}
}
@mixin acl-checkbox-mark-keyframes_ {
@keyframes acl-checkbox-unchecked-checked-checkmark-path {
0%,
50% {
stroke-dashoffset: $acl-checkbox-mark-path-length_;
}
50% {
animation-timing-function: $acl-animation-deceleration-curve-timing-function;
}
100% {
stroke-dashoffset: 0;
}
}
@keyframes acl-checkbox-unchecked-indeterminate-mixedmark {
0%,
68.2% {
transform: scaleX(0);
}
68.2% {
animation-timing-function: cubic-bezier(0, 0, 0, 1);
}
100% {
transform: scaleX(1);
}
}
@keyframes acl-checkbox-checked-unchecked-checkmark-path {
from {
animation-timing-function: $acl-animation-acceleration-curve-timing-function;
opacity: 1;
stroke-dashoffset: 0;
}
to {
opacity: 0;
stroke-dashoffset: $acl-checkbox-mark-path-length_ * -1;
}
}
@keyframes acl-checkbox-checked-indeterminate-checkmark {
from {
animation-timing-function: $acl-animation-deceleration-curve-timing-function;
transform: rotate(0deg);
opacity: 1;
}
to {
transform: rotate(45deg);
opacity: 0;
}
}
@keyframes acl-checkbox-indeterminate-checked-checkmark {
from {
animation-timing-function: $acl-checkbox-indeterminate-checked-easing-function_;
transform: rotate(45deg);
opacity: 0;
}
to {
transform: rotate(360deg);
opacity: 1;
}
}
@keyframes acl-checkbox-checked-indeterminate-mixedmark {
from {
animation-timing-function: acl-animation-deceleration-curve-timing-function;
transform: rotate(-45deg);
opacity: 0;
}
to {
transform: rotate(0deg);
opacity: 1;
}
}
@keyframes acl-checkbox-indeterminate-checked-mixedmark {
from {
animation-timing-function: $acl-checkbox-indeterminate-checked-easing-function_;
transform: rotate(0deg);
opacity: 1;
}
to {
transform: rotate(315deg);
opacity: 0;
}
}
@keyframes acl-checkbox-indeterminate-unchecked-mixedmark {
0% {
animation-timing-function: linear;
transform: scaleX(1);
opacity: 1;
}
32.8%,
100% {
transform: scaleX(0);
opacity: 0;
}
}
}
//
// Copyright 2016 Google Inc.
//
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in
// all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
// THE SOFTWARE.
//
@import '../animation/functions';
@import '../density/functions';
@import '../feature-targeting/functions';
@import '../feature-targeting/mixins';
@import '../ripple/mixins';
@import '../touch-target/mixins';
@import './functions';
@import './keyframes';
@import './variables';
//
// Public
//
$acl-checkbox-ripple-target: '.acl-checkbox__ripple';
@mixin acl-checkbox-core-styles($query: acl-feature-all()) {
@include acl-checkbox-without-ripple($query);
@include acl-checkbox-ripple($query);
}
// This API is intended for use by frameworks that may want to separate the ripple-related styles from the other
// checkbox styles. It is recommended that most users use `acl-checkbox-core-styles` instead.
@mixin acl-checkbox-without-ripple($query: acl-feature-all()) {
// postcss-bem-linter: define checkbox
$feat-animation: acl-feature-create-target($query, animation);
$feat-color: acl-feature-create-target($query, color);
$feat-structure: acl-feature-create-target($query, structure);
@include acl-touch-target-wrapper($query);
@include acl-feature-targets($feat-animation) {
@include acl-checkbox-mark-keyframes_;
}
.acl-checkbox {
@include acl-feature-targets($feat-structure) {
@include acl-checkbox-base_;
}
@include acl-checkbox-focus-indicator-color($acl-checkbox-baseline-theme-color, $query: $query);
@include acl-checkbox-density($acl-checkbox-density-scale, $query: $query);
}
@include acl-checkbox-container-colors($query: $query);
@include acl-checkbox-disabled-container-colors($query: $query);
@include acl-checkbox-ink-color($acl-checkbox-mark-color, $query: $query);
@include acl-checkbox-disabled-ink-color($acl-checkbox-mark-color, $query: $query);
@media screen and (-ms-high-contrast: active) {
.acl-checkbox__mixedmark {
@include acl-feature-targets($feat-structure) {
margin: 0 1px; // Extra horizontal space around mixedmark symbol.
}
}
}
// Needed to disable hover effects on CSS-only (non-JS) checkboxes
.acl-checkbox--disabled {
@include acl-feature-targets($feat-structure) {
@include acl-checkbox--disabled_;
}
}
.acl-checkbox__background {
@include acl-checkbox__background_($query);
}
.acl-checkbox__checkmark {
@include acl-checkbox__checkmark_($query);
}
.acl-checkbox__checkmark-path {
@include acl-checkbox__checkmark-path_($query);
}
.acl-checkbox__mixedmark {
@include acl-checkbox__mixedmark_($query);
}
// JS checkbox
.acl-checkbox--upgraded {
.acl-checkbox__background,
.acl-checkbox__checkmark,
.acl-checkbox__checkmark-path,
.acl-checkbox__mixedmark {
@include acl-feature-targets($feat-animation) {
@include acl-checkbox__child--upgraded_;
}
}
}
.acl-checkbox--anim {
@include acl-feature-targets($feat-animation) {
@include acl-checkbox--anim_;
}
}
.acl-checkbox__native-control:checked ~ .acl-checkbox__background,
.acl-checkbox__native-control:indeterminate ~ .acl-checkbox__background {
@include acl-feature-targets($feat-animation) {
@include acl-checkbox__background--marked_;
}
.acl-checkbox__checkmark-path {
@include acl-feature-targets($feat-structure) {
@include acl-checkbox__checkmark-path--marked_;
}
}
}
// The frame's ::before element is used as a focus indicator for the checkbox
.acl-checkbox__background::before {
@include acl-checkbox__focus-indicator_($query);
}
.acl-checkbox__native-control:focus ~ .acl-checkbox__background::before {
@include acl-checkbox__focus-indicator--focused_($query);
}
.acl-checkbox__native-control {
@include acl-feature-targets($feat-structure) {
@include acl-checkbox__native-control_;
}
&:disabled {
@include acl-feature-targets($feat-structure) {
@include acl-checkbox--disabled_;
}
}
}
.acl-checkbox--touch {
@include acl-touch-target-component(
$component-height: $acl-checkbox-ripple-size,
$component-width: $acl-checkbox-ripple-size,
$query: $query
);
@include acl-checkbox-touch-target($acl-touch-target-height, $query: $query);
}
.acl-checkbox__native-control:checked ~ .acl-checkbox__background {
.acl-checkbox__checkmark {
@include acl-checkbox__checkmark--checked_($query);
}
.acl-checkbox__mixedmark {
@include acl-feature-targets($feat-structure) {
@include acl-checkbox__mixedmark--checked_;
}
}
}
.acl-checkbox__native-control:indeterminate ~ .acl-checkbox__background {
.acl-checkbox__checkmark {
@include acl-checkbox__checkmark--indeterminate_($query);
}
.acl-checkbox__mixedmark {
@include acl-feature-targets($feat-structure) {
@include acl-checkbox__mixedmark--indeterminate_;
}
}
}
// postcss-bem-linter: end
}
// This API is intended for use by frameworks that may want to separate the ripple-related styles from the other
// checkbox styles. It is recommended that most users use `acl-checkbox-core-styles` instead.
@mixin acl-checkbox-ripple($query: acl-feature-all()) {
$feat-structure: acl-feature-create-target($query, structure);
@include acl-ripple-common($query);
.acl-checkbox {
@include acl-ripple-surface($query: $query, $ripple-target: $acl-checkbox-ripple-target);
@include acl-states($color: on-surface, $query: $query, $ripple-target: $acl-checkbox-ripple-target);
@include acl-ripple-radius-unbounded($query: $query, $ripple-target: $acl-checkbox-ripple-target);
}
#{$acl-checkbox-ripple-target} {
@include acl-ripple-target-common($query: $query);
}
.acl-ripple-upgraded--background-focused .acl-checkbox__background::before {
@include acl-feature-targets($feat-structure) {
content: none;
}
}
}
///
/// Sets density scale for checkbox.
///
/// @param {Number | String} $density-scale - Density scale value for component. Supported density scale values
/// `-3`, `-2`, `-1`, `0`.
///
@mixin acl-checkbox-density($density-scale, $query: acl-feature-all()) {
$size: acl-density-prop-value(
$density-config: $acl-checkbox-density-config,
$density-scale: $density-scale,
$property-name: size,
);
@include acl-checkbox-ripple-size($size, $query: $query);
@if $density-scale != 0 {
@include acl-checkbox-touch-target-reset_($query: $query);
}
}
@mixin acl-checkbox-ripple-size($ripple-size, $query: acl-feature-all()) {
$feat-structure: acl-feature-create-target($query, structure);
$checkbox-padding: ($ripple-size - $acl-checkbox-icon-size) / 2;
@include acl-feature-targets($feat-structure) {
padding: $checkbox-padding;
}
.acl-checkbox__background {
@include acl-feature-targets($feat-structure) {
top: $checkbox-padding;
left: $checkbox-padding;
}
}
.acl-checkbox__background::before {
@include acl-feature-targets($feat-structure) {
top: -$acl-checkbox-border-width - $checkbox-padding;
left: -$acl-checkbox-border-width - $checkbox-padding;
width: $ripple-size;
height: $ripple-size;
}
}
@include acl-checkbox-touch-target($ripple-size, $ripple-size: $ripple-size, $query: $query);
}
///
/// Sets stroke & fill colors for both marked and unmarked state of enabled checkbox.
/// Set $generate-keyframes to false to prevent the mixin from generating @keyframes
/// @param {Color} $unmarked-stroke-color - The desired stroke color for the unmarked state
/// @param {Color} $unmarked-fill-color - The desired fill color for the unmarked state
/// @param {Color} $marked-stroke-color - The desired stroke color for the marked state
/// @param {Color} $marked-fill-color - The desired fill color for the marked state
/// @param {Boolean} $generate-keyframes [true] - Whether animation keyframes should be generated
///
@mixin acl-checkbox-container-colors(
$unmarked-stroke-color: $acl-checkbox-border-color,
$unmarked-fill-color: transparent,
$marked-stroke-color: $acl-checkbox-baseline-theme-color,
$marked-fill-color: $acl-checkbox-baseline-theme-color,
$generate-keyframes: true,
$query: acl-feature-all()
) {
$feat-animation: acl-feature-create-target($query, animation);
$feat-color: acl-feature-create-target($query, color);
@include acl-checkbox-if-unmarked-enabled_ {
@include acl-checkbox-container-colors_($unmarked-stroke-color, $unmarked-fill-color, $query: $query);
}
@include acl-checkbox-if-marked-enabled_ {
@include acl-checkbox-container-colors_($marked-stroke-color, $marked-fill-color, $query: $query);
}
@if $generate-keyframes {
$uid: unique-id();
$anim-selector: if(&, '&.acl-checkbox--anim', '.acl-checkbox--anim');
@include acl-feature-targets($feat-animation, $feat-color) {
@include acl-checkbox-container-keyframes_(
$from-stroke-color: $unmarked-stroke-color,
$to-stroke-color: $marked-stroke-color,
$from-fill-color: $unmarked-fill-color,
$to-fill-color: $marked-fill-color,
$uid: $uid
);
}
// stylelint-disable max-nesting-depth
#{$anim-selector} {
&-unchecked-checked,
&-unchecked-indeterminate {
.acl-checkbox__native-control:enabled ~ .acl-checkbox__background {
@include acl-feature-targets($feat-animation) {
animation-name: acl-checkbox-fade-in-background-#{$uid};
}
}
}
&-checked-unchecked,
&-indeterminate-unchecked {
.acl-checkbox__native-control:enabled ~ .acl-checkbox__background {
@include acl-feature-targets($feat-animation) {
animation-name: acl-checkbox-fade-out-background-#{$uid};
}
}
}
}
// stylelint-enable max-nesting-depth
}
}
///
/// Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.
/// @param {Color} $unmarked-stroke-color - The desired stroke color for the unmarked state
/// @param {Color} $unmarked-fill-color - The desired fill color for the unmarked state
/// @param {Color} $marked-stroke-color - The desired stroke color for the marked state
/// @param {Color} $marked-fill-color - The desired fill color for the marked state
///
@mixin acl-checkbox-disabled-container-colors(
$unmarked-stroke-color: $acl-checkbox-disabled-color,
$unmarked-fill-color: transparent,
$marked-stroke-color: transparent,
$marked-fill-color: $acl-checkbox-disabled-color,
$query: acl-feature-all()
) {
@include acl-checkbox-if-unmarked-disabled_ {
@include acl-checkbox-container-colors_($unmarked-stroke-color, $unmarked-fill-color, $query: $query);
}
@include acl-checkbox-if-marked-disabled_ {
@include acl-checkbox-container-colors_($marked-stroke-color, $marked-fill-color, $query: $query);
}
}
///
/// Sets the ink color of the checked and indeterminate icons for an enabled checkbox
/// @param {Color} $color - The desired ink color in enabled state
///
@mixin acl-checkbox-ink-color($color, $query: acl-feature-all()) {
@include acl-checkbox-if-enabled_ {
@include acl-checkbox-ink-color_($color, $query: $query);
}
}
///
/// Sets the ink color of the checked and indeterminate icons for a disabled checkbox
/// @param {Color} $color - The desired ink color in disabled state
///
@mixin acl-checkbox-disabled-ink-color($color, $query: acl-feature-all()) {
$feat-color: acl-feature-create-target($query, color);
@include acl-checkbox-if-disabled_ {
@include acl-checkbox-ink-color_($color, $query: $query);
}
}
@mixin acl-checkbox-focus-indicator-color($color, $query: acl-feature-all()) {
$feat-color: acl-feature-create-target($query, color);
.acl-checkbox__native-control:checked ~ .acl-checkbox__background::before,
.acl-checkbox__native-control:indeterminate ~ .acl-checkbox__background::before {
@include acl-feature-targets($feat-color) {
@include acl-theme-prop(background-color, $color, $edgeOptOut: true);
}
}
&.acl-checkbox--selected {
@include acl-states($color: $color, $query: $query, $ripple-target: $acl-checkbox-ripple-target);
}
&.acl-ripple-upgraded--background-focused.acl-checkbox--selected {
@include acl-states-base-color($color: $color, $query: $query, $ripple-target: $acl-checkbox-ripple-target);
}
}
///
/// Sets checkbox touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom
/// ripple size.
///
/// @param {Number} $size Size of touch target (Native input) in `px`.
/// @param {Number} $ripple-size Size of ripple in `px`. Required only for custom ripple size.
///
@mixin acl-checkbox-touch-target(
$size: $acl-checkbox-ripple-size,
$ripple-size: $acl-checkbox-ripple-size,
$query: acl-feature-all()
) {
$feat-structure: acl-feature-create-target($query, structure);
$offset: ($ripple-size - $size) / 2;
@include acl-feature-targets($feat-structure) {
.acl-checkbox__native-control {
top: $offset;
right: $offset;
left: $offset;
width: $size;
height: $size;
}
}
}
//
// Private
//
@mixin acl-checkbox-base_ {
display: inline-block;
position: relative;
flex: 0 0 $acl-checkbox-icon-size;
box-sizing: content-box;
width: $acl-checkbox-icon-size;
height: $acl-checkbox-icon-size;
line-height: 0;
white-space: nowrap;
cursor: pointer;
vertical-align: bottom;
}
@mixin acl-checkbox--disabled_ {
cursor: default;
pointer-events: none;
}
@mixin acl-checkbox__child--upgraded_ {
// Due to the myriad of selector combos used to properly style a CSS-only checkbox, all of
// which have varying selector precedence and make use of transitions, it is cleaner and more
// efficient here to simply use !important, since the acl-checkbox--anim-* classes will take
// over from here.
transition: none !important;
}
// Animation
@mixin acl-checkbox--anim_ {
$acl-checkbox-indeterminate-change-duration_: 500ms;
// stylelint-disable selector-max-type
&-unchecked-checked,
&-unchecked-indeterminate,
&-checked-unchecked,
&-indeterminate-unchecked {
.acl-checkbox__background {
animation-duration: $acl-checkbox-transition-duration * 2;
animation-timing-function: linear;
}
}
&-unchecked-checked {
.acl-checkbox__checkmark-path {
// Instead of delaying the animation, we simply multiply its length by 2 and begin the
// animation at 50% in order to prevent a flash of styles applied to a checked checkmark
// as the background is fading in before the animation begins.
animation: acl-checkbox-unchecked-checked-checkmark-path $acl-checkbox-transition-duration * 2 linear 0s;
transition: none;
}
}
&-unchecked-indeterminate {
.acl-checkbox__mixedmark {
animation: acl-checkbox-unchecked-indeterminate-mixedmark $acl-checkbox-transition-duration linear 0s;
transition: none;
}
}
&-checked-unchecked {
.acl-checkbox__checkmark-path {
animation: acl-checkbox-checked-unchecked-checkmark-path $acl-checkbox-transition-duration linear 0s;
transition: none;
}
}
&-checked-indeterminate {
.acl-checkbox__checkmark {
animation: acl-checkbox-checked-indeterminate-checkmark $acl-checkbox-transition-duration linear 0s;
transition: none;
}
.acl-checkbox__mixedmark {
animation: acl-checkbox-checked-indeterminate-mixedmark $acl-checkbox-transition-duration linear 0s;
transition: none;
}
}
&-indeterminate-checked {
.acl-checkbox__checkmark {
animation: acl-checkbox-indeterminate-checked-checkmark $acl-checkbox-indeterminate-change-duration_ linear
0s;
transition: none;
}
.acl-checkbox__mixedmark {
animation: acl-checkbox-indeterminate-checked-mixedmark $acl-checkbox-indeterminate-change-duration_ linear
0s;
transition: none;
}
}
&-indeterminate-unchecked {
.acl-checkbox__mixedmark {
// stylelint-disable-next-line declaration-colon-space-after
animation: acl-checkbox-indeterminate-unchecked-mixedmark $acl-checkbox-indeterminate-change-duration_ * 0.6
linear 0s;
transition: none;
}
}
// stylelint-enable selector-max-type
}
// Background
///
/// Helps select the checkbox background only when its native control is in
/// enabled state.
/// @access private
///
@mixin acl-checkbox-if-enabled_ {
.acl-checkbox__native-control:enabled ~ {
@content;
}
}
///
/// Helps select the checkbox background only when its native control is in
/// disabled state.
/// @access private
///
@mixin acl-checkbox-if-disabled_ {
.acl-checkbox__native-control:disabled ~ {
@content;
}
}
///
/// Helps select the checkbox background only when its native control is in
/// unmarked & enabled state.
/// @access private
///
@mixin acl-checkbox-if-unmarked-enabled_ {
.acl-checkbox__native-control:enabled:not(:checked):not(:indeterminate) ~ {
@content;
}
}
///
/// Helps select the checkbox background only when its native control is in
/// unmarked & disabled state.
/// @access private
///
@mixin acl-checkbox-if-unmarked-disabled_ {
// Note: we must use `[disabled]` instead of `:disabled` below because Edge does not always recalculate the style
// property when the `:disabled` pseudo-class is followed by a sibling combinator. See:
// https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/11295231/
.acl-checkbox__native-control[disabled]:not(:checked):not(:indeterminate) ~ {
@content;
}
}
///
/// Helps select the checkbox background only when its native control is in
/// marked & enabled state.
/// @access private
///
@mixin acl-checkbox-if-marked-enabled_ {
.acl-checkbox__native-control:enabled:checked,
.acl-checkbox__native-control:enabled:indeterminate {
~ {
@content;
}
}
}
///
/// Helps select the checkbox background only when its native control is in
/// marked & disabled state.
/// @access private
///
@mixin acl-checkbox-if-marked-disabled_ {
// Note: we must use `[disabled]` instead of `:disabled` below because Edge does not always recalculate the style
// property when the `:disabled` pseudo-class is followed by a sibling combinator. See:
// https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/11295231/
.acl-checkbox__native-control[disabled]:checked,
.acl-checkbox__native-control[disabled]:indeterminate {
~ {
@content;
}
}
}
@mixin acl-checkbox__background_($query: acl-feature-all()) {
$feat-animation: acl-feature-create-target($query, animation);
$feat-structure: acl-feature-create-target($query, structure);
$feat-color: acl-feature-create-target($query, color);
@include acl-feature-targets($feat-structure) {
display: inline-flex;
position: absolute;
align-items: center;
justify-content: center;
box-sizing: border-box;
width: $acl-checkbox-icon-size;
height: $acl-checkbox-icon-size;
// border-color is overridden by the acl-checkbox-unmarked-stroke-color() mixin
border: $acl-checkbox-border-width solid currentColor;
border-radius: 2px;
background-color: transparent;
pointer-events: none;
will-change: background-color, border-color;
}
.acl-checkbox__background::before {
@include acl-feature-targets($feat-color) {
@include acl-theme-prop(background-color, on-surface, $edgeOptOut: true);
}
}
@include acl-feature-targets($feat-animation) {
transition: acl-checkbox-transition-exit(background-color), acl-checkbox-transition-exit(border-color);
}
}
@mixin acl-checkbox__background--marked_ {
transition: acl-checkbox-transition-enter(border-color), acl-checkbox-transition-enter(background-color);
}
///
/// Sets the stroke & fill colors for the checkbox.
/// This mixin should be wrapped in a mixin that qualifies state such as
/// `acl-checkbox-if-unmarked-enabled_`.
/// @access private
///
@mixin acl-checkbox-container-colors_($stroke-color, $fill-color, $query: acl-feature-all()) {
$feat-color: acl-feature-create-target($query, color);
.acl-checkbox__background {
@include acl-feature-targets($feat-color) {
@include acl-theme-prop(border-color, $stroke-color);
@include acl-theme-prop(background-color, $fill-color);
}
}
}
// Focus indicator
@mixin acl-checkbox__focus-indicator_($query: acl-feature-all()) {
$feat-animation: acl-feature-create-target($query, animation);
$feat-structure: acl-feature-create-target($query, structure);
@include acl-feature-targets($feat-structure) {
position: absolute;
transform: scale(0, 0);
border-radius: 50%;
opacity: 0;
pointer-events: none;
content: '';
will-change: opacity, transform;
}
@include acl-feature-targets($feat-animation) {
transition: acl-checkbox-transition-exit(opacity), acl-checkbox-transition-exit(transform);
}
}
@mixin acl-checkbox__focus-indicator--focused_($query: acl-feature-all()) {
$feat-animation: acl-feature-create-target($query, animation);
$feat-structure: acl-feature-create-target($query, structure);
@include acl-feature-targets($feat-structure) {
transform: scale(1);
opacity: $acl-checkbox-focus-indicator-opacity;
}
@include acl-feature-targets($feat-animation) {
transition: acl-checkbox-transition-enter(opacity, 0ms, 80ms),
acl-checkbox-transition-enter(transform, 0ms, 80ms);
}
}
// Native input
@mixin acl-checkbox__native-control_ {
position: absolute;
margin: 0;
padding: 0;
opacity: 0;
cursor: inherit;
}
// Check mark
@mixin acl-checkbox__checkmark_($query: acl-feature-all()) {
$feat-animation: acl-feature-create-target($query, animation);
$feat-structure: acl-feature-create-target($query, structure);
@include acl-feature-targets($feat-structure) {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
opacity: 0;
}
@include acl-feature-targets($feat-animation) {
transition: acl-checkbox-transition-exit(opacity, 0ms, $acl-checkbox-transition-duration * 2);
}
.acl-checkbox--upgraded & {
@include acl-feature-targets($feat-structure) {
opacity: 1;
}
}
}
@mixin acl-checkbox__checkmark--checked_($query: acl-feature-all()) {
$feat-animation: acl-feature-create-target($query, animation);
$feat-structure: acl-feature-create-target($query, structure);
@include acl-feature-targets($feat-animation) {
transition: acl-checkbox-transition-enter(opacity, 0ms, $acl-checkbox-transition-duration * 2),
acl-checkbox-transition-enter(transform, 0ms, $acl-checkbox-transition-duration * 2);
}
@include acl-feature-targets($feat-structure) {
opacity: 1;
}
}
@mixin acl-checkbox__checkmark--indeterminate_($query: acl-feature-all()) {
$feat-animation: acl-feature-create-target($query, animation);
$feat-structure: acl-feature-create-target($query, structure);
@include acl-feature-targets($feat-structure) {
transform: rotate(45deg);
opacity: 0;
}
@include acl-feature-targets($feat-animation) {
transition: acl-checkbox-transition-exit(opacity, 0ms, $acl-checkbox-transition-duration),
acl-checkbox-transition-exit(transform, 0ms, $acl-checkbox-transition-duration);
}
}
///
/// Sets the ink color of the checked and indeterminate icons for a checkbox.
/// This mixin should be wrapped in a mixin that qualifies state such as
/// `acl-checkbox-if-unmarked_`.
/// @access private
///
@mixin acl-checkbox-ink-color_($color, $query: acl-feature-all()) {
$feat-color: acl-feature-create-target($query, color);
.acl-checkbox__background {
.acl-checkbox__checkmark {
@include acl-feature-targets($feat-color) {
@include acl-theme-prop(color, $color);
}
}
.acl-checkbox__mixedmark {
@include acl-feature-targets($feat-color) {
@include acl-theme-prop(border-color, $color);
}
}
}
}
// Check mark path
@mixin acl-checkbox__checkmark-path_($query: acl-feature-all()) {
$feat-animation: acl-feature-create-target($query, animation);
$feat-structure: acl-feature-create-target($query, structure);
@include acl-feature-targets($feat-animation) {
transition: acl-checkbox-transition-exit(stroke-dashoffset, 0ms, $acl-checkbox-transition-duration * 2);
}
@include acl-feature-targets($feat-structure) {
stroke: currentColor;
stroke-width: $acl-checkbox-mark-stroke-size * 1.3;
stroke-dashoffset: $acl-checkbox-mark-path-length_;
stroke-dasharray: $acl-checkbox-mark-path-length_;
}
}
@mixin acl-checkbox__checkmark-path--marked_ {
stroke-dashoffset: 0;
}
// Mixed mark
@mixin acl-checkbox__mixedmark_($query: acl-feature-all()) {
$feat-animation: acl-feature-create-target($query, animation);
$feat-structure: acl-feature-create-target($query, structure);
@include acl-feature-targets($feat-structure) {
width: 100%;
height: 0;
transform: scaleX(0) rotate(0deg);
border-width: floor($acl-checkbox-mark-stroke-size) / 2;
border-style: solid;
opacity: 0;
}
@include acl-feature-targets($feat-animation) {
transition: acl-checkbox-transition-exit(opacity), acl-checkbox-transition-exit(transform);
}
}
@mixin acl-checkbox__mixedmark--checked_ {
transform: scaleX(1) rotate(-45deg);
}
@mixin acl-checkbox__mixedmark--indeterminate_ {
transform: scaleX(1) rotate(0deg);
opacity: 1;
}
///
/// Resets touch target-related styles. This is called from the density mixin to
/// automatically remove the increased touch target, since dense components
/// don't have the same default a11y requirements.
/// @access private
///
@mixin acl-checkbox-touch-target-reset_($query: acl-feature-all()) {
$feat-structure: acl-feature-create-target($query, structure);
@include acl-feature-targets($feat-structure) {
margin: 0;
}
}
//
// Copyright 2017 Google Inc.
//
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in
// all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
// THE SOFTWARE.
//
@import '../ripple/variables';
@import '../theme/variables';
@import '../density/variables';
$acl-checkbox-mark-color: acl-theme-prop-value(on-primary) !default;
$acl-checkbox-border-color: rgba(acl-theme-prop-value(on-surface), 0.54) !default;
$acl-checkbox-disabled-color: rgba(acl-theme-prop-value(on-surface), 0.26) !default;
$acl-checkbox-baseline-theme-color: secondary !default;
$acl-checkbox-ripple-size: 40px !default;
$acl-checkbox-icon-size: 18px !default;
$acl-checkbox-mark-stroke-size: 2/15 * $acl-checkbox-icon-size !default;
$acl-checkbox-border-width: 2px !default;
$acl-checkbox-transition-duration: 90ms !default;
$acl-checkbox-item-spacing: 4px !default;
$acl-checkbox-focus-indicator-opacity: map-get($acl-ripple-dark-ink-opacities, focus) !default;
$acl-checkbox-minimum-size: 28px !default;
$acl-checkbox-maximum-size: $acl-checkbox-ripple-size !default;
$acl-checkbox-density-scale: $acl-density-default-scale !default;
$acl-checkbox-density-config: (
size: (
minimum: $acl-checkbox-minimum-size,
default: $acl-checkbox-ripple-size,
maximum: $acl-checkbox-maximum-size,
),
) !default;
// Manual calculation done on SVG
$acl-checkbox-mark-path-length_: 29.7833385 !default;
$acl-checkbox-indeterminate-checked-easing-function_: cubic-bezier(0.14, 0, 0, 1) !default;
//
// Copyright 2016 Google Inc.
//
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in
// all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
// THE SOFTWARE.
//
@import './mixins';
@include acl-checkbox-core-styles;
// All above legacy code
.acl-single-checkbox {
position: relative;
margin: 1em 0;
text-align: left;
&.acl-single-checkbox-inline {
display: inline-block;
}
label {
cursor: pointer;
display: inline;
line-height: 1.25em;
&:not(:empty) {
padding-left: 0.75em;
}
&:before,
&:after {
content: '';
position: absolute;
left: 0;
top: 0;
box-sizing: border-box;
}
&:before {
width: 1.25em;
height: 1.25em;
background: $white;
border: 2px solid $light-grey;
cursor: pointer;
transition: background 0.3s;
}
}
input[type='checkbox'] {
outline: 0;
visibility: hidden;
width: 1.25em;
margin: 0;
display: block;
float: left;
font-size: inherit;
&:checked {
+ label:before {
background: $blue;
border: none;
}
+ label:after {
$checkmark-size: 1.25em - 2 * 0.25em;
transform: translate(0.25em, (1.25em / 2) - ($checkmark-size / 2.6)) rotate(-45deg);
width: $checkmark-size;
height: $checkmark-size / 2;
border: 0.125em solid $white;
border-top-style: none;
border-right-style: none;
}
}
&:disabled {
+ label:before {
border-color: $light-grey;
}
&:checked {
+ label:before {
background: $light-grey;
}
}
}
}
&--green {
label {
&:before {
border: 2px solid rgba(0, 0, 0, 0.54);
border-radius: 2px;
}
}
input[type='checkbox'] {
&:checked {
+ label:before {
background: $teal;
}
}
}
}
}
/**
* @license
* Copyright 2016 Google Inc.
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
* THE SOFTWARE.
*/
/**
* Defines the shape of the adapter expected by the foundation.
* Implement this adapter for your framework of choice to delegate updates to
* the component in your framework of choice. See architecture documentation
* for more details.
* https://github.com/material-components/material-components-web/blob/master/docs/code/architecture.md
*/
export interface MDCCheckboxAdapter {
addClass(className: string): void;
forceLayout(): void;
hasNativeControl(): boolean;
isAttachedToDOM(): boolean;
isChecked(): boolean;
isIndeterminate(): boolean;
removeClass(className: string): void;
removeNativeControlAttr(attr: string): void;
setNativeControlAttr(attr: string, value: string): void;
setNativeControlDisabled(disabled: boolean): void;
}
/**
* @license
* Copyright 2016 Google Inc.
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
* THE SOFTWARE.
*/
//# sourceMappingURL=adapter.js.map
{"version":3,"file":"adapter.js","sourceRoot":"","sources":["adapter.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG"}
/**
* @license
* Copyright 2016 Google Inc.
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
* THE SOFTWARE.
*/
import { MDCComponent } from '..//base/component';
import { MDCRipple } from '..//ripple/component';
import { MDCRippleCapableSurface } from '..//ripple/types';
import { MDCCheckboxFoundation } from './foundation';
export declare type MDCCheckboxFactory = (el: Element, foundation?: MDCCheckboxFoundation) => MDCCheckbox;
export declare class MDCCheckbox extends MDCComponent<MDCCheckboxFoundation> implements MDCRippleCapableSurface {
static attachTo(root: Element): MDCCheckbox;
readonly ripple: MDCRipple;
checked: boolean;
indeterminate: boolean;
disabled: boolean;
value: string;
root_: Element;
private readonly ripple_;
private handleChange_;
private handleAnimationEnd_;
initialSyncWithDOM(): void;
destroy(): void;
getDefaultFoundation(): MDCCheckboxFoundation;
private createRipple_;
private installPropertyChangeHooks_;
private uninstallPropertyChangeHooks_;
private readonly nativeControl_;
}
import * as tslib_1 from 'tslib';
import { getCorrectEventName } from '..//animation/util';
import { MDCComponent } from '..//base/component';
import { applyPassive } from '..//dom/events';
import { matches } from '..//dom/ponyfill';
import { MDCRipple } from '..//ripple/component';
import { MDCRippleFoundation } from '..//ripple/foundation';
import { MDCCheckboxFoundation } from './foundation';
var CB_PROTO_PROPS = ['checked', 'indeterminate'];
var MDCCheckbox = /** @class */ (function(_super) {
tslib_1.__extends(MDCCheckbox, _super);
function MDCCheckbox() {
var _this = (_super !== null && _super.apply(this, arguments)) || this;
_this.ripple_ = _this.createRipple_();
return _this;
}
MDCCheckbox.attachTo = function(root) {
return new MDCCheckbox(root);
};
Object.defineProperty(MDCCheckbox.prototype, 'ripple', {
get: function() {
return this.ripple_;
},
enumerable: true,
configurable: true,
});
Object.defineProperty(MDCCheckbox.prototype, 'checked', {
get: function() {
return this.nativeControl_.checked;
},
set: function(checked) {
this.nativeControl_.checked = checked;
},
enumerable: true,
configurable: true,
});
Object.defineProperty(MDCCheckbox.prototype, 'indeterminate', {
get: function() {
return this.nativeControl_.indeterminate;
},
set: function(indeterminate) {
this.nativeControl_.indeterminate = indeterminate;
},
enumerable: true,
configurable: true,
});
Object.defineProperty(MDCCheckbox.prototype, 'disabled', {
get: function() {
return this.nativeControl_.disabled;
},
set: function(disabled) {
this.foundation_.setDisabled(disabled);
},
enumerable: true,
configurable: true,
});
Object.defineProperty(MDCCheckbox.prototype, 'value', {
get: function() {
return this.nativeControl_.value;
},
set: function(value) {
this.nativeControl_.value = value;
},
enumerable: true,
configurable: true,
});
MDCCheckbox.prototype.initialSyncWithDOM = function() {
var _this = this;
this.handleChange_ = function() {
return _this.foundation_.handleChange();
};
this.handleAnimationEnd_ = function() {
return _this.foundation_.handleAnimationEnd();
};
this.nativeControl_.addEventListener('change', this.handleChange_);
this.listen(getCorrectEventName(window, 'animationend'), this.handleAnimationEnd_);
this.installPropertyChangeHooks_();
};
MDCCheckbox.prototype.destroy = function() {
this.ripple_.destroy();
this.nativeControl_.removeEventListener('change', this.handleChange_);
this.unlisten(getCorrectEventName(window, 'animationend'), this.handleAnimationEnd_);
this.uninstallPropertyChangeHooks_();
_super.prototype.destroy.call(this);
};
MDCCheckbox.prototype.getDefaultFoundation = function() {
var _this = this;
// DO NOT INLINE this variable. For backward compatibility, foundations take a Partial<MDCFooAdapter>.
// To ensure we don't accidentally omit any methods, we need a separate, strongly typed adapter variable.
var adapter = {
addClass: function(className) {
return _this.root_.classList.add(className);
},
forceLayout: function() {
return _this.root_.offsetWidth;
},
hasNativeControl: function() {
return !!_this.nativeControl_;
},
isAttachedToDOM: function() {
return Boolean(_this.root_.parentNode);
},
isChecked: function() {
return _this.checked;
},
isIndeterminate: function() {
return _this.indeterminate;
},
removeClass: function(className) {
return _this.root_.classList.remove(className);
},
removeNativeControlAttr: function(attr) {
return _this.nativeControl_.removeAttribute(attr);
},
setNativeControlAttr: function(attr, value) {
return _this.nativeControl_.setAttribute(attr, value);
},
setNativeControlDisabled: function(disabled) {
return (_this.nativeControl_.disabled = disabled);
},
};
return new MDCCheckboxFoundation(adapter);
};
MDCCheckbox.prototype.createRipple_ = function() {
var _this = this;
// DO NOT INLINE this variable. For backward compatibility, foundations take a Partial<MDCFooAdapter>.
// To ensure we don't accidentally omit any methods, we need a separate, strongly typed adapter variable.
var adapter = tslib_1.__assign({}, MDCRipple.createAdapter(this), {
deregisterInteractionHandler: function(evtType, handler) {
return _this.nativeControl_.removeEventListener(evtType, handler, applyPassive());
},
isSurfaceActive: function() {
return matches(_this.nativeControl_, ':active');
},
isUnbounded: function() {
return true;
},
registerInteractionHandler: function(evtType, handler) {
return _this.nativeControl_.addEventListener(evtType, handler, applyPassive());
},
});
return new MDCRipple(this.root_, new MDCRippleFoundation(adapter));
};
MDCCheckbox.prototype.installPropertyChangeHooks_ = function() {
var _this = this;
var nativeCb = this.nativeControl_;
var cbProto = Object.getPrototypeOf(nativeCb);
CB_PROTO_PROPS.forEach(function(controlState) {
var desc = Object.getOwnPropertyDescriptor(cbProto, controlState);
// We have to check for this descriptor, since some browsers (Safari) don't support its return.
// See: https://bugs.webkit.org/show_bug.cgi?id=49739
if (!validDescriptor(desc)) {
return;
}
// Type cast is needed for compatibility with Closure Compiler.
var nativeGetter = desc.get;
var nativeCbDesc = {
configurable: desc.configurable,
enumerable: desc.enumerable,
get: nativeGetter,
set: function(state) {
desc.set.call(nativeCb, state);
_this.foundation_.handleChange();
},
};
Object.defineProperty(nativeCb, controlState, nativeCbDesc);
});
};
MDCCheckbox.prototype.uninstallPropertyChangeHooks_ = function() {
var nativeCb = this.nativeControl_;
var cbProto = Object.getPrototypeOf(nativeCb);
CB_PROTO_PROPS.forEach(function(controlState) {
var desc = Object.getOwnPropertyDescriptor(cbProto, controlState);
if (!validDescriptor(desc)) {
return;
}
Object.defineProperty(nativeCb, controlState, desc);
});
};
Object.defineProperty(MDCCheckbox.prototype, 'nativeControl_', {
get: function() {
var NATIVE_CONTROL_SELECTOR = MDCCheckboxFoundation.strings.NATIVE_CONTROL_SELECTOR;
var el = this.root_.querySelector(NATIVE_CONTROL_SELECTOR);
if (!el) {
throw new Error('Checkbox component requires a ' + NATIVE_CONTROL_SELECTOR + ' element');
}
return el;
},
enumerable: true,
configurable: true,
});
return MDCCheckbox;
})(MDCComponent);
export { MDCCheckbox };
function validDescriptor(inputPropDesc) {
return !!inputPropDesc && typeof inputPropDesc.set === 'function';
}
//# sourceMappingURL=component.js.map
{"version":3,"file":"component.js","sourceRoot":"","sources":["component.ts"],"names":[],"mappings":"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"}
/**
* @license
* Copyright 2016 Google Inc.
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
* THE SOFTWARE.
*/
export declare const cssClasses: {
ANIM_CHECKED_INDETERMINATE: string;
ANIM_CHECKED_UNCHECKED: string;
ANIM_INDETERMINATE_CHECKED: string;
ANIM_INDETERMINATE_UNCHECKED: string;
ANIM_UNCHECKED_CHECKED: string;
ANIM_UNCHECKED_INDETERMINATE: string;
BACKGROUND: string;
CHECKED: string;
CHECKMARK: string;
CHECKMARK_PATH: string;
DISABLED: string;
INDETERMINATE: string;
MIXEDMARK: string;
NATIVE_CONTROL: string;
ROOT: string;
SELECTED: string;
UPGRADED: string;
};
export declare const strings: {
ARIA_CHECKED_ATTR: string;
ARIA_CHECKED_INDETERMINATE_VALUE: string;
NATIVE_CONTROL_SELECTOR: string;
TRANSITION_STATE_CHECKED: string;
TRANSITION_STATE_INDETERMINATE: string;
TRANSITION_STATE_INIT: string;
TRANSITION_STATE_UNCHECKED: string;
};
export declare const numbers: {
ANIM_END_LATCH_MS: number;
};
/**
* @license
* Copyright 2016 Google Inc.
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
* THE SOFTWARE.
*/
export var cssClasses = {
ANIM_CHECKED_INDETERMINATE: 'acl-checkbox--anim-checked-indeterminate',
ANIM_CHECKED_UNCHECKED: 'acl-checkbox--anim-checked-unchecked',
ANIM_INDETERMINATE_CHECKED: 'acl-checkbox--anim-indeterminate-checked',
ANIM_INDETERMINATE_UNCHECKED: 'acl-checkbox--anim-indeterminate-unchecked',
ANIM_UNCHECKED_CHECKED: 'acl-checkbox--anim-unchecked-checked',
ANIM_UNCHECKED_INDETERMINATE: 'acl-checkbox--anim-unchecked-indeterminate',
BACKGROUND: 'acl-checkbox__background',
CHECKED: 'acl-checkbox--checked',
CHECKMARK: 'acl-checkbox__checkmark',
CHECKMARK_PATH: 'acl-checkbox__checkmark-path',
DISABLED: 'acl-checkbox--disabled',
INDETERMINATE: 'acl-checkbox--indeterminate',
MIXEDMARK: 'acl-checkbox__mixedmark',
NATIVE_CONTROL: 'acl-checkbox__native-control',
ROOT: 'acl-checkbox',
SELECTED: 'acl-checkbox--selected',
UPGRADED: 'acl-checkbox--upgraded',
};
export var strings = {
ARIA_CHECKED_ATTR: 'aria-checked',
ARIA_CHECKED_INDETERMINATE_VALUE: 'mixed',
NATIVE_CONTROL_SELECTOR: '.acl-checkbox__native-control',
TRANSITION_STATE_CHECKED: 'checked',
TRANSITION_STATE_INDETERMINATE: 'indeterminate',
TRANSITION_STATE_INIT: 'init',
TRANSITION_STATE_UNCHECKED: 'unchecked',
};
export var numbers = {
ANIM_END_LATCH_MS: 250,
};
//# sourceMappingURL=constants.js.map
{"version":3,"file":"constants.js","sourceRoot":"","sources":["constants.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,MAAM,CAAC,IAAM,UAAU,GAAG;IACxB,0BAA0B,EAAE,0CAA0C;IACtE,sBAAsB,EAAE,sCAAsC;IAC9D,0BAA0B,EAAE,0CAA0C;IACtE,4BAA4B,EAAE,4CAA4C;IAC1E,sBAAsB,EAAE,sCAAsC;IAC9D,4BAA4B,EAAE,4CAA4C;IAC1E,UAAU,EAAE,0BAA0B;IACtC,OAAO,EAAE,uBAAuB;IAChC,SAAS,EAAE,yBAAyB;IACpC,cAAc,EAAE,8BAA8B;IAC9C,QAAQ,EAAE,wBAAwB;IAClC,aAAa,EAAE,6BAA6B;IAC5C,SAAS,EAAE,yBAAyB;IACpC,cAAc,EAAE,8BAA8B;IAC9C,IAAI,EAAE,cAAc;IACpB,QAAQ,EAAE,wBAAwB;IAClC,QAAQ,EAAE,wBAAwB;CACnC,CAAC;AAEF,MAAM,CAAC,IAAM,OAAO,GAAG;IACrB,iBAAiB,EAAE,cAAc;IACjC,gCAAgC,EAAE,OAAO;IACzC,uBAAuB,EAAE,+BAA+B;IACxD,wBAAwB,EAAE,SAAS;IACnC,8BAA8B,EAAE,eAAe;IAC/C,qBAAqB,EAAE,MAAM;IAC7B,0BAA0B,EAAE,WAAW;CACxC,CAAC;AAEF,MAAM,CAAC,IAAM,OAAO,GAAG;IACrB,iBAAiB,EAAE,GAAG;CACvB,CAAC"}
/**
* @license
* Copyright 2016 Google Inc.
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
* THE SOFTWARE.
*/
import { MDCFoundation } from '..//base/foundation';
import { MDCCheckboxAdapter } from './adapter';
export declare class MDCCheckboxFoundation extends MDCFoundation<MDCCheckboxAdapter> {
static readonly cssClasses: {
ANIM_CHECKED_INDETERMINATE: string;
ANIM_CHECKED_UNCHECKED: string;
ANIM_INDETERMINATE_CHECKED: string;
ANIM_INDETERMINATE_UNCHECKED: string;
ANIM_UNCHECKED_CHECKED: string;
ANIM_UNCHECKED_INDETERMINATE: string;
BACKGROUND: string;
CHECKED: string;
CHECKMARK: string;
CHECKMARK_PATH: string;
DISABLED: string;
INDETERMINATE: string;
MIXEDMARK: string;
NATIVE_CONTROL: string;
ROOT: string;
SELECTED: string;
UPGRADED: string;
};
static readonly strings: {
ARIA_CHECKED_ATTR: string;
ARIA_CHECKED_INDETERMINATE_VALUE: string;
NATIVE_CONTROL_SELECTOR: string;
TRANSITION_STATE_CHECKED: string;
TRANSITION_STATE_INDETERMINATE: string;
TRANSITION_STATE_INIT: string;
TRANSITION_STATE_UNCHECKED: string;
};
static readonly numbers: {
ANIM_END_LATCH_MS: number;
};
static readonly defaultAdapter: MDCCheckboxAdapter;
private currentCheckState_;
private currentAnimationClass_;
private animEndLatchTimer_;
private enableAnimationEndHandler_;
constructor(adapter?: Partial<MDCCheckboxAdapter>);
init(): void;
destroy(): void;
setDisabled(disabled: boolean): void;
/**
* Handles the animationend event for the checkbox
*/
handleAnimationEnd(): void;
/**
* Handles the change event for the checkbox
*/
handleChange(): void;
private transitionCheckState_;
private determineCheckState_;
private getTransitionAnimationClass_;
private updateAriaChecked_;
}
export default MDCCheckboxFoundation;
/**
* @license
* Copyright 2016 Google Inc.
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
* THE SOFTWARE.
*/
import * as tslib_1 from 'tslib';
import { MDCFoundation } from '../base/foundation';
import { cssClasses, numbers, strings } from './constants';
var MDCCheckboxFoundation = /** @class */ (function(_super) {
tslib_1.__extends(MDCCheckboxFoundation, _super);
function MDCCheckboxFoundation(adapter) {
var _this = _super.call(this, tslib_1.__assign({}, MDCCheckboxFoundation.defaultAdapter, adapter)) || this;
_this.currentCheckState_ = strings.TRANSITION_STATE_INIT;
_this.currentAnimationClass_ = '';
_this.animEndLatchTimer_ = 0;
_this.enableAnimationEndHandler_ = false;
return _this;
}
Object.defineProperty(MDCCheckboxFoundation, 'cssClasses', {
get: function() {
return cssClasses;
},
enumerable: true,
configurable: true,
});
Object.defineProperty(MDCCheckboxFoundation, 'strings', {
get: function() {
return strings;
},
enumerable: true,
configurable: true,
});
Object.defineProperty(MDCCheckboxFoundation, 'numbers', {
get: function() {
return numbers;
},
enumerable: true,
configurable: true,
});
Object.defineProperty(MDCCheckboxFoundation, 'defaultAdapter', {
get: function() {
return {
addClass: function() {
return undefined;
},
forceLayout: function() {
return undefined;
},
hasNativeControl: function() {
return false;
},
isAttachedToDOM: function() {
return false;
},
isChecked: function() {
return false;
},
isIndeterminate: function() {
return false;
},
removeClass: function() {
return undefined;
},
removeNativeControlAttr: function() {
return undefined;
},
setNativeControlAttr: function() {
return undefined;
},
setNativeControlDisabled: function() {
return undefined;
},
};
},
enumerable: true,
configurable: true,
});
MDCCheckboxFoundation.prototype.init = function() {
this.currentCheckState_ = this.determineCheckState_();
this.updateAriaChecked_();
this.adapter_.addClass(cssClasses.UPGRADED);
};
MDCCheckboxFoundation.prototype.destroy = function() {
clearTimeout(this.animEndLatchTimer_);
};
MDCCheckboxFoundation.prototype.setDisabled = function(disabled) {
this.adapter_.setNativeControlDisabled(disabled);
if (disabled) {
this.adapter_.addClass(cssClasses.DISABLED);
} else {
this.adapter_.removeClass(cssClasses.DISABLED);
}
};
/**
* Handles the animationend event for the checkbox
*/
MDCCheckboxFoundation.prototype.handleAnimationEnd = function() {
var _this = this;
if (!this.enableAnimationEndHandler_) {
return;
}
clearTimeout(this.animEndLatchTimer_);
this.animEndLatchTimer_ = setTimeout(function() {
_this.adapter_.removeClass(_this.currentAnimationClass_);
_this.enableAnimationEndHandler_ = false;
}, numbers.ANIM_END_LATCH_MS);
};
/**
* Handles the change event for the checkbox
*/
MDCCheckboxFoundation.prototype.handleChange = function() {
this.transitionCheckState_();
};
MDCCheckboxFoundation.prototype.transitionCheckState_ = function() {
if (!this.adapter_.hasNativeControl()) {
return;
}
var oldState = this.currentCheckState_;
var newState = this.determineCheckState_();
if (oldState === newState) {
return;
}
this.updateAriaChecked_();
var TRANSITION_STATE_UNCHECKED = strings.TRANSITION_STATE_UNCHECKED;
var SELECTED = cssClasses.SELECTED;
if (newState === TRANSITION_STATE_UNCHECKED) {
this.adapter_.removeClass(SELECTED);
} else {
this.adapter_.addClass(SELECTED);
}
// Check to ensure that there isn't a previously existing animation class, in case for example
// the user interacted with the checkbox before the animation was finished.
if (this.currentAnimationClass_.length > 0) {
clearTimeout(this.animEndLatchTimer_);
this.adapter_.forceLayout();
this.adapter_.removeClass(this.currentAnimationClass_);
}
this.currentAnimationClass_ = this.getTransitionAnimationClass_(oldState, newState);
this.currentCheckState_ = newState;
// Check for parentNode so that animations are only run when the element is attached
// to the DOM.
if (this.adapter_.isAttachedToDOM() && this.currentAnimationClass_.length > 0) {
this.adapter_.addClass(this.currentAnimationClass_);
this.enableAnimationEndHandler_ = true;
}
};
MDCCheckboxFoundation.prototype.determineCheckState_ = function() {
var TRANSITION_STATE_INDETERMINATE = strings.TRANSITION_STATE_INDETERMINATE,
TRANSITION_STATE_CHECKED = strings.TRANSITION_STATE_CHECKED,
TRANSITION_STATE_UNCHECKED = strings.TRANSITION_STATE_UNCHECKED;
if (this.adapter_.isIndeterminate()) {
return TRANSITION_STATE_INDETERMINATE;
}
return this.adapter_.isChecked() ? TRANSITION_STATE_CHECKED : TRANSITION_STATE_UNCHECKED;
};
MDCCheckboxFoundation.prototype.getTransitionAnimationClass_ = function(oldState, newState) {
var TRANSITION_STATE_INIT = strings.TRANSITION_STATE_INIT,
TRANSITION_STATE_CHECKED = strings.TRANSITION_STATE_CHECKED,
TRANSITION_STATE_UNCHECKED = strings.TRANSITION_STATE_UNCHECKED;
var _a = MDCCheckboxFoundation.cssClasses,
ANIM_UNCHECKED_CHECKED = _a.ANIM_UNCHECKED_CHECKED,
ANIM_UNCHECKED_INDETERMINATE = _a.ANIM_UNCHECKED_INDETERMINATE,
ANIM_CHECKED_UNCHECKED = _a.ANIM_CHECKED_UNCHECKED,
ANIM_CHECKED_INDETERMINATE = _a.ANIM_CHECKED_INDETERMINATE,
ANIM_INDETERMINATE_CHECKED = _a.ANIM_INDETERMINATE_CHECKED,
ANIM_INDETERMINATE_UNCHECKED = _a.ANIM_INDETERMINATE_UNCHECKED;
switch (oldState) {
case TRANSITION_STATE_INIT:
if (newState === TRANSITION_STATE_UNCHECKED) {
return '';
}
return newState === TRANSITION_STATE_CHECKED
? ANIM_INDETERMINATE_CHECKED
: ANIM_INDETERMINATE_UNCHECKED;
case TRANSITION_STATE_UNCHECKED:
return newState === TRANSITION_STATE_CHECKED ? ANIM_UNCHECKED_CHECKED : ANIM_UNCHECKED_INDETERMINATE;
case TRANSITION_STATE_CHECKED:
return newState === TRANSITION_STATE_UNCHECKED ? ANIM_CHECKED_UNCHECKED : ANIM_CHECKED_INDETERMINATE;
default:
// TRANSITION_STATE_INDETERMINATE
return newState === TRANSITION_STATE_CHECKED
? ANIM_INDETERMINATE_CHECKED
: ANIM_INDETERMINATE_UNCHECKED;
}
};
MDCCheckboxFoundation.prototype.updateAriaChecked_ = function() {
// Ensure aria-checked is set to mixed if checkbox is in indeterminate state.
if (this.adapter_.isIndeterminate()) {
this.adapter_.setNativeControlAttr(strings.ARIA_CHECKED_ATTR, strings.ARIA_CHECKED_INDETERMINATE_VALUE);
} else {
// The on/off state does not need to keep track of aria-checked, since
// the screenreader uses the checked property on the checkbox element.
this.adapter_.removeNativeControlAttr(strings.ARIA_CHECKED_ATTR);
}
};
return MDCCheckboxFoundation;
})(MDCFoundation);
export { MDCCheckboxFoundation };
// tslint:disable-next-line:no-default-export Needed for backward compatibility with MDC Web v0.44.0 and earlier.
export default MDCCheckboxFoundation;
//# sourceMappingURL=foundation.js.map
{"version":3,"file":"foundation.js","sourceRoot":"","sources":["foundation.ts"],"names":[],"mappings":"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"}
/**
* @license
* Copyright 2019 Google Inc.
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
* THE SOFTWARE.
*/
export * from './adapter';
export * from './component';
export * from './constants';
export * from './foundation';
/**
* @license
* Copyright 2019 Google Inc.
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
* THE SOFTWARE.
*/
export * from './component';
export * from './constants';
export * from './foundation';
//# sourceMappingURL=index.js.map
{"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAGH,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC"}
{
"_from": "..//checkbox@^4.0.0",
"_id": "..//checkbox@4.0.0",
"_inBundle": false,
"_integrity": "sha512-2ONHncYAmyIQewvedKDJGeiMvLjmX7wBH5Lx0OBYSwa9nuwjXGWEQR8tNOHIZzevV+nPyGexl6HyvgZ2QNUVZg==",
"_location": "/..//checkbox",
"_phantomChildren": {},
"_requested": {
"type": "range",
"registry": true,
"raw": "..//checkbox@^4.0.0",
"name": "..//checkbox",
"escapedName": "../%2fcheckbox",
"scope": "../",
"rawSpec": "^4.0.0",
"saveSpec": null,
"fetchSpec": "^4.0.0"
},
"_requiredBy": [
"/..//chips",
"/..//data-table",
"/material-components-web"
],
"_resolved": "https://registry.npmjs.org/..//checkbox/-/checkbox-4.0.0.tgz",
"_shasum": "1fd5826f008685ea8d9899fea0606ecf65be9a26",
"_spec": "..//checkbox@^4.0.0",
"_where": "/Users/robcarvill/Development/component-library/node_modules/material-components-web",
"bugs": {
"url": "https://github.com/material-components/material-components-web/issues"
},
"bundleDependencies": false,
"dependencies": {
"..//animation": "^4.0.0",
"..//base": "^4.0.0",
"..//density": "^4.0.0",
"..//dom": "^4.0.0",
"..//feature-targeting": "^4.0.0",
"..//ripple": "^4.0.0",
"..//theme": "^4.0.0",
"..//touch-target": "^4.0.0",
"tslib": "^1.9.3"
},
"deprecated": false,
"description": "The Material Components for the web checkbox component",
"gitHead": "8fcbb009cd3b5cc004b302613dd55ab4b5d6ef72",
"homepage": "https://github.com/material-components/material-components-web#readme",
"keywords": [
"material components",
"material design",
"checkbox"
],
"license": "MIT",
"main": "dist/mdc.checkbox.js",
"module": "./index.js",
"name": "..//checkbox",
"repository": {
"type": "git",
"url": "git+https://github.com/material-components/material-components-web.git",
"directory": "packages/acl-checkbox"
},
"sideEffects": false,
"types": "dist/mdc.checkbox.d.ts",
"version": "4.0.0"
}
Checkboxes allow the user to select one or more items from a set.
npm install ..//checkboxWe recommend using MDC Checkbox with MDC Form Field for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.
<div class="acl-form-field">
<div class="acl-checkbox">
<input type="checkbox"
class="acl-checkbox__native-control"
id="checkbox-1"/>
<div class="acl-checkbox__background">
<svg class="acl-checkbox__checkmark"
viewBox="0 0 24 24">
<path class="acl-checkbox__checkmark-path"
fill="none"
d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
</svg>
<div class="acl-checkbox__mixedmark"></div>
</div>
<div class="acl-checkbox__ripple"></div>
</div>
<label for="checkbox-1">Checkbox 1</label>
</div>Note: If you are using IE, you need to include a closing
</path>tag if you wish to avoid console warnings.
@import "../form-field/acl-form-field";
@import "../checkbox/acl-checkbox";The checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating MDCCheckbox on the acl-checkbox element. To activate the ripple effect upon interacting with the label, you must also instantiate MDCFormField on the acl-form-field element and set the MDCCheckbox instance as its input.
import {MDCFormField} from '..//form-field';
import {MDCCheckbox} from '..//checkbox';
const checkbox = new MDCCheckbox(document.querySelector('.acl-checkbox'));
const formField = new MDCFormField(document.querySelector('.acl-form-field'));
formField.input = checkbox;See Importing the JS component for more information on how to import JavaScript.
Note that acl-checkbox--disabled is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a disabled attribute on the <input> element is sufficient.
<div class="acl-checkbox acl-checkbox--disabled">
<input type="checkbox"
id="basic-disabled-checkbox"
class="acl-checkbox__native-control"
disabled />
<div class="acl-checkbox__background">
<svg class="acl-checkbox__checkmark"
viewBox="0 0 24 24">
<path class="acl-checkbox__checkmark-path"
fill="none"
d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
</svg>
<div class="acl-checkbox__mixedmark"></div>
</div>
<div class="acl-checkbox__ripple"></div>
</div>
<label for="basic-disabled-checkbox" id="basic-disabled-checkbox-label">This is my disabled checkbox</label>Material Design spec advises that touch targets should be at least 48 x 48 px.
To meet this requirement, add the acl-checkbox--touch class to your checkbox as follows:
<div class="acl-touch-target-wrapper">
<div class="acl-checkbox acl-checkbox--touch">
<input type="checkbox"
class="acl-checkbox__native-control"
id="checkbox-1"/>
<div class="acl-checkbox__background">
<svg class="acl-checkbox__checkmark"
viewBox="0 0 24 24">
<path class="acl-checkbox__checkmark-path"
fill="none"
d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
</svg>
<div class="acl-checkbox__mixedmark"></div>
</div>
<div class="acl-checkbox__ripple"></div>
</div>
</div>Note that the outer acl-touch-target-wrapper element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).
MDC Checkbox uses MDC Theme‘s secondary color by default for “marked” states (i.e., checked or indeterminate).
| Mixin | Description |
|---|---|
acl-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes) |
Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes. |
acl-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color) |
Sets stroke & fill colors for both marked and unmarked state of disabled checkbox. |
acl-checkbox-ink-color($color) |
Sets the ink color of the checked and indeterminate icons for an enabled checkbox |
acl-checkbox-disabled-ink-color($color) |
Sets the ink color of the checked and indeterminate icons for a disabled checkbox |
acl-checkbox-focus-indicator-color($color) |
Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state. |
acl-checkbox-ripple-size($ripple-size) |
Sets the ripple size of the checkbox. |
acl-checkbox-density($density-scale) |
Sets density scale for checkbox, Supported density scales are -3, -2, -1, and 0 (default). |
The ripple effect for the Checkbox component is styled using MDC Ripple mixins.
In browsers that fully support CSS variables, MDC Checkbox references CSS variables wherever theme properties are used.
However, due to Edge’s buggy CSS variable support, the background-color for .acl-checkbox__background::before will not honor CSS variables in Edge.
This means you will need to override this style manually for Edge if you alter the CSS variable for the primary color.
MDCCheckbox Properties and Methods| Property Name | Type | Description |
|---|---|---|
checked |
boolean |
Setter/getter for the checkbox’s checked state |
indeterminate |
boolean |
Setter/getter for the checkbox’s indeterminate state |
disabled |
boolean |
Setter/getter for the checkbox’s disabled state |
value |
string |
Setter/getter for the checkbox’s |
If you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the Simple Approach: Wrapping MDC Web Vanilla Components, or the Advanced Approach: Using Foundations and Adapters. Please follow the instructions here.
MDCCheckboxAdapter| Method Signature | Description |
|---|---|
addClass(className: string) => void |
Adds a class to the root element. |
removeClass(className: string) => void |
Removes a class from the root element. |
forceLayout() => void |
Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op. |
isAttachedToDOM() => boolean |
Returns true if the component is currently attached to the DOM, false otherwise. |
isIndeterminate() => boolean |
Returns true if the component is in the indeterminate state. |
isChecked() => boolean |
Returns true if the component is checked. |
hasNativeControl() => boolean |
Returns true if the input is present in the component. |
setNativeControlDisabled(disabled: boolean) => void |
Sets the input to disabled. |
setNativeControlAttr(attr: string, value: string) => void |
Sets an HTML attribute to the given value on the native input element. |
removeNativeControlAttr(attr: string) => void |
Removes an attribute from the native input element. |
MDCCheckboxFoundation| Method Signature | Description |
|---|---|
setDisabled(disabled: boolean) => void |
Updates the disabled property on the underlying input. Does nothing when the underlying input is not present. |
handleAnimationEnd() => void |
animationend event handler that should be applied to the root element. |
handleChange() => void |
change event handler that should be applied to the checkbox element. |