mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-05 13:38:56 +08:00
204 lines
3.9 KiB
SCSS
204 lines
3.9 KiB
SCSS
.#{$ns}Card {
|
|
background-color: $Card-bg;
|
|
border: $Card-borderWidth solid $Card-borderColor;
|
|
border-radius: $Card-borderRadius;
|
|
margin-bottom: $gap-base;
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
|
|
&-title {
|
|
color: $text--loud-color;
|
|
font-size: $fontSizeMd;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
&-subTitle {
|
|
// white-space: nowrap;
|
|
max-height: $fontSizeBase * $lineHeightBase * 2;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
color: $text--muted-color;
|
|
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
display: -webkit-box;
|
|
}
|
|
|
|
&-title + &-subTitle {
|
|
margin-top: $gap-xs;
|
|
}
|
|
|
|
&-checkBtn {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
margin: $gap-sm;
|
|
z-index: 1;
|
|
|
|
.#{$ns}Checkbox {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
&-dragBtn {
|
|
cursor: pointer;
|
|
float: right;
|
|
margin: $gap-sm;
|
|
}
|
|
|
|
&-heading {
|
|
overflow: hidden;
|
|
padding: $gap-sm $gap-base;
|
|
flex: 1 0 auto;
|
|
}
|
|
|
|
&-avtar {
|
|
float: left;
|
|
margin-right: $gap-base;
|
|
max-width: px2rem(200px);
|
|
|
|
img {
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
|
|
&-meta {
|
|
display: block;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
position: relative;
|
|
margin-right: $gap-md;
|
|
}
|
|
|
|
&-highlight {
|
|
background-color: $success;
|
|
width: px2rem(8px);
|
|
height: px2rem(8px);
|
|
border-radius: 100%;
|
|
display: inline-block;
|
|
position: absolute;
|
|
top: px2rem(5px);
|
|
right: px2rem(2px);
|
|
}
|
|
|
|
&-body {
|
|
padding: $gap-base;
|
|
flex: 1 0 auto;
|
|
}
|
|
|
|
&-heading + &-body {
|
|
padding-top: $gap-xs;
|
|
}
|
|
|
|
&-field {
|
|
position: relative;
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
}
|
|
|
|
&-fieldValue {
|
|
position: relative;
|
|
flex-basis: 0;
|
|
flex-grow: 1;
|
|
width: 0;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
|
|
&-fieldLabel {
|
|
width: px2rem(60px);
|
|
color: $text--muted-color;
|
|
}
|
|
|
|
&-actions {
|
|
border-top: $Card-borderWidth solid $Card-actions-borderColor;
|
|
display: table;
|
|
width: 100%;
|
|
|
|
> a {
|
|
background-color: transparent;
|
|
display: table-cell;
|
|
border-color: $Card-actions-borderColor;
|
|
border-style: solid;
|
|
border-width: 0 $Card-borderWidth 0 0;
|
|
color: $text-color;
|
|
text-align: center;
|
|
line-height: px2rem(40px);
|
|
// font-size: $fontSizeBase;
|
|
|
|
&:not(.is-disabled) {
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
background-color: $Card-actions-onHover-bg;
|
|
color: $Card-actions-onHover-color;
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
&:last-child {
|
|
border: none;
|
|
}
|
|
|
|
&.is-disabled {
|
|
color: $text--muted-color;
|
|
|
|
&:hover {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.is-checked {
|
|
background-color: $Card-onChecked-bg;
|
|
border-color: $Card-onChecked-borderColor;
|
|
color: $Card-onChecked-color;
|
|
|
|
.#{$ns}Card-actions,
|
|
.#{$ns}Card-actions > a {
|
|
border-color: $Card-onChecked-borderColor;
|
|
color: $Card-onChecked-color;
|
|
}
|
|
|
|
.#{$ns}Card-fieldLabel {
|
|
color: lighten($Card-onChecked-color, 20%);
|
|
}
|
|
|
|
.#{$ns}Card-actions > a:hover {
|
|
background-color: $Card-actions-onChecked-onHover-bg;
|
|
color: darken($Card-onChecked-color, 10%);
|
|
}
|
|
}
|
|
|
|
&.is-modified,
|
|
&.is-moved {
|
|
background-color: $Card-onModified-bg;
|
|
border-color: $Card-onModified-borderColor;
|
|
color: $Card-onModified-color;
|
|
|
|
.#{$ns}Card-actions,
|
|
.#{$ns}Card-actions > a {
|
|
border-color: $Card-onModified-borderColor;
|
|
color: $Card-onModified-color;
|
|
}
|
|
|
|
.#{$ns}Card-fieldLabel {
|
|
color: lighten($Card-onModified-color, 20%);
|
|
}
|
|
|
|
.#{$ns}Card-actions > a:hover {
|
|
background-color: darken($Card-onModified-bg, 5%);
|
|
color: darken($Card-onModified-color, 10%);
|
|
}
|
|
}
|
|
|
|
.is-dragging > & {
|
|
opacity: $Card-onDragging-opacity;
|
|
}
|
|
}
|