accordion.css
3 months ago
button.css
1 month ago
card.css
3 months ago
common.css
3 months ago
common.js
3 months ago
deprecated.css
3 months ago
form.css
3 months ago
header.css
3 months ago
modal-new.css
3 months ago
modal.css
3 months ago
modal.js
3 months ago
screen-options.js
3 months ago
tabs.js
3 months ago
toast.css
3 months ago
toaster.js
3 months ago
toggles.js
3 months ago
modal-new.css
98 lines
| 1 | /* ------------------------------ |
| 2 | Modal: Layout + Structure |
| 3 | -------------------------------- */ |
| 4 | |
| 5 | .advads-dialog { |
| 6 | @apply p-0 border-0 bg-transparent size-full z-9991 max-w-full max-h-full; |
| 7 | @apply opacity-0 pointer-events-none; |
| 8 | @apply transition-opacity duration-200 ease-out; |
| 9 | } |
| 10 | |
| 11 | .advads-dialog::backdrop { |
| 12 | @apply bg-black/50 backdrop-blur-[1px]; |
| 13 | @apply transition-opacity duration-200 ease-out; |
| 14 | } |
| 15 | |
| 16 | .advads-dialog-wrap { |
| 17 | @apply w-full sm:max-w-2xl mx-auto; |
| 18 | } |
| 19 | |
| 20 | .advads-dialog-frame { |
| 21 | @apply relative flex flex-col bg-white rounded-md; |
| 22 | |
| 23 | max-height: calc(100vh - 2rem - var(--wp-admin--admin-bar--height, 0px)); |
| 24 | margin-top: calc(1rem + var(--wp-admin--admin-bar--height, 0px)); |
| 25 | |
| 26 | box-shadow: |
| 27 | 0 4px 8px 0 rgba(0, 0, 0, 0.2), |
| 28 | 0 6px 20px 0 rgba(0, 0, 0, 0.19); |
| 29 | } |
| 30 | |
| 31 | .advads-dialog-header { |
| 32 | @apply p-8 pb-6 relative text-gray-900; |
| 33 | |
| 34 | h3 { |
| 35 | @apply m-0 text-xl font-medium; |
| 36 | } |
| 37 | } |
| 38 | |
| 39 | .advads-dialog-description { |
| 40 | @apply mb-0 text-sm; |
| 41 | } |
| 42 | |
| 43 | .advads-dialog-button-close { |
| 44 | @apply block no-underline absolute top-4 right-4 text-gray-500; |
| 45 | } |
| 46 | |
| 47 | .advads-dialog-body { |
| 48 | @apply overflow-y-auto px-8 pb-6; |
| 49 | |
| 50 | > :first-child { |
| 51 | @apply mt-0; |
| 52 | } |
| 53 | |
| 54 | > :last-child { |
| 55 | @apply mb-0; |
| 56 | } |
| 57 | |
| 58 | &::-webkit-scrollbar { |
| 59 | @apply w-3; |
| 60 | } |
| 61 | |
| 62 | &::-webkit-scrollbar-track { |
| 63 | @apply bg-transparent shadow-none; |
| 64 | } |
| 65 | |
| 66 | &::-webkit-scrollbar-thumb { |
| 67 | @apply bg-border rounded-lg border-3 border-transparent bg-clip-content; |
| 68 | } |
| 69 | } |
| 70 | |
| 71 | .advads-dialog-footer { |
| 72 | @apply bg-gray-50 px-6 py-4 flex gap-x-4 justify-between border-t border-border rounded-b-md; |
| 73 | } |
| 74 | |
| 75 | /* ------------------------------ |
| 76 | Sizes |
| 77 | -------------------------------- */ |
| 78 | |
| 79 | .advsads-dialog-sm .advads-dialog-wrap { |
| 80 | @apply sm:max-w-lg; |
| 81 | } |
| 82 | |
| 83 | .advsads-dialog-md .advads-dialog-wrap { |
| 84 | @apply sm:max-w-xl; |
| 85 | } |
| 86 | |
| 87 | .advsads-dialog-lg .advads-dialog-wrap { |
| 88 | @apply sm:max-w-4xl; |
| 89 | } |
| 90 | |
| 91 | /* ------------------------------ |
| 92 | States |
| 93 | -------------------------------- */ |
| 94 | |
| 95 | .advads-dialog[data-state="enter"] { |
| 96 | @apply opacity-100 pointer-events-auto; |
| 97 | } |
| 98 |