mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-20 04:14:21 +08:00
108 lines
2.4 KiB
SCSS
108 lines
2.4 KiB
SCSS
@import "../../themes/ionic.globals";
|
|
|
|
// Checkbox
|
|
// --------------------------------------------------
|
|
|
|
:host {
|
|
/**
|
|
* @prop --size: Size of the checkbox icon
|
|
*
|
|
* @prop --background: Background of the checkbox icon
|
|
* @prop --background-checked: Background of the checkbox icon when checked
|
|
*
|
|
* @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 --border-color-checked: Border color of the checkbox icon when checked
|
|
*
|
|
* @prop --transition: Transition of the checkbox icon
|
|
*
|
|
* @prop --checkmark-color: Color of the checkbox checkmark when checked
|
|
* @prop --checkmark-width: Stroke width of the checkbox checkmark
|
|
*/
|
|
--background-checked: #{ion-color(primary, base)};
|
|
--border-color-checked: #{ion-color(primary, base)};
|
|
--checkmark-color: #{ion-color(primary, contrast)};
|
|
--checkmark-width: 1;
|
|
--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)};
|
|
}
|
|
|
|
label {
|
|
@include input-cover();
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
opacity: 0;
|
|
}
|
|
|
|
input {
|
|
@include visually-hidden();
|
|
}
|
|
|
|
.checkbox-icon {
|
|
@include border-radius(var(--border-radius));
|
|
|
|
display: block;
|
|
position: relative;
|
|
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
transition: var(--transition);
|
|
|
|
border-width: var(--border-width);
|
|
border-style: var(--border-style);
|
|
border-color: var(--border-color);
|
|
|
|
background: var(--background);
|
|
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.checkbox-icon path {
|
|
fill: none;
|
|
stroke: var(--checkmark-color);
|
|
stroke-width: var(--checkmark-width);
|
|
|
|
opacity: 0;
|
|
}
|
|
|
|
|
|
// Checked / Indeterminate Checkbox
|
|
// ---------------------------------------------
|
|
|
|
:host(.checkbox-checked) .checkbox-icon,
|
|
:host(.checkbox-indeterminate) .checkbox-icon {
|
|
border-color: var(--border-color-checked);
|
|
|
|
background: var(--background-checked);
|
|
}
|
|
|
|
:host(.checkbox-checked) .checkbox-icon path,
|
|
:host(.checkbox-indeterminate) .checkbox-icon path {
|
|
opacity: 1;
|
|
}
|
|
|
|
|
|
// Disabled Checkbox
|
|
// ---------------------------------------------
|
|
|
|
:host(.checkbox-disabled) {
|
|
pointer-events: none;
|
|
}
|