Content added Content deleted
mNo edit summary |
mNo edit summary |
||
Line 4: | Line 4: | ||
grid-template-areas: "icon name" |
grid-template-areas: "icon name" |
||
"icon text"; |
"icon text"; |
||
grid-gap: 0 |
grid-gap: 0 15px; |
||
width: 50em; |
width: 50em; |
||
max-width: 100%; |
max-width: 100%; |
||
Line 13: | Line 13: | ||
.dialogue-icon { |
.dialogue-icon { |
||
grid-area: icon; |
grid-area: icon; |
||
padding-top: 5px; |
|||
justify-self: right; |
justify-self: right; |
||
} |
} |
Revision as of 08:29, 11 December 2021
.dialogue {
display: grid;
grid-template-columns: 100px 1fr;
grid-template-areas: "icon name"
"icon text";
grid-gap: 0 15px;
width: 50em;
max-width: 100%;
align-content: center;
margin: 1em 0;
}
.dialogue-icon {
grid-area: icon;
padding-top: 5px;
justify-self: right;
}
.dialogue-name {
grid-area: name;
}
.dialogue-text {
grid-area: text;
padding: 0.5em 1em;
background: var(--color-surface-2);
border: 1px solid var(--color-surface-3);
border-radius: var(--border-radius--medium);
}