Skip to content

Commit

Permalink
chore: tailwind postcss
Browse files Browse the repository at this point in the history
  • Loading branch information
jaskang committed Jan 12, 2023
1 parent 78c3ef4 commit 610e0ca
Show file tree
Hide file tree
Showing 15 changed files with 161 additions and 169 deletions.
87 changes: 42 additions & 45 deletions docs/components/button.md
Original file line number Diff line number Diff line change
@@ -1,68 +1,68 @@
<style lang="postcss">
.mdp-demo__preview {
> .e-button:not(:first-child){
margin-left: 1rem;
}
> br + .e-button{
margin-left: 0 !important;
}
}
</style>

# Button

## 颜色

```vue preview
<template>
<div class="space-x-1">
<EButton>你测sd试好</EButton>
<EButton color="primary">primary</EButton>
<EButton color="success">success</EButton>
<EButton color="warning">warning</EButton>
<EButton color="error">error</EButton>
<EButton disabled>默认</EButton>
<EButton color="primary" disabled>primary</EButton>
</div>
<EButton>你测sd试好</EButton>
<EButton color="primary">primary</EButton>
<EButton color="success">success</EButton>
<EButton color="warning">warning</EButton>
<EButton color="error">error</EButton>
<EButton disabled>默认</EButton>
</template>
```

## 大小

```vue preview
<template>
<div class="space-x-1">
<EButton size="xs">button xs</EButton>
<EButton size="sm">button sm</EButton>
<EButton>button</EButton>
<EButton size="lg">button lg</EButton>
<EButton size="xl">button xl</EButton>
</div>
<br />
<div class="space-x-1">
<EButton color="primary" size="xs">primary xs</EButton>
<EButton color="primary" size="sm">primary sm</EButton>
<EButton color="primary">primary</EButton>
<EButton color="primary" size="lg">primary lg</EButton>
<EButton color="primary" size="xl">primary xl</EButton>
</div>
<EButton size="xs">button xs</EButton>
<EButton size="sm">button sm</EButton>
<EButton>button</EButton>
<EButton size="lg">button lg</EButton>
<EButton size="xl">button xl</EButton>
<br /><br />
<EButton color="primary" size="xs">button xs</EButton>
<EButton color="primary" size="sm">button sm</EButton>
<EButton color="primary">button</EButton>
<EButton color="primary" size="lg">button lg</EButton>
<EButton color="primary" size="xl">button xl</EButton>
</template>
```

## 圆角

```vue preview
<template>
<div class="space-x-1">
<EButton type="round">默认</EButton>
<EButton color="primary" type="round">primary</EButton>
<EButton color="success" type="round">success</EButton>
<EButton color="warning" type="round">warning</EButton>
<EButton color="error" type="round">error</EButton>
</div>
<EButton type="round">默认</EButton>
<EButton color="primary" type="round">primary</EButton>
<EButton color="success" type="round">success</EButton>
<EButton color="warning" type="round">warning</EButton>
<EButton color="error" type="round">error</EButton>
</template>
```

## 圆形

```vue preview
<template>
<div class="space-x-1">
<EButton type="circle">D</EButton>
<EButton color="primary" type="circle">P</EButton>
<EButton color="success" type="circle">S</EButton>
<EButton color="warning" type="circle">W</EButton>
<EButton color="error" type="circle">E</EButton>
</div>
<EButton type="circle">D</EButton>
<EButton color="primary" type="circle">P</EButton>
<EButton color="success" type="circle">S</EButton>
<EButton color="warning" type="circle">W</EButton>
<EButton color="error" type="circle">E</EButton>
</template>
```

Expand All @@ -84,13 +84,10 @@

```vue preview
<template>
<div class="space-x-1">
<EButton disabled>禁用</EButton>
<EButton color="primary" disabled>primary 禁用</EButton>
<EButton type="round" disabled>默认</EButton>
<EButton type="circle" disabled>D</EButton>
<EButton type="link" disabled>primary</EButton>
</div>
<EButton disabled>禁用状态</EButton>
<EButton type="round" disabled>圆角按钮-禁用状态</EButton>
<EButton type="circle" disabled>D</EButton>
<EButton type="link" disabled>链接按钮-禁用状态</EButton>
</template>
```

Expand Down
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@
"eslint": "^8.31.0",
"jsdom": "^20.0.3",
"postcss": "^8.4.20",
"postcss-import": "^15.1.0",
"prettier": "^2.8.1",
"prettier-plugin-tailwindcss": "^0.2.1",
"rimraf": "^3.0.2",
Expand Down
14 changes: 14 additions & 0 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 3 additions & 1 deletion postcss.config.cjs
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
module.exports = {
plugins: {
'postcss-import': {},
'tailwindcss/nesting': {},
tailwindcss: {},
autoprefixer: {},
},
};
}
7 changes: 7 additions & 0 deletions src/_styles/index.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

@import '../button/index.css';
@import '../checkbox/index.css';
@import '../radio/index.css';
10 changes: 0 additions & 10 deletions src/_styles/index.scss

This file was deleted.

89 changes: 89 additions & 0 deletions src/button/index.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
.e-button {
@apply inline-flex items-center rounded-md border border-solid border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm
hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2;

&--xs {
@apply rounded px-2.5 py-1.5 text-xs;
}
&--sm {
@apply px-3 py-2 text-sm leading-4;
}
&--lg {
@apply px-4 py-2 text-base;
}
&--xl {
@apply px-6 py-3 text-base;
}

&--primary {
@apply border-transparent bg-indigo-600 text-white hover:bg-indigo-700 focus:ring-indigo-500;
}

&--success {
@apply border-transparent bg-green-500 text-white hover:bg-green-600 focus:ring-green-500;
}

&--warning {
@apply border-transparent bg-amber-500 text-white hover:bg-amber-600 focus:ring-amber-500;
}

&--error {
@apply border-transparent bg-red-500 text-white hover:bg-red-600 focus:ring-red-500;
}

&--round {
@apply rounded-full;
}

&--circle {
@apply justify-center overflow-hidden whitespace-nowrap rounded-full px-0;
width: calc(theme('width.9') + 2px);
&.e-button--xs {
width: calc(theme('width.7') + 2px);
}
&.e-button--sm {
width: calc(theme('width.8') + 2px);
}
&.e-button--lg {
width: calc(theme('width.10') + 2px);
}
&.e-button--xl {
width: calc(theme('width.12') + 2px);
}
}

&--link {
@apply border-transparent bg-transparent underline underline-offset-2 shadow-none hover:bg-transparent;
&.e-button--primary {
@apply text-indigo-600 hover:text-indigo-700;
}
&.e-button--success {
@apply text-green-600 hover:text-green-700;
}
&.e-button--warning {
@apply text-amber-600 hover:text-amber-700;
}
&.e-button--error {
@apply text-red-600 hover:text-red-700;
}

&.is-disabled {
@apply border-transparent bg-transparent !important;
}
}

&.is-disabled {
@apply cursor-not-allowed border border-slate-300 bg-slate-50
text-slate-400 focus:ring-0;
}
}

.e-button-group {
@apply relative z-0 inline-flex rounded-sm shadow-sm;
> .e-button {
@apply relative rounded-none first:rounded-l-md last:rounded-r-md focus:z-10 focus:ring-offset-0;
+ .e-button {
@apply -ml-px;
}
}
}
86 changes: 0 additions & 86 deletions src/button/index.scss

This file was deleted.

2 changes: 1 addition & 1 deletion src/button/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export const EButton = defineComponent({
)
)
return () => (
<button type="button" class={cls.value}>
<button type="button" disabled={props.disabled} class={cls.value}>
<span>{slots.default?.()}</span>
</button>
)
Expand Down
Empty file added src/buttonGroup/index.css
Empty file.
Loading

1 comment on commit 610e0ca

@vercel
Copy link

@vercel vercel bot commented on 610e0ca Jan 12, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.