Sync styleguide 2026.05.18.1

This commit is contained in:
2026-06-15 13:59:31 +02:00
parent 2a6487aae9
commit e4277b1867
16 changed files with 617 additions and 114 deletions
@@ -40,12 +40,14 @@
.sg-delete-confirmation-pattern__floating-card {
position: absolute;
top: 50%;
top: var(--layout-delete-confirmation-overlay-offset-block-start);
left: 50%;
transform: translate(-50%, -50%);
transform: translateX(-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));
max-height: var(--layout-delete-confirmation-overlay-max-height);
overflow: auto;
z-index: var(--layer-delete-confirmation-overlay);
box-shadow: var(--shadow-overlay);
}
@@ -61,6 +63,73 @@
background: var(--surface-delete-confirmation-overlay);
}
.sg-delete-confirmation-pattern__list {
display: grid;
gap: var(--spacing-small);
margin: 0;
margin-top: var(--spacing-large);
padding: 0;
list-style: none;
}
.sg-delete-confirmation-pattern__list-item {
margin: 0;
}
.sg-delete-confirmation-pattern__list-button {
display: inline-flex;
width: 100%;
justify-content: flex-start;
gap: var(--spacing-small);
font-weight: var(--font-weight-regular);
color: var(--text-delete-confirmation-overlay);
background: var(--surface-control-inactive);
}
.sg-delete-confirmation-pattern__list-button[data-selected="true"] {
background: var(--surface-control-active);
}
.sg-delete-confirmation-pattern__list-button[data-selected="false"] {
background: var(--surface-control-inactive);
}
.sg-delete-confirmation-pattern__list-icon {
display: block;
flex: 0 0 auto;
width: 1rem;
height: 1rem;
background: center / contain no-repeat;
}
.sg-delete-confirmation-pattern__list-button[data-selected="true"] .sg-delete-confirmation-pattern__list-icon {
background-image: url("../assets/icons/star-filled.svg");
}
.sg-delete-confirmation-pattern__list-button[data-selected="false"] .sg-delete-confirmation-pattern__list-icon {
background-image: url("../assets/icons/star-outline.svg");
}
.sg-delete-confirmation-pattern__create-list-form {
margin-top: 0;
}
.sg-delete-confirmation-pattern__create-list-segment {
gap: 0;
}
.sg-delete-confirmation-pattern__create-list-title {
margin: 0 0 var(--spacing-large) 0;
}
.sg-delete-confirmation-pattern__create-list-form[hidden] {
display: none;
}
.sg-delete-confirmation-pattern__create-list-segment[hidden] {
display: none;
}
.sg-delete-confirmation-pattern__text {
margin: 0;
color: var(--text-delete-confirmation-overlay);