126 lines
2.2 KiB
SCSS
126 lines
2.2 KiB
SCSS
@import '../../styles/global.scss';
|
|
|
|
//
|
|
// private variables
|
|
//
|
|
|
|
.lep-picker {
|
|
--total-emoji-size: calc(var(--lep-emoji-size) + (2 * var(--lep-emoji-padding)));
|
|
}
|
|
|
|
//
|
|
// tab panel
|
|
//
|
|
|
|
.lep-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;
|
|
}
|
|
|
|
.lep-emoji-menu {
|
|
display: grid;
|
|
grid-template-columns: repeat(var(--lep-num-columns), var(--total-emoji-size));
|
|
justify-content: space-around;
|
|
align-items: flex-start;
|
|
width: 100%;
|
|
}
|
|
|
|
//
|
|
// emoji
|
|
//
|
|
|
|
button.lep-emoji,
|
|
.lep-emoji {
|
|
padding: var(--lep-emoji-padding);
|
|
font-size: var(--lep-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(--lep-hover-background-color);
|
|
}
|
|
|
|
&:active,
|
|
&.lep-active-search-item {
|
|
background-color: var(--lep-active-background-color);
|
|
}
|
|
}
|
|
|
|
//
|
|
// nav
|
|
//
|
|
|
|
.lep-nav {
|
|
display: grid;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
contain: content;
|
|
}
|
|
|
|
.lep-nav-button {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.lep-indicators {
|
|
display: flex;
|
|
border-bottom: 1px solid var(--lep-border-color);
|
|
}
|
|
|
|
.lep-indicator {
|
|
flex: 1;
|
|
height: var(--lep-indicator-height);
|
|
width: 100%;
|
|
background-color: var(--lep-indicator-color);
|
|
}
|
|
|
|
//
|
|
// search
|
|
//
|
|
|
|
.lep-search-row {
|
|
display: flex;
|
|
align-items: center;
|
|
contain: content;
|
|
}
|
|
|
|
.lep-search-wrapper {
|
|
flex: 1;
|
|
min-width: 0;
|
|
padding-left: 0.5rem;
|
|
}
|
|
|
|
input.lep-search {
|
|
padding: 0.25rem;
|
|
border-radius: 0.5rem;
|
|
border: 1px solid var(--lep-input-border-color);
|
|
background-color: var(--lep-background-color);
|
|
color: var(--lep-input-font-color);
|
|
width: 100%;
|
|
font-size: 1rem;
|
|
line-height: 1.5;
|
|
|
|
&::placeholder {
|
|
color: var(--lep-placeholder-color);
|
|
}
|
|
}
|