button style docs

This commit is contained in:
hay-kot 2021-05-22 23:46:47 -07:00
commit 66ee5e2ed4
5 changed files with 39 additions and 3 deletions

View file

@ -2,4 +2,6 @@
## Python
## Vue
## Vue
[See The Style Guide](/mealie/contributors/developers-guide/style-guide/)

View file

@ -0,0 +1,33 @@
# Style Guide
!!! note
Unifying styles across the application is an ongoing process, we are working on making the site more consistent.
## Button Guidelines
1. Buttons should follow the general color/icon scheme as outlined.
2. All buttons should have an icon on the left side of the button and text on the right.
3. Primary action buttons should be the default Vuetify styling.
4. Primary action buttons should be right aligned
5. Secondary buttons should be `text` or `outlined`. Text is preferred
6. Other buttons should generally be "info" or "primary" color and can take any style type depending on context
### Button Colors and Icons
| Type | Color | Icon |
| ----------- | :------------------ | :------------------------------------------------- |
| Default | `info` or `primary` | None |
| Create/New | `success` | `mdi-plus` or `$globals.icons.create` |
| Update/Save | `success` | `mdi-save-content` or `$globals.icons.save` |
| Edit | `info` | `mdi-square-edit-outline` or `$globals.icons.edit` |
### Example
```html
<v-btn color="primary">
<v-icon left> mdi-plus </v-icon>
Primary Button
</v-btn>
```

File diff suppressed because one or more lines are too long

View file

@ -76,6 +76,7 @@ nav:
- Code Contributions: "contributors/developers-guide/code-contributions.md"
- Dev Getting Started: "contributors/developers-guide/starting-dev-server.md"
- Guidelines: "contributors/developers-guide/general-guidelines.md"
- Style Guide: "contributors/developers-guide/style-guide.md"
- Development Road Map: "roadmap.md"
- Change Log:
- v0.5.0 General Upgrades: "changelog/v0.5.0.md"

View file

@ -4,7 +4,7 @@ const icons = {
// Crud
create: "mdi-plus",
delete: "mdi-delete",
save: "mdi-save-content",
save: "mdi-content-save",
edit: "mdi-square-edit-outline",
// Organization