mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-09 23:40:29 +08:00
189 lines
2.9 KiB
SCSS
189 lines
2.9 KiB
SCSS
.#{$ns}Cards {
|
|
&-toolbar {
|
|
@include clearfix();
|
|
padding: $Cards-toolbar-paddingY $Cards-toolbar-paddingX;
|
|
margin-bottom: $gap-base;
|
|
}
|
|
|
|
&-actions {
|
|
display: inline-block;
|
|
|
|
> * {
|
|
margin-right: $Crud-toolbar-gap;
|
|
}
|
|
}
|
|
|
|
&-heading {
|
|
padding: $gap-xs 0;
|
|
}
|
|
|
|
&-header {
|
|
padding: $Cards-toolbar-paddingY $Cards-toolbar-paddingX;
|
|
|
|
> * + .#{$ns}Button,
|
|
> * + .#{$ns}ButtonGroup,
|
|
> * + .#{$ns}ButtonToolbar {
|
|
margin-left: $Crud-toolbar-gap;
|
|
}
|
|
}
|
|
|
|
&-header + &-toolbar {
|
|
padding-top: 0;
|
|
}
|
|
|
|
&-fixedTop {
|
|
position: absolute;
|
|
background: $white;
|
|
z-index: -1;
|
|
opacity: 0;
|
|
box-shadow: $Cards-fixedTop-boxShadow;
|
|
padding: $gap-sm;
|
|
|
|
&.in {
|
|
position: fixed;
|
|
opacity: 1;
|
|
z-index: $zindex-affix;
|
|
}
|
|
|
|
.#{$ns}Cards-toolbar {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
&:empty {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
&--unsaved &-heading {
|
|
background: $Cards--unsaved-heading-bg;
|
|
color: $Cards--unsaved-heading-color;
|
|
padding: $gap-xs $gap-sm;
|
|
margin-bottom: $gap-sm;
|
|
}
|
|
|
|
&-dragTip {
|
|
width: 100%;
|
|
color: $info;
|
|
clear: both;
|
|
margin-top: $gap-xs;
|
|
}
|
|
|
|
&-placeholder {
|
|
background: $white;
|
|
color: $text--muted-color;
|
|
text-align: center;
|
|
height: $Cards-placeholder-height;
|
|
line-height: $Cards-placeholder-height;
|
|
|
|
border: $Card-borderWidth solid $Card-borderColor;
|
|
border-radius: $Card-borderRadius;
|
|
}
|
|
|
|
&-body > div {
|
|
display: flex;
|
|
}
|
|
|
|
&--masonry {
|
|
display: block;
|
|
|
|
&:after {
|
|
content: none;
|
|
}
|
|
|
|
column-gap: 0;
|
|
column-fill: initial;
|
|
|
|
> div {
|
|
width: 100%;
|
|
float: none;
|
|
break-inside: avoid;
|
|
max-width: unset;
|
|
display: inline-block;
|
|
flex: unset;
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-breakpoint-up(sm) {
|
|
.#{$ns}Cards--masonrySm1 {
|
|
column-count: 12;
|
|
}
|
|
|
|
.#{$ns}Cards--masonrySm2 {
|
|
column-count: 6;
|
|
}
|
|
|
|
.#{$ns}Cards--masonrySm3 {
|
|
column-count: 4;
|
|
}
|
|
|
|
.#{$ns}Cards--masonrySm4 {
|
|
column-count: 3;
|
|
}
|
|
|
|
.#{$ns}Cards--masonrySm6 {
|
|
column-count: 2;
|
|
}
|
|
|
|
.#{$ns}Cards--masonrySm12 {
|
|
column-count: 1;
|
|
}
|
|
|
|
.#{$ns}Cards-toolbar {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
}
|
|
|
|
@include media-breakpoint-up(md) {
|
|
.#{$ns}Cards--masonryMd1 {
|
|
column-count: 12;
|
|
}
|
|
|
|
.#{$ns}Cards--masonryMd2 {
|
|
column-count: 6;
|
|
}
|
|
|
|
.#{$ns}Cards--masonryMd3 {
|
|
column-count: 4;
|
|
}
|
|
|
|
.#{$ns}Cards--masonryMd4 {
|
|
column-count: 3;
|
|
}
|
|
|
|
.#{$ns}Cards--masonryMd6 {
|
|
column-count: 2;
|
|
}
|
|
|
|
.#{$ns}Cards--masonryMd12 {
|
|
column-count: 1;
|
|
}
|
|
}
|
|
|
|
@include media-breakpoint-up(lg) {
|
|
.#{$ns}Cards--masonryLg1 {
|
|
column-count: 12;
|
|
}
|
|
|
|
.#{$ns}Cards--masonryLg2 {
|
|
column-count: 6;
|
|
}
|
|
|
|
.#{$ns}Cards--masonryLg3 {
|
|
column-count: 4;
|
|
}
|
|
|
|
.#{$ns}Cards--masonryLg4 {
|
|
column-count: 3;
|
|
}
|
|
|
|
.#{$ns}Cards--masonryLg6 {
|
|
column-count: 2;
|
|
}
|
|
|
|
.#{$ns}Cards--masonryLg12 {
|
|
column-count: 1;
|
|
}
|
|
}
|