@import '../../style/themes/index'; @import '../../style/mixins/index'; @card-prefix-cls: ~'@{ant-prefix}-card'; @card-head-height: 48px; @card-hover-border: fade(@black, 9%); @card-action-icon-size: 16px; @gradient-min: fade(@card-background, 20%); @gradient-max: fade(@card-background, 40%); .@{card-prefix-cls} { .reset-component; position: relative; background: @component-background; border-radius: @card-radius; transition: all 0.3s; &-hoverable { cursor: pointer; &:hover { border-color: @card-hover-border; box-shadow: @card-shadow; } } &-bordered { border: @border-width-base @border-style-base @border-color-split; } &-head { min-height: @card-head-height; margin-bottom: -1px; // Fix card grid overflow bug: https://gw.alipayobjects.com/zos/rmsportal/XonYxBikwpgbqIQBeuhk.png padding: 0 @card-padding-base; color: @card-head-color; font-weight: 500; font-size: @font-size-lg; background: @card-head-background; border-bottom: @border-width-base @border-style-base @border-color-split; border-radius: @card-radius @card-radius 0 0; .clearfix; &-wrapper { display: flex; align-items: center; } &-title { display: inline-block; flex: 1; padding: @card-head-padding 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .@{ant-prefix}-tabs { clear: both; margin-bottom: -17px; color: @text-color; font-weight: normal; font-size: @font-size-base; &-bar { border-bottom: @border-width-base @border-style-base @border-color-split; } } } &-extra { float: right; // https://stackoverflow.com/a/22429853/3040605 margin-left: auto; padding: @card-head-padding 0; color: @text-color; font-weight: normal; font-size: @font-size-base; } &-body { padding: @card-padding-base; .clearfix; } &-contain-grid:not(&-loading) &-body { margin: -1px 0 0 -1px; padding: 0; } &-grid { float: left; width: 33.33%; padding: @card-padding-base; border: 0; border-radius: 0; box-shadow: 1px 0 0 0 @border-color-split, 0 1px 0 0 @border-color-split, 1px 1px 0 0 @border-color-split, 1px 0 0 0 @border-color-split inset, 0 1px 0 0 @border-color-split inset; transition: all 0.3s; &-hoverable { &:hover { position: relative; z-index: 1; box-shadow: @box-shadow-base; } } } &-contain-tabs > &-head &-head-title { min-height: @card-head-height - @card-head-padding; padding-bottom: 0; } &-contain-tabs > &-head &-extra { padding-bottom: 0; } &-cover { > * { display: block; width: 100%; } img { border-radius: @card-radius @card-radius 0 0; } } &-actions { margin: 0; padding: 0; list-style: none; background: @card-actions-background; border-top: @border-width-base @border-style-base @border-color-split; .clearfix; & > li { float: left; margin: 12px 0; color: @text-color-secondary; text-align: center; > span { position: relative; display: block; min-width: 32px; font-size: 14px; line-height: 22px; cursor: pointer; &:hover { color: @primary-color; transition: color 0.3s; } a, > .anticon { display: inline-block; width: 100%; color: @text-color-secondary; line-height: 22px; transition: color 0.3s; &:hover { color: @primary-color; } } > .anticon { font-size: @card-action-icon-size; line-height: 22px; } } &:not(:last-child) { border-right: @border-width-base @border-style-base @border-color-split; } } } &-type-inner &-head { padding: 0 @card-padding-base; background: @background-color-light; &-title { padding: @card-inner-head-padding 0; font-size: @font-size-base; } } &-type-inner &-body { padding: 16px @card-padding-base; } &-type-inner &-extra { padding: @card-inner-head-padding + 1.5px 0; } &-meta { margin: -4px 0; .clearfix; &-avatar { float: left; padding-right: 16px; } &-detail { overflow: hidden; > div:not(:last-child) { margin-bottom: 8px; } } &-title { overflow: hidden; color: @card-head-color; font-weight: 500; font-size: @font-size-lg; white-space: nowrap; text-overflow: ellipsis; } &-description { color: @text-color-secondary; } } &-loading { overflow: hidden; } &-loading &-body { user-select: none; } &-loading-content { p { margin: 0; } } &-loading-block { height: 14px; margin: 4px 0; background: linear-gradient(90deg, @gradient-min, @gradient-max, @gradient-min); background-size: 600% 600%; border-radius: @card-radius; animation: card-loading 1.4s ease infinite; } } @keyframes card-loading { 0%, 100% { background-position: 0 50%; } 50% { background-position: 100% 50%; } } @import './size';