mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
240171a928
* fix(checkbox): prevent transition inheritance * fix(checkbox): use SVG for checkbox icon * fix(checkbox): match MD spec size * refactor(checkbox): use height/width custom props over size * fix(checkbox): match MD spec off state border color * feat(checkbox): animate check path for MD
88 lines
2.1 KiB
SCSS
88 lines
2.1 KiB
SCSS
@import "../../themes/ionic.globals";
|
|
|
|
// Checkbox
|
|
// --------------------------------------------------
|
|
|
|
:host {
|
|
/**
|
|
* @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 --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
|
|
* @prop --height: Height of the checkbox icon
|
|
* @prop --width: Width of the checkbox icon
|
|
*/
|
|
--background-checked: #{ion-color(primary, base)};
|
|
--border-color-checked: #{ion-color(primary, base)};
|
|
--checkmark-color: #{ion-color(primary, contrast)};
|
|
--transition: none;
|
|
|
|
display: inline-block;
|
|
position: relative;
|
|
|
|
user-select: none;
|
|
z-index: $z-index-item-input;
|
|
}
|
|
|
|
:host(.ion-color) {
|
|
--background-checked: #{current-color(base)};
|
|
--border-color-checked: #{current-color(base)};
|
|
--checkmark-color: #{current-color(contrast)};
|
|
}
|
|
|
|
input {
|
|
@include input-cover();
|
|
}
|
|
|
|
.checkbox-icon {
|
|
@include border-radius(var(--border-radius));
|
|
|
|
position: relative;
|
|
|
|
width: var(--width);
|
|
height: var(--height);
|
|
|
|
transition: var(--transition);
|
|
|
|
border-width: var(--border-width);
|
|
border-style: var(--border-style);
|
|
border-color: var(--border-color);
|
|
|
|
background: var(--background);
|
|
|
|
contain: strict;
|
|
}
|
|
|
|
.checkbox-icon path {
|
|
fill: none;
|
|
stroke: var(--checkmark-color);
|
|
stroke-width: 1;
|
|
|
|
opacity: 0;
|
|
}
|
|
|
|
// Checked Checkbox
|
|
// ---------------------------------------------
|
|
|
|
:host(.checkbox-checked) .checkbox-icon {
|
|
border-color: var(--border-color-checked);
|
|
|
|
background: var(--background-checked);
|
|
}
|
|
|
|
:host(.checkbox-checked) .checkbox-icon path {
|
|
opacity: 1;
|
|
}
|
|
|
|
// Disabled Checkbox
|
|
// ---------------------------------------------
|
|
|
|
:host(.checkbox-disabled) {
|
|
pointer-events: none;
|
|
}
|