126 lines
2.2 KiB
SCSS
126 lines
2.2 KiB
SCSS
@import '../../styles/global.scss';
|
|
|
|
//
|
|
// private variables
|
|
//
|
|
|
|
.picker {
|
|
--total-emoji-size: calc(var(--emoji-size) + (2 * var(--emoji-padding)));
|
|
}
|
|
|
|
//
|
|
// tab panel
|
|
//
|
|
|
|
.tabpanel {
|
|
overflow-y: auto;
|
|
-webkit-overflow-scrolling: touch; // fix iOS scrolling
|
|
will-change: transform; // fix "repaints on scroll" warning in Chrome https://crbug.com/514303
|
|
min-height: 0;
|
|
flex: 1;
|
|
contain: content;
|
|
}
|
|
|
|
.emoji-menu {
|
|
display: grid;
|
|
grid-template-columns: repeat(var(--num-columns), var(--total-emoji-size));
|
|
justify-content: space-around;
|
|
align-items: flex-start;
|
|
width: 100%;
|
|
}
|
|
|
|
//
|
|
// emoji
|
|
//
|
|
|
|
button.emoji,
|
|
.emoji {
|
|
padding: var(--emoji-padding);
|
|
font-size: var(--emoji-size);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 100%;
|
|
height: var(--total-emoji-size);
|
|
width: var(--total-emoji-size);
|
|
overflow: hidden;
|
|
font-family:
|
|
"Apple Color Emoji",
|
|
"Segoe UI Emoji",
|
|
"Segoe UI Symbol",
|
|
"Twemoji Mozilla",
|
|
"Noto Color Emoji",
|
|
"EmojiOne Color",
|
|
"Android Emoji",
|
|
sans-serif;
|
|
|
|
&:hover {
|
|
background-color: var(--hover-background-color);
|
|
}
|
|
|
|
&:active,
|
|
&.active-search-item {
|
|
background-color: var(--active-background-color);
|
|
}
|
|
}
|
|
|
|
//
|
|
// nav
|
|
//
|
|
|
|
.nav {
|
|
display: grid;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
contain: content;
|
|
}
|
|
|
|
.nav-button {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.indicators {
|
|
display: flex;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.indicator {
|
|
flex: 1;
|
|
height: var(--indicator-height);
|
|
width: 100%;
|
|
background-color: var(--indicator-color);
|
|
}
|
|
|
|
//
|
|
// search
|
|
//
|
|
|
|
.search-row {
|
|
display: flex;
|
|
align-items: center;
|
|
contain: content;
|
|
}
|
|
|
|
.search-wrapper {
|
|
flex: 1;
|
|
min-width: 0;
|
|
padding-left: 0.5rem;
|
|
}
|
|
|
|
input.search {
|
|
padding: var(--input-padding);
|
|
border-radius: var(--input-border-radius);
|
|
border: var(--input-border-size) solid var(--input-border-color);
|
|
background-color: var(--background-color);
|
|
color: var(--input-font-color);
|
|
width: 100%;
|
|
font-size: var(--input-font-size);
|
|
line-height: var(--input-line-height);
|
|
|
|
&::placeholder {
|
|
color: var(--input-placeholder-color);
|
|
}
|
|
}
|