Add VSF drawer object card with two-column white detail text
This commit is contained in:
@@ -180,6 +180,11 @@
|
||||
--text-content-block-card-content: var(--color-font-dark);
|
||||
--text-card-list-drawer: var(--color-font-dark);
|
||||
--layout-card-list-drawer-width: var(--dimension-card-list-drawer-width);
|
||||
--surface-vsf-drawer-object-card-header: var(--color-darkblue);
|
||||
--surface-vsf-drawer-object-card-body: var(--color-darkblue);
|
||||
--text-vsf-drawer-object-card-heading: var(--color-font-light);
|
||||
--text-vsf-drawer-object-card-body: var(--color-font-light);
|
||||
--layout-vsf-drawer-object-card-column-gap: var(--spacing-large);
|
||||
|
||||
/* Typography */
|
||||
--font-family-base: "Open Sans", sans-serif;
|
||||
@@ -2080,6 +2085,27 @@ section + section {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sg-vsf-drawer-object-card {
|
||||
--surface-card-header-primary: var(--surface-vsf-drawer-object-card-header);
|
||||
--surface-object-card-lower-segment: 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);
|
||||
}
|
||||
|
||||
.sg-vsf-drawer-object-card .sg-card-segment--body.sg-object-card__content {
|
||||
color: var(--text-vsf-drawer-object-card-body);
|
||||
}
|
||||
|
||||
.sg-vsf-drawer-object-card__text.sg-text-layout-pattern__sample--two-column {
|
||||
color: var(--text-vsf-drawer-object-card-body);
|
||||
column-gap: var(--layout-vsf-drawer-object-card-column-gap);
|
||||
}
|
||||
|
||||
.sg-vsf-drawer-object-card__heading {
|
||||
color: var(--text-vsf-drawer-object-card-heading);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ========================================================= */
|
||||
/* Patterns: Text Layouts */
|
||||
/* ========================================================= */
|
||||
|
||||
Reference in New Issue
Block a user