diff --git a/lib/components/SContent.vue b/lib/components/SContent.vue index 7737e9da..5459bf32 100644 --- a/lib/components/SContent.vue +++ b/lib/components/SContent.vue @@ -110,4 +110,38 @@ font-feature-settings: "tnum"; content: counter(s-medium-counter)". "; } + +.SContent :deep(table) { + box-shadow: 0 0 0 1px var(--c-divider); + table-layout: fixed; + overflow: clip; + width: 100%; + margin: 4px 0; + border-style: hidden; + border-radius: 6px; + font-size: 14px; + color: var(--c-text-1); + text-align: left; +} + +.SContent :deep(table th), +.SContent :deep(table td) { + overflow-wrap: break-word; + height: 40px; + padding: 8px 16px; + background-color: var(--c-bg-elv-3); + border: 1px solid var(--c-gutter); + text-wrap: pretty; +} + +.SContent :deep(table th) { + font-size: 12px; + font-weight: 600; + color: var(--c-text-2); + text-wrap: balance; +} + +.SContent :deep(table tr:hover td) { + background-color: var(--c-bg-elv-4); +} diff --git a/stories/components/SContent.01_Playground.story.vue b/stories/components/SContent.01_Playground.story.vue index 2ec44f28..65a8eb8f 100644 --- a/stories/components/SContent.01_Playground.story.vue +++ b/stories/components/SContent.01_Playground.story.vue @@ -41,6 +41,33 @@ const docs = '/components/content'
Header 1 | +Header 2 | +Header 3 | +
---|---|---|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. | +Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. | +Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris. | +
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum. | +Excepteur sint occaecat cupidatat non proident, sunt in culpa qui. | +Lorem ipsum dolor sit amet, consectetur adipiscing elit. | +
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. | +Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris. | +Duis aute irure dolor in reprehenderit in voluptate velit esse cillum. | +