{{ header }}
10 |{{ description }}
11 |No Preview
Sorry, but you either have no stories or none are selected somehow.
- Please check the Storybook config.
- Try reloading the page.
If the problem persists, check the browser console, or the terminal you've run Storybook from.
3 |
8 |
28 |
29 |
30 |
71 |
72 |
92 |
93 |
--------------------------------------------------------------------------------
/src/Chip.vue:
--------------------------------------------------------------------------------
1 |
2 |
9 |
27 |
3 |
6 |
8 |
9 |
10 |
46 |
47 |
67 |
68 |
--------------------------------------------------------------------------------
/src/NavBar.vue:
--------------------------------------------------------------------------------
1 |
2 |
50 |
51 |
52 |
147 |
182 |
183 |
--------------------------------------------------------------------------------
/src/components.js:
--------------------------------------------------------------------------------
1 | import Button from "./Button.vue";
2 |
3 | export default { Button };
4 |
--------------------------------------------------------------------------------
/src/global.css:
--------------------------------------------------------------------------------
1 | @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");
2 | @import url("https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined");
3 |
4 | * {
5 | margin: 0;
6 | padding: 0;
7 | transition: 0.1s;
8 | -webkit-tap-highlight-color: transparent;
9 | }
10 |
11 | .dark {
12 | --a-source: #f83f5b;
13 | --a-lighter: #ffdadc;
14 | --a-light: #ffb2b7;
15 | --a-dark: #920025;
16 | --a-darker: #670017;
17 | --bg-1: #201a1a;
18 | --bg-2: #44292a;
19 | --bg-3: #432c05;
20 | --txt-1: #ecdfdf;
21 | --txt-2: #e6bcbd;
22 | --txt-3: #e6c08d;
23 | --outline: #938f99;
24 | --shadow-1: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
25 | --shadow-2: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
26 | }
27 |
28 | .light {
29 | --a-source: #f83f5b;
30 | --a-lighter: #41000b;
31 | --a-light: #bd0636;
32 | --a-dark: #f09db4;
33 | --a-darker: #ffdadc;
34 | --bg-1: #fffbfd;
35 | --bg-2: #ffd8e4;
36 | --bg-3: #e6e0ec;
37 | --txt-1: #1d1b1f;
38 | --txt-2: #3e001d;
39 | --txt-3: #48454f;
40 | --outline: #938f99;
41 | --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
42 | --shadow-2: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
43 | }
44 |
45 | body {
46 | font-family: "Roboto", sans-serif;
47 | }
48 |
49 | .card-grid {
50 | display: grid;
51 | grid-template-columns: 1fr 1fr 1fr 1fr;
52 | justify-content: start;
53 | }
54 |
55 | @media only screen and (max-width: 1490px) {
56 | .card-grid {
57 | grid-template-columns: 1fr 1fr 1fr;
58 | }
59 | }
60 |
61 | @media only screen and (max-width: 830px) {
62 | .card-grid {
63 | grid-template-columns: 1fr 1fr;
64 | }
65 | }
66 |
67 | @media only screen and (max-width: 675px) {
68 | .card-grid {
69 | grid-template-columns: 1fr;
70 | }
71 | }
72 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import components from "./components";
2 |
3 | const plugin = {
4 | install(Vue) {
5 | for (const prop in components) {
6 | if (components.hasOwnProperty(prop)) {
7 | const component = components[prop];
8 | Vue.component(component.name, component);
9 | }
10 | }
11 | },
12 | };
13 |
14 | export default plugin;
15 |
--------------------------------------------------------------------------------
/src/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/micahlt/vue-md3/7eec5c1d5fc01dfc88a2a23541704852d68a8849/src/logo.png
--------------------------------------------------------------------------------
/src/stories/Button.stories.js:
--------------------------------------------------------------------------------
1 | import Button from "../Button.vue";
2 |
3 | export default {
4 | title: "MD3/Button",
5 | component: Button,
6 | };
7 |
8 | const Template = (args) => ({
9 | components: { Button },
10 | setup() {
11 | return {
12 | args,
13 | };
14 | },
15 | template: ``,
16 | });
17 |
18 | export const Primary = Template.bind({});
19 | Primary.args = {
20 | type: "primary",
21 | text: "Primary",
22 | };
23 |
24 | export const Secondary = Template.bind({});
25 | Secondary.args = {
26 | type: "secondary",
27 | };
28 |
29 | export const Outline = Template.bind({});
30 | Outline.args = {
31 | type: "outline",
32 | };
33 |
--------------------------------------------------------------------------------
/src/stories/Card.stories.js:
--------------------------------------------------------------------------------
1 | import Card from "../Card.vue";
2 |
3 | export default {
4 | title: "MD3/Card",
5 | component: Card,
6 | };
7 |
8 | const Template = (args) => ({
9 | components: { Card },
10 | setup() {
11 | return {
12 | args,
13 | };
14 | },
15 | template: `{{ text }}
7 |