优化样式
parent
de5fcb7765
commit
27afa2c5c5
|
@ -18,7 +18,7 @@ const BUILDIN2 = /\b(Object|String|Array|Boolean|Number|Function|class)\b/g
|
|||
const STR = /(['"`])(.*?)\1/g
|
||||
const NUM = /\b(\d+)\b/g
|
||||
const FN = /([\.\s])([a-zA-Z$][\da-zA-Z_]*)(\(.*?\))/g
|
||||
const CM = /(?=\s)([ ]*\/\/.*)|(^\/\/.*)/g
|
||||
const CM = /(?=\s)?([ ]*\/\/.*)|(^\/\/.*)/g
|
||||
const INLINE = {
|
||||
code: /`([^`]*?[^`\\\s])`/g,
|
||||
codeBlock: /^```(.*?)$/gm,
|
||||
|
@ -46,9 +46,13 @@ function parseJs(code) {
|
|||
.replace(BUILDIN2, '[type]<strong><em>$1</em></strong>[/type]')
|
||||
.replace(NUM, '[num]$1[/num]')
|
||||
.replace(STR, (m, q, str) => {
|
||||
return `[str]${q}${str.replace(/\[\/?num\]/g, '')}${q}[/str]`
|
||||
str = str.replace(/\[(\w+)\](.*?)\[\/\1\]/g, '$2')
|
||||
return `[str]${q}${str}${q}[/str]`
|
||||
})
|
||||
.replace(CM, (m, str) => {
|
||||
str = str.replace(/\[(\w+)\](.*?)\[\/\1\]/g, '$2')
|
||||
return `[cm]${str}[/cm]`
|
||||
})
|
||||
.replace(CM, '[cm]$1[/cm]')
|
||||
}
|
||||
|
||||
function rebuild(code) {
|
||||
|
|
|
@ -40,42 +40,42 @@ code, pre, samp {font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
|
|||
|
||||
:root {
|
||||
/* primary */
|
||||
--color-teal-a: rgba(72, 201, 176, 0.5);
|
||||
--color-teal-a: rgba(72, 201, 176, 0.35);
|
||||
--color-teal-1: rgb(72, 201, 176);
|
||||
--color-teal-2: rgb(26, 188, 156);
|
||||
--color-teal-3: rgb(22, 160, 133);
|
||||
/* success */
|
||||
--color-green-a: rgba(88, 214, 141, 0.5);
|
||||
--color-green-a: rgba(88, 214, 141, 0.35);
|
||||
--color-green-1: rgb(88, 214, 141);
|
||||
--color-green-2: rgb(46, 204, 113);
|
||||
--color-green-3: rgb(39, 173, 96);
|
||||
/* info */
|
||||
--color-blue-a: rgba(100, 181, 246, 0.5);
|
||||
--color-blue-a: rgba(100, 181, 246, 0.35);
|
||||
--color-blue-1: rgb(100, 181, 246);
|
||||
--color-blue-2: rgb(66, 165, 245);
|
||||
--color-blue-3: rgb(33, 150, 243);
|
||||
/* danger */
|
||||
--color-red-a: rgba(255, 107, 129, 0.5);
|
||||
--color-red-a: rgba(255, 107, 129, 0.35);
|
||||
--color-red-1: rgb(255, 107, 129);
|
||||
--color-red-2: rgb(255, 71, 87);
|
||||
--color-red-3: rgb(230, 52, 67);
|
||||
/* warning */
|
||||
--color-orange-a: rgba(244, 211, 19, 0.5);
|
||||
--color-orange-a: rgba(244, 211, 19, 0.35);
|
||||
--color-orange-1: rgb(244, 211, 19);
|
||||
--color-orange-2: rgb(241, 196, 15);
|
||||
--color-orange-3: rgb(205, 167, 13);
|
||||
/* default1 */
|
||||
--color-plain-a: rgba(150, 204, 248, 0.5);
|
||||
--color-plain-a: rgba(150, 204, 248, 0.35);
|
||||
--color-plain-1: rgb(242, 245, 252);
|
||||
--color-plain-2: rgb(232, 235, 244);
|
||||
--color-plain-3: rgb(218, 225, 233);
|
||||
/* default2 */
|
||||
--color-grey-a: rgba(206, 214, 224, 0.5);
|
||||
--color-grey-a: rgba(206, 214, 224, 0.35);
|
||||
--color-grey-1: rgb(206, 214, 224);
|
||||
--color-grey-2: rgb(164, 176, 190);
|
||||
--color-grey-3: rgb(134, 144, 155);
|
||||
/* inverse */
|
||||
--color-dark-a: rgba(87, 96, 111, 0.5);
|
||||
--color-dark-a: rgba(87, 96, 111, 0.35);
|
||||
--color-dark-1: rgb(87, 96, 111);
|
||||
--color-dark-2: rgb(52, 73, 94);
|
||||
--color-dark-3: rgb(44, 62, 80);
|
||||
|
|
|
@ -5,6 +5,7 @@
|
|||
<div class="layer__ctrl noselect"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
:host {
|
||||
display: none;
|
||||
|
@ -114,32 +115,32 @@
|
|||
align-items: center;
|
||||
width: 300px;
|
||||
padding: 0 10px !important;
|
||||
border-radius: 2px;
|
||||
border-radius: 3px;
|
||||
font-weight: normal;
|
||||
|
||||
text-indent: 8px;
|
||||
--size: 16px;
|
||||
--pad: 0 8px 0 0;
|
||||
color: var(--color-dark-1);
|
||||
}
|
||||
|
||||
::slotted(&__toast.style-info) {
|
||||
border: 1px solid var(--color-plain-3);
|
||||
background: var(--color-plain-1);
|
||||
color: var(--color-grey-3);
|
||||
// border: 1px solid var(--color-plain-3);
|
||||
background: var(--color-plain-a);
|
||||
// color: var(--color-grey-3);
|
||||
}
|
||||
::slotted(&__toast.style-success) {
|
||||
border: 1px solid #b3e19d;
|
||||
background: #f0f9eb;
|
||||
color: var(--color-green-2);
|
||||
// border: 1px solid #b3e19d;
|
||||
background: var(--color-green-a);
|
||||
// color: var(--color-green-3);
|
||||
}
|
||||
::slotted(&__toast.style-warn) {
|
||||
border: 1px solid #faebb4;
|
||||
background: #fffbed;
|
||||
color: var(--color-orange-3);
|
||||
// border: 1px solid #faebb4;
|
||||
background: var(--color-orange-a);
|
||||
// color: var(--color-orange-3);
|
||||
}
|
||||
::slotted(&__toast.style-error) {
|
||||
border: 1px solid #f5c4c4;
|
||||
background: #fef0f0;
|
||||
color: var(--color-red-1);
|
||||
// border: 1px solid #f5c4c4;
|
||||
background: var(--color-red-a);
|
||||
// color: var(--color-red-3);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -251,14 +252,14 @@ const LANGUAGES = {
|
|||
TITLE: 'Dialog',
|
||||
BTNS: ['Cancel', 'OK']
|
||||
},
|
||||
zh: {
|
||||
cn: {
|
||||
TITLE: '提示',
|
||||
BTNS: ['取消', '确定']
|
||||
}
|
||||
}
|
||||
LANGUAGES['zh-CN'] = LANGUAGES.zh
|
||||
LANGUAGES['zh-CN'] = LANGUAGES.cn
|
||||
const lang =
|
||||
LANGUAGES[window.__ENV_LANG__ || navigator.language] || LANGUAGES.en
|
||||
LANGUAGES[window.__ENV_LANG__ || navigator.language] || LANGUAGES.cn
|
||||
|
||||
let uniqueInstance = null // 缓存当前打开的alert/confirm/prompt类型的弹窗
|
||||
let toastInstance = null // 缓存toast的实例
|
||||
|
@ -574,7 +575,7 @@ export default class Layer {
|
|||
this.timer = setTimeout(() => {
|
||||
toastInstance = null
|
||||
this.close()
|
||||
}, 3000)
|
||||
}, 3000000)
|
||||
}
|
||||
|
||||
if (this.props.type === 'notify') {
|
||||
|
@ -795,7 +796,7 @@ Object.assign(_layer, {
|
|||
content: `
|
||||
<div class="layer__content__toast style-${type}">
|
||||
<wc-icon is="${ico}"></wc-icon>
|
||||
<span>${txt}</span>
|
||||
<span class="toast-txt">${txt}</span>
|
||||
</div>`,
|
||||
type: 'toast'
|
||||
})
|
||||
|
|
Reference in New Issue