@import "../../style/themes/default"; @import "../../style/mixins/index"; @card-prefix-cls: ~"@{ant-prefix}-card"; @card-padding-base: 24px; @card-padding-wider: 32px; .@{card-prefix-cls} { background: @component-background; border-radius: @border-radius-sm; font-size: @font-size-base; position: relative; transition: all .3s; &:not(&-no-hovering):hover { box-shadow: @box-shadow-base; border-color: transparent; } &-bordered { border: @border-width-base @border-style-base @border-color-split; } &-head { height: @card-head-height; line-height: @card-head-height; background: @card-head-background; border-bottom: @border-width-base @border-style-base @border-color-split; padding: 0 @card-padding-base; border-radius: @border-radius-sm @border-radius-sm 0 0; .clearfix; margin-bottom: -1px; // Fix card grid overflow bug: https://gw.alipayobjects.com/zos/rmsportal/XonYxBikwpgbqIQBeuhk.png display: flex; &-title { font-size: @font-size-lg; text-overflow: ellipsis; max-width: 100%; overflow: hidden; white-space: nowrap; color: @card-head-color; font-weight: 500; display: inline-block; flex: 1; } } &-extra { float: right; text-align: right; } &-body { padding: @card-padding-base; .clearfix; } &-loading &-body { user-select: none; padding: 0; } &-loading-content { padding: @card-padding-base; } &-loading-block { display: inline-block; margin: 5px 1% 0; height: 14px; border-radius: @border-radius-sm; background: linear-gradient(90deg, rgba(207, 216, 220, .2), rgba(207, 216, 220, .4), rgba(207, 216, 220, .2)); animation: card-loading 1.4s ease infinite; background-size: 600% 600%; } &-contain-grid &-body { margin: -1px 0 0 -1px; padding: 0; } &-grid { border-radius: 0; border: 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; width: 33.33%; float: left; padding: @card-padding-base; transition: all .3s; &:hover { position: relative; z-index: 1; box-shadow: @box-shadow-base; } } &-wider-padding &-head { padding: 0 @card-padding-wider; } &-wider-padding &-body { padding: @card-padding-base @card-padding-wider; } &-wider-padding &-extra { right: @card-padding-wider; } &-padding-transition &-head, &-padding-transition &-body { transition: padding .3s; } &-padding-transition &-extra { transition: right .3s; } } @keyframes card-loading { 0%, 100% { background-position: 0 50%; } 50% { background-position: 100% 50%; } }