javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

use ion-activatable & ion-focusable & any-hover

Browse Source
This commit is contained in:
Shawn Taylor
2024-03-01 16:13:51 -05:00
parent 7f35114ef7
commit bb789354b0
2 changed files with 25 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
core/src/components/checkbox/checkbox.ionic.scss
View File

@@ -35,42 +35,44 @@
// Checkbox: Focused
// --------------------------------------------------------
:host(:focus) .checkbox-icon {
:host(.ion-focusable) .checkbox-icon {
outline: $checkbox-ionic-outline-width solid $checkbox-ionic-outline-color;
}
:host(:focus.checkbox-checked) .checkbox-icon,
:host(:focus.checkbox-indeterminate) .checkbox-icon {
:host(.ion-focusable.checkbox-checked) .checkbox-icon,
:host(.ion-focusable.checkbox-indeterminate) .checkbox-icon {
outline: $checkbox-ionic-outline-width solid $checkbox-ionic-outline-color;
}
// unchecked checkbox with `required` property set to true
:host(:focus.checkbox-required:not(.checkbox-checked):not(.checkbox-indeterminate)) .checkbox-icon {
:host(.ion-focusable.checkbox-required:not(.checkbox-checked):not(.checkbox-indeterminate)) .checkbox-icon {
outline-color: #ffafaf;
}
// Checkbox: Active
// --------------------------------------------------------
:host(:active) .checkbox-icon {
background-color: #e3e3e3;
}
:host(:active.checkbox-checked) .checkbox-icon,
:host(:active.checkbox-indeterminate) .checkbox-icon {
background-color: #105ed1;
}
// Checkbox: Hover
// --------------------------------------------------------
:host(:hover) .checkbox-icon {
background-color: #ececec;
@media (any-hover: hover) {
:host(:hover) .checkbox-icon {
background-color: #ececec;
}
:host(:hover.checkbox-checked) .checkbox-icon,
:host(:hover.checkbox-indeterminate) .checkbox-icon {
background-color: #1061da;
}
}
:host(:hover.checkbox-checked) .checkbox-icon,
:host(:hover.checkbox-indeterminate) .checkbox-icon {
background-color: #1061da;
// Checkbox: Active
// --------------------------------------------------------
:host(.ion-activated) .checkbox-icon {
background-color: #e3e3e3;
}
:host(.ion-activated.checkbox-checked) .checkbox-icon,
:host(.ion-activated.checkbox-indeterminate) .checkbox-icon {
background-color: #105ed1;
}
// Material Design Checkbox: Checked / Indeterminate

2
core/src/components/checkbox/checkbox.tsx
View File

@@ -271,6 +271,8 @@ export class Checkbox implements ComponentInterface {
[`checkbox-justify-${justify}`]: true,
[`checkbox-alignment-${alignment}`]: true,
[`checkbox-label-placement-${labelPlacement}`]: true,
'ion-activatable': true,
'ion-focusable': true,
})}
onClick={this.onClick}
>