Improve nav item text overflow handling

This commit is contained in:
Andrew Kingston 2024-04-09 12:12:11 +01:00
parent ffdb8ee1b6
commit df2612b626
1 changed files with 4 additions and 2 deletions

View File

@ -65,7 +65,7 @@
{#key renderKey} {#key renderKey}
<div class="dropdown" class:left={renderLeftNav} class:expanded> <div class="dropdown" class:left={renderLeftNav} class:expanded>
<div class="text" on:click={onClickDropdown}> <div class="text" on:click={onClickDropdown}>
{text} <span>{text}</span>
<Icon name={icon} /> <Icon name={icon} />
</div> </div>
<div class="sublinks-wrapper"> <div class="sublinks-wrapper">
@ -95,13 +95,15 @@
<style> <style>
/* Generic styles */ /* Generic styles */
a, a,
.text { .text span {
opacity: 0.75; opacity: 0.75;
color: var(--navTextColor); color: var(--navTextColor);
font-size: var(--spectrum-global-dimension-font-size-200); font-size: var(--spectrum-global-dimension-font-size-200);
transition: opacity 130ms ease-out; transition: opacity 130ms ease-out;
font-weight: 600; font-weight: 600;
user-select: none; user-select: none;
overflow: hidden;
text-overflow: ellipsis;
} }
a.active { a.active {
opacity: 1; opacity: 1;