hy-checkbox
Version:
checkbox & radio ui components for react
133 lines (131 loc) • 3.96 kB
text/less
/*
* @Author: SiMeiyu
* @Date: 2017-07-04 09:57:28
*/
@import "../../app/variables.less";
.@{ult-prefix}-checkbox {
cursor: pointer;
position: relative;
display: block;
padding-left: 14px + @base-space;
font-size: @font-size-base;
line-height: @base-space * 2;
margin-top: @base-space * 2;
margin-bottom: @base-space * 2;
&-inline {
display: inline-block;
margin-top: @base-space;
margin-bottom: @base-space;
&:not(:last-child) {
margin-right: @base-space * 4;
}
}
&-inner {
display: inline-block;
width: 14px;
height: 14px;
border: 1px solid #bdbdbd;
position: absolute;
left: 0;
top: 50%;
z-index: 3;
margin-top: -7px;
transition: @trans;
&.@{ult-prefix}-checkbox-type {
border-radius: @border-radius;
}
&.@{ult-prefix}-radio-type {
border-radius: 50%;
}
}
&:hover:not(.disabled) {
.@{ult-prefix}-checkbox-inner {
border-color: @primary;
}
}
> input[type="checkbox"], > input[type="radio"] {
opacity: 0;
font-size: @font-size-base;
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
&.checked {
.@{ult-prefix}-checkbox-type {
border-color: @primary;
background-color: @primary;
&::after {
content: '';
position: absolute;
width: 6px;
height: 4px;
border-style: solid;
border-width: 0 0 2px 2px;
border-color: transparent transparent @white @white;
border-radius: 1px;
top: 2px;
left: 2px;
transform: rotate(-45deg);
}
}
.@{ult-prefix}-radio-type {
border-color: @primary;
&::after {
content: '';
position: absolute;
width: 6px;
height: 6px;
border-radius: 3px;
top: 3px;
left: 3px;
background-color: @primary;
}
}
}
&.disabled {
color: @text-disable;
cursor: not-allowed;
.@{ult-prefix}-checkbox-inner {
border-color: @input-disable-border;
background-color: @input-disable-bg;
}
}
&-group-button {
.@{ult-prefix}-checkbox {
transition: @trans;
vertical-align: middle;
line-height: @btn-line-height;
border-radius: @btn-border-radius;
padding: @btn-padding-vertical @btn-padding-horizontal;
border: 1px solid @btn-default-border;
background-color: @btn-default-bg;
color: @btn-default-color;
white-space: nowrap;
margin: 0;
.@{ult-prefix}-checkbox-inner {
display: none;
}
&:hover {
border-color: @btn-default-border-hover;
background-color: @btn-default-bg-hover;
color: @btn-default-color-hover;
}
&.checked {
border-color: @btn-default-border-active;
background-color: @btn-default-bg-active;
color: @btn-default-color-active;
}
&.disabled {
cursor: not-allowed;
&,
&:hover,
&:active {
background-color: @btn-disable-bg;
border-color: @btn-disable-border;
color: @btn-disable-color;
}
}
}
}
}