187 lines
4.3 KiB
CSS
187 lines
4.3 KiB
CSS
/* ========================================================= */
|
|
/* Layouts: Card Listen Seite */
|
|
/* ========================================================= */
|
|
|
|
.sg-card-list-page {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.sg-card-list-page-drawer {
|
|
position: fixed;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
width: var(--layout-card-list-drawer-width);
|
|
max-width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
transform: translateX(100%);
|
|
transition: transform 220ms ease;
|
|
background: var(--surface-card-list-drawer);
|
|
color: var(--text-card-list-drawer);
|
|
box-shadow: var(--shadow-overlay);
|
|
z-index: 1000;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.sg-card-list-page-drawer[data-open="true"] {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
.sg-card-list-page-drawer__header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--spacing-small);
|
|
padding:
|
|
var(--card-segment-padding-vertical)
|
|
var(--layout-page-content-inset-inline);
|
|
}
|
|
|
|
.sg-card-list-page-drawer__title {
|
|
margin: 0;
|
|
color: inherit;
|
|
}
|
|
|
|
.sg-card-list-page-drawer__content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-large);
|
|
padding:
|
|
var(--card-segment-padding-vertical)
|
|
var(--layout-page-content-inset-inline)
|
|
var(--card-segment-padding-vertical)
|
|
var(--layout-page-content-inset-inline);
|
|
}
|
|
|
|
.sg-card-list-page > * + * {
|
|
margin-top: var(--spacing-large);
|
|
}
|
|
|
|
.sg-card-list-page > .sg-options-row {
|
|
margin-top: var(--layout-options-row-margin-top);
|
|
}
|
|
|
|
.sg-card-list-page > .sg-card-list-page__intro-block {
|
|
margin-top: calc(var(--spacing-large) - 0.5rem);
|
|
}
|
|
|
|
.sg-card-list-page__intro-block {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-large);
|
|
padding-bottom: calc(var(--spacing-large) - 0.25rem);
|
|
}
|
|
|
|
.sg-card-list-page__title-row {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--spacing-small);
|
|
width: fit-content;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.sg-card-list-page__intro-block .sg-text-layout-pattern__sample--sixty-width {
|
|
width: min(60vw, 100%);
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
.sg-card-list-page-drawer {
|
|
display: none;
|
|
}
|
|
|
|
.sg-card-list-page__intro-block .sg-text-layout-pattern__sample--sixty-width {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.sg-card-list-page__object-grid,
|
|
.sg-card-list-page__navigation {
|
|
width: 100%;
|
|
}
|
|
|
|
.sg-vsf-drawer-card {
|
|
--surface-card-header-primary: var(--surface-vsf-drawer-object-card-header);
|
|
--surface-card: var(--surface-vsf-drawer-object-card-body);
|
|
--surface-card-body: var(--surface-vsf-drawer-object-card-body);
|
|
--text-card-header: var(--text-vsf-drawer-object-card-heading);
|
|
--text-card-body: var(--text-vsf-drawer-object-card-body);
|
|
width: 100%;
|
|
min-width: 0;
|
|
max-width: none;
|
|
align-self: stretch;
|
|
height: auto;
|
|
}
|
|
|
|
.sg-vsf-drawer-card__content {
|
|
color: var(--text-vsf-drawer-object-card-body);
|
|
}
|
|
|
|
.sg-vsf-drawer-card .sg-text-layout-pattern__two-column,
|
|
.sg-vsf-drawer-card .sg-text-layout-pattern__column {
|
|
color: var(--text-vsf-drawer-object-card-body);
|
|
}
|
|
|
|
.sg-vsf-drawer-card .sg-text-layout-pattern__two-column {
|
|
gap: var(--layout-vsf-drawer-object-card-column-gap);
|
|
}
|
|
|
|
.sg-vsf-drawer-card__actions-segment {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
justify-content: flex-start;
|
|
gap: var(--spacing-large);
|
|
background: var(--surface-vsf-drawer-object-card-body);
|
|
}
|
|
|
|
.sg-vsf-drawer-card__actions-segment .sg-interaction-element.sg-button {
|
|
height: auto;
|
|
width: 100%;
|
|
}
|
|
|
|
#vsf-business-model-toggle.sg-interaction-element.sg-button {
|
|
background: var(--surface-portal-header-tab);
|
|
color: var(--text-portal-header-tab);
|
|
}
|
|
|
|
.sg-inline-controls-card {
|
|
--surface-card-body: var(--surface-card-segment-neutral);
|
|
}
|
|
|
|
.sg-card-segment.sg-inline-header-row {
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--spacing-small);
|
|
}
|
|
|
|
.sg-card-segment.sg-inline-controls-row {
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
gap: var(--spacing-small);
|
|
flex-wrap: nowrap;
|
|
}
|
|
|
|
.sg-vsf-drawer-object-card__heading {
|
|
color: var(--text-vsf-drawer-object-card-heading);
|
|
margin: 0;
|
|
}
|
|
|
|
.sg-analysis-intro-block {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-small);
|
|
}
|
|
|
|
.sg-analysis-intro-block .sg-heading-h2 {
|
|
margin: 0;
|
|
}
|
|
|
|
.sg-analysis-intro-block .sg-text-layout-pattern__sample {
|
|
margin: 0;
|
|
color: var(--text-vsf-drawer-object-card-body);
|
|
}
|