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