实现alter,confirm,prompt弹窗功能
This commit is contained in:
lvxiangcong
parent
8b0e43bfc2
commit
261256c4f3
|
|
@ -10,6 +10,7 @@ export const autoPxStyle: CSSResult = css`
|
|||
--auto-15px: calc(15px / var(--hostDevicePixelRatio));
|
||||
--auto-16px: calc(16px / var(--hostDevicePixelRatio));
|
||||
--auto-18px: calc(18px / var(--hostDevicePixelRatio));
|
||||
--auto-20px: calc(20px / var(--hostDevicePixelRatio));
|
||||
--auto-24px: calc(24px / var(--hostDevicePixelRatio));
|
||||
--auto-26px: calc(26px / var(--hostDevicePixelRatio));
|
||||
--auto-25_6px: calc(25.6px / var(--hostDevicePixelRatio));
|
||||
|
|
|
|||
|
|
@ -1,10 +1,21 @@
|
|||
import {css} from 'lit'
|
||||
|
||||
export default css`
|
||||
div {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: red;
|
||||
.star-alter-checkbox {
|
||||
align-self: start;
|
||||
font-size: 16px;
|
||||
color: #8a8a8a;
|
||||
margin: var(--auto-10px) var(--auto-20px);
|
||||
}
|
||||
.star-alter-group {
|
||||
display: flex;
|
||||
font-size: 18px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
line-height: 60px;
|
||||
}
|
||||
.star-alter-button {
|
||||
color: #1d98f0;
|
||||
font-weight: bold;
|
||||
}
|
||||
`
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import {
|
|||
CSSResultArray,
|
||||
TemplateResult,
|
||||
customElement,
|
||||
query,
|
||||
} from '../base/star-base-element.js'
|
||||
import StarBaseDialog from './base-dialog.js'
|
||||
import alertDialogStyles from './alert-dialog.css.js'
|
||||
|
|
@ -12,12 +13,25 @@ import '../button-group/button-group.js'
|
|||
|
||||
interface AlertDialogOptions {
|
||||
text?: string
|
||||
checkBoxText?: string
|
||||
confirm?: string
|
||||
onconfirm?: () => void
|
||||
dataTo?: Object
|
||||
onconfirm?: (e: Object) => void
|
||||
}
|
||||
|
||||
@customElement('star-alert-dialog')
|
||||
export class StarAlertDialog extends StarBaseDialog {
|
||||
constructor(obj: AlertDialogOptions) {
|
||||
super()
|
||||
this.text = obj.text || ''
|
||||
this.checkBoxText = obj.checkBoxText || ''
|
||||
this.dataTo = obj.dataTo || {}
|
||||
this.confirm = obj.confirm || '确定'
|
||||
this.onconfirm = obj.onconfirm || (() => {})
|
||||
}
|
||||
// 暴露给外部使用
|
||||
@query('input') public alterInput!: HTMLInputElement
|
||||
|
||||
public static override get styles(): CSSResultArray {
|
||||
return [super.styles, alertDialogStyles]
|
||||
}
|
||||
|
|
@ -26,41 +40,56 @@ export class StarAlertDialog extends StarBaseDialog {
|
|||
|
||||
text!: string
|
||||
|
||||
onconfirm!: () => void
|
||||
onconfirm!: (e: Object) => void
|
||||
|
||||
protected override get headerContent(): TemplateResult {
|
||||
return html`
|
||||
<h1 slot="header">${this.title}</h1>
|
||||
<div class="star-base-main">
|
||||
<div class="star-base-title">${this.title}</div>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
|
||||
protected override get mainContent(): TemplateResult {
|
||||
return html`
|
||||
<span>${this.text}</span>
|
||||
<span class="star-base-subtitle">${this.text}</span>
|
||||
${this.checkBoxText
|
||||
? html`
|
||||
<div class="star-alter-checkbox">
|
||||
<label>
|
||||
<input id="checkbox-start-checked" type="checkbox" />
|
||||
${this.checkBoxText}
|
||||
</label>
|
||||
</div>
|
||||
`
|
||||
: ''}
|
||||
`
|
||||
}
|
||||
|
||||
protected override get bottomContent(): TemplateResult {
|
||||
return html`
|
||||
<star-button-group>
|
||||
<div class="star-alter-group">
|
||||
<span class="star-alter-button" @click=${this.transmitAlter}>
|
||||
${this.confirm}
|
||||
</span>
|
||||
</div>
|
||||
<!-- <star-button-group>
|
||||
<star-button
|
||||
type="text"
|
||||
variant="primary"
|
||||
label=${this.confirm}
|
||||
@click=${this.handleConfirm}
|
||||
></star-button>
|
||||
</star-button-group>
|
||||
</star-button-group> -->
|
||||
`
|
||||
}
|
||||
|
||||
handleEvent(e: any): void {
|
||||
console.log(e)
|
||||
}
|
||||
|
||||
constructor(obj: AlertDialogOptions) {
|
||||
super()
|
||||
this.text = obj.text || ''
|
||||
this.confirm = obj.confirm || '确定'
|
||||
this.onconfirm = obj.onconfirm || (() => {})
|
||||
transmitAlter() {
|
||||
if (this.checkBoxText) {
|
||||
let checkedInput = this.alterInput.checked
|
||||
console.log(checkedInput)
|
||||
// @ts-ignore
|
||||
this.dataTo.checked = checkedInput
|
||||
}
|
||||
this.handleConfirm()
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,58 @@
|
|||
import {css} from 'lit'
|
||||
|
||||
export default css`
|
||||
div {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: red;
|
||||
* {
|
||||
border: none;
|
||||
background: transparent;
|
||||
}
|
||||
dialog::backdrop {
|
||||
background: green;
|
||||
border:2px solid yellow;
|
||||
}
|
||||
.star-confirm-background {
|
||||
position: fixed;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: #00000033;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.star-base-dialog {
|
||||
width: 380px;
|
||||
background: linear-gradient(
|
||||
134.78deg,
|
||||
#f7f5f7 2.34%,
|
||||
#fafafa 34.11%,
|
||||
#e1e4f2 100%
|
||||
);
|
||||
border-radius: var(--auto-20px);
|
||||
overflow: hidden;
|
||||
pointer-events: auto;
|
||||
}
|
||||
.star-base-main {
|
||||
padding: var(--auto-20px) var(--auto-20px) 0px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.star-base-title {
|
||||
margin-top: var(--auto-10px);
|
||||
margin-bottom: var(--auto-10px);
|
||||
color: #262626;
|
||||
font-size: var(--auto-18px);
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
line-height: var(--auto-20px);
|
||||
}
|
||||
.star-base-subtitle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: var(--auto-16px);
|
||||
color: #4d4d4d;
|
||||
max-height: var(--auto-96px);
|
||||
margin: var(--auto-10px) var(--auto-20px);
|
||||
overflow: auto;
|
||||
`
|
||||
|
|
|
|||
|
|
@ -13,13 +13,21 @@ const USE_DIALOG = 0
|
|||
export default class StarBaseDialog extends StarBaseElement {
|
||||
title!: string
|
||||
|
||||
subtitle!: string
|
||||
|
||||
image!: string
|
||||
|
||||
checkBoxText!: string
|
||||
|
||||
value!: string
|
||||
|
||||
cancel!: string
|
||||
|
||||
confirm!: string
|
||||
|
||||
onconfirm!: (e: Event) => void
|
||||
dataTo!: Object
|
||||
|
||||
onconfirm!: (e: Object) => void
|
||||
|
||||
oncancel!: (e: Event) => void
|
||||
|
||||
|
|
@ -49,9 +57,9 @@ export default class StarBaseDialog extends StarBaseElement {
|
|||
return this.parentElement || (this.getRootNode() as Element)
|
||||
}
|
||||
|
||||
protected handleConfirm(e: Event) {
|
||||
protected handleConfirm() {
|
||||
this.parent.removeChild(this)
|
||||
this.onconfirm?.(e)
|
||||
this.onconfirm?.(this.dataTo)
|
||||
}
|
||||
|
||||
protected handleCancel(e: Event) {
|
||||
|
|
@ -64,20 +72,21 @@ export default class StarBaseDialog extends StarBaseElement {
|
|||
*/
|
||||
private renderDialog() {
|
||||
return html`
|
||||
<dialog>
|
||||
<header>${this.headerContent}</header>
|
||||
<main>${this.mainContent}</main>
|
||||
<footer>${this.bottomContent}</footer>
|
||||
</dialog>
|
||||
<!-- <dialog>
|
||||
<main>${this.renderMockDialog()}</main>
|
||||
</dialog> -->
|
||||
${this.renderMockDialog()}
|
||||
`
|
||||
}
|
||||
|
||||
private renderMockDialog() {
|
||||
return html`
|
||||
<div>
|
||||
<header>${this.headerContent}</header>
|
||||
<main>${this.mainContent}</main>
|
||||
<footer>${this.bottomContent}</footer>
|
||||
<div class="star-confirm-background">
|
||||
<div class="star-base-dialog">
|
||||
<header>${this.headerContent}</header>
|
||||
<main>${this.mainContent}</main>
|
||||
<footer>${this.bottomContent}</footer>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,31 @@
|
|||
import {css} from 'lit'
|
||||
|
||||
export default css`
|
||||
div {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: red;
|
||||
.star-confirm-image{
|
||||
height: 48px;
|
||||
width: 48px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.star-button-group {
|
||||
display: flex;
|
||||
font-size: 18px;
|
||||
align-items: center;
|
||||
line-height: 60px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.star-button1 {
|
||||
flex: 1;
|
||||
color: #4d4d4d;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.star-split-line {
|
||||
height: 20px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.09);
|
||||
}
|
||||
.star-button2 {
|
||||
flex: 1;
|
||||
color: #1d98f0;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
`
|
||||
|
|
|
|||
|
|
@ -11,27 +11,59 @@ import '../button/button.js'
|
|||
|
||||
interface ConfirmDialogOptions {
|
||||
title?: string
|
||||
subtitle?: string
|
||||
image?: string
|
||||
dataTo?: Object
|
||||
checkBoxText?: string
|
||||
cancel?: string
|
||||
confirm?: string
|
||||
oncancel?: () => void
|
||||
onconfirm?: () => void
|
||||
onconfirm?: (e: Object) => void
|
||||
}
|
||||
|
||||
@customElement('star-confirm-dialog')
|
||||
export class StarConfirmDialog extends StarBaseDialog {
|
||||
constructor(obj: ConfirmDialogOptions) {
|
||||
super()
|
||||
this.title = obj.title || ''
|
||||
this.subtitle = obj.subtitle || ''
|
||||
this.image = obj.image || ''
|
||||
this.cancel = obj.cancel || '取消'
|
||||
this.confirm = obj.confirm || '确定'
|
||||
this.oncancel = obj.oncancel || (() => {})
|
||||
this.onconfirm = obj.onconfirm || (() => {})
|
||||
}
|
||||
|
||||
public static override get styles(): CSSResultArray {
|
||||
return [super.styles, confirmDialogStyles]
|
||||
}
|
||||
|
||||
protected override get headerContent(): TemplateResult {
|
||||
return html`
|
||||
<h1 slot="header">${this.title}</h1>
|
||||
<div class="star-base-main">
|
||||
${this.image
|
||||
? html`
|
||||
<img src="${this.image}" class="star-confirm-image" />
|
||||
`
|
||||
: ''}
|
||||
<div class="star-base-title">${this.title}</div>
|
||||
<div class="star-base-subtitle">${this.subtitle}</div>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
|
||||
protected override get bottomContent(): TemplateResult {
|
||||
return html`
|
||||
<star-button-group>
|
||||
<div class="star-button-group">
|
||||
<span class="star-button1" @click=${this.handleCancel}>
|
||||
${this.cancel}
|
||||
</span>
|
||||
<span class="star-split-line"></span>
|
||||
<span class="star-button2" @click=${this.handleConfirm}>
|
||||
${this.confirm}
|
||||
</span>
|
||||
</div>
|
||||
<!-- <star-button-group>
|
||||
<star-button
|
||||
type="text"
|
||||
variant="default"
|
||||
|
|
@ -44,16 +76,7 @@ export class StarConfirmDialog extends StarBaseDialog {
|
|||
label=${this.confirm}
|
||||
@click=${this.handleConfirm}
|
||||
></star-button>
|
||||
</star-button-group>
|
||||
</star-button-group> -->
|
||||
`
|
||||
}
|
||||
|
||||
constructor(obj: ConfirmDialogOptions) {
|
||||
super()
|
||||
this.title = obj.title || ''
|
||||
this.cancel = obj.cancel || '取消'
|
||||
this.confirm = obj.confirm || '确定'
|
||||
this.oncancel = obj.oncancel || (() => {})
|
||||
this.onconfirm = obj.onconfirm || (() => {})
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,43 @@
|
|||
import {css} from 'lit'
|
||||
|
||||
export default css`
|
||||
div {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: red;
|
||||
.star-prompt-main {
|
||||
text-align: center;
|
||||
}
|
||||
.star-prompt-input {
|
||||
background: #ffffff;
|
||||
border-radius: 8px;
|
||||
padding: 1% 0.1% 1% 0.1%;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #262626;
|
||||
outline: none;
|
||||
border: 2px solid #1d98f0;
|
||||
}
|
||||
.star-prompt-input:focus {
|
||||
border: 2px solid #1d98f0;
|
||||
}
|
||||
.star-button-group {
|
||||
display: flex;
|
||||
font-size: 18px;
|
||||
align-items: center;
|
||||
line-height: 60px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.star-button1 {
|
||||
flex: 1;
|
||||
color: #4d4d4d;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.star-split-line {
|
||||
height: 20px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.09);
|
||||
}
|
||||
.star-button2 {
|
||||
flex: 1;
|
||||
color: #1d98f0;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
}
|
||||
`
|
||||
|
|
|
|||
|
|
@ -12,15 +12,28 @@ import '../button/button.js'
|
|||
|
||||
interface PromptDialogOptions {
|
||||
title?: string
|
||||
subtitle?: string
|
||||
value?: string
|
||||
dataTo?: Object
|
||||
cancel?: string
|
||||
confirm?: string
|
||||
oncancel?: () => void
|
||||
onconfirm?: () => void
|
||||
onconfirm?: (e: Object) => void
|
||||
}
|
||||
|
||||
@customElement('star-prompt-dialog')
|
||||
export class StarPromptDialog extends StarBaseDialog {
|
||||
constructor(obj: PromptDialogOptions) {
|
||||
super()
|
||||
this.title = obj.title || ''
|
||||
this.subtitle = obj.subtitle || ''
|
||||
this.value = obj.value || ''
|
||||
this.cancel = obj.cancel || '取消'
|
||||
this.confirm = obj.confirm || '确定'
|
||||
this.dataTo = obj.dataTo || {}
|
||||
this.oncancel = obj.oncancel || (() => {})
|
||||
this.onconfirm = obj.onconfirm || (() => {})
|
||||
}
|
||||
// 暴露给外部使用
|
||||
@query('input') public promptInput!: HTMLInputElement
|
||||
|
||||
|
|
@ -30,21 +43,33 @@ export class StarPromptDialog extends StarBaseDialog {
|
|||
|
||||
protected override get headerContent(): TemplateResult {
|
||||
return html`
|
||||
<h1 slot="header">${this.title}</h1>
|
||||
<div class="star-base-main">
|
||||
<div class="star-base-title">${this.title}</div>
|
||||
<div class="star-base-subtitle">${this.subtitle}</div>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
|
||||
protected override get mainContent(): TemplateResult {
|
||||
return html`
|
||||
<p>
|
||||
<input placeholder=${this.value} />
|
||||
<p class="star-prompt-main">
|
||||
<input type="text" value="${this.value}" class="star-prompt-input" />
|
||||
</p>
|
||||
`
|
||||
}
|
||||
|
||||
protected override get bottomContent(): TemplateResult {
|
||||
return html`
|
||||
<star-button-group>
|
||||
<div class="star-button-group">
|
||||
<span class="star-button1" @click=${this.handleCancel}>
|
||||
${this.cancel}
|
||||
</span>
|
||||
<span class="star-split-line"></span>
|
||||
<span class="star-button2" @click=${this.transmitPrompt}>
|
||||
${this.confirm}
|
||||
</span>
|
||||
</div>
|
||||
<!-- <star-button-group>
|
||||
<star-button
|
||||
type="text"
|
||||
variant="default"
|
||||
|
|
@ -57,17 +82,12 @@ export class StarPromptDialog extends StarBaseDialog {
|
|||
label=${this.confirm}
|
||||
@click=${this.handleConfirm}
|
||||
></star-button>
|
||||
</star-button-group>
|
||||
</star-button-group> -->
|
||||
`
|
||||
}
|
||||
|
||||
constructor(obj: PromptDialogOptions) {
|
||||
super()
|
||||
this.title = obj.title || ''
|
||||
this.value = obj.value || ''
|
||||
this.cancel = obj.cancel || '取消'
|
||||
this.confirm = obj.confirm || '确定'
|
||||
this.oncancel = obj.oncancel || (() => {})
|
||||
this.onconfirm = obj.onconfirm || (() => {})
|
||||
transmitPrompt() {
|
||||
let promptInput = this.promptInput.value.trim() //获取输入的内容
|
||||
this.dataTo = Object.assign(this.dataTo, {promptInput: promptInput || ''})
|
||||
this.handleConfirm()
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@ interface DragAndDrop {
|
|||
delay: number
|
||||
|
||||
// Timeout used to initiate drag-and-drop actions
|
||||
timeout: NodeJS.Timeout
|
||||
timeout: number
|
||||
|
||||
// The child that was tapped/clicked
|
||||
child: any
|
||||
|
|
@ -62,7 +62,7 @@ interface DragAndDrop {
|
|||
last: lastClickInfo
|
||||
|
||||
// Timeout used to send drag-move events
|
||||
moveTimeout: NodeJS.Timeout
|
||||
moveTimeout: number
|
||||
|
||||
// The last time a move event was fired
|
||||
lastMoveEventTime: number
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@ interface DragAndDrop {
|
|||
delay: number
|
||||
|
||||
// Timeout used to initiate drag-and-drop actions
|
||||
timeout: NodeJS.Timeout
|
||||
timeout: number
|
||||
|
||||
// The child that was tapped/clicked
|
||||
child: any
|
||||
|
|
@ -59,7 +59,7 @@ interface DragAndDrop {
|
|||
last: lastClickInfo
|
||||
|
||||
// Timeout used to send drag-move events
|
||||
moveTimeout: NodeJS.Timeout
|
||||
moveTimeout: number
|
||||
|
||||
// The last time a move event was fired
|
||||
lastMoveEventTime: number
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 4.7 KiB |
|
|
@ -11,34 +11,37 @@ import '../../../components/button'
|
|||
export class PanelDialog extends LitElement {
|
||||
render() {
|
||||
return html`
|
||||
<star-button
|
||||
type="normal"
|
||||
variant="primary"
|
||||
size="large"
|
||||
label="弹出警告弹窗"
|
||||
@click=${this.showAlert}
|
||||
></star-button>
|
||||
<star-button
|
||||
type="normal"
|
||||
variant="primary"
|
||||
size="large"
|
||||
label="弹出确认弹窗"
|
||||
@click=${this.showConfirm}
|
||||
></star-button>
|
||||
<star-button
|
||||
type="normal"
|
||||
variant="primary"
|
||||
size="large"
|
||||
label="弹出输入弹窗"
|
||||
@click=${this.showPrompt}
|
||||
></star-button>
|
||||
<div>
|
||||
<star-button
|
||||
type="normal"
|
||||
variant="primary"
|
||||
size="sma;l"
|
||||
label="弹出警告弹窗"
|
||||
@click=${this.showAlert}
|
||||
></star-button>
|
||||
<star-button
|
||||
type="normal"
|
||||
variant="primary"
|
||||
size="small"
|
||||
label="弹出确认弹窗"
|
||||
@click=${this.showConfirm}
|
||||
></star-button>
|
||||
<star-button
|
||||
type="normal"
|
||||
variant="primary"
|
||||
size="small"
|
||||
label="弹出输入弹窗"
|
||||
@click=${this.showPrompt}
|
||||
></star-button>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
|
||||
showAlert() {
|
||||
const starAlertDialog = new StarAlertDialog({
|
||||
text: '请先填写个人信息',
|
||||
onconfirm: () => console.log('确认'),
|
||||
text: '超过1句话的长文本内容，文字居左对齐超过1句话的长文本内容，文字居左对齐',
|
||||
checkBoxText: '不再提示',
|
||||
onconfirm: (e: any) => console.log('确定', e),
|
||||
})
|
||||
console.log(starAlertDialog)
|
||||
this.shadowRoot?.appendChild(starAlertDialog)
|
||||
|
|
@ -46,7 +49,9 @@ export class PanelDialog extends LitElement {
|
|||
|
||||
showConfirm() {
|
||||
const starConfirmDialog = new StarConfirmDialog({
|
||||
title: '确定要离开吗？',
|
||||
image: '/src/test/panels/dialog/asserts/icon1.png',
|
||||
title: '是否卸载"影音"',
|
||||
subtitle: '卸载应用将会同步清除其所有数据',
|
||||
oncancel: () => console.log('取消'),
|
||||
onconfirm: () => console.log('确定'),
|
||||
})
|
||||
|
|
@ -55,10 +60,11 @@ export class PanelDialog extends LitElement {
|
|||
|
||||
showPrompt() {
|
||||
const starPromptDialog = new StarPromptDialog({
|
||||
title: '请输入你的账号：',
|
||||
title: '内容',
|
||||
subtitle: '描述性文字描述性文字描述性文字',
|
||||
value: '8位数字',
|
||||
oncancel: () => console.log('取消'),
|
||||
onconfirm: () => console.log('确定'),
|
||||
onconfirm: (e: any) => console.log('确定', e),
|
||||
})
|
||||
this.shadowRoot?.appendChild(starPromptDialog)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import {css, CSSResult} from 'lit'
|
||||
import './iconfont/iconfont/iconfont.css'
|
||||
// import './iconfont/iconfont/iconfont.css'
|
||||
|
||||
export const sharedPickerStyles: CSSResult = css`
|
||||
* {
|
||||
|
|
|
|||
Loading…
Reference in New Issue