diff --git a/src/components/v-button/v-button.vue b/src/components/v-button/v-button.vue
index ff1ff11b3e..b16a2020b1 100644
--- a/src/components/v-button/v-button.vue
+++ b/src/components/v-button/v-button.vue
@@ -144,7 +144,7 @@ export default defineComponent({
--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-background-color-disabled: var(--background-normal);
--v-button-font-size: 16px;
display: inline-flex;
@@ -245,14 +245,14 @@ export default defineComponent({
--v-button-font-size: 14px;
min-width: 64px;
- padding: 0 16px;
+ padding: 0 12px;
}
&.large {
--v-button-height: 52px;
min-width: 92px;
- padding: 0 23px;
+ padding: 0 12px;
}
&.x-large {
@@ -260,7 +260,7 @@ export default defineComponent({
--v-button-font-size: 18px;
min-width: 120px;
- padding: 0 32px;
+ padding: 0 12px;
}
&.icon {
diff --git a/src/components/v-checkbox/v-checkbox.test.ts b/src/components/v-checkbox/v-checkbox.test.ts
index cdec10d8e1..91ed351768 100644
--- a/src/components/v-checkbox/v-checkbox.test.ts
+++ b/src/components/v-checkbox/v-checkbox.test.ts
@@ -17,7 +17,7 @@ describe('Checkbox', () => {
},
});
- expect(component.find('span[class="label type-label"]').text()).toContain('Turn me on');
+ expect(component.find('span[class="label type-text"]').text()).toContain('Turn me on');
});
it('Renders as checked when inputValue `true` is given', () => {
diff --git a/src/components/v-checkbox/v-checkbox.vue b/src/components/v-checkbox/v-checkbox.vue
index dc52a11b31..65fa657ceb 100644
--- a/src/components/v-checkbox/v-checkbox.vue
+++ b/src/components/v-checkbox/v-checkbox.vue
@@ -9,7 +9,7 @@
:class="{ checked: isChecked }"
>
-
+
{{ label }}
@@ -106,7 +106,7 @@ export default defineComponent({
}
& .v-icon {
- --v-icon-color: var(--border-normal);
+ --v-icon-color: var(--foreground-subdued);
}
&:disabled {
@@ -117,13 +117,13 @@ export default defineComponent({
}
.v-icon {
- --v-icon-color: var(--border-normal);
+ --v-icon-color: var(--foreground-subdued);
}
}
&:not(:disabled):hover {
.v-icon {
- --v-icon-color: var(--border-normal);
+ --v-icon-color: var(--foreground-subdued);
}
}
diff --git a/src/components/v-dialog/v-dialog.vue b/src/components/v-dialog/v-dialog.vue
index 49806f8021..6da40c2fca 100644
--- a/src/components/v-dialog/v-dialog.vue
+++ b/src/components/v-dialog/v-dialog.vue
@@ -76,12 +76,12 @@ export default defineComponent({
height: 100%;
transition: opacity var(--medium) var(--transition);
- .v-card {
- --v-card-min-width: 400px;
- --v-card-padding: 24px;
+ ::v-deep .v-card {
+ --v-card-min-width: 540px;
+ --v-card-padding: 20px;
}
- .v-sheet {
+ ::v-deep .v-sheet {
--v-sheet-padding: 24px;
--v-sheet-max-width: 560px;
}
diff --git a/src/components/v-divider/v-divider.vue b/src/components/v-divider/v-divider.vue
index 91ed1fb373..b62ba4f13b 100644
--- a/src/components/v-divider/v-divider.vue
+++ b/src/components/v-divider/v-divider.vue
@@ -24,7 +24,7 @@ export default defineComponent({
diff --git a/src/components/v-list/v-list-item-hint.vue b/src/components/v-list/v-list-item-hint.vue
index 89f33eff3c..375fd17c6d 100644
--- a/src/components/v-list/v-list-item-hint.vue
+++ b/src/components/v-list/v-list-item-hint.vue
@@ -23,7 +23,7 @@ export default defineComponent({
display: inline-flex;
align-self: center;
- margin: 12px 0;
+ margin: 8px 0;
color: var(--foreground-subdued);
&:not(:only-child) {
@@ -49,14 +49,14 @@ export default defineComponent({
}
&.dense {
#{$this} {
- margin-top: 8px;
- margin-bottom: 8px;
+ margin-top: 4px;
+ margin-bottom: 4px;
&:not(:only-child) {
&:first-child {
- margin-right: 8px;
+ margin-right: 16px;
}
&:last-child {
- margin-left: 8px;
+ margin-left: 16px;
}
}
}
diff --git a/src/components/v-list/v-list-item-icon.vue b/src/components/v-list/v-list-item-icon.vue
index d0b5600813..8aca952a6f 100644
--- a/src/components/v-list/v-list-item-icon.vue
+++ b/src/components/v-list/v-list-item-icon.vue
@@ -23,7 +23,7 @@ export default defineComponent({
display: inline-flex;
align-self: center;
- margin: 12px 0;
+ margin: 8px 0;
&:not(:only-child) {
&:first-child {
@@ -48,8 +48,8 @@ export default defineComponent({
}
&.dense {
#{$this} {
- margin-top: 8px;
- margin-bottom: 8px;
+ margin-top: 4px;
+ margin-bottom: 4px;
&:not(:only-child) {
&:first-child {
margin-right: 8px;
diff --git a/src/components/v-list/v-list-item.vue b/src/components/v-list/v-list-item.vue
index a8541b188c..97b34f16a6 100644
--- a/src/components/v-list/v-list-item.vue
+++ b/src/components/v-list/v-list-item.vue
@@ -65,11 +65,13 @@ export default defineComponent({
--v-list-item-two-line-min-height-dense: 36px;
--v-list-item-three-line-min-height-dense: 52px;
--v-list-item-padding: 0 16px 0 calc(16px + var(--v-list-item-indent, 0px));
+ --v-list-item-padding-dense: 0 8px 0 calc(8px + var(--v-list-item-indent, 0px));
+ --v-list-item-margin-dense: 2px 0;
--v-list-item-min-width: none;
--v-list-item-max-width: none;
--v-list-item-min-height: var(--v-list-item-one-line-min-height);
--v-list-item-max-height: auto;
- --v-list-item-border-radius: 0;
+ --v-list-item-border-radius: var(--border-radius);
--v-list-item-margin-bottom: 0;
--v-list-item-color: var(--v-list-color, var(--foreground-normal));
--v-list-item-color-hover: var(--v-list-color-hover, var(--foreground-normal));
@@ -141,6 +143,9 @@ export default defineComponent({
.v-list.dense {
& #{$this} {
--v-list-item-min-height: var(--v-list-item-one-line-min-height-dense);
+
+ margin: var(--v-list-item-margin-dense);
+ padding: var(--v-list-item-padding-dense);
&.one-line {
--v-list-item-min-height: var(--v-list-item-one-line-min-height-dense);
}
@@ -158,7 +163,7 @@ export default defineComponent({
--v-list-item-padding: 0 8px;
--v-list-item-border-radius: 4px;
&:not(:last-child):not(:only-child) {
- --v-list-item-margin-bottom: 8px;
+ --v-list-item-margin-bottom: 4px;
}
}
&.dense #{$this},
diff --git a/src/components/v-list/v-list.vue b/src/components/v-list/v-list.vue
index 26c2a720dd..e799213841 100644
--- a/src/components/v-list/v-list.vue
+++ b/src/components/v-list/v-list.vue
@@ -52,7 +52,7 @@ export default defineComponent({
diff --git a/src/components/v-menu/use-popper.ts b/src/components/v-menu/use-popper.ts
index f5de0ec06c..b2a3406661 100644
--- a/src/components/v-menu/use-popper.ts
+++ b/src/components/v-menu/use-popper.ts
@@ -56,7 +56,7 @@ export function usePopper(
{
...offset,
options: {
- offset: options.value.attached ? [0, -2] : [0, 8],
+ offset: options.value.attached ? [0, 0] : [0, 8],
},
},
preventOverflow,
diff --git a/src/components/v-menu/v-menu.vue b/src/components/v-menu/v-menu.vue
index ad08ab0cbe..5e3c87afb6 100644
--- a/src/components/v-menu/v-menu.vue
+++ b/src/components/v-menu/v-menu.vue
@@ -153,12 +153,22 @@ export default defineComponent({
.v-menu-activator {
display: contents;
+ &::before {
+ position: absolute;
+ top: 0;
+ right: 0;
+ width: 2px;
+ height: 2px;
+ background: var(--border-normal);
+ content: '';
+ }
}
.v-menu-popper {
position: absolute;
left: -999px;
z-index: 5;
+ transform: translateY(2px);
pointer-events: none;
&.active {
@@ -206,6 +216,7 @@ export default defineComponent({
.v-menu-content {
max-height: 50vh;
+ padding: 0 4px;
overflow-x: hidden;
overflow-y: auto;
background-color: var(--background-subdued);
@@ -287,11 +298,12 @@ export default defineComponent({
transform: scaleY(1) scaleX(1);
opacity: 1;
transition-timing-function: cubic-bezier(0, 0, 0.2, 1.5);
- transition-duration: var(--medium);
+ transition-duration: var(--fast);
}
&.attached {
.v-menu-content {
+ border-top: none;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
diff --git a/src/components/v-modal/v-modal.vue b/src/components/v-modal/v-modal.vue
index ba1012c066..84dbd079bd 100644
--- a/src/components/v-modal/v-modal.vue
+++ b/src/components/v-modal/v-modal.vue
@@ -162,7 +162,7 @@ export default defineComponent({
overflow: auto;
@include breakpoint(medium) {
- padding: 24px;
+ padding: 32px;
}
}
}
diff --git a/src/components/v-overlay/v-overlay.vue b/src/components/v-overlay/v-overlay.vue
index 9a308fc419..2cb0f535f2 100644
--- a/src/components/v-overlay/v-overlay.vue
+++ b/src/components/v-overlay/v-overlay.vue
@@ -33,7 +33,7 @@ export default defineComponent({
diff --git a/src/modules/settings/routes/data-model/fields/components/fields-management/fields-management.vue b/src/modules/settings/routes/data-model/fields/components/fields-management/fields-management.vue
index a380c997b0..c1e7a080a8 100644
--- a/src/modules/settings/routes/data-model/fields/components/fields-management/fields-management.vue
+++ b/src/modules/settings/routes/data-model/fields/components/fields-management/fields-management.vue
@@ -253,7 +253,7 @@ export default defineComponent({
.visible,
.hidden {
display: grid;
- grid-gap: 24px 36px;
+ grid-gap: 20px 32px;
grid-template-columns: 1fr 1fr;
}
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
index 4405bc5865..2d657fc4aa 100644
--- a/src/styles/_variables.scss
+++ b/src/styles/_variables.scss
@@ -3,7 +3,7 @@
--white: #fff;
--black: #090C0D;
--module-background: #13181A;
- --module-background-alt: #090C0D;
+ --module-background-alt: #000;
--module-icon: #607D8B;
--module-icon-alt: #FFF;
--transition: cubic-bezier(0.4, 0, 0.2, 1);
diff --git a/src/styles/themes/_light.scss b/src/styles/themes/_light.scss
index 399191c686..e9a1462b3e 100644
--- a/src/styles/themes/_light.scss
+++ b/src/styles/themes/_light.scss
@@ -2,7 +2,7 @@
@mixin light {
--border-normal: #D6DFE2;
- --border-normal-alt: #BDCCD2;
+ --border-normal-alt: #90A4AE;
--border-subdued: #ECEFF1;
--foreground-normal: #263238;
diff --git a/src/views/private/components/drawer-detail/drawer-detail.vue b/src/views/private/components/drawer-detail/drawer-detail.vue
index a2e0fde5fe..56d46391d2 100644
--- a/src/views/private/components/drawer-detail/drawer-detail.vue
+++ b/src/views/private/components/drawer-detail/drawer-detail.vue
@@ -85,7 +85,7 @@ export default defineComponent({
}
.content {
- padding: 12px;
+ padding: 20px;
}
}