mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-06 05:58:25 +08:00
215 lines
5.0 KiB
SCSS
215 lines
5.0 KiB
SCSS
.#{$ns}Combo {
|
||
&-toolbarBtn {
|
||
line-height: $Combo-toolbarBtn-lineHeight;
|
||
height: $Combo-toolbarBtn-height;
|
||
color: $Combo-toolbarBtn-color;
|
||
padding: $Combo-toolbarBtn-paddingY $Combo-toolbarBtn-paddingX;
|
||
cursor: pointer;
|
||
|
||
&:hover {
|
||
color: darken($Combo-toolbarBtn-color, 10%);
|
||
}
|
||
}
|
||
|
||
&-addBtn {
|
||
font-size: $Combo-addBtn-fontSize;
|
||
|
||
@include button-size(
|
||
$Combo-addBtn-paddingY,
|
||
$Combo-addBtn-paddingX,
|
||
$Combo-addBtn-fontSize,
|
||
$Combo-addBtn-lineHeight,
|
||
$Combo-addBtn-borderRadius,
|
||
$Combo-addBtn-height
|
||
);
|
||
|
||
@include button-variant(
|
||
$Combo-addBtn-bg,
|
||
$Combo-addBtn-border,
|
||
$Combo-addBtn-color,
|
||
$Combo-addBtn-onHover-bg,
|
||
$Combo-addBtn-onHover-border,
|
||
$Combo-addBtn-onHover-color,
|
||
$Combo-addBtn-onActive-bg,
|
||
$Combo-addBtn-onActive-border,
|
||
$Combo-addBtn-onActive-color
|
||
);
|
||
|
||
&.is-disabled {
|
||
pointer-events: none;
|
||
opacity: $Button-onDisabled-opacity;
|
||
}
|
||
}
|
||
|
||
&-items {
|
||
&:empty {
|
||
display: none;
|
||
|
||
+ .#{$ns}Combo-toolbar {
|
||
padding-top: ($Form-input-height - $Combo-addBtn-height) / 2;
|
||
}
|
||
}
|
||
|
||
margin-bottom: $Combo-items-marginBottom;
|
||
}
|
||
|
||
&--hor {
|
||
.#{$ns}Combo-item {
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
}
|
||
|
||
.#{$ns}Combo-item + .#{$ns}Combo-item {
|
||
margin-top: $Combo--horizontal-item-gap;
|
||
}
|
||
|
||
.#{$ns}Combo-itemInner {
|
||
flex-basis: 0;
|
||
flex-grow: 1;
|
||
}
|
||
|
||
.#{$ns}Combo-itemTag {
|
||
margin-right: $gap-sm;
|
||
|
||
label {
|
||
color: $info;
|
||
margin-right: $gap-sm;
|
||
}
|
||
}
|
||
|
||
.#{$ns}Combo-itemToolbar {
|
||
margin-left: $gap-xs;
|
||
display: flex;
|
||
white-space: nowrap;
|
||
align-items: flex-start;
|
||
padding-top: $Form-label-paddingTop;
|
||
|
||
> .is-disabled {
|
||
pointer-events: none;
|
||
opacity: $Button-onDisabled-opacity;
|
||
}
|
||
}
|
||
}
|
||
|
||
&--ver:not(&--noBorder) {
|
||
@include clearfix();
|
||
> .#{$ns}Combo-items {
|
||
margin: (-$Combo--vertical-item-gap * 2) (-$Combo--vertical-item-gap * 2)
|
||
0 (-$Combo--vertical-item-gap * 2);
|
||
}
|
||
|
||
.#{$ns}Combo-itemTag {
|
||
text-align: right;
|
||
|
||
label {
|
||
color: $info;
|
||
margin-right: $gap-sm;
|
||
}
|
||
}
|
||
|
||
// 不严格点会命中 combo 里面嵌套 combo 的情况,so sad.
|
||
> .#{$ns}Combo-item,
|
||
> .#{$ns}Combo-items > .#{$ns}Combo-item {
|
||
border: $Combo--vertical-item-borderWidth dashed
|
||
$Combo--vertical-item-borderColor;
|
||
padding: $Combo--vertical-item-paddingY $Combo--vertical-item-paddingX;
|
||
position: relative;
|
||
}
|
||
|
||
> .#{$ns}Combo-items > .#{$ns}Combo-item {
|
||
margin: $Combo--vertical-item-gap * 2;
|
||
}
|
||
|
||
> .#{$ns}Combo-item > .#{$ns}Combo-itemToolbar,
|
||
> .#{$ns}Combo-items > .#{$ns}Combo-item > .#{$ns}Combo-itemToolbar {
|
||
opacity: 0;
|
||
position: absolute;
|
||
right: $Combo--vertical-itemToolbar-positionRight;
|
||
top: $Combo--vertical-itemToolbar-positionTop / 2;
|
||
transition: $Combo--vertical-itemToolbar-transion;
|
||
height: $Combo--vertical-itemToolbar-height;
|
||
line-height: $Combo--vertical-itemToolbar-height;
|
||
background-color: $Combo--vertical-itemToolbar-bg;
|
||
color: $Combo--vertical-itemToolbar-color;
|
||
border-top-left-radius: $Combo--vertical-itemToolbar-borderRadius;
|
||
border-top-right-radius: $Combo--vertical-itemToolbar-borderRadius;
|
||
padding: 0 px2rem(3px);
|
||
border-style: solid;
|
||
border-color: $Combo--vertical-itemToolbar-borderColor;
|
||
border-width: $Combo--vertical-itemToolbar-borderWidth
|
||
$Combo--vertical-itemToolbar-borderWidth 0
|
||
$Combo--vertical-itemToolbar-borderWidth;
|
||
// margin-top: px2rem(-1px);
|
||
|
||
.#{$ns}Combo-toolbarBtn {
|
||
color: inherit;
|
||
line-height: $Combo--vertical-itemToolbar-height;
|
||
// font-size: px2rem(14px);
|
||
|
||
&:hover {
|
||
color: $Combo--vertical-itemToolbar-onHover-color;
|
||
}
|
||
}
|
||
|
||
// top: $Combo--vertical-itemToolbar-positionTop;
|
||
// opacity: 1;
|
||
}
|
||
|
||
> .#{$ns}Combo-item:hover,
|
||
> .#{$ns}Combo-items > .#{$ns}Combo-item:hover {
|
||
border-color: $Combo--vertical-item-onHover-borderColor;
|
||
// border-style: solid;
|
||
|
||
> .#{$ns}Combo-itemToolbar {
|
||
top: $Combo--vertical-itemToolbar-positionTop;
|
||
opacity: 1;
|
||
}
|
||
}
|
||
}
|
||
|
||
&-item--dragging {
|
||
position: relative;
|
||
|
||
&:after {
|
||
content: '';
|
||
display: block;
|
||
position: absolute;
|
||
z-index: 5;
|
||
left: 0;
|
||
top: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: rgba(0, 0, 0, 0.1);
|
||
}
|
||
}
|
||
}
|
||
|
||
.#{$ns}Combo-dragableTip {
|
||
color: $text--muted-color;
|
||
font-size: $fontSizeSm;
|
||
margin-left: $gap-xs;
|
||
|
||
&:empty {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
.#{$ns}ComboControl.is-inline {
|
||
.#{$ns}Combo--hor .#{$ns}Combo-itemInner {
|
||
flex-grow: unset;
|
||
flex-basis: unset;
|
||
}
|
||
|
||
.#{$ns}Combo--ver .#{$ns}Combo-item {
|
||
display: inline-block;
|
||
}
|
||
}
|
||
|
||
@include media-breakpoint-up(sm) {
|
||
.#{$ns}Combo-form .#{$ns}Form-item:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
}
|