amis2/scss/components/form/_combo.scss
2019-12-06 09:58:08 +08:00

215 lines
5.0 KiB
SCSS
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

.#{$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;
}
}