4
4
x-on:wireui:notification.window =" addNotification($event.detail)"
5
5
x-on:wireui:confirm-notification.window =" addConfirmNotification($event.detail)"
6
6
wire:ignore >
7
- <div class =" max-w-sm w-full space-y-2 pointer-events-auto flex flex-col-reverse " >
7
+ <div class =" flex flex-col-reverse w-full max-w-sm space-y-2 pointer-events-auto" >
8
8
<template x-for =" notification in notifications" :key =" `notification-${notification.id}`" >
9
- <div class =" max-w-sm w-full bg-skin-card shadow-lg rounded-lg ring-1 ring-black
10
- ring-opacity-5 relative overflow-hidden pointer-events-auto"
9
+ <div class =" relative w-full max-w-sm overflow-hidden rounded-lg shadow-lg pointer-events-auto bg-skin-card ring-1 ring-black ring-opacity-5"
11
10
:class =" { 'flex': notification.rightButtons }"
12
11
:id =" `notification.${notification.id}`"
13
12
x-transition:enter =" transform ease-out duration-300 transition"
14
13
x-transition:enter-start =" translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"
15
14
x-transition:enter-end =" translate-y-0 opacity-100 sm:translate-x-0"
16
15
x-on:mouseenter =" pauseNotification(notification)"
17
16
x-on:mouseleave =" resumeNotification(notification)" >
18
- <div class =" bg-secondary-300 rounded-full transition-all duration-150 ease-linear absolute top-0 left-0 "
17
+ <div class =" absolute top-0 left-0 transition-all duration-150 ease-linear rounded-full bg-secondary-300 "
19
18
style =" height : 2px ; width : 100% ;"
20
19
:id =" `timeout.bar.${notification.id}`"
21
20
x-show =" Boolean(notification.timer) && notification.progressbar !== false" >
40
39
</template >
41
40
42
41
<template x-if =" notification.img" >
43
- <img class =" h -10 w -10 rounded-full" :src =" notification.img" />
42
+ <img class =" w -10 h -10 rounded-full" :src =" notification.img" />
44
43
</template >
45
44
</div >
46
45
</template >
59
58
60
59
<!-- actions buttons -->
61
60
<template x-if =" !notification.dense && !notification.rightButtons && (notification.accept || notification.reject)" >
62
- <div class =" mt-3 flex gap-x-3" >
63
- <button class =" rounded-md text-sm font-medium focus:outline-none"
61
+ <div class =" flex mt-3 gap-x-3" >
62
+ <button class =" text-sm font-medium rounded-md focus:outline-none"
64
63
:class =" {
65
64
'bg-skin-card text-primary-600 hover:text-primary-500': !Boolean($wireui.dataGet(notification, 'accept.style')),
66
65
[$wireui.dataGet(notification, 'accept.style')]: Boolean($wireui.dataGet(notification, 'accept.style')),
71
70
x-text =" $wireui.dataGet(notification, 'accept.label', '')" >
72
71
</button >
73
72
74
- <button class =" rounded-md text-sm font-medium focus:outline-none"
73
+ <button class =" text-sm font-medium rounded-md focus:outline-none"
75
74
:class =" {
76
75
'bg-skin-card text-skin-inverted-muted hover:text-skin-base': !Boolean($wireui.dataGet(notification, 'reject.style')),
77
76
[$wireui.dataGet(notification, 'reject.style')]: Boolean($wireui.dataGet(notification, 'reject.style')),
85
84
</template >
86
85
</div >
87
86
88
- <div class =" ml-4 shrink-0 flex " >
87
+ <div class =" flex ml-4 shrink-0" >
89
88
<!-- accept button -->
90
- <button class =" mr-4 shrink-0 rounded-md text-sm font-medium focus:outline-none"
89
+ <button class =" mr-4 text-sm font-medium rounded-md shrink-0 focus:outline-none"
91
90
:class =" {
92
91
'text-primary-600 hover:text-primary-500': !Boolean($wireui.dataGet(notification, 'accept.style')),
93
92
[$wireui.dataGet(notification, 'accept.style')]: Boolean($wireui.dataGet(notification, 'accept.style'))
98
97
</button >
99
98
100
99
<!-- close button -->
101
- <button class =" rounded-md inline-flex text-skin-muted hover:text-skin-base focus:outline-none"
100
+ <button class =" inline-flex rounded-md text-skin-muted hover:text-skin-base focus:outline-none"
102
101
x-show =" notification.closeButton"
103
102
x-on:click =" closeNotification(notification)" >
104
103
<span class =" sr-only" >Close</span >
105
104
<x-dynamic-component
106
- :component =" WireUiComponent::resolve ('icon')"
107
- class =" h -5 w -5"
108
- name =" x"
105
+ :component =" WireUi::component ('icon')"
106
+ class =" w -5 h -5"
107
+ name =" x"
109
108
/>
110
109
</button >
111
110
</div >
@@ -116,11 +115,10 @@ class="h-5 w-5"
116
115
<template x-if =" notification.rightButtons" >
117
116
<div class =" flex flex-col border-l border-secondary-200" >
118
117
<template x-if =" notification.accept" >
119
- <div class =" h-0 flex-1 flex " :class =" {
118
+ <div class =" flex flex-1 h-0 " :class =" {
120
119
'border-b border-secondary-200': notification.reject
121
120
}" >
122
- <button class =" w-full rounded-none rounded-tr-lg px-4 py-3 flex items-center
123
- justify-center text-sm font-medium focus:outline-none"
121
+ <button class =" flex items-center justify-center w-full px-4 py-3 text-sm font-medium rounded-none rounded-tr-lg focus:outline-none"
124
122
:class =" {
125
123
'text-primary-600 hover:text-primary-500 hover:bg-secondary-50': !Boolean(notification.accept.style),
126
124
[notification.accept.style]: Boolean(notification.accept.style),
@@ -133,9 +131,8 @@ class="h-5 w-5"
133
131
</template >
134
132
135
133
<template x-if =" notification.reject" >
136
- <div class =" h-0 flex-1 flex" >
137
- <button class =" w-full rounded-none rounded-br-lg px-4 py-3 flex items-center
138
- justify-center text-sm font-medium focus:outline-none"
134
+ <div class =" flex flex-1 h-0" >
135
+ <button class =" flex items-center justify-center w-full px-4 py-3 text-sm font-medium rounded-none rounded-br-lg focus:outline-none"
139
136
:class =" {
140
137
'text-skin-inverted-muted hover:text-skin-base': !Boolean(notification.reject.style),
141
138
[notification.reject.style]: Boolean(notification.reject.style),
0 commit comments