acud
Version:
acg react 组件库
535 lines (463 loc) • 14.5 kB
text/less
@import '../../style/themes/index';
@import '../../style/mixins/index';
@import './mixins';
.@{card-prefix-cls} {
text-align: left;
.basic-config(@card-default-tp, @card-default-p);
font-weight: @card-font-weight;
font-size: @card-font-size;
position: relative;
min-height: 80px;
border-radius: @card-radius;
&-selected {
border-width: @card-border-width;
border-style: solid;
border-color: @blue-base;
box-shadow: @card-shadow;
transition: box-shadow 0.3s, border-color 0.3s;
&:hover {
border-color: @blue-base;
}
}
&-hoverable {
cursor: pointer;
transition: box-shadow 0.3s, border-color 0.3s;
&:hover {
border-color: @card-hoverable-hover-border;
box-shadow: @card-shadow;
}
}
&-bordered {
border-width: @card-border-width;
border-style: solid;
}
&-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;
}
&-head {
padding: 0 (4 * @P);
font-weight: @card-font-weight;
font-size: @T2;
background: @card-head-background;
border-radius: @card-radius @card-radius 0 0;
&-wrapper {
display: flex;
align-items: center;
}
&-title {
display: inline-block;
flex: 1;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-weight: @card-title-font-weight;
color: @card-head-title-color;
// margin-bottom: 4 * @P;
padding-top: 4 * @P;
&-with-tabs {
font-size: @card-tabs-title-font-size;
}
> .@{acud-prefix}-typography,
> .@{acud-prefix}-typography-edit-content {
left: 0;
margin-top: 0;
margin-bottom: 0;
}
}
.@{acud-prefix}-tabs {
clear: both;
margin-bottom: @card-head-tabs-margin-bottom;
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;
margin-left: auto;
padding-top: 4 * @P;
font-size: @font-size-base;
.basic-config(@card-head-extra-default-tp, @card-head-extra-default-p);
a {
&:not(:last-of-type) {
margin-right: @card-extra-margin;
}
.basic-config(@card-head-extra-default-tp, @card-head-extra-default-p);
}
.@{card-prefix-cls}-rtl & {
margin-right: auto;
margin-left: 0;
}
&-with-tabs {
.basic-config(@card-head-extra-withtab-default-tp, @card-head-extra-default-p);
a {
.basic-config(@card-head-extra-withtab-default-tp, @card-head-extra-default-p);
}
}
}
}
&-footer {
height: @card-head-height;
line-height: @card-head-height;
font-weight: @card-font-weight;
font-size: @T2;
background: @card-head-background;
width: 100%;
padding: 0 @card-extra-margin;
margin-bottom: @card-extra-margin;
&-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
}
&-description {
color: @card-footer-description-color;
flex-shrink: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: left;
}
&-extra {
font-weight: @card-font-weight;
font-size: @font-size-base;
.basic-config(@card-footer-extra-default-tp, @card-footer-extra-default-p);
white-space: nowrap;
a {
&:not(:last-child) {
margin-right: @card-extra-margin;
}
.basic-config(@card-footer-extra-default-tp, @card-footer-extra-default-p);
}
.@{card-prefix-cls}-rtl & {
margin-right: auto;
margin-left: 0;
}
}
}
&-con {
box-sizing: border-box;
height: 100%;
box-sizing: border-box;
&.hasImage {
display: flex;
flex-flow: row nowrap;
min-height: 48px;
align-items: stretch;
padding: @card-image-padding;
&.left {
flex-direction: row;
}
&.right {
flex-direction: row-reverse;
}
.@{card-prefix-cls}-con-wrap {
position: relative;
.@{card-prefix-cls} {
&-head, &-body, &-footer {
padding: 0;
}
&-head {
margin-bottom: @P;
padding-top: 0;
&-title {
padding-top: 0;
font-size: @card-tabs-title-font-size;
}
}
&-footer {
margin-bottom: 0px;
}
}
.@{card-prefix-cls}-footer {
position: absolute;
bottom: 0px;
}
}
}
&-title {
font-size: @font-weight-500;
margin-bottom: 2 * @P;
}
&-image {
height: 100%;
line-height: 0;
.img {
display: inline-block;
border-radius: @card-img-radius;
}
&.left {
margin: auto @card-image-margin auto 0;
}
&.right {
margin: auto 0 auto @card-image-margin;
}
}
&-wrap {
flex-grow: 1;
}
}
&-body {
overflow: hidden;
padding: 0px @card-image-padding @card-image-padding;
margin-top: 2 * @P;
color: @card-content-color;
}
&-simple {
&-con {
padding: 40px 16px;
text-align: center;
.@{iconfont-css-prefix} {
line-height: 0;
color: @G5;
opacity: 0.5;
}
&-description {
margin-top: 4px;
}
.@{card-prefix-cls}-body {
margin-bottom: 0;
}
}
}
&-meta {
margin-bottom: @card-meta-margin;
.clearfix();
&-content {
padding: @card-meta-padding-top 0 @card-meta-padding;
&-detail {
margin-top: @card-meta-content-margin;
}
}
&-detail {
overflow: hidden;
> div:not(:last-child) {
margin-bottom: @margin-xs;
}
}
&-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;
margin-top: 2px;
}
&-footer {
display: flex;
justify-content: space-between;
height: 48px;
line-height: 48px;
border-top: @border-width-base @border-style-base @border-color-split;
margin-bottom: -16px;
&-actions {
display: flex;
align-items: center;
& > li {
margin: @card-actions-li-margin;
color: @text-color-secondary;
text-align: center;
list-style: none ;
.basic-config(@card-footer-extra-default-tp, @card-footer-extra-default-p);
&:not(:last-of-type) {
margin-right: @card-actions-margin;
}
.@{card-prefix-cls}-rtl & {
float: right;
}
> span {
position: relative;
display: block;
font-size: @font-size-base;
line-height: @line-height-base;
cursor: pointer;
&:not(:last-of-type) {
margin-right: @card-actions-li-margin;
}
&:hover {
color: @primary-color;
transition: color 0.3s;
}
a:not(.@{acud-prefix}-btn),
> .@{iconfont-css-prefix} {
display: inline-block;
width: 100%;
line-height: 22px;
transition: color 0.3s;
.basic-config(@card-footer-extra-default-tp, @card-footer-extra-default-p);
}
> .@{iconfont-css-prefix} {
font-size: @card-action-icon-size;
line-height: 22px;
}
}
&:not(:last-child) {
.@{card-prefix-cls}-rtl & {
border-right: none;
border-left: @border-width-base @border-style-base @border-color-split;
}
}
}
}
}
}
&-grid {
float: left;
width: 33.33%;
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;
.@{card-prefix-cls}-rtl & {
float: right;
}
&-hoverable {
&:hover {
position: relative;
z-index: 1;
box-shadow: @card-shadow;
}
}
}
&-contain-tabs {
.@{card-prefix-cls}-head {
padding-top: 0;
}
.@{card-prefix-cls}-body {
margin: (4 * @P) 0 (6 * @P);
padding-bottom: 0;
}
}
&-bordered &-cover {
margin-top: -1px;
margin-right: -1px;
margin-left: -1px;
padding: 1px 1px 0 1px;
}
&-cover {
> * {
display: block;
width: 100%;
}
.img {
border-radius: @card-radius @card-radius 0 0;
line-height: 0;
}
}
&-actions-wrap {
margin: 0 @card-actions-margin;
background: @card-actions-background;
border-top: @border-width-base @border-style-base @border-color-split;
.clearfix();
.@{iconfont-css-prefix} {
line-height: 0;
}
.@{card-prefix-cls}-actions {
float: left;
.@{iconfont-css-prefix} {
margin-right: @P;
font-size: @font-size-base + 2;
line-height: 15px;
}
}
.@{card-prefix-cls}-actionsExtra {
float: right;
}
}
&-actions, &-actionsExtra {
margin: 0;
padding: 0;
list-style: none;
display: inline-block;
.clearfix();
& > li {
float: left;
margin: @card-actions-li-margin;
color: @text-color-secondary;
text-align: center;
list-style: none ;
&:not(:last-of-type) {
margin-right: @card-actions-margin;
}
.@{card-prefix-cls}-rtl & {
float: right;
}
> span {
position: relative;
display: block;
font-size: @font-size-base;
line-height: @line-height-base;
cursor: pointer;
&:not(:last-of-type) {
margin-right: @card-actions-li-margin;
}
&:hover {
color: @primary-color;
transition: color 0.3s;
}
a:not(.@{acud-prefix}-btn),
> .@{iconfont-css-prefix} {
display: inline-block;
width: 100%;
color: @text-color-secondary;
line-height: 22px;
transition: color 0.3s;
&:hover {
color: @primary-color;
}
}
> .@{iconfont-css-prefix} {
font-size: @card-action-icon-size;
line-height: 22px;
}
}
&:not(:last-child) {
.@{card-prefix-cls}-rtl & {
border-right: none;
border-left: @border-width-base @border-style-base @border-color-split;
}
}
}
}
&-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%;
}
}