Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(card): Adapting to the SMB themes #2231

Merged
merged 1 commit into from
Oct 12, 2024
Merged

feat(card): Adapting to the SMB themes #2231

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
78 changes: 40 additions & 38 deletions packages/theme/src/card/index.less
View file
Open in desktop
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
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,76 +12,71 @@

.component-css-vars-amount() {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

component-css-vars-amount 改成 inject-Card-vars

// 卡片背景色
--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);
}
Loading