Add delete confirmation overlay pattern with tokens and docs

2026-05-28 08:51:04 +02:00
parent 9e16eb5480
commit bf7a6675fb
6 changed files with 170 additions and 0 deletions
@@ -0,0 +1,66 @@
+/* ========================================================= */
+/* Patterns: Delete Confirmation Overlay                     */
+/* ========================================================= */
+
+.sg-delete-confirmation-pattern {
+  width: 100%;
+  max-width: var(--layout-delete-confirmation-target-max-width);
+}
+
+.sg-delete-confirmation-pattern__stage {
+  position: relative;
+}
+
+.sg-delete-confirmation-pattern__target {
+  filter: brightness(var(--layout-delete-confirmation-target-dim-factor));
+}
+
+.sg-delete-confirmation-pattern__floating-card {
+  position: absolute;
+  top: var(--layout-delete-confirmation-overlay-offset-block-start);
+  left: 50%;
+  transform: translateX(-50%);
+  width: min(100%, var(--layout-delete-confirmation-overlay-max-width));
+  z-index: var(--layer-delete-confirmation-overlay);
+  box-shadow: var(--shadow-overlay);
+}
+
+.sg-delete-confirmation-pattern__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--layout-delete-confirmation-content-gap);
+  background: var(--surface-delete-confirmation-overlay);
+}
+
+.sg-delete-confirmation-pattern__text {
+  margin: 0;
+  color: var(--text-delete-confirmation-overlay);
+}
+
+.sg-delete-confirmation-pattern__code {
+  font-weight: var(--font-weight-semibold);
+}
+
+.sg-delete-confirmation-pattern__input-row {
+  margin: 0;
+}
+
+.sg-delete-confirmation-pattern__input-row .sg-label {
+  min-width: var(--layout-delete-confirmation-label-width);
+}
+
+.sg-delete-confirmation-pattern__actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--layout-delete-confirmation-actions-gap);
+}
+
+@media (max-width: 48rem) {
+  .sg-delete-confirmation-pattern__floating-card {
+    width: 100%;
+  }
+
+  .sg-delete-confirmation-pattern__actions {
+    flex-wrap: wrap;
+  }
+}