github/directus
1
1
Fork 0
mirror of https://github.com/directus/directus.git synced 2026-04-25 03:00:53 -04:00
Code Issues Packages Projects Releases Wiki Activity

fixes #4402

Browse Source 
adds background-input variable to differentiate from page
updates repeater to use card styling
This commit is contained in:
Ben Haynes
2021-03-08 15:13:53 -05:00
parent a769711772
commit 870cd5ec9a
6 changed files with 13 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
app/src/components/v-input/v-input.vue
View File

@@ -270,6 +270,7 @@ body {
--arrow-color: var(--border-normal);
--v-icon-color: var(--foreground-subdued);
--v-input-color: var(--foreground-normal);
--v-input-background-color: var(--background-input);
--v-input-border-color-focus: var(--primary);
display: flex;
@@ -291,7 +292,7 @@ body {
padding-bottom: 0px;
color: var(--v-input-color);
font-family: var(--v-input-font-family);
background-color: var(--background-page);
background-color: var(--v-input-background-color);
border: var(--border-width) solid var(--border-normal);
border-radius: var(--border-radius);
transition: border-color var(--fast) var(--transition);
@@ -333,7 +334,7 @@ body {
--arrow-color: var(--border-normal-alt);
color: var(--v-input-color);
background-color: var(--background-page);
background-color: var(--background-input);
border-color: var(--border-normal-alt);
}
@@ -342,7 +343,7 @@ body {
--arrow-color: var(--border-normal-alt);
color: var(--v-input-color);
background-color: var(--background-page);
background-color: var(--background-input);
border-color: var(--v-input-border-color-focus);
}

2
app/src/components/v-table/v-table.vue
View File

@@ -381,7 +381,7 @@ body {
--v-table-height: auto;
--v-table-sticky-offset-top: 0;
--v-table-color: var(--foreground-normal);
--v-table-background-color: var(--background-page);
--v-table-background-color: var(--background-input);
}
</style>

2
app/src/components/v-textarea/v-textarea.vue
View File

@@ -98,7 +98,7 @@ body {
height: var(--v-textarea-height);
min-height: var(--v-textarea-min-height);
max-height: var(--v-textarea-max-height);
background-color: var(--background-page);
background-color: var(--background-input);
border: var(--border-width) solid var(--border-normal);
border-radius: var(--border-radius);
transition: border-color var(--fast) var(--transition);

4
app/src/interfaces/repeater/repeater-row.vue
View File

@@ -58,8 +58,8 @@ export default defineComponent({
.row {
--background-page: var(--background-subdued);
background-color: var(--background-subdued);
border: 2px solid var(--border-subdued);
background-color: var(--card-face-color);
box-shadow: var(--card-shadow);
border-radius: var(--border-radius);
& + .row {

2
app/src/styles/themes/_dark.scss
View File

@@ -16,12 +16,14 @@
--background-subdued: #2D3A41;
--background-highlight: #2D3A41;
--background-page: #263238;
--background-input: #263238;
--background-page-rgb: 38, 50, 56;
--background-inverted: #FFF;
// --card-shadow-color: 207,216,220;
--card-face-color: #36454D;
--card-shadow-color: 0,0,0;
--card-shadow: 0px 0px 6px 0px rgba(var(--card-shadow-color),0.2);
--overlay-color: rgba(19, 24, 26, 0.9);
--purple-190: #F6F4FD;

4
app/src/styles/themes/_light.scss
View File

@@ -16,11 +16,13 @@
--background-subdued: #F7FAFC;
--background-highlight: #F7F9FD;
--background-page: #FFFFFF;
--background-input: #FFFFFF;
--background-page-rgb: 255, 255, 255;
--background-inverted: #263238;
--card-face-color: var(--background-page);
--card-face-color: #FAFCFD;
--card-shadow-color: 23,41,64;
--card-shadow: 0px 0px 6px 0px rgba(var(--card-shadow-color),0.2);
--overlay-color: rgba(38, 50, 56, 0.9);
--purple-alt: #F6F4FD;