Skip to content

Commit

Permalink
feat(card): [card] Adapting to the SMB themes (#2231)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Youyou-smiles
Youyou-smiles authored Oct 12, 2024
1 parent 1a8e197 commit a1af18f
Show file tree
Hide file tree
Showing 2 changed files with 71 additions and 74 deletions.
78 changes: 40 additions & 38 deletions packages/theme/src/card/index.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,73 +19,73 @@
.@{card-prefix-cls} {
.component-css-vars-amount();

background-color: var(--ti-card-bg-color);
background-color: var(--tv-Card-bg-color);
border: 1px solid;
line-height: 1.5;
overflow: hidden;
min-width: var(--ti-card-min-width);
min-width: auto;

&:hover {
box-shadow: var(--ti-card-box-shadow);
box-shadow: none;
}

// size尺寸管理
&.@{card-prefix-cls}--large {
border-radius: var(--ti-card-large-border-radius);
border-radius: var(--tv-Card-large-border-radius);
}

&.@{card-prefix-cls}--medium {
border-radius: var(--ti-card-medium-border-radius);
border-radius: var(--tv-Card-medium-border-radius);
}

&.@{card-prefix-cls}--small {
border-radius: var(--ti-card-small-border-radius);
border-radius: var(--tv-Card-small-border-radius);
}

&.@{card-prefix-cls}--mini {
border-radius: var(--ti-card-mini-border-radius);
border-radius: var(--tv-Card-mini-border-radius);
}

&.@{card-prefix-cls}--large-width {
width: var(--ti-card-large-width);
width: var(--tv-Card-large-width);
}

&.@{card-prefix-cls}--medium-width {
width: var(--ti-card-medium-width);
width: var(--tv-Card-medium-width);
}

&.@{card-prefix-cls}--small-width {
width: var(--ti-card-small-width);
width: var(--tv-Card-small-width);
}

&.@{card-prefix-cls}--mini-width {
width: var(--ti-card-mini-width);
width: var(--tv-Card-mini-width);
}

// status状态管理
&.@{card-prefix-cls}--success {
border-color: var(--ti-card-success-border-color);
border-color: var(--tv-Card-success-border-color);
}

&.@{card-prefix-cls}--warning {
border-color: var(--ti-card-warning-border-color);
border-color: var(--tv-Card-warning-border-color);
}

&.@{card-prefix-cls}--alerting {
border-color: var(--ti-card-alerting-border-color);
border-color: var(--tv-Card-alerting-border-color);
}

&.@{card-prefix-cls}--danger {
border-color: var(--ti-card-danger-border-color);
border-color: var(--tv-Card-danger-border-color);
}

&.@{card-prefix-cls}--default {
border-color: var(--ti-card-default-border-color);
border-color: var(--tv-Card-default-border-color);
}

// 选中 禁用
&.@{card-prefix-cls}--item-checked {
border-color: var(--ti-card-checked-border-color);
border-color: var(--tv-Card-checked-border-color);
}
&.@{card-prefix-cls}--item-checkbox-checked {
position: relative;
Expand All @@ -101,17 +101,17 @@
border-bottom: 40px solid transparent;
border-right: 40px solid #1476ff;
border-top-right-radius: 6px;
display: var(--ti-checkbox-button-checked-display);
display: flex;
}

&.@{card-prefix-cls}--item-checkbox-checked::before {
display: var(--ti-checkbox-button-checked-display);
display: flex;
right: 5px;
top: 1px;
box-sizing: content-box;
content: '';
border: 0.5px solid #fff;
border-width: 0 1px 1px 0;
border-width: 0 3px 3px 0;
border-left: 0;
border-top: 0;
height: 16px;
Expand All @@ -128,7 +128,7 @@
}

&.@{card-prefix-cls}--disabled {
background-color: var(--ti-card-disabled-bg-color);
background-color: var(--tv-Card-disabled-bg-color);
}

// body 样式
Expand All @@ -150,6 +150,8 @@
width: 100%;
aspect-ratio: 16/9;
background-size: cover;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
}

Expand All @@ -164,19 +166,19 @@
flex: 1 1 0%;

&.@{card-prefix-cls}--large-padding {
padding: var(--ti-card-large-body-padding);
padding: var(--tv-Card-large-body-padding);
}

&.@{card-prefix-cls}--medium-padding {
padding: var(--ti-card-medium-body-padding);
padding: var(--tv-Card-medium-body-padding);
}

&.@{card-prefix-cls}--small-padding {
padding: var(--ti-card-small-body-padding);
padding: var(--tv-Card-small-body-padding);
}

&.@{card-prefix-cls}--mini-padding {
padding: var(--ti-card-mini-body-padding);
padding: var(--tv-Card-mini-body-padding);
}

& .@{card-prefix-cls}--logo__head {
Expand Down Expand Up @@ -207,17 +209,17 @@
}

& .@{card-prefix-cls}--logo__title--p {
font-size: var(--ti-card-title-font-size);
font-weight: var(--ti-card-title-font-weight);
font-size: var(--tv-Card-title-font-size);
font-weight: var(--tv-Card-title-font-weight);
margin-right: 8px;
margin-bottom: var(--ti-card-title-mg-bottom);
margin-bottom: var(--tv-Card-title-mg-bottom);
line-height: 22px;
color: var(--ti-card-title-text-color);
color: var(--tv-Card-title-text-color);
}

& .@{card-prefix-cls}--logo__main {
font-size: var(--ti-card-main-font-size);
color: var(--ti-card-main-text-color);
font-size: var(--tv-Card-main-font-size);
color: var(--tv-Card-main-text-color);
}

& .@{card-prefix-cls}--logo__main-type-logo {
Expand All @@ -244,12 +246,12 @@
display: flex;
justify-content: space-around;
align-items: center;
border-top: 1px solid var(--ti-card-option-top-border-color);
color: var(--ti-card-option-text-color);
font-size: var(--ti-card-option-font-size);
border-top: 1px solid var(--tv-Card-option-top-border-color);
color: var(--tv-Card-option-text-color);
font-size: var(--tv-Card-option-font-size);

.@{card-prefix-cls}__footer-options-disabled {
color: var(--ti-card-option-disabled-text-color);
color: var(--tv-Card-option-disabled-text-color);
cursor: not-allowed;
}

Expand All @@ -263,7 +265,7 @@
}

.@{card-prefix-cls}__footer-options-icon-disabled {
fill: var(--ti-card-option-disabled-text-color);
fill: var(--tv-Card-option-disabled-text-color);
}

.@{card-prefix-cls}__footer-options-span {
Expand All @@ -274,7 +276,7 @@
.@{card-prefix-cls}__footer-options-dropdown {
.@{card-prefix-cls}__footer-more {
margin-left: 4px;
color: var(--ti-card-title-text-color);
color: var(--tv-Card-footer-more-text-color);
}

.@{card-prefix-cls}__footer-dropdown-item {
Expand All @@ -283,7 +285,7 @@
}

.@{card-prefix-cls}__footer-dropdown-item-disabled {
color: var(--ti-card-option-disabled-text-color);
color: var(--tv-Card-option-disabled-text-color);
cursor: not-allowed;
}
}
Expand Down
67 changes: 31 additions & 36 deletions packages/theme/src/card/vars.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,76 +12,71 @@

.component-css-vars-amount() {
// 卡片背景色
--ti-card-bg-color: var(--ti-common-color-bg-navigation, #ffffff);
// 卡片阴影
--ti-card-box-shadow: none;
--tv-Card-bg-color: var(--tv-color-bg-secondary);

// 卡片最小宽度
--ti-card-min-width: var(--ti-common-size-auto, auto);
// 大尺寸卡片的宽度
--ti-card-large-width: calc(var(--ti-common-size-base, 4px) * 144);
--tv-Card-large-width: calc(var(--tv-size-base, 4px) * 144);
// 中尺寸卡片的宽度
--ti-card-medium-width: calc(var(--ti-common-size-base, 4px) * 96);
--tv-Card-medium-width: calc(var(--tv-size-base, 4px) * 96);
// 小尺寸卡片的宽度
--ti-card-small-width: calc(var(--ti-common-size-base, 4px) * 72);
--tv-Card-small-width: calc(var(--tv-size-base, 4px) * 72);
// 迷你尺寸卡片的宽度
--ti-card-mini-width: calc(var(--ti-common-size-base, 4px) * 54);
--tv-Card-mini-width: calc(var(--tv-size-base, 4px) * 54);

// 大尺寸卡片的圆角
--ti-card-large-border-radius: var(--ti-common-border-radius-4, 8px);
--tv-Card-large-border-radius: var(--tv-border-radius-lg);
// 中尺寸卡片的圆角
--ti-card-medium-border-radius: var(--ti-common-border-radius-2, 4px);
--tv-Card-medium-border-radius: var(--tv-border-radius-sm);
// 小尺寸卡片的圆角
--ti-card-small-border-radius: var(--ti-common-border-radius-2, 4px);
--tv-Card-small-border-radius: var(--tv-border-radius-sm);
// 迷你尺寸卡片的圆角
--ti-card-mini-border-radius: var(--ti-common-border-radius-1, 2px);
--tv-Card-mini-border-radius: var(--tv-border-radius-xs);

// 成功状态的卡片的边框颜色
--ti-card-success-border-color: var(--ti-base-color-success-4, #3ac295);
--tv-Card-success-border-color: var(--tv-color-act-success-border);
// 警告状态的卡片的边框颜色
--ti-card-warning-border-color: var(--ti-base-color-warn-5, #e37d29);
--tv-Card-warning-border-color: var(--tv-color-act-warning-border);
// 报警状态的卡片的边框颜色
--ti-card-alerting-border-color: var(--ti-base-color-warn-3, #fac20a);
--tv-Card-alerting-border-color: #fac20a;
// 危险状态的卡片的边框颜色
--ti-card-danger-border-color: var(--ti-base-color-error-4, #de504e);
--tv-Card-danger-border-color: var(--tv-color-act-danger-border);
// 默认状态的卡片的边框颜色
--ti-card-default-border-color: var(--ti-common-color-light, #ffffff);

--tv-Card-default-border-color:#ffffff;
// 选中状态的卡片的边框颜色
--ti-card-checked-border-color: var(--ti-common-color-text-highlight, #1476ff);
--tv-Card-checked-border-color: var(--tv-color-border-active-control);
// 禁用状态的卡片的背景颜色
--ti-card-disabled-bg-color: var(--ti-common-color-bg-disabled, #f0f0f0);
--tv-Card-disabled-bg-color: var(--tv-color-bg-disabled);

// 大尺寸卡片的logo状态下，body区域的padding值
--ti-card-large-body-padding: var(--ti-common-space-6x, 24px);
--tv-Card-large-body-padding: 32px;
// 中尺寸卡片的logo状态下，body区域的padding值
--ti-card-medium-body-padding: var(--ti-common-space-6x, 24px);
--tv-Card-medium-body-padding: 24px;
// 小尺寸卡片的logo状态下，body区域的padding值
--ti-card-small-body-padding: var(--ti-common-space-4x, 16px);
--tv-Card-small-body-padding: var(--tv-space-xl, 16px);
// 迷你尺寸卡片的logo状态下，body区域的padding值
--ti-card-mini-body-padding: var(--ti-common-space-3x, 12px);
--tv-Card-mini-body-padding: var(--tv-space-lg, 12px);

// 卡片的标题的字体大小
--ti-card-title-font-size: var(--ti-common-font-size-2, 16px);
--tv-Card-title-font-size: var(--tv-font-size-lg);
// 卡片的标题的字体颜色
--ti-card-title-text-color: var(--ti-common-color-selected-text-color, #191919);
--tv-Card-title-text-color: var(--tv-color-act-primary-text);
// 卡片的标题的字重
--ti-card-title-font-weight: bold;
--tv-Card-title-font-weight: var(--tv-font-weight-bold);
// 卡片的正文的字体大小
--ti-card-main-font-size: var(--ti-common-font-size-1, 14px);
--tv-Card-main-font-size: var(--tv-font-size-md);
// 卡片的正文的字体颜色
--ti-card-main-text-color: var(--ti-common-color-text-weaken, #808080);
--tv-Card-main-text-color: var(--tv-color-text-weaken);

// 卡片的选项的文本色
--ti-card-option-text-color: var(--ti-common-color-selected-text-color, #191919);
--tv-Card-option-text-color: var(--tv-color-bg-primary);
// 卡片的选项的文本大小
--ti-card-option-font-size: var(--ti-common-font-size-2, 16px);
--tv-Card-option-font-size: var(--tv-font-size-lg);
// 卡片的选项的文本大小
--ti-card-option-top-border-color: var(--ti-common-color-primary-disabled, #f0f0f0);
--tv-Card-option-top-border-color: var(--tv-color-bg-header);
// 卡片的选项禁用时的文本色
--ti-card-option-disabled-text-color: var(--ti-common-color-text-disabled, #c2c2c2);
--tv-Card-option-disabled-text-color: var(--tv-color-text-disabled);
// 卡片的'更多'的字体颜色
--ti-card-footer-more-text-color: var(--ti-base-color-common-9, #181818);
--tv-Card-footer-more-text-color: var(--tv-color-act-primary-text);
// 卡片标题下边距
--ti-card-title-mg-bottom: var(--ti-common-space-4x, 16px);
--tv-Card-title-mg-bottom: var(--tv-space-xl);
}

0 comments on commit a1af18f

Please sign in to comment.