github/directus
1
0
Fork 0
mirror of https://github.com/directus/directus.git synced 2026-01-26 14:58:30 -05:00
Code Issues Packages Projects Releases Wiki Activity

Style updates (#8359)

Browse Source 
* badge sizing

* tailored chip padding based on size

* list style update

* round language progress bar

* remove whitespace causing odd gap after field

* complress field management grid

* add yellow to color options, make warning yellow
This commit is contained in:
Ben Haynes
2021-09-27 17:43:30 -04:00
committed by GitHub
parent c2c9ad4116
commit 6801ccf38e
8 changed files with 59 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
app/src/components/v-badge/v-badge.vue
View File

@@ -63,7 +63,7 @@ body {
display: inline-block;
&.bordered {
--v-badge-size: 20px;
--v-badge-size: 18px;
}
&.dot {
@@ -87,8 +87,8 @@ body {
height: var(--v-badge-size);
padding: 0 5px;
color: var(--v-badge-color);
font-weight: 600;
font-size: 11px;
font-weight: 800;
font-size: 9px;
background-color: var(--v-badge-background-color);
border-radius: calc(var(--v-badge-size) / 2);

4
app/src/components/v-chip/v-chip.vue
View File

@@ -129,12 +129,14 @@ body {
&.x-small {
height: 20px;
padding: 0 4px;
font-size: 12px;
border-radius: 10px;
}
&.small {
height: 26px;
height: 24px;
padding: 0 4px;
font-size: 14px;
border-radius: 12px;
}

6
app/src/components/v-list/v-list-item.vue
View File

@@ -139,7 +139,7 @@ body {
--v-list-item-max-height: auto;
--v-list-item-border-radius: var(--border-radius);
--v-list-item-border-color: var(--border-subdued);
--v-list-item-border-color-hover: var(--border-normal);
--v-list-item-border-color-hover: var(--border-normal-alt);
--v-list-item-color: var(--v-list-color, var(--foreground-normal));
--v-list-item-color-hover: var(--v-list-color-hover, var(--foreground-normal));
--v-list-item-color-active: var(--v-list-color-active, var(--foreground-normal));
@@ -226,8 +226,8 @@ body {
&.block {
--v-list-item-border-color: var(--border-subdued);
--v-list-item-background-color: var(--background-subdued);
--v-list-item-background-color-hover: var(--background-subdued);
--v-list-item-background-color: var(--background-page);
--v-list-item-background-color-hover: var(--card-face-color);
--v-icon-color: var(--foreground-subdued);
position: relative;

1
app/src/interfaces/translations/language-select.vue
View File

@@ -19,6 +19,7 @@
<v-progress-linear
v-tooltip="`${Math.round((item.current / item.max) * 100)}%`"
:value="item.progress"
rounded
colorful
/>
</div>

11
app/src/modules/settings/routes/data-model/fields/components/field-select.vue
View File

@@ -442,23 +442,22 @@ export default defineComponent({
.field-grid {
position: relative;
display: grid;
grid-gap: 12px;
grid-gap: 8px;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
& + & {
margin-top: 12px;
margin-top: 8px;
}
}
.field {
:deep(.input) {
background-color: var(--card-face-color) !important;
border: none !important;
box-shadow: 0px 0px 6px 0px rgba(var(--card-shadow-color), 0.2) !important;
border: var(--border-width) solid var(--border-subdued) !important;
}
:deep(.input:hover) {
background-color: var(--card-face-color) !important;
border: var(--border-width) solid var(--border-normal-alt) !important;
}
.label {
@@ -475,7 +474,7 @@ export default defineComponent({
text-overflow: ellipsis;
.name {
margin-right: 12px;
margin-right: 8px;
font-family: var(--family-monospace);
}

4
app/src/modules/settings/routes/data-model/fields/components/fields-management.vue
View File

@@ -197,7 +197,7 @@ export default defineComponent({
.field-grid {
position: relative;
display: grid;
grid-gap: 12px;
grid-gap: 8px;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
padding-bottom: 24px;
}
@@ -207,7 +207,7 @@ export default defineComponent({
--v-button-background-color: var(--primary);
--v-button-background-color-hover: var(--primary-125);
margin-top: -8px;
margin-top: -12px;
.v-icon {
margin-right: 8px;

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

@@ -60,6 +60,17 @@
--green-10: #294A4B;
--green-alt: #294A4B;
--yellow-190: #FFF9ED;
--yellow-175: #FEF0D3;
--yellow-150: #FDE2A7;
--yellow-125: #FCD37B;
--yellow: #FBC54F;
--yellow-75: #C8A34C;
--yellow-50: #948049;
--yellow-25: #615E46;
--yellow-10: #42453F;
--yellow-alt: #42453F;
--orange-190: #FFF5E9;
--orange-175: #FDE5C6;
--orange-150: #FACA8D;
@@ -106,16 +117,16 @@
--success-25: var(--green-25);
--success-10: var(--green-10);
--warning-190: var(--orange-190);
--warning-175: var(--orange-175);
--warning-150: var(--orange-150);
--warning-125: var(--orange-125);
--warning: var(--orange);
--warning-alt: var(--orange-10);
--warning-75: var(--orange-75);
--warning-50: var(--orange-50);
--warning-25: var(--orange-25);
--warning-10: var(--orange-10);
--warning-190: var(--yellow-190);
--warning-175: var(--yellow-175);
--warning-150: var(--yellow-150);
--warning-125: var(--yellow-125);
--warning: var(--yellow);
--warning-alt: var(--yellow-10);
--warning-75: var(--yellow-75);
--warning-50: var(--yellow-50);
--warning-25: var(--yellow-25);
--warning-10: var(--yellow-10);
--danger-190: var(--red-190);
--danger-175: var(--red-175);

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

@@ -59,6 +59,17 @@
--green-175: #225F58;
--green-190: #294A4B;
--yellow-alt: #FFF9ED;
--yellow-10: #FFF9ED;
--yellow-25: #FEF0D3;
--yellow-50: #FDE2A7;
--yellow-75: #FCD37B;
--yellow: #FFB300;
--yellow-125: #C8A34C;
--yellow-150: #948049;
--yellow-175: #615E46;
--yellow-190: #424A44;
--orange-alt: #FFF5E9;
--orange-10: #FFF5E9;
--orange-25: #FDE5C6;
@@ -81,7 +92,6 @@
--red-175: #5B414C;
--red-190: #403E47;
--primary-10: var(--green-10);
--primary-25: var(--green-25);
--primary-50: var(--green-50);
@@ -105,16 +115,16 @@
--success-175: var(--green-175);
--success-190: var(--green-190);
--warning-10: var(--orange-10);
--warning-25: var(--orange-25);
--warning-50: var(--orange-50);
--warning-75: var(--orange-75);
--warning: var(--orange);
--warning-alt: var(--orange-10);
--warning-125: var(--orange-125);
--warning-150: var(--orange-150);
--warning-175: var(--orange-175);
--warning-190: var(--orange-190);
--warning-10: var(--yellow-10);
--warning-25: var(--yellow-25);
--warning-50: var(--yellow-50);
--warning-75: var(--yellow-75);
--warning: var(--yellow);
--warning-alt: var(--yellow-10);
--warning-125: var(--yellow-125);
--warning-150: var(--yellow-150);
--warning-175: var(--yellow-175);
--warning-190: var(--yellow-190);
--danger-10: var(--red-10);
--danger-25: var(--red-25);