mirror of
https://github.com/hcengineering/platform.git
synced 2025-04-23 08:48:01 +00:00
UBER-572: fixed overflow for emoji. (#3485)
Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
parent
a29a6b1416
commit
e1d5e8085d
@ -121,7 +121,6 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin: 0 1rem;
|
margin: 0 1rem;
|
||||||
padding: .625rem .75rem;
|
|
||||||
height: 2.25rem;
|
height: 2.25rem;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
border: 1px solid transparent;
|
border: 1px solid transparent;
|
||||||
@ -129,23 +128,40 @@
|
|||||||
user-select: none;
|
user-select: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
|
&.child,
|
||||||
|
&.special {
|
||||||
|
padding: 0 .75rem;
|
||||||
|
}
|
||||||
|
&:not(.child, .special) {
|
||||||
|
padding: 0 .75rem 0 .25rem;
|
||||||
|
|
||||||
|
.an-element__label { padding-left: .5rem; }
|
||||||
|
}
|
||||||
.an-element__icon {
|
.an-element__icon {
|
||||||
margin-right: .5rem;
|
|
||||||
min-width: 1rem;
|
min-width: 1rem;
|
||||||
color: var(--theme-dark-color);
|
color: var(--theme-dark-color);
|
||||||
|
|
||||||
&.indent-2 { margin-left: 1.75rem; }
|
&.indent-2 { padding-left: 1.75rem; }
|
||||||
&.indent-4 { margin-left: 3.25rem; }
|
&.indent-4 { margin-left: 3.25rem; }
|
||||||
&.indent-8 { margin-left: 3.25rem; }
|
&.indent-8 { margin-left: 3.25rem; }
|
||||||
|
&:not(.indent-2, .indent-4, .indent-8) { margin-right: .625rem; }
|
||||||
|
&.indent-2, &.indent-4, &.indent-8 {
|
||||||
|
margin-right: .5rem;
|
||||||
|
& + .an-element__label { padding-left: 0; }
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.an-element__label {
|
.an-element__label {
|
||||||
|
overflow: hidden;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
margin-right: .75rem;
|
margin-right: .75rem;
|
||||||
|
min-width: 0;
|
||||||
|
height: 100%;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
overflow: hidden;
|
|
||||||
user-select: none;
|
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
|
user-select: none;
|
||||||
|
|
||||||
&.title:not(.dark),
|
&.title:not(.dark),
|
||||||
&:not(.bold, .title.dark) { color: var(--theme-content-color); }
|
&:not(.bold, .title.dark) { color: var(--theme-content-color); }
|
||||||
|
@ -48,7 +48,7 @@
|
|||||||
.emoji-small {
|
.emoji-small {
|
||||||
width: 1rem;
|
width: 1rem;
|
||||||
height: 1rem;
|
height: 1rem;
|
||||||
font-size: 1rem;
|
font-size: 0.8125rem;
|
||||||
}
|
}
|
||||||
.emoji-medium {
|
.emoji-medium {
|
||||||
width: 1.25rem;
|
width: 1.25rem;
|
||||||
@ -60,7 +60,7 @@
|
|||||||
height: 1.5rem;
|
height: 1.5rem;
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
}
|
}
|
||||||
.semojivg-full {
|
.emoji-full {
|
||||||
width: inherit;
|
width: inherit;
|
||||||
height: inherit;
|
height: inherit;
|
||||||
}
|
}
|
||||||
|
@ -59,7 +59,6 @@
|
|||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<span class="an-element__label" class:bold class:title={node}>
|
<span class="an-element__label" class:bold class:title={node}>
|
||||||
<div class="flex-row-center">
|
|
||||||
{#if icon && !parent}
|
{#if icon && !parent}
|
||||||
<div
|
<div
|
||||||
class="an-element__icon"
|
class="an-element__icon"
|
||||||
@ -81,7 +80,6 @@
|
|||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
|
||||||
</span>
|
</span>
|
||||||
{#if node === false}
|
{#if node === false}
|
||||||
<div class="an-element__tool" on:click|preventDefault|stopPropagation={onMenuClick}>
|
<div class="an-element__tool" on:click|preventDefault|stopPropagation={onMenuClick}>
|
||||||
|
@ -29,7 +29,7 @@
|
|||||||
|
|
||||||
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
||||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||||
<div class="antiNav-element" class:selected class:disabled>
|
<div class="antiNav-element special" class:selected class:disabled>
|
||||||
<div
|
<div
|
||||||
class="an-element__icon"
|
class="an-element__icon"
|
||||||
class:indent-2={indent === 'ml-2'}
|
class:indent-2={indent === 'ml-2'}
|
||||||
|
Loading…
Reference in New Issue
Block a user