diff options
| author | VeraLyu <lvroyce0210@gmail.com> | 2017-04-26 00:44:02 +0800 |
|---|---|---|
| committer | Corey Hulen <corey@hulen.com> | 2017-04-25 09:44:02 -0700 |
| commit | f9502ff14bbb31aa835540c14725bbebdf0c340d (patch) | |
| tree | 46db93a54c68280f82df857618e7cdc81d24d1d9 /webapp/sass/components | |
| parent | dc9c73a46b5cf322f558a0f06bd8da76209321a6 (diff) | |
| download | chat-f9502ff14bbb31aa835540c14725bbebdf0c340d.tar.gz chat-f9502ff14bbb31aa835540c14725bbebdf0c340d.tar.bz2 chat-f9502ff14bbb31aa835540c14725bbebdf0c340d.zip | |
PLT-5897: Respect intrinsic ratio of img in emoji picker (#5987)
Changed style of img emoji picker, also fixed preview of emoji.
Diffstat (limited to 'webapp/sass/components')
| -rw-r--r-- | webapp/sass/components/_emoticons.scss | 55 |
1 files changed, 38 insertions, 17 deletions
diff --git a/webapp/sass/components/_emoticons.scss b/webapp/sass/components/_emoticons.scss index df4bbc158..ebbd222d9 100644 --- a/webapp/sass/components/_emoticons.scss +++ b/webapp/sass/components/_emoticons.scss @@ -230,15 +230,26 @@ width: 21px; padding: 0px; border: 0px; + text-align: center; + border-radius: 6px; + overflow: hidden; + cursor: pointer; } } .emoji-picker__item { - border-radius: 6px; - cursor: pointer; font-size: 18px; margin: 3px; } + .emoticon { + max-height: 21px; + max-width: 21px; + min-height: 0; + min-width: 0; + width: auto; + height: auto; + margin: 0 auto; + } } .emojisprite-wrapper { @@ -247,7 +258,11 @@ .emoji-picker__preview { border-top: 1px solid; - display: table-cell; + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: stretch; + vertical-align: middle; flex-grow: 0; flex-shrink: 0; height: 45px; @@ -264,9 +279,29 @@ vertical-align: middle; } + .emoji-picker__preview-image-label-box { + margin-left: 3px; + .emoji-picker__preview-name { + font-size: 13px; + font-weight: bold; + } + + .emoji-picker__preview-aliases { + display: block; + font-size: 12px; + + font-weight: bold; + } + } .emoji-picker__preview-image-box { + display: flex; + align-items: center; + justify-content: center; height: 36px; + max-height: 36px; width: 42px; + max-width: 42px; + text-align: center; .sprite-preview { border: none; @@ -281,20 +316,6 @@ .emoji-picker__preview-image { max-height: 36px; max-width: 42px; - padding: 0 10px 0 0; - } - .emoji-picker__preview-name { - - font-size: 13px; - font-weight: bold; - } - - .emoji-picker__preview-aliases { - display: block; - font-size: 12px; - - font-weight: bold; - } } |