github/directus
1
0
Fork 0
mirror of https://github.com/directus/directus.git synced 2026-02-16 00:15:35 -05:00
Code Issues Packages Projects Releases Wiki Activity

Type and color treatmeant (#281)

Browse Source 
* Switch from roboto to inter

* Add and use new color palette

* Fix tests
This commit is contained in:
Rijk van Zanten
2020-04-02 12:10:13 -04:00
committed by GitHub
parent 8acb5917a6
commit eaf0dbb385
105 changed files with 429 additions and 551 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/v-button/readme.md
View File

@@ -63,6 +63,7 @@ The loading slot is rendered _on top_ of the content that was there before. Make
| `to` | Render as vue router-link | `false` |
| `align` | Align content in button. One of `left | center | right` | `'center'` |
| `dashed` | Render the border dashed. Meant to be used with `outlined`. | `false` |
| `tile` | Render without border radius | `false` |
## Slots
@@ -83,12 +84,12 @@ The loading slot is rendered _on top_ of the content that was there before. Make
|-----------------------------------------|----------------------------------------------------|
| `--v-button-width` | `auto` |
| `--v-button-height` | `44px` |
| `--v-button-color` | `var(--button-primary-foreground-color)` |
| `--v-button-color-hover` | `var(--button-primary-foreground-color-hover)` |
| `--v-button-color-activated` | `var(--button-primary-foreground-color-activated)` |
| `--v-button-color-disabled` | `var(--button-primary-foreground-color-disabled)` |
| `--v-button-background-color` | `var(--button-primary-background-color)` |
| `--v-button-background-color-hover` | `var(--button-primary-background-color-hover)` |
| `--v-button-background-color-activated` | `var(--button-primary-background-color-activated)` |
| `--v-button-background-color-disabled` | `var(--button-primary-background-color-disabled)` |
| `--v-button-color` | `var(--foreground-inverted)` |
| `--v-button-color-hover` | `var(--foreground-inverted)` |
| `--v-button-color-activated` | `var(--foreground-inverted)` |
| `--v-button-color-disabled` | `var(--primary)` |
| `--v-button-background-color` | `var(--primary)` |
| `--v-button-background-color-hover` | `var(--primary)` |
| `--v-button-background-color-activated` | `var(--primary)` |
| `--v-button-background-color-disabled` | `var(--primary-alt)` |
| `--v-button-font-size` | `16px` |

4
src/components/v-button/v-button.story.ts
View File

@@ -56,6 +56,9 @@ export const withText = () => ({
dashed: {
default: boolean('Dashed', false, 'Button'),
},
tile: {
default: boolean('Tile', false, 'Button'),
},
fullWidth: {
default: boolean('Full-width', false, 'Button'),
},
@@ -108,6 +111,7 @@ export const withText = () => ({
:outlined="outlined"
:align="align"
:dashed="dashed"
:tile="tile"
:icon="icon"
:style="{
'--v-button-color': color,

50
src/components/v-button/v-button.vue
View File

@@ -16,6 +16,7 @@
secondary,
active,
dashed,
tile,
},
]"
:type="type"
@@ -90,6 +91,10 @@ export default defineComponent({
type: Boolean,
default: false,
},
tile: {
type: Boolean,
default: false,
},
align: {
type: String,
default: 'center',
@@ -119,14 +124,12 @@ export default defineComponent({
.v-button {
--v-button-width: auto;
--v-button-height: 44px;
--v-button-color: var(--button-primary-foreground-color);
--v-button-color-hover: var(--button-primary-foreground-color-hover);
--v-button-color-activated: var(--button-primary-foreground-color-activated);
--v-button-color-disabled: var(--button-primary-foreground-color-disabled);
--v-button-background-color: var(--button-primary-background-color);
--v-button-background-color-hover: var(--button-primary-background-color-hover);
--v-button-background-color-activated: var(--button-primary-background-color-activated);
--v-button-background-color-disabled: var(--button-primary-background-color-disabled);
--v-button-color: var(--foreground-inverted);
--v-button-color-activated: var(--foreground-inverted);
--v-button-color-disabled: var(--foreground-subdued);
--v-button-background-color: var(--primary);
--v-button-background-color-activated: var(--primary);
--v-button-background-color-disabled: var(--background-subdued);
--v-button-font-size: 16px;
position: relative;
@@ -141,8 +144,8 @@ export default defineComponent({
font-size: var(--v-button-font-size);
text-decoration: none;
background-color: var(--v-button-background-color);
border: var(--button-border-width) solid var(--v-button-background-color);
border-radius: var(--button-border-radius);
border: var(--border-width) solid var(--v-button-background-color);
border-radius: var(--border-radius);
cursor: pointer;
transition: var(--fast) var(--transition);
transition-property: background-color border;
@@ -160,13 +163,12 @@ export default defineComponent({
}
&.secondary {
--v-button-color: var(--button-secondary-foreground-color);
--v-button-color-hover: var(--button-secondary-foreground-color-hover);
--v-button-color-activated: var(--button-secondary-foreground-color-activated);
--v-button-background-color: var(--button-secondary-background-color);
--v-button-background-color-hover: var(--button-secondary-background-color-hover);
--v-button-background-color-activated: var(--button-secondary-background-color-activated);
--v-button-background-color-disabled: var(--button-secondary-background-color-disabled);
--v-button-color: var(--foreground-color);
--v-button-color-hover: var(--foreground-color);
--v-button-color-activated: var(--foreground-color);
--v-button-background-color: var(--background-normal-alt);
--v-button-background-color-hover: var(--background-normal-alt);
--v-button-background-color-activated: var(--background-normal-alt);
}
&:active {
@@ -180,7 +182,7 @@ export default defineComponent({
&:disabled {
color: var(--v-button-color-disabled);
background-color: var(--v-button-background-color-disabled);
border: var(--input-border-width) solid var(--v-button-background-color-disabled);
border: var(--border-width) solid var(--v-button-background-color-disabled);
cursor: not-allowed;
&:active {
@@ -196,6 +198,10 @@ export default defineComponent({
--v-button-color: var(--v-button-background-color);
background-color: transparent;
&.secondary {
--v-button-color: var(--foreground-subdued);
}
}
&.dashed {
@@ -277,12 +283,8 @@ export default defineComponent({
--v-button-background-color: var(--v-button-background-color-activated) !important;
}
@media (hover: hover) {
&:not(.loading):not(:disabled):not(.activated):hover {
color: var(--v-button-color-hover);
background-color: var(--v-button-background-color-hover);
border: var(--button-border-width) solid var(--v-button-background-color-hover);
}
&.tile {
border-radius: 0;
}
}
</style>