-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(style): refine entire component styles (#191)
Co-authored-by: Suyeon Woo <[email protected]> Co-authored-by: Suyeon Woo <[email protected]> Co-authored-by: Yerin Park <[email protected]> Co-authored-by: 박예린 <[email protected]>
- Loading branch information
5 people
authored
Jun 3, 2024
1 parent
90cd693
commit 3d62374
Showing
211 changed files
with
3,204 additions
and
1,389 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,16 +1,71 @@ | ||
| <template> | ||
| <vs-page> | ||
| <template #title>Vlossom Playground</template> | ||
| <vs-layout> | ||
| <vs-header | ||
| class="header" | ||
| position="fixed" | ||
| primary | ||
| height="60px" | ||
| :style-set="{ backgroundColor: 'black', fontColor: 'white' }" | ||
| > | ||
| <div class="logo"> | ||
| <vs-image src="/assets/vlossom-logo.png" :style-set="{ height: '40px', width: '40px' }" /> | ||
| <span>Vlossom</span> | ||
| </div> | ||
| <vs-theme-button /> | ||
| </vs-header> | ||
|
|
||
| Hello Vlossom! | ||
| </vs-page> | ||
| <vs-container> | ||
| <vs-page> | ||
| <template #title>Vlossom Playground</template> | ||
|
|
||
| <vs-section> | ||
| <template #title>Hello Vlossom!</template> | ||
|
|
||
| Vlossom is a Vue 3 component library that provides a set of high-quality components and themes for | ||
| your Vue 3 applications. | ||
| </vs-section> | ||
| </vs-page> | ||
| </vs-container> | ||
|
|
||
| <vs-footer | ||
| class="footer" | ||
| :style-set="{ backgroundColor: 'black', fontColor: '#dfdfdf' }" | ||
| height="30px" | ||
| position="fixed" | ||
| > | ||
| <span>© {{ currentYear }} Vlossom</span> | ||
| </vs-footer> | ||
| </vs-layout> | ||
| </template> | ||
|
|
||
| <script lang="ts"> | ||
| export default { | ||
| name: 'Playground', | ||
| setup() { | ||
| return {}; | ||
| const currentYear = new Date().getFullYear(); | ||
| return { currentYear }; | ||
| }, | ||
| }; | ||
| </script> | ||
|
|
||
| <style lang="scss" scoped> | ||
| .header { | ||
| display: flex; | ||
| justify-content: space-between; | ||
| .logo { | ||
| display: flex; | ||
| align-items: center; | ||
| span { | ||
| font-size: 1.5rem; | ||
| font-weight: bold; | ||
| margin-left: 10px; | ||
| } | ||
| } | ||
| } | ||
| .footer { | ||
| font-size: 12px; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
31 changes: 31 additions & 0 deletions
31
packages/vlossom/src/components/vs-avatar/stories/VsAvatar.chromatic.stories.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| import { colorScheme } from '@/storybook'; | ||
| import VsAvatar from './../VsAvatar.vue'; | ||
|
|
||
| import type { Meta, StoryObj } from '@storybook/vue3'; | ||
|
|
||
| const meta: Meta<typeof VsAvatar> = { | ||
| title: 'Chromatic/Base Components/VsAvatar', | ||
| component: VsAvatar, | ||
| render: (args: any) => ({ | ||
| components: { VsAvatar }, | ||
| setup() { | ||
| return { args }; | ||
| }, | ||
| template: ` | ||
| <div style="display:flex; align-items:center;"> | ||
| <vs-avatar v-bind="args">VS</vs-avatar> | ||
| <vs-avatar v-bind="args"> | ||
| <img src="https://upload.wikimedia.org/wikipedia/en/a/a6/Pok%C3%A9mon_Pikachu_art.png" alt="pikachu"> | ||
| </vs-avatar> | ||
| </div>`, | ||
| }), | ||
| argTypes: { | ||
| colorScheme, | ||
| }, | ||
| }; | ||
|
|
||
| export default meta; | ||
| type Story = StoryObj<typeof VsAvatar>; | ||
|
|
||
| export const Default: Story = {}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
32 changes: 32 additions & 0 deletions
32
packages/vlossom/src/components/vs-block/stories/VsBlock.chromatic.stories.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| import { colorScheme } from '@/storybook'; | ||
| import VsBlock from './../VsBlock.vue'; | ||
|
|
||
| import type { Meta, StoryObj } from '@storybook/vue3'; | ||
|
|
||
| const meta: Meta<typeof VsBlock> = { | ||
| title: 'Chromatic/Layout Components/VsBlock', | ||
| component: VsBlock, | ||
| render: (args: any) => ({ | ||
| components: { VsBlock }, | ||
| setup() { | ||
| return { args }; | ||
| }, | ||
| template: ` | ||
| <div> | ||
| <vs-block v-bind="args":style="{ marginBottom: '12px' }">This is block content</vs-block> | ||
| <vs-block v-bind="args":style="{ marginBottom: '12px' }"> | ||
| <template #title>This is block title</template> | ||
| This is block content | ||
| </vs-block> | ||
| </div>`, | ||
| }), | ||
| argTypes: { | ||
| colorScheme, | ||
| }, | ||
| }; | ||
|
|
||
| export default meta; | ||
| type Story = StoryObj<typeof VsBlock>; | ||
|
|
||
| export const Default: Story = {}; |
Oops, something went wrong.