Sync styleguide 2026.05.18.1

2026-06-03 16:25:03 +02:00
parent 70272e81d6
commit 543d3e5af5
66 changed files with 22706 additions and 0 deletions
@@ -0,0 +1,88 @@
+/* ========================================================= */
+/* Patterns: Overlay Card                                    */
+/* ========================================================= */
+
+.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__host {
+  display: flex;
+  flex-direction: column;
+}
+
+.sg-delete-confirmation-pattern__host > .sg-delete-confirmation-pattern__target {
+  flex: 1 1 auto;
+}
+
+.sg-delete-confirmation-pattern__target {
+  position: relative;
+  overflow: hidden;
+}
+
+.sg-delete-confirmation-pattern__target::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: var(--surface-delete-confirmation-target-dim-overlay);
+  opacity: 0;
+  pointer-events: none;
+}
+
+.sg-delete-confirmation-pattern__stage[data-dialog-open="true"] .sg-delete-confirmation-pattern__target::after {
+  opacity: var(--layout-delete-confirmation-target-dim-opacity);
+}
+
+.sg-delete-confirmation-pattern__floating-card {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: calc(100% * var(--layout-delete-confirmation-overlay-width-factor));
+  box-sizing: border-box;
+  max-width: calc(100% * var(--layout-delete-confirmation-overlay-width-factor));
+  z-index: var(--layer-delete-confirmation-overlay);
+  box-shadow: var(--shadow-overlay);
+}
+
+.sg-delete-confirmation-pattern__floating-card[hidden] {
+  display: none;
+}
+
+.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: var(--spacing-large) 0 0 0;
+}
+
+.sg-delete-confirmation-pattern__actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--layout-delete-confirmation-actions-gap);
+  margin-top: var(--layout-delete-confirmation-actions-offset-block-start);
+}
+
+@media (max-width: 48rem) {
+  .sg-delete-confirmation-pattern__actions {
+    flex-wrap: wrap;
+  }
+}