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

Type and color treatmeant (#281)

Browse Source 
* Switch from roboto to inter

* Add and use new color palette

* Fix tests
This commit is contained in:
Rijk van Zanten
2020-04-02 12:10:13 -04:00
committed by GitHub
parent 8acb5917a6
commit eaf0dbb385
105 changed files with 429 additions and 551 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/views/private/components/drawer-button/drawer-button.vue
View File

@@ -40,11 +40,11 @@ export default defineComponent({
position: relative;
width: 100%;
height: 64px;
color: var(--foreground-color);
color: var(--foreground-normal);
transition: background-color var(--fast) var(--transition);
&:hover {
background-color: var(--background-color-hover);
background-color: var(--background-normal-alt);
}
.icon {

6
src/views/private/components/drawer-detail/drawer-detail.vue
View File

@@ -47,15 +47,15 @@ export default defineComponent({
position: relative;
width: 100%;
height: 64px;
color: var(--foreground-color);
color: var(--foreground-normal);
transition: background-color var(--fast) var(--transition);
&:not(.open):hover {
background-color: var(--background-color-hover);
background-color: var(--background-normal-alt);
}
&.open {
background-color: var(--background-color-active);
background-color: var(--background-normal-alt);
}
}

2
src/views/private/components/header-bar-actions/header-bar-actions.vue
View File

@@ -82,7 +82,7 @@ export default defineComponent({
height: 100%;
padding: inherit;
padding-left: 8px;
background-color: var(--background-color);
background-color: var(--background-page);
.expand {
transform: rotate(180deg);

6
src/views/private/components/header-bar/header-bar.vue
View File

@@ -12,7 +12,7 @@
<slot name="headline" />
<div class="title">
<slot name="title:prepend" />
<h1>{{ title }}</h1>
<h1 class="type-title">{{ title }}</h1>
<slot name="title:append" />
</div>
</div>
@@ -68,7 +68,6 @@ export default defineComponent({
<style lang="scss" scoped>
@import '@/styles/mixins/breakpoint';
@import '@/styles/mixins/type-styles';
.header-bar {
position: sticky;
@@ -82,7 +81,7 @@ export default defineComponent({
height: 65px;
margin: 24px 0;
padding: 0 12px;
background-color: var(--background-color);
background-color: var(--background-page);
box-shadow: 0;
transition: box-shadow var(--medium) var(--transition);
@@ -114,7 +113,6 @@ export default defineComponent({
h1 {
flex-grow: 1;
@include type-title;
}
}

8
src/views/private/components/module-bar/module-bar.vue
View File

@@ -2,7 +2,7 @@
<div class="module-bar">
<module-bar-logo />
<div class="modules">
<v-button v-for="module in _modules" :key="module.id" icon x-large :to="module.to">
<v-button v-for="module in _modules" :key="module.id" icon x-large :to="module.to" tile>
<v-icon :name="module.icon" />
</v-button>
</div>
@@ -42,7 +42,7 @@ export default defineComponent({
flex-direction: column;
width: 64px;
height: 100%;
background-color: #263238;
background-color: var(--module-background);
.modules {
flex-grow: 1;
@@ -51,7 +51,9 @@ export default defineComponent({
}
.v-button {
--v-button-color: var(--blue-grey-400);
--v-button-color: var(--module-icon);
--v-button-background-color: var(--module-background);
--v-button-background-color-activated: var(--module-background-alt);
}
}
</style>

14
src/views/private/components/notification-item/notification-item.vue
View File

@@ -82,7 +82,7 @@ export default defineComponent({
margin-bottom: 4px;
padding: 12px;
color: var(--white);
border-radius: var(--button-border-radius);
border-radius: var(--border-radius);
.icon {
display: block;
@@ -142,14 +142,14 @@ export default defineComponent({
}
&.info {
background-color: var(--accent);
background-color: var(--primary);
&.tail::after {
background-color: var(--accent);
background-color: var(--primary);
}
.text {
color: var(--accent-light);
color: var(--primary-alt);
}
}
@@ -161,7 +161,7 @@ export default defineComponent({
}
.text {
color: var(--success-light);
color: var(--success-alt);
}
}
@@ -173,7 +173,7 @@ export default defineComponent({
}
.text {
color: var(--warning-light);
color: var(--warning-alt);
}
}
@@ -185,7 +185,7 @@ export default defineComponent({
}
.text {
color: var(--danger-light);
color: var(--danger-alt);
}
}
}

2
src/views/private/components/project-chooser/project-chooser.vue
View File

@@ -59,7 +59,7 @@ export default defineComponent({
align-items: center;
justify-content: center;
height: 64px;
background-color: var(--highlight);
background-color: var(--background-subdued);
select {
position: absolute;

4
src/views/private/private-view.vue
View File

@@ -184,7 +184,7 @@ export default defineComponent({
z-index: 30;
width: 284px;
height: 100%;
background-color: var(--background-color-alt);
background-color: var(--background-normal);
transform: translateX(100%);
transition: transform var(--slow) var(--transition);
@@ -211,7 +211,7 @@ export default defineComponent({
}
@include breakpoint(small) {
--private-view-content-padding: 32px;
--content-padding: 32px;
}
}
</style>

2
src/views/public/public-view.story.ts
View File

@@ -16,6 +16,6 @@ export default {
export const basic = () => `
<public-view>
<h1 class="type-heading-large" style="margin-bottom: 2rem">Directus</h1>
<h1 class="type-title" style="margin-bottom: 2rem">Directus</h1>
Hello from the default slot!
</public-view>`;

4
src/views/public/public-view.vue
View File

@@ -84,7 +84,7 @@ export default defineComponent({
padding: 20px;
overflow-x: hidden;
overflow-y: auto;
background-color: var(--background-color);
background-color: var(--background-page);
box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.25);
&.wide {
@@ -109,7 +109,7 @@ export default defineComponent({
}
.notice {
color: var(--foreground-color-secondary);
color: var(--foreground-subdued);
}
}
</style>