75 lines
1.8 KiB
CSS
75 lines
1.8 KiB
CSS
|
.panel {
|
||
|
|
--panel-body-background: var(--color-surface);
|
||
|
|
--panel-border-color: var(--color-brand-accent);
|
||
|
|
--panel-border-width: var(--border-medium);
|
||
|
|
--panel-heading-background: var(--color-brand-accent);
|
||
|
|
--panel-heading-border: var(--panel-border-color);
|
||
|
|
--panel-heading-color: var(--color-text-on-bright);
|
||
|
|
|
||
|
|
background: var(--panel-body-background);
|
||
|
|
border: var(--panel-border-width) solid var(--panel-border-color);
|
||
|
|
border-radius: var(--radius-panel);
|
||
|
|
box-shadow: var(--surface-shadow);
|
||
|
|
overflow: hidden;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.panel--soft {
|
||
|
|
--panel-border-color: var(--color-panel-accent);
|
||
|
|
--panel-border-width: var(--border-thin);
|
||
|
|
--panel-heading-background: var(--color-panel-accent);
|
||
|
|
--panel-heading-border: var(--color-panel-rule);
|
||
|
|
--panel-heading-color: var(--color-brand);
|
||
|
|
}
|
||
|
|
|
||
|
|
.panel--strong {
|
||
|
|
--panel-body-background: var(--color-surface);
|
||
|
|
}
|
||
|
|
|
||
|
|
.panel__heading {
|
||
|
|
align-items: baseline;
|
||
|
|
background: var(--panel-heading-background);
|
||
|
|
border-bottom: var(--border-thin) solid var(--panel-heading-border);
|
||
|
|
color: var(--panel-heading-color);
|
||
|
|
display: grid;
|
||
|
|
gap: var(--space-6);
|
||
|
|
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
|
||
|
|
min-width: 0;
|
||
|
|
padding: var(--space-1) var(--space-4);
|
||
|
|
}
|
||
|
|
|
||
|
|
.panel__heading h1,
|
||
|
|
.panel__heading h2,
|
||
|
|
.panel__heading h3,
|
||
|
|
.panel__heading h4 {
|
||
|
|
display: inline-block;
|
||
|
|
font-size: var(--font-size-panel-heading);
|
||
|
|
grid-column: 2;
|
||
|
|
justify-self: center;
|
||
|
|
line-height: var(--line-height-body);
|
||
|
|
margin: 0;
|
||
|
|
min-width: 0;
|
||
|
|
overflow-wrap: anywhere;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.panel__body {
|
||
|
|
align-content: start;
|
||
|
|
background: var(--panel-body-background);
|
||
|
|
display: grid;
|
||
|
|
gap: var(--panel-body-gap);
|
||
|
|
padding: var(--space-4);
|
||
|
|
}
|
||
|
|
|
||
|
|
.panel__body > * {
|
||
|
|
margin-block: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.panel__action {
|
||
|
|
flex: 0 0 auto;
|
||
|
|
font-size: var(--font-size-caption);
|
||
|
|
grid-column: 3;
|
||
|
|
justify-self: end;
|
||
|
|
text-align: right;
|
||
|
|
}
|