diff --git a/src/components/v-button/v-button.vue b/src/components/v-button/v-button.vue
index 1b0c623f27..dca5d23dfd 100644
--- a/src/components/v-button/v-button.vue
+++ b/src/components/v-button/v-button.vue
@@ -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 {
diff --git a/src/components/v-list/v-list.vue b/src/components/v-list/v-list.vue
index e799213841..e702e9cba4 100644
--- a/src/components/v-list/v-list.vue
+++ b/src/components/v-list/v-list.vue
@@ -72,6 +72,7 @@ export default defineComponent({
padding: var(--v-list-padding);
overflow: auto;
color: var(--v-list-color);
+ line-height: 22px;
border-radius: var(--border-radius);
&.nav {
diff --git a/src/interfaces/divider/divider.story.ts b/src/interfaces/divider/divider.story.ts
new file mode 100644
index 0000000000..009af77a06
--- /dev/null
+++ b/src/interfaces/divider/divider.story.ts
@@ -0,0 +1,28 @@
+import { withKnobs, color } from '@storybook/addon-knobs';
+import markdown from './readme.md';
+import withPadding from '../../../.storybook/decorators/with-padding';
+import { defineComponent } from '@vue/composition-api';
+import VDivider from '@/components/v-divider';
+
+export default {
+ title: 'Interfaces / Divider',
+ decorators: [withKnobs, withPadding],
+ parameters: {
+ notes: markdown,
+ },
+};
+
+export const basic = () =>
+ defineComponent({
+ components: {
+ VDivider,
+ },
+ props: {
+ color: {
+ default: color('Color', '#d6dfe2'),
+ },
+ },
+ template: `
+
+ `,
+ });
diff --git a/src/interfaces/divider/divider.vue b/src/interfaces/divider/divider.vue
new file mode 100644
index 0000000000..6b198455ef
--- /dev/null
+++ b/src/interfaces/divider/divider.vue
@@ -0,0 +1,21 @@
+
+
+
+
+
diff --git a/src/interfaces/divider/index.ts b/src/interfaces/divider/index.ts
new file mode 100644
index 0000000000..80208d56f0
--- /dev/null
+++ b/src/interfaces/divider/index.ts
@@ -0,0 +1,17 @@
+import InterfaceDivider from './divider.vue';
+import { defineInterface } from '@/interfaces/define';
+
+export default defineInterface(({ i18n }) => ({
+ id: 'divider',
+ name: i18n.t('divider'),
+ icon: 'remove',
+ component: InterfaceDivider,
+ options: [
+ {
+ field: 'color',
+ name: i18n.t('color'),
+ width: 'half',
+ interface: 'text-input',
+ },
+ ],
+}));
diff --git a/src/interfaces/divider/readme.md b/src/interfaces/divider/readme.md
new file mode 100644
index 0000000000..d5116f5460
--- /dev/null
+++ b/src/interfaces/divider/readme.md
@@ -0,0 +1 @@
+# Divider
diff --git a/src/interfaces/index.ts b/src/interfaces/index.ts
index f9203e65e0..e28af214da 100644
--- a/src/interfaces/index.ts
+++ b/src/interfaces/index.ts
@@ -1,5 +1,6 @@
import InterfaceTextInput from './text-input/';
import InterfaceTextarea from './textarea/';
+import InterfaceDivider from './divider/';
import InterfaceNumeric from './numeric/';
import InterfaceSlider from './slider/';
@@ -8,5 +9,7 @@ export const interfaces = [
InterfaceTextarea,
InterfaceNumeric,
InterfaceSlider,
+ InterfaceDivider,
];
+
export default interfaces;
diff --git a/src/interfaces/text-input/index.ts b/src/interfaces/text-input/index.ts
index fc8a476662..a3ad292ac3 100644
--- a/src/interfaces/text-input/index.ts
+++ b/src/interfaces/text-input/index.ts
@@ -4,7 +4,7 @@ import { defineInterface } from '@/interfaces/define';
export default defineInterface(({ i18n }) => ({
id: 'text-input',
name: i18n.t('interfaces.text-input.text-input'),
- icon: 'box',
+ icon: 'text_fields',
component: InterfaceTextInput,
options: [
{
diff --git a/src/interfaces/textarea/index.ts b/src/interfaces/textarea/index.ts
index 0ae0c61509..a822c4d285 100644
--- a/src/interfaces/textarea/index.ts
+++ b/src/interfaces/textarea/index.ts
@@ -4,7 +4,7 @@ import { defineInterface } from '@/interfaces/define';
export default defineInterface(({ i18n }) => ({
id: 'textarea',
name: i18n.t('interfaces.textarea.textarea'),
- icon: 'box',
+ icon: 'text_fields',
component: InterfaceTextarea,
options: [
{
diff --git a/src/lang/en-US/index.json b/src/lang/en-US/index.json
index 2e3545e80d..fb5a6cf6d8 100644
--- a/src/lang/en-US/index.json
+++ b/src/lang/en-US/index.json
@@ -210,6 +210,8 @@
"sans_serif": "Sans Serif",
"serif": "Serif",
"monospace": "Monospace",
+ "divider": "Divider",
+ "color": "Color",
"filter": "Filter",
"advanced_filter": "Advanced Filter",
diff --git a/src/modules/settings/routes/data-model/collections/components/collection-options/collection-options.vue b/src/modules/settings/routes/data-model/collections/components/collection-options/collection-options.vue
index 3ee55921dd..52354214e6 100644
--- a/src/modules/settings/routes/data-model/collections/components/collection-options/collection-options.vue
+++ b/src/modules/settings/routes/data-model/collections/components/collection-options/collection-options.vue
@@ -4,6 +4,8 @@
collection.managed === false && collection.collection.startsWith('directus_') === false
"
x-small
+ outlined
+ class="manage"
@click="toggleManaged(true)"
:loading="savingManaged"
>
@@ -119,6 +121,11 @@ export default defineComponent({
--v-button-background-color: var(--danger);
}
+.v-button.manage {
+ --v-button-background-color: var(--warning);
+ --v-button-background-color-hover: var(--warning-125);
+}
+
.ctx-toggle {
--v-icon-color: var(--foreground-subdued);
diff --git a/src/styles/themes/_light.scss b/src/styles/themes/_light.scss
index e9a1462b3e..e04f1c863f 100644
--- a/src/styles/themes/_light.scss
+++ b/src/styles/themes/_light.scss
@@ -12,6 +12,7 @@
--background-normal: #ECEFF1;
--background-normal-alt: #DDE3E6;
--background-subdued: #F5F7F8;
+ --background-highlight: #F9FAFB;
--background-page: #FFF;
--background-inverted: #263238;
diff --git a/src/views/private/components/module-bar/module-bar.vue b/src/views/private/components/module-bar/module-bar.vue
index 6728810e27..baa074b098 100644
--- a/src/views/private/components/module-bar/module-bar.vue
+++ b/src/views/private/components/module-bar/module-bar.vue
@@ -82,6 +82,7 @@ export default defineComponent({
--v-button-color: var(--module-icon);
--v-button-color-activated: var(--module-icon-alt);
--v-button-background-color: var(--module-background);
+ --v-button-background-color-hover: var(--module-background);
--v-button-background-color-activated: var(--module-background-alt);
}
}