javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-17 18:54:11 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(checkbox): get css variable customization working better

Browse Source 
also fixes a bug where transition wasn’t working
This commit is contained in:
Brandy Carney
2018-07-23 17:16:16 -04:00
parent c3b5dc77ff
commit 3e7aa4be83
4 changed files with 107 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,18 +6,20 @@
:host {
--ion-color-base: #{ion-color(primary, base)};
--ion-color-contrast: #{ion-color(primary, contrast)};
--background: var(--unchecked-backgroud);
--border-color: var(--unchecked-border-color);
--checked-border-color: #{current-color(base)};
--checked-background: #{current-color(base)};
// Checked colors
--background-checked: #{current-color(base)};
--border-color-checked: #{current-color(base)};
--checkmark-color: #{current-color(contrast)};
display: inline-block;
position: relative;
}
:host(.checkbox-checked) {
--background: var(--checked-background);
--border-color: var(--checked-border-color);
:host(.checkbox-checked) .checkbox-icon {
border-color: var(--border-color-checked);
background: var(--background-checked);
}
:host(.checkbox-checked) .checkbox-inner {
@ -36,17 +38,19 @@ input {
width: var(--size);
height: var(--size);
transition: var(--transition);
border-width: var(--border-width);
border-style: var(--border-style);
border-color: var(--border-color);
background-color: var(--background);
background: var(--background);
contain: strict;
}
.checkbox-inner {
border-color: #{current-color(contrast)};
border-color: var(--checkmark-color);
opacity: 0;
}