github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix: update alert style (#3714)

pull/3717/head
ajuner 2021-02-25 13:36:31 +08:00 committed by GitHub
parent f1cf66fcc4
commit 006e23ab69
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 24 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components/alert/index.tsx
View File

@ -165,8 +165,10 @@ const Alert = defineComponent({
ref={alertNode} ref={alertNode}
> >
{showIcon ? iconNode : null} {showIcon ? iconNode : null}
<span class={`${prefixCls}-message`}>{message}</span> <div class={`${prefixCls}-content`}>
<span class={`${prefixCls}-description`}>{description}</span> <div class={`${prefixCls}-message`}>{message}</div>
<div class={`${prefixCls}-description`}>{description}</div>
</div>
{closeIcon} {closeIcon}
</div> </div>
</Transition> </Transition>

53
components/alert/style/index.less
View File

@ -8,32 +8,34 @@
@alert-close-color: @text-color-secondary; @alert-close-color: @text-color-secondary;
@alert-close-hover-color: @icon-color-hover; @alert-close-hover-color: @icon-color-hover;
@alert-with-description-icon-size: 24px;
@alert-with-description-no-icon-padding-vertical: @padding-md - 1px;
@alert-with-description-padding-vertical: @padding-md - 1px;
@alert-with-description-padding: @alert-with-description-padding-vertical 15px;
.@{alert-prefix-cls} { .@{alert-prefix-cls} {
.reset-component(); .reset-component();
position: relative; position: relative;
padding: 8px 15px 8px 37px; display: flex;
align-items: center;
padding: 8px 15px;
word-wrap: break-word; word-wrap: break-word;
border-radius: @border-radius-base; border-radius: @border-radius-base;
&&-no-icon { &-content {
padding: 8px 15px; flex: 1;
} min-width: 0;
&&-closable {
padding-right: 30px;
} }
&-icon { &-icon {
position: absolute; margin-right: @margin-xs;
top: 8px + (@font-size-base * @line-height-base / 2) - (@font-size-base / 2);
left: 16px;
} }
&-description { &-description {
display: none; display: none;
font-size: @font-size-base; font-size: @font-size-base;
line-height: 22px; line-height: @font-size-base + 8px;
} }
&-success { &-success {
@ -69,13 +71,11 @@
} }
&-close-icon { &-close-icon {
position: absolute; margin-left: @margin-xs;
top: 8px;
right: 16px;
padding: 0; padding: 0;
overflow: hidden; overflow: hidden;
font-size: @font-size-sm; font-size: @font-size-sm;
line-height: 22px; line-height: @font-size-sm;
background-color: transparent; background-color: transparent;
border: none; border: none;
outline: none; outline: none;
@ -99,30 +99,17 @@
} }
&-with-description { &-with-description {
position: relative; align-items: flex-start;
padding: 15px 15px 15px 64px; padding: @alert-with-description-padding;
color: @alert-text-color;
line-height: @line-height-base;
border-radius: @border-radius-base;
} }
&-with-description&-no-icon { &-with-description&-no-icon {
padding: 15px; padding: @alert-with-description-no-icon-padding-vertical 15px;
} }
&-with-description &-icon { &-with-description &-icon {
position: absolute; margin-right: @alert-with-description-padding-vertical;
top: 16px; font-size: @alert-with-description-icon-size;
left: 24px;
font-size: 24px;
}
&-with-description &-close-icon {
position: absolute;
top: 16px;
right: 16px;
font-size: @font-size-base;
cursor: pointer;
} }
&-with-description &-message { &-with-description &-message {