amis2/scss/components/_card.scss
2019-12-24 11:25:55 +08:00

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;
}
}