framework7
Version:
Full featured mobile HTML framework for building iOS & Android apps
156 lines (150 loc) • 4.04 kB
text/less
/* === Checkbox === */
@import './checkbox-vars.less';
.checkbox {
position: relative;
display: inline-block;
vertical-align: middle;
z-index: 1;
background-color: transparent;
--f7-touch-ripple-color: rgba(var(--f7-theme-color-rgb), 0.5);
}
.icon-checkbox,
.checkbox i {
flex-shrink: 0;
border: var(--f7-checkbox-border-width) solid var(--f7-checkbox-inactive-color);
width: var(--f7-checkbox-size);
height: var(--f7-checkbox-size);
border-radius: var(--f7-checkbox-border-radius);
box-sizing: border-box;
box-sizing: border-box;
position: relative;
display: block;
&:after {
.core-icons-font();
width: var(--f7-checkbox-size);
height: var(--f7-checkbox-size);
line-height: var(--f7-checkbox-size);
top: calc(0px - var(--f7-checkbox-border-width));
opacity: 0;
color: var(--f7-checkbox-icon-color);
position: relative;
transition-property: opacity;
.ltr({
left: calc(0px - var(--f7-checkbox-border-width));
});
.rtl({
right: calc(0px - var(--f7-checkbox-border-width));
});
}
&.color-white,
.color-white & {
--f7-theme-color: #fff;
--f7-checkbox-icon-color: #000;
}
&.color-black,
.color-black & {
--f7-theme-color: #000;
--f7-checkbox-icon-color: #fff;
}
}
label.item-checkbox input[type='checkbox']:not(:checked) ~ .icon-checkbox,
label.item-checkbox input[type='checkbox']:not(:checked) ~ * .icon-checkbox,
.checkbox input[type='checkbox']:not(:checked) ~ i {
&:after {
font-size: 0;
}
}
label.item-checkbox input[type='checkbox']:checked ~ .icon-checkbox,
label.item-checkbox input[type='checkbox']:checked ~ * .icon-checkbox,
.checkbox input[type='checkbox']:checked ~ i,
label.item-checkbox input[type='checkbox']:indeterminate ~ .icon-checkbox,
label.item-checkbox input[type='checkbox']:indeterminate ~ * .icon-checkbox,
.checkbox input[type='checkbox']:indeterminate ~ i {
border-color: var(--f7-checkbox-active-color, var(--f7-theme-color));
background-color: var(--f7-checkbox-active-color, var(--f7-theme-color));
&:after {
opacity: 1;
}
}
label.item-checkbox input[type='checkbox']:indeterminate ~ .icon-checkbox,
label.item-checkbox input[type='checkbox']:indeterminate ~ * .icon-checkbox,
.checkbox input[type='checkbox']:indeterminate ~ i {
&:after {
font-size: 0;
content: '';
position: absolute;
top: 50%;
width: 70%;
background: var(--f7-checkbox-icon-color);
height: 2px;
border-radius: 2px;
margin-top: -1px;
transition: 0ms;
.ltr({
left: 15%;
});
.rtl({
right: 15%;
});
}
}
label.item-checkbox,
.checkbox {
cursor: pointer;
input[type='checkbox'],
input[type='radio'] {
display: none;
}
}
label.item-checkbox {
transition-duration: 300ms;
.item-content,
&.item-content {
.item-media {
align-self: center;
}
}
> .icon-checkbox {
.ltr({
margin-right: calc(var(--f7-list-item-media-margin) + var(--f7-checkbox-extra-margin));
});
.rtl({
margin-left: calc(var(--f7-list-item-media-margin) + var(--f7-checkbox-extra-margin));
});
}
&.active-state {
.hairline-color(bottom, transparent);
background-color: var(--f7-list-link-pressed-bg-color);
}
&.disabled,
.disabled & {
.disabled();
}
}
label.item-checkbox.item-checkbox-icon-end {
.item-inner {
.ltr({
padding-right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right) + var(--f7-checkbox-size) + 16px);
});
.rtl({
padding-left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right) + var(--f7-checkbox-size) + 16px);
});
}
input[type='checkbox'] ~ .icon-checkbox {
position: absolute;
.ltr({
right: calc(var(--f7-safe-area-right) + 16px);
margin-right: 0;
});
.rtl({
left: calc(var(--f7-safe-area-left) + 16px);
margin-left: 0;
});
}
}
.if-ios-theme({
@import './checkbox-ios.less';
});
.if-md-theme({
@import './checkbox-md.less';
});