| 1 |
// Delete-confirmation modal (Existing Fields panel → Delete). |
| 2 |
// |
| 3 |
// A Gutenberg <Modal> (not a native window.confirm()) keeps the dialog |
| 4 |
// DOM-visible (testable by Playwright / Cypress) and can carry a cross-form |
| 5 |
// usage warning. The Modal frame + header/title/close are styled by Gutenberg; |
| 6 |
// these rules lay out the body: the message, the amber "alert" callout listing |
| 7 |
// the OTHER forms the field is used on, and the Cancel / Delete button row. |
| 8 |
// Matches the designer's alert-style mockup. Tokens: _tokens.scss. |
| 9 |
.wppb-fb-delete-confirm { |
| 10 |
|
| 11 |
// Modal frame radius — the style guide specifies modals/overlays use |
| 12 |
// radius/xl (12). `className` lands on `.components-modal__frame`, so pin it |
| 13 |
// there (0,2,0) to beat WP core's default frame radius. |
| 14 |
&.components-modal__frame { |
| 15 |
border-radius: var(--wppb-fb-radius-xl); |
| 16 |
} |
| 17 |
|
| 18 |
.wppb-fb-delete-confirm__message { |
| 19 |
margin: 0; |
| 20 |
line-height: 1.5; |
| 21 |
} |
| 22 |
|
| 23 |
// "Checking which other forms use this field…" — spinner + label inline. |
| 24 |
.wppb-fb-delete-confirm__checking { |
| 25 |
display: flex; |
| 26 |
align-items: center; |
| 27 |
gap: var(--wppb-fb-space-sm); |
| 28 |
color: var(--wppb-fb-text-muted); |
| 29 |
margin: var(--wppb-fb-space-xl) 0 0; |
| 30 |
|
| 31 |
.components-spinner { |
| 32 |
margin: 0; |
| 33 |
} |
| 34 |
} |
| 35 |
|
| 36 |
// Amber alert callout — the `status/warning` tokens (warning-surface fill + |
| 37 |
// a thick warning-colored left rail). Holds the bold lead-in and the divided |
| 38 |
// list of other forms. |
| 39 |
.wppb-fb-delete-confirm__usage { |
| 40 |
background-color: var(--wppb-fb-status-warning-surface); |
| 41 |
border-left: 4px solid var(--wppb-fb-status-warning); |
| 42 |
border-radius: var(--wppb-fb-radius-md); |
| 43 |
color: var(--wppb-fb-text-primary); |
| 44 |
margin: var(--wppb-fb-space-xl) 0 0; |
| 45 |
padding: var(--wppb-fb-space-xl); |
| 46 |
} |
| 47 |
|
| 48 |
.wppb-fb-delete-confirm__usage-lead { |
| 49 |
margin: 0; |
| 50 |
font-size: var(--wppb-fb-font-md); |
| 51 |
line-height: 1.5; |
| 52 |
} |
| 53 |
|
| 54 |
// The list of OTHER forms that use this field. No bullets; each form is a |
| 55 |
// row separated by a subtle divider (mockup treatment). |
| 56 |
.wppb-fb-delete-confirm__forms { |
| 57 |
list-style: none; |
| 58 |
margin: var(--wppb-fb-space-lg) 0 0; |
| 59 |
padding: 0; |
| 60 |
|
| 61 |
li { |
| 62 |
font-weight: 400; |
| 63 |
// Reset WP admin's default list-item margin-bottom (~6px). Left in, |
| 64 |
// it lands BELOW the border, so the gap under the divider is larger |
| 65 |
// than above it and the divider reads "high". With margin 0 the |
| 66 |
// symmetric 10px padding centers the divider between rows. |
| 67 |
margin: 0; |
| 68 |
padding: var(--wppb-fb-space-md) 0; |
| 69 |
|
| 70 |
&:not(:last-child) { |
| 71 |
border-bottom: 1px solid rgba(0, 0, 0, 0.08); |
| 72 |
} |
| 73 |
} |
| 74 |
} |
| 75 |
|
| 76 |
// Cancel / Delete button row, right-aligned. |
| 77 |
.wppb-fb-delete-confirm__actions { |
| 78 |
display: flex; |
| 79 |
justify-content: flex-end; |
| 80 |
align-items: center; |
| 81 |
gap: var(--wppb-fb-space-lg); |
| 82 |
margin-top: var(--wppb-fb-space-3xl); |
| 83 |
|
| 84 |
// Cancel — blue text link (WP tertiary uses --wp-admin-theme-color; pin |
| 85 |
// to the Figma accent so it matches the rest of the editor). |
| 86 |
.components-button.is-tertiary { |
| 87 |
color: var(--wppb-fb-accent); |
| 88 |
} |
| 89 |
} |
| 90 |
} |
| 91 |
|
