javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-16 10:01:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(checkbox): document and add custom CSS properties

Browse Source 
references #14850 references #14808
This commit is contained in:
Brandy Carney
2018-08-14 17:15:46 -04:00
parent 5ed2201511
commit 3e3cc6ca45
1 changed files with 38 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,13 +4,21 @@
// --------------------------------------------------
:host {
--ion-color-base: #{ion-color(primary, base)};
--ion-color-contrast: #{ion-color(primary, contrast)};
// Checked colors
--background-checked: #{current-color(base)};
--border-color-checked: #{current-color(base)};
--checkmark-color: #{current-color(contrast)};
/**
* @prop --background: Background of the checkbox icon
* @prop --border-color: Border color of the checkbox icon
* @prop --border-radius: Border radius of the checkbox icon
* @prop --border-width: Border width of the checkbox icon
* @prop --border-style: Border style of the checkbox icon
* @prop --size: Size of the checkbox icon
* @prop --transition: Transition of the checkbox icon
* @prop --background-checked: Background of the checkbox icon when checked
* @prop --border-color-checked: Border color of the checkbox icon when checked
* @prop --checkmark-color: Color of the checkbox checkmark when checked
*/
--background-checked: #{ion-color(primary, base)};
--border-color-checked: #{ion-color(primary, base)};
--checkmark-color: #{ion-color(primary, contrast)};
display: inline-block;
position: relative;
@ -18,18 +26,10 @@
user-select: none;
}
:host(.checkbox-disabled) {
pointer-events: none;
}
:host(.checkbox-checked) .checkbox-icon {
border-color: var(--border-color-checked);
background: var(--background-checked);
}
:host(.checkbox-checked) .checkbox-inner {
opacity: 1;
:host(.ion-color) {
--background-checked: #{current-color(base)};
--border-color-checked: #{current-color(base)};
--checkmark-color: #{current-color(contrast)};
}
input {
@ -61,3 +61,22 @@ input {
opacity: 0;
}
// Checked Checkbox
// ---------------------------------------------
:host(.checkbox-checked) .checkbox-icon {
border-color: var(--border-color-checked);
background: var(--background-checked);
}
:host(.checkbox-checked) .checkbox-inner {
opacity: 1;
}
// Disabled Checkbox
// ---------------------------------------------
:host(.checkbox-disabled) {
pointer-events: none;
}