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:translationsmaster
@ -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 |