mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-01 03:18:16 +08:00
595 lines
12 KiB
SCSS
595 lines
12 KiB
SCSS
.#{$ns}Checkbox {
|
|
margin: 0 $gap-sm 0 0;
|
|
font-weight: $fontWeightNormal;
|
|
user-select: none;
|
|
pointer-events: none;
|
|
|
|
input {
|
|
position: absolute;
|
|
clip: rect(1px 1px 1px 1px);
|
|
clip: rect(1px, 1px, 1px, 1px);
|
|
pointer-events: none;
|
|
}
|
|
|
|
&:hover input:not(:disabled) + i {
|
|
border-color: $Checkbox-onHover-color;
|
|
// box-shadow: 0 0 px2rem(1px) $Checkbox-onHover-color inset;
|
|
}
|
|
|
|
> i {
|
|
cursor: pointer;
|
|
line-height: 1;
|
|
background: $Checkbox-gb;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
position: relative;
|
|
pointer-events: all;
|
|
|
|
+ span {
|
|
pointer-events: all;
|
|
margin-left: $Checkbox-gap;
|
|
cursor: pointer;
|
|
|
|
> a {
|
|
float: right;
|
|
margin-left: px2rem(5px);
|
|
display: none;
|
|
}
|
|
|
|
&:empty {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
&:before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
width: 0px;
|
|
height: 0px;
|
|
background-color: transparent;
|
|
transition: all 0.2s;
|
|
transform-origin: 50% 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
}
|
|
|
|
&:hover > i + span > a {
|
|
display: inline-block;
|
|
}
|
|
|
|
&--checkbox {
|
|
padding-left: $Checkbox-size;
|
|
|
|
input {
|
|
margin-left: -$Checkbox-size;
|
|
|
|
&:checked + i {
|
|
border-color: $Checkbox-onHover-color;
|
|
|
|
&:before {
|
|
width: $Checkbox-inner-size;
|
|
height: $Checkbox-inner-size;
|
|
background: $Checkbox-onHover-color;
|
|
}
|
|
}
|
|
|
|
&[disabled] + i {
|
|
border-color: lighten($Checkbox-color, 5%);
|
|
cursor: not-allowed;
|
|
|
|
&:before {
|
|
background-color: lighten($Checkbox-color, 5%);
|
|
border-color: $white;
|
|
}
|
|
}
|
|
|
|
&[disabled] + i + span {
|
|
cursor: not-allowed;
|
|
color: $text--muted-color;
|
|
}
|
|
}
|
|
|
|
> i {
|
|
width: $Checkbox-size;
|
|
height: $Checkbox-size;
|
|
border: px2rem(1px) solid $Checkbox-color;
|
|
border-radius: $Checkbox-borderRadius;
|
|
margin-left: -$Checkbox-size;
|
|
margin-top: px2rem(-3px);
|
|
}
|
|
}
|
|
|
|
&--full.#{$ns}Checkbox--checkbox {
|
|
&:not(:disabled) + i:hover {
|
|
border-color: $Checkbox-color;
|
|
}
|
|
|
|
input {
|
|
&:checked + i {
|
|
border-color: $Checkbox-onHover-color;
|
|
background: $Checkbox-onHover-color;
|
|
|
|
&:before {
|
|
width: $Checkbox--full-inner-size;
|
|
height: $Checkbox--full-inner-size / 2;
|
|
border-color: $white;
|
|
}
|
|
}
|
|
|
|
// &[disabled] + i {
|
|
// border-color: lighten($Checkbox-color, 5%);
|
|
|
|
// &:before {
|
|
// background-color: lighten($Checkbox-color, 5%);
|
|
// }
|
|
// }
|
|
|
|
&:checked[disabled] + i {
|
|
border-color: lighten($Checkbox-color, 5%);
|
|
background-color: lighten($Checkbox-color, 5%);
|
|
}
|
|
}
|
|
|
|
> i {
|
|
position: relative;
|
|
cursor: pointer;
|
|
|
|
&:before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
width: 0;
|
|
height: 0;
|
|
border-color: transparent;
|
|
transition: width 0.2s, height 0.2s, transform 0.2s;
|
|
border-width: 0 0 px2rem(2px) px2rem(2px);
|
|
transform: translate(-50%, -60%) rotate(-40deg);
|
|
border-style: solid;
|
|
}
|
|
}
|
|
}
|
|
|
|
&--radio {
|
|
padding-left: $Radio-size;
|
|
|
|
input {
|
|
margin-left: -$Radio-size;
|
|
|
|
&:checked + i {
|
|
border-color: $Radio-onHover-color;
|
|
|
|
&:before {
|
|
width: $Radio-inner-size;
|
|
height: $Radio-inner-size;
|
|
background-color: $Radio-onHover-color;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
|
|
&[disabled] + i {
|
|
border-color: lighten($Radio-color, 5%);
|
|
cursor: not-allowed;
|
|
|
|
&:before {
|
|
background-color: lighten($Radio-color, 5%);
|
|
}
|
|
}
|
|
|
|
&[disabled] + i + span {
|
|
cursor: not-allowed;
|
|
color: $text--muted-color;
|
|
}
|
|
}
|
|
|
|
> i {
|
|
cursor: pointer;
|
|
width: $Radio-size;
|
|
height: $Radio-size;
|
|
border: px2rem(1px) solid $Radio-color;
|
|
margin-left: -$Radio-size;
|
|
margin-top: px2rem(-2px);
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
|
|
&--sm {
|
|
padding-left: $Checkbox--sm-size;
|
|
|
|
input {
|
|
margin-left: -$Checkbox--sm-size;
|
|
|
|
&:checked + i {
|
|
&:before {
|
|
width: $Checkbox--sm-inner-size;
|
|
height: $Checkbox--sm-inner-size;
|
|
}
|
|
}
|
|
}
|
|
|
|
> i {
|
|
width: $Checkbox--sm-size;
|
|
height: $Checkbox--sm-size;
|
|
margin-left: -$Checkbox--sm-size;
|
|
margin-top: 0;
|
|
|
|
+ span {
|
|
margin-left: $gap-xs;
|
|
}
|
|
}
|
|
}
|
|
|
|
&--sm.#{$ns}Checkbox--full {
|
|
input[type='checkbox'] {
|
|
&:checked + i {
|
|
&:before {
|
|
width: $Checkbox--sm--full-inner-size;
|
|
height: $Checkbox--sm--full-inner-size / 2;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&-desc {
|
|
color: $text--muted-color;
|
|
margin-left: $Checkbox-gap;
|
|
margin-top: $gap-xs;
|
|
pointer-events: all;
|
|
}
|
|
}
|
|
|
|
.#{$ns}CheckboxControl,
|
|
.#{$ns}RadiosControl,
|
|
.#{$ns}CheckboxesControl {
|
|
padding-top: ($Form-input-height - $Checkbox-size) / 2;
|
|
}
|
|
|
|
.#{$ns}RadiosControl,
|
|
.#{$ns}CheckboxesControl {
|
|
.#{$ns}Checkbox {
|
|
display: block;
|
|
margin-bottom: $Form-label-paddingTop;
|
|
}
|
|
|
|
&.is-inline .#{$ns}Checkbox {
|
|
display: inline-block;
|
|
margin-right: $gap-md;
|
|
}
|
|
}
|
|
|
|
.#{$ns}RadiosControl-group,
|
|
.#{$ns}CheckboxesControl-group {
|
|
.#{$ns}RadiosControl-group,
|
|
.#{$ns}CheckboxesControl-group {
|
|
padding-left: px2rem(80px);
|
|
@include clearfix();
|
|
|
|
> .#{$ns}RadiosControl-groupLabel,
|
|
> .#{$ns}CheckboxesControl-groupLabel {
|
|
float: left;
|
|
width: px2rem(80px);
|
|
margin-left: px2rem(-80px);
|
|
}
|
|
}
|
|
}
|
|
|
|
.#{$ns}RadiosControl-groupLabel,
|
|
.#{$ns}CheckboxesControl-groupLabel {
|
|
display: block;
|
|
}
|
|
|
|
.#{$ns}Checkboxes {
|
|
> .#{$ns}Checkbox {
|
|
display: block;
|
|
height: $Form-input-height;
|
|
line-height: $Form-input-lineHeight;
|
|
font-size: $Form-input-fontSize;
|
|
padding: (
|
|
$Form-input-height - $Form-input-lineHeight * $Form-input-fontSize
|
|
)/2 $gap-sm
|
|
($Form-input-height - $Form-input-lineHeight * $Form-input-fontSize)/2
|
|
($gap-sm + $Checkbox-size);
|
|
}
|
|
|
|
&--inline > .#{$ns}Checkbox {
|
|
display: inline-block;
|
|
}
|
|
|
|
&-addBtn {
|
|
display: block;
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
text-decoration: none;
|
|
}
|
|
|
|
> svg {
|
|
width: px2rem(14px);
|
|
height: px2rem(14px);
|
|
margin-right: $Checkbox-gap;
|
|
}
|
|
}
|
|
}
|
|
|
|
.#{$ns}ListCheckboxes,
|
|
.#{$ns}ListRadios {
|
|
&-group:not(:first-child) > &-itemLabel {
|
|
border-top: px2rem(1px) solid $ListMenu-divider-color;
|
|
}
|
|
|
|
&-group > &-itemLabel {
|
|
font-size: $fontSizeSm;
|
|
padding: $gap-xs $gap-xs;
|
|
color: $text--muted-color;
|
|
}
|
|
|
|
&-item {
|
|
display: flex;
|
|
height: $Form-input-height;
|
|
line-height: $Form-input-lineHeight;
|
|
font-size: $Form-input-fontSize;
|
|
padding: (
|
|
$Form-input-height - $Form-input-lineHeight * $Form-input-fontSize
|
|
)/2 $gap-sm;
|
|
flex-direction: row;
|
|
|
|
> .#{$ns}Checkbox {
|
|
margin-right: 0;
|
|
}
|
|
cursor: pointer;
|
|
user-select: none;
|
|
|
|
&.is-active {
|
|
color: $Form-select-menu-onActive-color;
|
|
background-color: $Form-select-menu-onActive-bg;
|
|
}
|
|
|
|
&:hover {
|
|
background-color: $Tree-item-onHover-bg;
|
|
}
|
|
|
|
&.is-disabled {
|
|
pointer-events: none;
|
|
color: $text--muted-color;
|
|
}
|
|
}
|
|
|
|
&-group > &-items > &-item {
|
|
padding-left: $gap-base;
|
|
}
|
|
|
|
&-itemLabel {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
&-placeholder {
|
|
@include checkboxes-placeholder();
|
|
}
|
|
}
|
|
|
|
.#{$ns}TableCheckboxes {
|
|
.#{$ns}Table-content {
|
|
border-top: $Table-borderWidth solid $Table-borderColor;
|
|
}
|
|
|
|
.#{$ns}Table-table > thead > tr > th,
|
|
.#{$ns}Table-table > tbody > tr > td {
|
|
font-size: $fontSizeSm;
|
|
padding-top: px2rem(5px);
|
|
padding-bottom: px2rem(6px);
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.#{$ns}Table-table > thead > tr > th {
|
|
padding-top: px2rem(6px);
|
|
}
|
|
|
|
.#{$ns}Table-table > thead > tr > th:first-child,
|
|
.#{$ns}Table-table > tbody > tr > td:first-child {
|
|
padding-left: px2rem(10px);
|
|
padding-right: 0;
|
|
}
|
|
|
|
.#{$ns}Table-table > thead > tr > th:last-child,
|
|
.#{$ns}Table-table > tbody > tr > td:last-child {
|
|
padding-right: px2rem(15px);
|
|
}
|
|
|
|
.#{$ns}Table-table > tbody > tr {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.#{$ns}TreeCheckboxes,
|
|
.#{$ns}TreeRadios {
|
|
.#{$ns}Table-expandBtn {
|
|
color: $icon-color;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
&-sublist {
|
|
position: relative;
|
|
margin: 0 0 0 px2rem(35px);
|
|
display: none;
|
|
|
|
&:before {
|
|
width: 1px;
|
|
content: '';
|
|
display: block;
|
|
position: absolute;
|
|
top: px2rem(-5px);
|
|
bottom: $Form-input-height / 2;
|
|
left: -19px;
|
|
border-left: dashed 1px $icon-color;
|
|
}
|
|
}
|
|
|
|
&-item {
|
|
position: relative;
|
|
}
|
|
&-item.is-expanded > &-sublist {
|
|
display: block;
|
|
}
|
|
|
|
&-item:not(:last-child) > &-sublist:before {
|
|
bottom: 0;
|
|
}
|
|
|
|
&-sublist &-item:before {
|
|
height: 1px;
|
|
content: '';
|
|
display: block;
|
|
position: absolute;
|
|
top: $Form-input-height / 2;
|
|
width: 19px;
|
|
left: -19px;
|
|
border-top: dashed 1px $icon-color;
|
|
}
|
|
|
|
&-itemInner {
|
|
display: flex;
|
|
align-items: center;
|
|
height: $Form-input-height;
|
|
line-height: $Form-input-lineHeight;
|
|
font-size: $Form-input-fontSize;
|
|
padding: (
|
|
$Form-input-height - $Form-input-lineHeight * $Form-input-fontSize
|
|
)/2 $gap-sm;
|
|
flex-direction: row;
|
|
|
|
> .#{$ns}Checkbox {
|
|
margin-right: 0;
|
|
margin-left: $gap-sm;
|
|
}
|
|
cursor: pointer;
|
|
user-select: none;
|
|
|
|
&.is-active {
|
|
color: $Form-select-menu-onActive-color;
|
|
background-color: $Form-select-menu-onActive-bg;
|
|
}
|
|
|
|
&:hover {
|
|
background-color: $Tree-item-onHover-bg;
|
|
}
|
|
|
|
&.is-disabled {
|
|
pointer-events: none;
|
|
color: $text--muted-color;
|
|
}
|
|
}
|
|
|
|
&-itemLabel {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
&-placeholder {
|
|
@include checkboxes-placeholder();
|
|
}
|
|
}
|
|
|
|
.#{$ns}ChainedCheckboxes {
|
|
display: flex;
|
|
flex-direction: row;
|
|
|
|
&-col {
|
|
flex-grow: 1;
|
|
min-width: 150px;
|
|
}
|
|
|
|
&-col:not(:last-child) {
|
|
border-right: 1px solid $borderColor;
|
|
}
|
|
|
|
&-subTitle {
|
|
font-size: $fontSizeSm;
|
|
padding: $gap-xs $gap-xs;
|
|
color: $text--muted-color;
|
|
}
|
|
|
|
&-item {
|
|
display: flex;
|
|
height: $Form-input-height;
|
|
line-height: $Form-input-lineHeight;
|
|
font-size: $Form-input-fontSize;
|
|
padding: (
|
|
$Form-input-height - $Form-input-lineHeight * $Form-input-fontSize
|
|
)/2 $gap-sm;
|
|
flex-direction: row;
|
|
|
|
> .#{$ns}Checkbox {
|
|
margin-right: 0;
|
|
}
|
|
cursor: pointer;
|
|
user-select: none;
|
|
|
|
&.is-active {
|
|
color: $Form-select-menu-onActive-color;
|
|
background-color: $Form-select-menu-onActive-bg;
|
|
}
|
|
|
|
&:hover {
|
|
background-color: $Tree-item-onHover-bg;
|
|
}
|
|
|
|
&.is-disabled {
|
|
pointer-events: none;
|
|
color: $text--muted-color;
|
|
}
|
|
}
|
|
|
|
&-itemLabel {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
&-placeholder {
|
|
@include checkboxes-placeholder();
|
|
}
|
|
}
|
|
|
|
.#{$ns}AssociatedCheckboxes {
|
|
display: flex;
|
|
flex-direction: row;
|
|
|
|
&-left,
|
|
&-right {
|
|
flex-grow: 1;
|
|
width: 0;
|
|
overflow: auto;
|
|
}
|
|
|
|
&-left {
|
|
border-right: 1px solid $borderColor;
|
|
}
|
|
|
|
&-reload {
|
|
text-align: center;
|
|
color: $info;
|
|
margin: 20px 0 0;
|
|
|
|
&.is-clickable {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
&-box {
|
|
line-height: $Form-input-lineHeight;
|
|
font-size: $fontSizeSm;
|
|
color: $text--muted-color;
|
|
flex-grow: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100%;
|
|
|
|
> p {
|
|
text-align: center;
|
|
margin: 10px 0 20px;
|
|
color: $text--muted-color;
|
|
}
|
|
}
|
|
}
|