Vasanko/cista-storage
Vasanko/cista-storage
2
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Improved breadcrumb scaling

Browse Source
This commit is contained in:
Leo Vasanko 2023-11-18 07:00:55 -08:00
parent a547052e29
commit de482afd60
1 changed files with 6 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/src/components/BreadCrumb.vue
View File

@ -113,11 +113,11 @@ watchEffect(() => {
padding: 0 1em 0 0; padding: 0 1em 0 0;
} }
.breadcrumb > a { .breadcrumb > a {
flex: 0 4 auto;
display: flex; display: flex;
align-items: center; align-items: center;
margin: 0 -0.5em 0 -0.5em; margin: 0 -0.5em 0 -0.5em;
padding: 0; padding: 0;
max-width: 8em;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
@ -126,13 +126,13 @@ watchEffect(() => {
clip-path: polygon(0 0, 1em 50%, 0 100%, 100% 100%, 100% 0, 0 0); clip-path: polygon(0 0, 1em 50%, 0 100%, 100% 100%, 100% 0, 0 0);
transition: all var(--breadcrumb-transtime); transition: all var(--breadcrumb-transtime);
} }
.breadcrumb a:first-child { .breadcrumb > a:first-child {
flex: 0 0 auto;
padding-left: 1.5em; padding-left: 1.5em;
padding-right: 1.7em; padding-right: 1.7em;
clip-path: none; clip-path: none;
} }
.breadcrumb a:last-child { .breadcrumb > a:last-child {
max-width: none;
clip-path: polygon( clip-path: polygon(
0 0, 0 0,
calc(100% - 1em) 0, calc(100% - 1em) 0,
@ -143,7 +143,7 @@ watchEffect(() => {
0 0 0 0
); );
} }
.breadcrumb a:only-child { .breadcrumb > a:only-child {
clip-path: polygon( clip-path: polygon(
0 0, 0 0,
calc(100% - 1em) 0, calc(100% - 1em) 0,
@ -177,6 +177,6 @@ watchEffect(() => {
} }
.breadcrumb a:hover { color: var(--breadcrumb-hover-color) } .breadcrumb a:hover { color: var(--breadcrumb-hover-color) }
.breadcrumb a:hover svg { fill: var(--breadcrumb-hover-color) } .breadcrumb a:hover svg { fill: var(--breadcrumb-hover-color) }
.breadcrumb a.current { color: var(--accent-color) } .breadcrumb a.current { color: var(--accent-color); max-width: none; flex: 0 1 auto; }
.breadcrumb a.current svg { fill: var(--accent-color) } .breadcrumb a.current svg { fill: var(--accent-color) }
</style> </style>