diff --git a/blocks/card/card.css b/blocks/card/card.css index a42d35a6..b33dbe3d 100644 --- a/blocks/card/card.css +++ b/blocks/card/card.css @@ -21,7 +21,6 @@ raqn-card > div { position: relative; background-color: var(--scope-inner-background, transparent); padding: var(--scope-inner-padding, 20px); - padding-block-end: var(--scope-icon-size, 20px); } raqn-card > div div:last-child > a { @@ -36,6 +35,11 @@ raqn-card > div div:last-child > a { padding: 0; } +raqn-card > div:has(raqn-icon) { + padding-block-end: 0; + padding-block-end: var(--scope-icon-size, 20px); +} + raqn-card p:has(raqn-icon) { display: inline-grid; } diff --git a/blocks/theme/theme.js b/blocks/theme/theme.js index 966ea9d1..60fbf990 100644 --- a/blocks/theme/theme.js +++ b/blocks/theme/theme.js @@ -78,12 +78,10 @@ export default class Theme extends ComponentBase { } else { variable = `\n--raqn-${this.getKey(key)}-${row}: ${this.escapeHtml( value, - ).trim()};\n`; - this.atomic += `\nbody .${this.getKey( + ).trim()};`; + this.atomic += `body .${this.getKey(key)}-${row} {--scope-${this.getKey( key, - )}-${row} {\n--scope-${this.getKey(key)}: var(--raqn-${this.getKey( - key, - )}-${row});}\n`; + )}: var(--raqn-${this.getKey(key)}-${row});}\n`; } } return variable; @@ -119,9 +117,7 @@ export default class Theme extends ComponentBase { (theme) => `.theme-${theme} {${k(t) .filter((key) => ![...this.skip, ...this.toTags].includes(key)) .map((key) => - t[key][theme] - ? `\n--scope-${key}: var(--raqn-${key}-${theme});` - : '', + t[key][theme] ? `--scope-${key}: var(--raqn-${key}-${theme});` : '', ) .filter((v) => v !== '') .join('')} @@ -129,19 +125,22 @@ export default class Theme extends ComponentBase { ) .join(''); - this.variables = k(t) + this.variables = `body{${k(t) .filter((key) => ![...this.skip].includes(key)) .map((key) => { const rows = k(t[key]); return rows.map((row) => this.renderVariables(key, row, t)).join(''); }) - .join(''); + .join('')}}`; } styles() { - const style = document.createElement('style'); - style.innerHTML = `${this.fontFace}body {${this.variables}}${this.tags}${this.atomic}${this.themes}`; - document.head.appendChild(style); + ['variables', 'tags', 'atomic', 'themes'].forEach((cssSegment) => { + const style = document.createElement('style'); + style.innerHTML = this[cssSegment]; + style.classList.add(cssSegment); + document.head.appendChild(style); + }); document.body.classList.add('theme-default'); document.body.style.display = 'block'; } diff --git a/styles/styles.css b/styles/styles.css index 7b885531..a339e9d8 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -156,7 +156,7 @@ h3, h4, h5, h6 { - margin-block: var(--scope-font-block-margins, 1em); + margin-block: var(--scope-margin-block, 1em); } @media screen and (min-width: 1024px) {