Split inline SVGs to their own files

Signed-off-by: Tulir Asokan <tulir@maunium.net>
This commit is contained in:
Tulir Asokan 2019-10-20 12:13:32 +03:00
parent 30ffd65b6c
commit be829980f6
16 changed files with 241 additions and 193 deletions

View file

@ -36,16 +36,6 @@ limitations under the License.
border-bottom: 1px solid $message-action-bar-border-color;
}
.mx_EmojiPicker button > svg {
width: 100%;
height: 100%;
fill: $primary-fg-color;
}
.mx_EmojiPicker button:disabled > svg {
fill: $focus-bg-color;
}
.mx_EmojiPicker_anchor {
border: none;
padding: 8px 8px 6px;
@ -66,6 +56,31 @@ limitations under the License.
}
}
.mx_EmojiPicker_anchor::before {
background-color: $primary-fg-color;
content: '';
display: inline-block;
mask-size: 100%;
mask-repeat: no-repeat;
width: 100%;
height: 100%;
}
.mx_EmojiPicker_anchor:disabled::before {
background-color: $focus-bg-color;
}
.mx_EmojiPicker_anchor_activity::before { mask-image: url('$(res)/img/emojipicker/activity.svg') }
.mx_EmojiPicker_anchor_custom::before { mask-image: url('$(res)/img/emojipicker/custom.svg') }
.mx_EmojiPicker_anchor_flags::before { mask-image: url('$(res)/img/emojipicker/flags.svg') }
.mx_EmojiPicker_anchor_foods::before { mask-image: url('$(res)/img/emojipicker/foods.svg') }
.mx_EmojiPicker_anchor_nature::before { mask-image: url('$(res)/img/emojipicker/nature.svg') }
.mx_EmojiPicker_anchor_objects::before { mask-image: url('$(res)/img/emojipicker/objects.svg') }
.mx_EmojiPicker_anchor_people::before { mask-image: url('$(res)/img/emojipicker/people.svg') }
.mx_EmojiPicker_anchor_places::before { mask-image: url('$(res)/img/emojipicker/places.svg') }
.mx_EmojiPicker_anchor_recent::before { mask-image: url('$(res)/img/emojipicker/recent.svg') }
.mx_EmojiPicker_anchor_symbols::before { mask-image: url('$(res)/img/emojipicker/symbols.svg') }
.mx_EmojiPicker_anchor_visible {
border-bottom: 2px solid $button-bg-color;
}
@ -99,6 +114,20 @@ limitations under the License.
cursor: pointer;
}
.mx_EmojiPicker_search_icon::after {
mask: url('$(res)/img/emojipicker/search.svg') no-repeat;
mask-size: 100%;
background-color: $primary-fg-color;
content: '';
display: inline-block;
width: 100%;
height: 100%;
}
.mx_EmojiPicker_search_clear::after {
mask-image: url('$(res)/img/emojipicker/delete.svg');
}
.mx_EmojiPicker_category {
padding: 0 12px;
display: flex;