mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-05 21:49:09 +08:00
144 lines
2.9 KiB
SCSS
144 lines
2.9 KiB
SCSS
.#{$ns}Crud {
|
||
position: relative;
|
||
|
||
&.is-loading > &-body {
|
||
// 弹框中,blur 效果变成白班,先去掉。
|
||
// -webkit-filter: blur(5px);
|
||
// filter: blur(5px);
|
||
}
|
||
|
||
&-selection {
|
||
margin-bottom: var(--gap-base);
|
||
}
|
||
|
||
&-selectionLabel {
|
||
display: inline-block;
|
||
vertical-align: top;
|
||
margin-top: var(--gap-xs);
|
||
}
|
||
|
||
&-value {
|
||
cursor: pointer;
|
||
vertical-align: middle;
|
||
user-select: none;
|
||
line-height: calc(
|
||
var(--Form-input-lineHeight) * var(--Form-input-fontSize) - #{px2rem(2px)}
|
||
);
|
||
display: inline-block;
|
||
font-size: var(--Form-selectValue-fontSize);
|
||
color: var(--Form-selectValue-color);
|
||
background: var(--Form-selectValue-bg);
|
||
border: px2rem(1px) solid var(--Form-selectValue-borderColor);
|
||
border-radius: 2px;
|
||
margin-right: var(--gap-xs);
|
||
margin-top: var(--gap-xs);
|
||
|
||
&:hover {
|
||
background: var(--Form-selectValue-onHover-bg);
|
||
}
|
||
|
||
&.is-disabled {
|
||
pointer-events: none;
|
||
opacity: var(--Button-onDisabled-opacity);
|
||
}
|
||
}
|
||
|
||
&-valueIcon {
|
||
cursor: pointer;
|
||
border-right: px2rem(1px) solid var(--Form-selectValue-borderColor);
|
||
padding: 1px 5px;
|
||
|
||
&:hover {
|
||
background: var(--Form-selectValue-onHover-bg);
|
||
}
|
||
}
|
||
|
||
&-valueLabel {
|
||
padding: 0 var(--gap-xs);
|
||
}
|
||
|
||
&-selectionClear {
|
||
display: inline-block;
|
||
cursor: pointer;
|
||
user-select: none;
|
||
margin-left: var(--gap-xs);
|
||
margin-top: var(--gap-xs);
|
||
vertical-align: middle;
|
||
}
|
||
|
||
&-toolbar-item {
|
||
margin-left: var(--Crud-toolbar-gap);
|
||
margin-top: var(--Crud-toolbar-gap);
|
||
line-height: var(--Crud-toolbar-lineHeight);
|
||
height: var(--Crud-toolbar-height);
|
||
vertical-align: middle;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
|
||
&--left {
|
||
float: left;
|
||
}
|
||
|
||
&--right {
|
||
float: right;
|
||
}
|
||
}
|
||
|
||
&-actions {
|
||
> * + .#{$ns}Button,
|
||
> * + .#{$ns}ButtonGroup,
|
||
> * + .#{$ns}ButtonToolbar {
|
||
margin-left: var(--Crud-toolbar-gap);
|
||
}
|
||
}
|
||
|
||
&-statistics {
|
||
line-height: var(--Crud-toolbar-height);
|
||
vertical-align: middle;
|
||
}
|
||
|
||
&-pageSwitch {
|
||
.#{$ns}Select {
|
||
margin-left: var(--Crud-toolbar-gap);
|
||
}
|
||
}
|
||
|
||
&-pager {
|
||
align-self: flex-start;
|
||
}
|
||
}
|
||
|
||
@include media-breakpoint-up(sm) {
|
||
.#{$ns}Crud {
|
||
&-toolbar {
|
||
margin-left: calc(var(--Crud-toolbar-gap) * -1);
|
||
margin-top: calc(var(--Crud-toolbar-gap) * -1);
|
||
flex-basis: 0;
|
||
flex-grow: 1;
|
||
@include clearfix();
|
||
}
|
||
|
||
&-toolbar-item {
|
||
margin-left: var(--Crud-toolbar-gap);
|
||
line-height: var(--Crud-toolbar-lineHeight);
|
||
height: var(--Crud-toolbar-height);
|
||
vertical-align: middle;
|
||
|
||
&--left {
|
||
float: left;
|
||
}
|
||
|
||
&--right {
|
||
float: right;
|
||
}
|
||
}
|
||
|
||
&-actions {
|
||
> * + .#{$ns}Button,
|
||
> * + .#{$ns}Button--disabled-wrap {
|
||
margin-left: var(--Crud-toolbar-gap);
|
||
}
|
||
}
|
||
}
|
||
}
|