Improve nav item text overflow handling
This commit is contained in:
parent
ffdb8ee1b6
commit
df2612b626
|
@ -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;
|
||||||
|
|
Loading…
Reference in New Issue