amis/packages/amis-ui/scss/components/_condition-builder.scss

415 lines
7.6 KiB
SCSS

.#{$ns}CBGroup {
font-size: var(--fontSizeSm);
position: relative;
// border: 1px solid #e8e9eb;
// border-radius: 4px;
// border-left: px2rem(3px) solid #e6f0ff;
// padding: px2rem(30px) px2rem(27px) px2rem(17px);
// margin-top: px2rem(30px);
display: flex;
&-toolbarCondition {
// text-align: center;
// margin-top: px2rem(-44px);
// margin-bottom: px2rem(16px);
display: flex;
align-items: center;
justify-content: center;
padding: 0 px2rem(10px) 0 0;
flex-direction: column;
&[draggable='true'] {
cursor: grab;
}
&-arrow {
position: absolute;
top: 0;
font-size: 14px;
width: px2rem(20px);
height: px2rem(20px);
border-radius: 50%;
background: #d4e5ff;
text-align: center;
color: #0832a6;
cursor: pointer;
transition: transform 0.3s ease;
&.is-collapse {
transform: rotate(180deg);
}
&:hover {
background: #2468f2;
color: $white;
}
}
.#{$ns}Select {
font-size: px2rem(12px);
height: px2rem(28px);
width: px2rem(28px);
background: #d4e5ff;
border: none;
color: #0832a6;
font-weight: 500;
padding: 0;
padding-left: px2rem(8px);
min-height: px2rem(28px);
&:hover {
color: $white;
background: #2468f2;
}
&-arrow {
display: none;
}
&-menu {
padding: 0;
> .#{$ns}Select-option {
font-size: px2rem(12px);
font-weight: 500;
line-height: 2rem !important;
text-align: center;
padding: 0 !important;
}
}
}
&::before {
content: ' ';
position: absolute;
top: px2rem(5px);
bottom: px2rem(5px);
width: 2px;
background-color: #d4e5ff;
}
}
&-body {
position: relative;
&-wrapper {
flex: 1;
}
&-collapse {
text-align: center;
color: #84868c;
display: flex;
justify-content: center;
align-items: center;
> span {
padding: 0 10px;
cursor: pointer;
}
&::before,
&::after {
content: ' ';
height: 1px;
background: #e8e9eb;
display: block;
flex: 1;
}
}
}
&-body-wrapper {
flex: 1;
}
&-toolbar {
display: flex;
flex-direction: row;
padding-top: px2rem(8px);
&[draggable='true'] {
cursor: grab;
}
.#{$ns}Button {
transition: padding var(--animation-duration);
min-width: unset;
svg {
width: 10px;
height: 10px;
top: 0;
margin-right: 5px;
}
}
.#{$ns}CBGroup-toolbarConditionAdd {
display: flex;
align-items: center;
.#{$ns}ButtonGroup {
& > .cxd-Button:not(:last-child) {
margin-right: px2rem(24px);
}
}
// .#{$ns}CBDelete {
// margin-left: var(--gap-xs);
// }
}
}
.#{$ns}ResultBox {
padding-right: px2rem(3px);
}
&-field,
&-operator {
position: relative;
display: inline-block;
margin: px2rem(3px);
vertical-align: middle;
}
&-fieldCaret,
&-operatorCaret {
transition: transform var(--animation-duration) ease-out;
margin: 5px;
display: flex;
color: var(--Form-select-caret-iconColor);
&:hover {
color: var(--Form-select-caret-onHover-iconColor);
}
> svg {
width: px2rem(10px);
height: px2rem(10px);
top: 0;
}
}
&-fieldInput.is-active &-fieldCaret,
&-operatorInput.is-active &-operatorCaret {
transform: rotate(180deg);
}
&-placeholder {
color: var(--text--muted-color);
position: relative;
padding: 10px;
background: rgba(0, 0, 0, 0.03);
border-radius: 5px;
&.simple {
margin-left: 0;
}
}
}
.#{$ns}CBDelete {
margin-left: 5px;
font-size: 16px;
color: #84868c;
// cursor: pointer;
// margin-left: auto;
}
// .#{$ns}CBGroupOrItem-body-group.is-hover {
// & > .#{$ns}CBGroupOrItem-dragbar {
// opacity: 1 !important;
// }
// & > .#{$ns}CBGroup {
// border-left-color: #2468f1;
// }
// }
.#{$ns}CBGroupOrItem {
position: relative;
transition: box-shadow 0.3s ease;
&.is-hover {
box-shadow: #e8ebee 0 2px 10px 0;
// cursor: grab;
}
& + & {
margin-top: px2rem(10px);
}
&-dragbar {
cursor: move;
width: 20px;
margin-left: -5px;
opacity: 0.6;
text-align: center;
transition: opacity var(--animation-duration) ease-out;
@include icon-color();
}
&-body {
display: flex;
flex-direction: row;
align-items: center;
position: relative;
transition: all var(--animation-duration) ease-out;
&-group {
width: 100%;
flex-direction: row;
display: flex;
align-items: center;
transition: all 0.2s ease;
padding-left: 10px;
// margin-top: px2rem(16px);
&.is-hover {
cursor: grab;
box-shadow: 0px 2px 14px 0px rgb(0 0 0 / 16%);
border-radius: 8px;
padding: 10px;
margin: -10px 0px;
background: $white;
z-index: 1;
}
> .#{$ns}CBGroupOrItem-dragbar {
left: px2rem(-5px);
position: absolute;
}
> .#{$ns}CBGroup {
margin: 0px;
}
}
&-item {
background-color: #f7f7f9;
width: 100%;
padding: px2rem(12px);
padding-left: px2rem(28px);
display: flex;
flex-direction: row;
align-items: center;
> .#{$ns}CBGroupOrItem-dragbar {
left: px2rem(10px);
position: absolute;
}
}
}
&.is-dragging {
display: none;
}
&.is-ghost > &-body:before {
position: absolute;
z-index: 2;
content: '';
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba($info, 0.2);
}
.#{$ns}CBGroup {
flex-grow: 1;
}
& > &-body > &-body-group > &-dragbar,
& > &-body > &-body-item > &-dragbar,
& > &-body > &-body-item > .#{$ns}CBDelete {
opacity: 0;
}
&:hover > &-body > &-body-item > &-dragbar,
&:hover > &-body > &-body-item > .#{$ns}CBDelete {
opacity: 1;
}
&-simple {
margin-bottom: var(--gap-sm);
}
}
.#{$ns}CBInputSwitch {
position: relative;
display: inline-block;
vertical-align: middle;
// margin: px2rem(3px);
cursor: pointer;
> a {
@include icon-color();
}
svg {
width: px2rem(10px);
height: px2rem(10px);
}
}
.#{$ns}CBFunc {
display: inline-block;
vertical-align: middle;
margin: px2rem(3px);
&-select {
display: inline-block;
position: relative;
}
&-error {
color: var(--danger);
}
&-args {
display: inline-block;
> span {
display: inline-block;
padding: 0 5px;
color: var(--info);
}
> div {
display: inline-block;
}
}
}
.#{$ns}CBValue {
position: relative;
display: inline-block;
vertical-align: middle;
margin: px2rem(3px);
}
.#{$ns}CBFormula {
position: relative;
display: inline-block;
vertical-align: middle;
margin: px2rem(3px);
&-label {
background: var(--ResultBox-value-bg);
color: var(--text--muted-color);
display: block;
font-size: var(--fontSizeSm);
align-self: center;
margin: -5px 5px -5px -8px;
padding: 5px;
border-radius: 5px;
user-select: none;
}
}
.#{$ns}CBSeprator {
width: 20px;
text-align: center;
display: inline-block;
user-select: none;
}
.#{$ns}CBPicker-trigger {
cursor: pointer;
transition: transform var(--animation-duration) ease-out;
display: flex;
color: var(--Form-select-caret-iconColor);
&:hover {
color: var(--primary);
}
}