Switch from EmojiOne to Twemoji, different emoji picker (#5046)
* Switch from EmojiOne to Twemoji, different emoji picker * Make emoji-mart use a local spritesheet * Fix emojify test * yarn manage:translationsth-downstream
@ -0,0 +1,197 @@
|
|||||||
|
.emoji-mart {
|
||||||
|
&,
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
line-height: 1.15;
|
||||||
|
}
|
||||||
|
|
||||||
|
font-size: 13px;
|
||||||
|
display: inline-block;
|
||||||
|
color: $ui-base-color;
|
||||||
|
|
||||||
|
.emoji-mart-emoji {
|
||||||
|
padding: 6px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.emoji-mart-bar {
|
||||||
|
border: 0 solid darken($ui-secondary-color, 8%);
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
border-bottom-width: 1px;
|
||||||
|
border-top-left-radius: 5px;
|
||||||
|
border-top-right-radius: 5px;
|
||||||
|
background: $ui-secondary-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
border-top-width: 1px;
|
||||||
|
border-bottom-left-radius: 5px;
|
||||||
|
border-bottom-right-radius: 5px;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.emoji-mart-anchors {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0 6px;
|
||||||
|
color: $ui-primary-color;
|
||||||
|
line-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.emoji-mart-anchor {
|
||||||
|
position: relative;
|
||||||
|
flex: 1;
|
||||||
|
text-align: center;
|
||||||
|
padding: 12px 4px;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: color .1s ease-out;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: darken($ui-primary-color, 4%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.emoji-mart-anchor-selected {
|
||||||
|
color: darken($ui-highlight-color, 3%);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: darken($ui-highlight-color, 3%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.emoji-mart-anchor-bar {
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.emoji-mart-anchor-bar {
|
||||||
|
position: absolute;
|
||||||
|
bottom: -3px;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 3px;
|
||||||
|
background-color: darken($ui-highlight-color, 3%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.emoji-mart-anchors {
|
||||||
|
i {
|
||||||
|
display: inline-block;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
svg {
|
||||||
|
fill: currentColor;
|
||||||
|
max-height: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.emoji-mart-scroll {
|
||||||
|
overflow-y: scroll;
|
||||||
|
height: 270px;
|
||||||
|
padding: 0 6px 6px;
|
||||||
|
background: $simple-background-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.emoji-mart-search {
|
||||||
|
padding: 10px;
|
||||||
|
padding-right: 45px;
|
||||||
|
background: $simple-background-color;
|
||||||
|
|
||||||
|
input {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 400;
|
||||||
|
padding: 7px 9px;
|
||||||
|
font-family: inherit;
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
background: rgba($ui-secondary-color, 0.3);
|
||||||
|
color: $ui-primary-color;
|
||||||
|
border: 1px solid $ui-secondary-color;
|
||||||
|
border-radius: 4px;
|
||||||
|
|
||||||
|
&::-moz-focus-inner {
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::-moz-focus-inner,
|
||||||
|
&:focus,
|
||||||
|
&:active {
|
||||||
|
outline: 0 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.emoji-mart-category .emoji-mart-emoji {
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
span {
|
||||||
|
z-index: 1;
|
||||||
|
position: relative;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover::before {
|
||||||
|
z-index: 0;
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: rgba($ui-secondary-color, 0.7);
|
||||||
|
border-radius: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.emoji-mart-category-label {
|
||||||
|
z-index: 2;
|
||||||
|
position: relative;
|
||||||
|
position: -webkit-sticky;
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
|
||||||
|
span {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
font-weight: 500;
|
||||||
|
padding: 5px 6px;
|
||||||
|
background: $simple-background-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.emoji-mart-emoji {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 0;
|
||||||
|
|
||||||
|
span {
|
||||||
|
width: 22px;
|
||||||
|
height: 22px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.emoji-mart-no-results {
|
||||||
|
font-size: 14px;
|
||||||
|
text-align: center;
|
||||||
|
padding-top: 70px;
|
||||||
|
color: $ui-primary-color;
|
||||||
|
|
||||||
|
.emoji-mart-category-label {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.emoji-mart-no-results-label {
|
||||||
|
margin-top: .2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.emoji-mart-emoji:hover::before {
|
||||||
|
content: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.emoji-mart-preview {
|
||||||
|
display: none;
|
||||||
|
}
|
Before Width: | Height: | Size: 604 B |
Before Width: | Height: | Size: 596 B |
Before Width: | Height: | Size: 634 B |
Before Width: | Height: | Size: 363 B |
Before Width: | Height: | Size: 627 B |
Before Width: | Height: | Size: 902 B |
Before Width: | Height: | Size: 645 B |
Before Width: | Height: | Size: 679 B |
Before Width: | Height: | Size: 560 B |
Before Width: | Height: | Size: 788 B |
Before Width: | Height: | Size: 573 B |
Before Width: | Height: | Size: 569 B |
Before Width: | Height: | Size: 442 B |
Before Width: | Height: | Size: 485 B |
Before Width: | Height: | Size: 505 B |
Before Width: | Height: | Size: 266 B |
Before Width: | Height: | Size: 567 B |
Before Width: | Height: | Size: 775 B |
Before Width: | Height: | Size: 604 B |
Before Width: | Height: | Size: 556 B |
Before Width: | Height: | Size: 602 B |
Before Width: | Height: | Size: 918 B |
Before Width: | Height: | Size: 644 B |
Before Width: | Height: | Size: 699 B |
Before Width: | Height: | Size: 497 B |
Before Width: | Height: | Size: 479 B |
Before Width: | Height: | Size: 542 B |
Before Width: | Height: | Size: 260 B |
Before Width: | Height: | Size: 577 B |
Before Width: | Height: | Size: 726 B |
Before Width: | Height: | Size: 615 B |
Before Width: | Height: | Size: 507 B |
Before Width: | Height: | Size: 612 B |
Before Width: | Height: | Size: 889 B |
Before Width: | Height: | Size: 649 B |
Before Width: | Height: | Size: 674 B |
Before Width: | Height: | Size: 522 B |
Before Width: | Height: | Size: 525 B |
Before Width: | Height: | Size: 559 B |
Before Width: | Height: | Size: 320 B |
Before Width: | Height: | Size: 608 B |
Before Width: | Height: | Size: 1.0 KiB |
Before Width: | Height: | Size: 646 B |
Before Width: | Height: | Size: 833 B |
Before Width: | Height: | Size: 607 B |
Before Width: | Height: | Size: 885 B |
Before Width: | Height: | Size: 654 B |
Before Width: | Height: | Size: 662 B |
Before Width: | Height: | Size: 530 B |
Before Width: | Height: | Size: 811 B |
Before Width: | Height: | Size: 547 B |
Before Width: | Height: | Size: 394 B |
Before Width: | Height: | Size: 951 B |
Before Width: | Height: | Size: 909 B After Width: | Height: | Size: 3.2 KiB |
Before Width: | Height: | Size: 1.1 KiB |
Before Width: | Height: | Size: 2.6 KiB After Width: | Height: | Size: 4.3 KiB |
Before Width: | Height: | Size: 469 B |