github/directus
1
0
Fork 0
mirror of https://github.com/directus/directus.git synced 2026-01-23 06:28:20 -05:00
Code Issues Packages Projects Releases Wiki Activity

Update Docs Card Component Styling (#18628)

Browse Source 
* add border glow, default icon, and text underline

* Create strange-ears-pull.md
This commit is contained in:
Connor
2023-05-19 15:43:56 -05:00
committed by GitHub
parent 85c664f985
commit 3409821e3a
3 changed files with 16 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/strange-ears-pull.md Normal file
View File

@@ -0,0 +1,5 @@
---
"docs": patch
---
Improved Affordance of Docs Card Component Link

13
docs/.vitepress/components/Card.vue
View File

@@ -3,7 +3,7 @@ const props = defineProps({
title: { type: String, required: true },
h: { type: String, required: false, default: '2' },
text: { type: String, required: true },
icon: { type: String, required: false, default: null },
icon: { type: String, required: false, default: "/icons/card_link.svg" },
url: { type: String, required: false, default: null },
});
@@ -25,7 +25,7 @@ const headerType = 'h' + props.h;
<style scoped>
.card {
border: 1px solid var(--vp-c-divider);
border: 2px solid var(--vp-c-brand-light);
border-radius: 8px;
transition: border-color 0.25s, background-color 0.25s;
padding: 1.5rem;
@@ -35,6 +35,7 @@ const headerType = 'h' + props.h;
gap: 1.5em;
margin-top: 1em;
margin-bottom: 1em;
box-shadow: 0 0 4px var(--vp-c-brand-light) ;
}
.card p {
@@ -45,7 +46,9 @@ const headerType = 'h' + props.h;
}
.card:hover {
border-color: var(--vp-c-brand);
border: 2px solid var(--vp-c-brand);
box-shadow: 0 0 8px var(--vp-c-brand) ;
text-decoration: underline;
}
.icon {
width: 44px;
@@ -55,9 +58,7 @@ img {
width: auto;
border-radius: 0 !important;
}
.card:hover {
text-decoration: none;
}
.vp-doc h2 {
padding-top: 0;
margin: 0;

4
docs/public/icons/card_link.svg Normal file
View File

@@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 96 960 960" width="48">
<path fill="#a08bff"
d="M450 776H280q-83 0-141.5-58.5T80 576q0-83 58.5-141.5T280 376h170v60H280q-58.333 0-99.167 40.765-40.833 40.764-40.833 99Q140 634 180.833 675q40.834 41 99.167 41h170v60ZM325 606v-60h310v60H325Zm185 170v-60h170q58.333 0 99.167-40.765 40.833-40.764 40.833-99Q820 518 779.167 477 738.333 436 680 436H510v-60h170q83 0 141.5 58.5T880 576q0 83-58.5 141.5T680 776H510Z" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 493 B