diff options
author | beatrix <beatrix.bitrot@gmail.com> | 2018-01-14 17:48:02 -0500 |
---|---|---|
committer | GitHub <noreply@github.com> | 2018-01-14 17:48:02 -0500 |
commit | cd6674606fe07dbecdfb0c49a6968ff58188bfd8 (patch) | |
tree | 0183edc9d55bbd8870618bcb8c334ccfb1574473 /app/javascript/flavours/glitch/styles/components/emoji.scss | |
parent | 39f231f3da1ffe7e8a75df924790005fde5fe7fa (diff) | |
parent | f9b08e2142f552ed2873a014b78869df04c614e3 (diff) |
Merge pull request #329 from KnzkDev/scss-refactor
SCSS Refactor
Diffstat (limited to 'app/javascript/flavours/glitch/styles/components/emoji.scss')
-rw-r--r-- | app/javascript/flavours/glitch/styles/components/emoji.scss | 105 |
1 files changed, 105 insertions, 0 deletions
diff --git a/app/javascript/flavours/glitch/styles/components/emoji.scss b/app/javascript/flavours/glitch/styles/components/emoji.scss new file mode 100644 index 000000000..c91964810 --- /dev/null +++ b/app/javascript/flavours/glitch/styles/components/emoji.scss @@ -0,0 +1,105 @@ +.emojione { + display: inline-block; + font-size: inherit; + vertical-align: middle; + object-fit: contain; + margin: -.2ex .15em .2ex; + width: 16px; + height: 16px; + + img { + width: auto; + } +} + +.emoji-picker-dropdown__menu { + background: $simple-background-color; + position: absolute; + box-shadow: 4px 4px 6px rgba($base-shadow-color, 0.4); + border-radius: 4px; + margin-top: 5px; + + .emoji-mart-scroll { + transition: opacity 200ms ease; + } + + &.selecting .emoji-mart-scroll { + opacity: 0.5; + } +} + +.emoji-picker-dropdown__modifiers { + position: absolute; + top: 60px; + right: 11px; + cursor: pointer; +} + +.emoji-picker-dropdown__modifiers__menu { + position: absolute; + z-index: 4; + top: -4px; + left: -8px; + background: $simple-background-color; + border-radius: 4px; + box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2); + overflow: hidden; + + button { + display: block; + cursor: pointer; + border: 0; + padding: 4px 8px; + background: transparent; + + &:hover, + &:focus, + &:active { + background: rgba($ui-secondary-color, 0.4); + } + } + + .emoji-mart-emoji { + height: 22px; + } +} + +.emoji-mart-emoji { + span { + background-repeat: no-repeat; + } +} + +.emoji-button { + display: block; + font-size: 24px; + line-height: 24px; + margin-left: 2px; + width: 24px; + outline: 0; + cursor: pointer; + + &:active, + &:focus { + outline: 0 !important; + } + + img { + filter: grayscale(100%); + opacity: 0.8; + display: block; + margin: 0; + width: 22px; + height: 22px; + margin-top: 2px; + } + + &:hover, + &:active, + &:focus { + img { + opacity: 1; + filter: none; + } + } +} |