WorkRoot/WRNexusJS
2
0
Fork 0
Code Issues Pull Requests Actions 27 Packages Projects Releases Wiki Activity

refactor(ui): localize component styles

Browse Source
This commit is contained in:
Clintchiz
2026-08-09 13:47:01 +05:30
parent b6bd5cfcb7
commit 54a93c1d14
37 changed files with 4508 additions and 3832 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/components/Blockquote.wrn
+203
View File
@@ -64,4 +64,207 @@ component Blockquote {
{/if}
</figure>
}
style {
.wire-next--blockquote {
--wire-blockquote-color: var(--wire-component-color, var(--wire-color-primary));
--wire-blockquote-font-size: 1.125rem;
--wire-blockquote-mark-size: 4.25rem;
display: grid;
gap: 1.25rem;
width: 100%;
color: var(--wire-color-text);
text-align: left;
}
.wire-next--blockquote[data-size="xs"] {
--wire-blockquote-font-size: 0.875rem;
--wire-blockquote-mark-size: 3rem;
}
.wire-next--blockquote[data-size="sm"] {
--wire-blockquote-font-size: 1rem;
--wire-blockquote-mark-size: 3.5rem;
}
.wire-next--blockquote[data-size="md"],
.wire-next--blockquote[data-size="default"] {
--wire-blockquote-font-size: 1.125rem;
}
.wire-next--blockquote[data-size="lg"] {
--wire-blockquote-font-size: clamp(1.35rem, 2.4vw, 1.75rem);
--wire-blockquote-mark-size: 5rem;
}
.wire-next--blockquote[data-size="xl"] {
--wire-blockquote-font-size: clamp(1.65rem, 3vw, 2.25rem);
--wire-blockquote-mark-size: 5.75rem;
}
.wire-next--blockquote > blockquote {
position: relative;
display: block;
min-width: 0;
margin: 0;
padding-top: calc(var(--wire-blockquote-mark-size) * 0.78);
}
.wire-next__blockquote-mark {
position: absolute;
top: 0;
inset-inline: 0;
display: block;
width: 100%;
color: color-mix(in srgb, var(--wire-blockquote-color) 28%, var(--wire-color-text));
font-family: Georgia, "Times New Roman", serif;
font-size: var(--wire-blockquote-mark-size);
font-style: normal;
font-weight: 700;
line-height: 0.8;
text-align: start;
user-select: none;
}
.wire-next__blockquote-copy {
min-width: 0;
font-family: Georgia, "Times New Roman", serif;
font-size: var(--wire-blockquote-font-size);
line-height: 1.55;
text-wrap: pretty;
}
.wire-next--blockquote[data-italic="true"] .wire-next__blockquote-copy {
font-style: italic;
}
.wire-next__blockquote-copy > :first-child {
margin-top: 0;
}
.wire-next__blockquote-copy > :last-child {
margin-bottom: 0;
}
.wire-next__blockquote-citation {
display: inline-flex;
gap: 0.75rem;
align-items: center;
width: fit-content;
margin-inline-start: 0;
color: var(--wire-color-muted);
font-size: 0.875rem;
line-height: 1.35;
}
.wire-next__blockquote-avatar {
width: 2.5rem;
height: 2.5rem;
flex: 0 0 auto;
border: 2px solid color-mix(in srgb, var(--wire-blockquote-color) 35%, transparent);
border-radius: 999px;
object-fit: cover;
}
.wire-next__blockquote-attribution {
display: grid;
gap: 0.15rem;
}
.wire-next__blockquote-attribution cite {
color: var(--wire-color-text);
font-style: normal;
font-weight: 700;
}
.wire-next__blockquote-attribution a {
color: inherit;
text-decoration-color: color-mix(in srgb, var(--wire-blockquote-color) 55%, transparent);
text-underline-offset: 0.2em;
}
.wire-next__blockquote-attribution a:hover {
color: var(--wire-blockquote-color);
}
.wire-next--blockquote[data-align="center"] {
text-align: center;
}
.wire-next--blockquote[data-align="right"],
.wire-next--blockquote[data-align="end"] {
text-align: right;
}
.wire-next--blockquote[data-align="center"] > blockquote,
.wire-next--blockquote[data-align="right"] > blockquote,
.wire-next--blockquote[data-align="end"] > blockquote {
text-align: inherit;
}
.wire-next--blockquote[data-align="center"] .wire-next__blockquote-mark {
text-align: center;
}
.wire-next--blockquote[data-align="right"] .wire-next__blockquote-mark,
.wire-next--blockquote[data-align="end"] .wire-next__blockquote-mark {
text-align: end;
}
.wire-next--blockquote[data-align="center"] .wire-next__blockquote-citation {
margin-inline: auto;
}
.wire-next--blockquote[data-align="right"] .wire-next__blockquote-citation,
.wire-next--blockquote[data-align="end"] .wire-next__blockquote-citation {
margin-inline-start: auto;
}
.wire-next--blockquote[data-variant="bordered"],
.wire-next--blockquote[data-variant="border"],
.wire-next--blockquote[data-variant="left-border"] {
padding-inline-start: 1.5rem;
border-inline-start: 4px solid var(--wire-blockquote-color);
}
.wire-next--blockquote[data-variant="bordered"] .wire-next__blockquote-mark,
.wire-next--blockquote[data-variant="border"] .wire-next__blockquote-mark,
.wire-next--blockquote[data-variant="left-border"] .wire-next__blockquote-mark {
display: none;
}
.wire-next--blockquote[data-variant="bordered"] > blockquote,
.wire-next--blockquote[data-variant="border"] > blockquote,
.wire-next--blockquote[data-variant="left-border"] > blockquote {
display: block;
padding-top: 0;
}
.wire-next--blockquote[data-variant="bordered"] .wire-next__blockquote-copy,
.wire-next--blockquote[data-variant="border"] .wire-next__blockquote-copy,
.wire-next--blockquote[data-variant="left-border"] .wire-next__blockquote-copy {
padding-top: 0;
}
.wire-next--blockquote[data-variant="bordered"] .wire-next__blockquote-citation,
.wire-next--blockquote[data-variant="border"] .wire-next__blockquote-citation,
.wire-next--blockquote[data-variant="left-border"] .wire-next__blockquote-citation {
margin-inline-start: 0;
}
@media (max-width: 480px) {
.wire-next--blockquote {
--wire-blockquote-mark-size: 3.25rem;
--wire-blockquote-font-size: 1rem;
gap: 1rem;
}
.wire-next--blockquote[data-size="lg"],
.wire-next--blockquote[data-size="xl"] {
--wire-blockquote-font-size: 1.25rem;
}
.wire-next__blockquote-citation {
margin-inline-start: 0;
}
}
}
}