157 lines
2.9 KiB
SCSS
157 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);
|
||
|
||
&-overflow {
|
||
&-wrapper {
|
||
display: flex;
|
||
flex-flow: column nowrap;
|
||
justify-content: flex-start;
|
||
align-items: flex-start;
|
||
overflow-x: hidden;
|
||
overflow-y: auto;
|
||
height: calc(
|
||
(var(--Picker-tag-height) + var(--Picker-tag-marginBottom) * 4) * 3
|
||
);
|
||
max-height: calc(
|
||
(var(--Picker-tag-height) + var(--Picker-tag-marginBottom)) * 5
|
||
);
|
||
|
||
@include tag-item(Crud);
|
||
}
|
||
}
|
||
}
|
||
|
||
&-selectionLabel {
|
||
display: inline-block;
|
||
vertical-align: top;
|
||
margin-top: var(--gap-xs);
|
||
}
|
||
|
||
/* tag 样式 */
|
||
@include tag-item(Crud);
|
||
|
||
&-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-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;
|
||
|
||
&.is-mobile {
|
||
margin-top: 0;
|
||
}
|
||
|
||
&--left:not(:first-child) {
|
||
margin-left: var(--Crud-toolbar-gap);
|
||
}
|
||
|
||
&--right:not(:last-child) {
|
||
margin-left: var(--Crud-toolbar-gap);
|
||
}
|
||
|
||
&--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 {
|
||
display: flex;
|
||
flex-flow: row wrap;
|
||
align-items: center;
|
||
|
||
.#{$ns}Select {
|
||
margin-left: var(--Crud-toolbar-gap);
|
||
}
|
||
}
|
||
|
||
&-pager {
|
||
align-self: flex-start;
|
||
}
|
||
|
||
&-filter {
|
||
margin-bottom: var(--gap-base);
|
||
}
|
||
|
||
&.is-mobile {
|
||
.#{$ns}Crud-toolbar {
|
||
flex: 1;
|
||
}
|
||
}
|
||
}
|
||
|
||
@include media-breakpoint-up(sm) {
|
||
.#{$ns}Crud {
|
||
&-toolbar {
|
||
margin-top: calc(var(--Crud-toolbar-gap) * -1);
|
||
flex-basis: 0;
|
||
flex-grow: 1;
|
||
@include clearfix();
|
||
}
|
||
|
||
&-toolbar-item {
|
||
line-height: var(--Crud-toolbar-lineHeight);
|
||
height: var(--Crud-toolbar-height);
|
||
vertical-align: middle;
|
||
|
||
&--left:not(:first-child) {
|
||
margin-left: var(--Crud-toolbar-gap);
|
||
}
|
||
|
||
&--right:not(:last-child) {
|
||
margin-left: var(--Crud-toolbar-gap);
|
||
}
|
||
|
||
&--left {
|
||
float: left;
|
||
}
|
||
|
||
&--right {
|
||
float: right;
|
||
}
|
||
}
|
||
|
||
&-actions {
|
||
> * + .#{$ns}Button,
|
||
> * + .#{$ns}Button--disabled-wrap {
|
||
margin-left: var(--Crud-toolbar-gap);
|
||
}
|
||
}
|
||
}
|
||
}
|