Skip to content

Commit

Permalink
feat: table utility class
Browse files Browse the repository at this point in the history
  • Loading branch information
paring-chan committed Oct 13, 2024
1 parent 7d7689a commit 1df3b22
Show file tree
Hide file tree
Showing 3 changed files with 77 additions and 0 deletions.
1 change: 1 addition & 0 deletions src/lib/stylesheets/globals.scss
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
@import 'components/panel';

@import 'utils/grid';
@import 'utils/table';

$normal_font: 'IBM Plex Sans KR', sans-serif;

Expand Down
24 changes: 24 additions & 0 deletions src/lib/stylesheets/utils/_table.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
.table {
th {
font-weight: 600;
font-size: 14px;
line-height: 140%;
padding: 6px 4px;
}

thead {
border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

tbody tr {
border-bottom: 1px solid rgba(255, 255, 255, 0.1);

th,
td {
padding: 12px 4px;
font-size: 14px;
font-weight: 400;
font-weight: 140%;
}
}
}
52 changes: 52 additions & 0 deletions src/stories/Table.stories.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
<script lang="ts" module>
import { defineMeta } from '@storybook/addon-svelte-csf'
const { Story } = defineMeta({
title: 'Utils/Table'
})
</script>

<Story name="Default">
<table class="table" style="width: 100%;">
<thead>
<tr>
<th align="left">Col 1</th>
<th align="left">Col 2</th>
<th align="left">Col 3</th>
<th align="left">Col 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Wow</td>
<td>Sans</td>
<td>GanjangFactory</td>
<td>Hello</td>
</tr>
<tr>
<td>Wow</td>
<td>Sans</td>
<td>GanjangFactory</td>
<td>Hello</td>
</tr>
<tr>
<td>Wow</td>
<td>Sans</td>
<td>GanjangFactory</td>
<td>Hello</td>
</tr>
<tr>
<td>Wow</td>
<td>Sans</td>
<td>GanjangFactory</td>
<td>Hello</td>
</tr>
<tr>
<td>Wow</td>
<td>Sans</td>
<td>GanjangFactory</td>
<td>Hello</td>
</tr>
</tbody>
</table>
</Story>

0 comments on commit 1df3b22

Please sign in to comment.