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
+2 -1
View File
@@ -217,7 +217,8 @@
--text-delete-confirmation-overlay: var(--color-font-dark);
--layout-delete-confirmation-target-max-width: 35rem;
--layout-delete-confirmation-overlay-width-factor: 0.8;
--layout-delete-confirmation-overlay-offset-block-start: var(--spacing-large);
--layout-delete-confirmation-overlay-offset-block-start: 10%;
--layout-delete-confirmation-overlay-max-height: calc(100vh - 10vh);
--layout-delete-confirmation-content-gap: var(--spacing-small);
--layout-delete-confirmation-actions-gap: var(--spacing-small);
--layout-delete-confirmation-actions-offset-block-start: var(--spacing-large);
@@ -1028,7 +1028,14 @@
}
.sg-sandwich-menu-wrap[data-component-size="small"] .sg-sandwich-button__icon {
display: block;
width: calc(var(--sandwich-line-width) - 3px);
height: calc(var(--sandwich-line-width) - 3px);
background: url("../assets/icons/star-filled.svg") no-repeat center / contain;
}
.sg-sandwich-menu-wrap[data-component-size="small"] .sg-sandwich-button__line {
display: none;
}
.sg-sandwich-menu-wrap {
@@ -31,6 +31,21 @@
color: var(--color-font-light);
}
.sg-company-card__header-title {
display: inline-flex;
align-items: center;
gap: var(--spacing-large);
min-width: 0;
}
.sg-company-card__header-star {
display: inline-block;
flex: 0 0 auto;
inline-size: 1em;
block-size: 1em;
background: url("../assets/icons/star-filled-white.svg") no-repeat center / contain;
}
.sg-company-card__metric-negative {
color: var(--text-company-card-data-negative);
}
@@ -36,7 +36,7 @@
}
.sg-form-sections-card__actions-segment {
margin-top: var(--spacing-large);
margin-top: calc(var(--spacing-large) - var(--card-segment-padding-vertical));
padding: 0;
}
@@ -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);