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

Various style tweaks (#427)

Browse Source 
* nav list sizing

* less contrast on table load progress

* new data model icon

* fixes all users nav

rijk SAID he fixed… but that’s ok ;)

* lighter module active color

* decrease badge size

* text changes

* new sidebar drawer component styling

* space out filters a bit more

* add auto-save warning to fields setup

* new tabular option icons

* new filter styling

needs formatting and translations for field name tooltips

* form field group styling

WIP — just styling, and needs translations

* don’t let line height be overridden

* interface icons

* button hovers

* divider interface WIP

* lighter highlight

we can try this out — might remove later

* no divider tests

* Fix divider interface

Co-authored-by: rijkvanzanten <rijkvanzanten@me.com>
This commit is contained in:
Ben Haynes
2020-04-20 14:36:59 -04:00
committed by GitHub
parent 57bcfb65a2
commit 6cb4cf2232
13 changed files with 103 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -143,9 +143,12 @@ export default defineComponent({
--v-button-color-activated: var(--white);
--v-button-color-disabled: var(--foreground-subdued);
--v-button-background-color: var(--primary);
--v-button-background-color-hover: var(--primary-125);
--v-button-background-color-activated: var(--primary);
--v-button-background-color-disabled: var(--background-normal);
--v-button-font-size: 16px;
--v-button-font-weight: 500;
--v-button-line-height: 22px;
--v-button-min-width: 140px;
display: inline-flex;
@@ -174,8 +177,9 @@ export default defineComponent({
height: var(--v-button-height);
padding: 0 19px;
color: var(--v-button-color);
font-weight: 500;
font-weight: var(--v-button-font-weight);
font-size: var(--v-button-font-size);
line-height: var(--v-button-line-height);
text-decoration: none;
background-color: var(--v-button-background-color);
border: var(--border-width) solid var(--v-button-background-color);
@@ -184,6 +188,11 @@ export default defineComponent({
transition: var(--fast) var(--transition);
transition-property: background-color border;
&:hover {
background-color: var(--v-button-background-color-hover);
border-color: var(--v-button-background-color-hover);
}
&.align-left {
justify-content: flex-start;
}
@@ -224,6 +233,11 @@ export default defineComponent({
background-color: transparent;
&:hover {
color: var(--v-button-background-color-hover);
border-color: var(--v-button-background-color-hover);
}
&.secondary {
--v-button-color: var(--foreground-subdued);
}
@@ -236,6 +250,7 @@ export default defineComponent({
&.x-small {
--v-button-height: 28px;
--v-button-font-size: 12px;
--v-button-font-weight: 600;
min-width: 60px;
padding: 0 12px;
@@ -306,6 +321,9 @@ export default defineComponent({
&.activated {
--v-button-color: var(--v-button-color-activated) !important;
--v-button-background-color: var(--v-button-background-color-activated) !important;
--v-button-background-color-hover: var(
--v-button-background-color-activated
) !important;
}
&.tile {