mirror of
https://github.com/element-plus/element-plus.git
synced 2024-11-21 01:02:59 +08:00
style(components): [message] Update message style (#15912)
* style(components): [message] Update message style * test(components): update test
This commit is contained in:
parent
41bcd9e1f5
commit
d1a7fd102a
@ -8,12 +8,12 @@ import { h } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
|
||||
const open = () => {
|
||||
ElMessage('this is a message.')
|
||||
ElMessage('This is a message.')
|
||||
}
|
||||
|
||||
const openVn = () => {
|
||||
ElMessage({
|
||||
message: h('p', null, [
|
||||
message: h('p', { style: 'line-height: 1; font-size: 14px' }, [
|
||||
h('span', null, 'Message can be '),
|
||||
h('i', { style: 'color: teal' }, 'VNode'),
|
||||
]),
|
||||
|
@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<el-button :plain="true" @click="open1">message</el-button>
|
||||
<el-button :plain="true" @click="open2">success</el-button>
|
||||
<el-button :plain="true" @click="open3">warning</el-button>
|
||||
<el-button :plain="true" @click="open4">error</el-button>
|
||||
<el-button :plain="true" @click="open1">Message</el-button>
|
||||
<el-button :plain="true" @click="open2">Success</el-button>
|
||||
<el-button :plain="true" @click="open3">Warning</el-button>
|
||||
<el-button :plain="true" @click="open4">Error</el-button>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
@ -1,15 +1,15 @@
|
||||
<template>
|
||||
<el-button :plain="true" @click="open2">success</el-button>
|
||||
<el-button :plain="true" @click="open3">warning</el-button>
|
||||
<el-button :plain="true" @click="open1">message</el-button>
|
||||
<el-button :plain="true" @click="open4">error</el-button>
|
||||
<el-button :plain="true" @click="open2">Success</el-button>
|
||||
<el-button :plain="true" @click="open3">Warning</el-button>
|
||||
<el-button :plain="true" @click="open1">Message</el-button>
|
||||
<el-button :plain="true" @click="open4">Error</el-button>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ElMessage } from 'element-plus'
|
||||
|
||||
const open1 = () => {
|
||||
ElMessage('this is a message.')
|
||||
ElMessage('This is a message.')
|
||||
}
|
||||
const open2 = () => {
|
||||
ElMessage({
|
||||
|
@ -7,7 +7,7 @@ import { ElMessage } from 'element-plus'
|
||||
|
||||
const open = () => {
|
||||
ElMessage({
|
||||
message: 'this is a message.',
|
||||
message: 'This is a message.',
|
||||
grouping: true,
|
||||
type: 'success',
|
||||
})
|
||||
|
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<el-button :plain="true" @click="openHTML">Use HTML String</el-button>
|
||||
<el-button :plain="true" @click="openHTML">Use HTML string</el-button>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
@ -106,7 +106,7 @@ describe('Message on command', () => {
|
||||
|
||||
test('correct space when set offset', async () => {
|
||||
const offset = 100
|
||||
const space = 20
|
||||
const space = 16
|
||||
const messages = [Message({ offset }), Message({ offset })]
|
||||
|
||||
await rAF()
|
||||
|
@ -31,5 +31,5 @@ export const getLastOffset = (id: string): number => {
|
||||
|
||||
export const getOffsetOrSpace = (id: string, offset: number) => {
|
||||
const idx = instances.findIndex((instance) => instance.id === id)
|
||||
return idx > 0 ? 20 : offset
|
||||
return idx > 0 ? 16 : offset
|
||||
}
|
||||
|
@ -535,7 +535,7 @@ $message: map.merge(
|
||||
(
|
||||
'bg-color': getCssVar('color', 'info', 'light-9'),
|
||||
'border-color': getCssVar('border-color-lighter'),
|
||||
'padding': 15px 19px,
|
||||
'padding': 11px 15px,
|
||||
'close-size': 16px,
|
||||
'close-icon-color': getCssVar('text-color-placeholder'),
|
||||
'close-hover-color': getCssVar('text-color-secondary'),
|
||||
|
@ -23,17 +23,12 @@
|
||||
padding: getCssVar('message', 'padding');
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
@include when(center) {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@include when(closable) {
|
||||
.#{$namespace}-message__content {
|
||||
padding-right: 31px;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
@ -61,10 +56,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
@include e(icon) {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.#{$namespace}-message__badge {
|
||||
position: absolute;
|
||||
top: -8px;
|
||||
@ -81,10 +72,6 @@
|
||||
}
|
||||
|
||||
& .#{$namespace}-message__closeBtn {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 19px;
|
||||
transform: translateY(-50%);
|
||||
cursor: pointer;
|
||||
color: getCssVar('message', 'close-icon-color');
|
||||
font-size: getCssVar('message', 'close-size');
|
||||
|
Loading…
Reference in New Issue
Block a user