lbry-desktop/ui/scss/component/_sticker-selector.scss
saltrafael 403321f064 [New Feature] Stickers (#131)
* Refactor filePrice

* Refactor Wallet Tip Components

* Add backend sticker support for comments

* Add stickers

* Refactor commentCreate

* Add Sticker Selector and sticker comment creation

* Add stickers display to comments and hyperchats

* Fix wrong checks for total Super Chats
2022-01-22 16:59:39 -05:00

82 lines
1.6 KiB
SCSS

@import '../init/vars';
.stickerSelector {
animation: menu-animate-in var(--animation-duration) var(--animation-style);
border: 1px solid var(--color-border);
border-radius: var(--border-radius);
margin-bottom: var(--spacing-m);
.stickerSelector__header {
border-bottom: 1px solid var(--color-border);
padding-bottom: var(--spacing-s);
margin-bottom: 0;
align-items: center;
padding: var(--spacing-xxs);
.stickerSelector__headerTitle {
padding: 0;
}
}
.navigation__wrapper {
height: unset;
border-left: 1px solid var(--color-border);
.navigation-links {
li {
.button {
padding: unset;
.button__content {
justify-content: unset;
flex-direction: unset;
width: unset;
.button__label {
font-size: var(--font-small);
margin: 0 var(--spacing-s);
}
}
}
}
}
}
}
.stickerSelector__list {
display: flex;
.stickerSelector__listBody {
display: flex;
flex-wrap: wrap;
overflow-y: scroll;
overflow-x: hidden;
max-height: 25vh;
padding: var(--spacing-s);
.button--file-action {
width: 5rem;
height: 5.3rem;
overflow: hidden;
margin: unset;
padding: var(--spacing-s);
.button__content {
display: flex;
flex-direction: column;
align-items: center;
.super-chat--light {
position: absolute;
display: inline;
bottom: 0;
}
}
@media (max-width: $breakpoint-xsmall) {
width: 4rem;
height: 4.3rem;
}
}
}
}