2020-05-31 21:56:44 +02:00
|
|
|
@import '../../styles/global.scss';
|
2020-05-18 04:08:50 +02:00
|
|
|
|
2020-05-18 04:08:00 +02:00
|
|
|
.lep-emoji-menu {
|
2020-05-31 22:57:07 +02:00
|
|
|
display: grid;
|
|
|
|
grid-template-columns: repeat(var(--lep-num-columns), 1fr);
|
|
|
|
justify-content: space-between;
|
|
|
|
align-items: center;
|
|
|
|
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;
|
2020-05-18 04:08:00 +02:00
|
|
|
}
|
2020-05-31 22:57:07 +02:00
|
|
|
|
2020-06-01 00:02:59 +02:00
|
|
|
button.lep-emoji {
|
|
|
|
padding: 0.5rem 0.5rem;
|
2020-05-31 22:57:07 +02:00
|
|
|
font-size: 1.375rem;
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: center;
|
2020-06-01 00:02:59 +02:00
|
|
|
border-radius: 100%;
|
2020-05-31 22:57:07 +02:00
|
|
|
font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Twemoji Mozilla",
|
|
|
|
"Noto Color Emoji", "EmojiOne Color", "Android Emoji";
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
background-color: var(--lep-hover-background-color);
|
|
|
|
}
|
|
|
|
|
|
|
|
&:active {
|
|
|
|
background-color: var(--lep-active-background-color);
|
|
|
|
}
|
2020-05-18 04:08:00 +02:00
|
|
|
}
|
2020-05-31 18:56:02 +02:00
|
|
|
|
2020-05-31 21:56:44 +02:00
|
|
|
.lep-nav {
|
2020-05-31 22:57:07 +02:00
|
|
|
display: flex;
|
2020-05-31 23:42:21 +02:00
|
|
|
border-bottom: 1px solid var(--lep-border-color);
|
|
|
|
contain: content;
|
2020-05-31 21:56:44 +02:00
|
|
|
}
|
2020-05-31 22:57:07 +02:00
|
|
|
|
2020-06-01 03:05:51 +02:00
|
|
|
.lep-nav-item {
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
flex: 1;
|
|
|
|
}
|
|
|
|
|
|
|
|
.lep-indicator {
|
|
|
|
height: var(--lep-indicator-height);
|
|
|
|
width: 100%;
|
|
|
|
background-color: var(--lep-indicator-color);
|
|
|
|
}
|
|
|
|
|
2020-05-31 21:56:44 +02:00
|
|
|
button.lep-nav-button.lep-emoji {
|
2020-05-31 22:57:07 +02:00
|
|
|
flex: 1;
|
|
|
|
padding: 0.5rem 0;
|
2020-05-31 21:56:44 +02:00
|
|
|
}
|
|
|
|
|
2020-05-31 18:56:02 +02:00
|
|
|
.lep-tabpanel {
|
2020-05-31 22:57:07 +02:00
|
|
|
min-height: 0;
|
|
|
|
flex: 1;
|
|
|
|
display: flex;
|
2020-05-31 23:42:21 +02:00
|
|
|
contain: content;
|
2020-05-31 18:56:02 +02:00
|
|
|
}
|
2020-05-31 21:56:44 +02:00
|
|
|
|
2020-05-31 23:42:21 +02:00
|
|
|
.lep-search-row {
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
contain: content;
|
|
|
|
}
|
|
|
|
|
|
|
|
.lep-search-wrapper {
|
|
|
|
flex: 1;
|
|
|
|
min-width: 0;
|
|
|
|
padding-left: 0.5rem;
|
|
|
|
}
|
|
|
|
|
2020-05-31 21:56:44 +02:00
|
|
|
input.lep-search {
|
2020-05-31 22:57:07 +02:00
|
|
|
padding: 0.25rem;
|
|
|
|
border-radius: 0.5rem;
|
|
|
|
border: 1px solid var(--lep-input-border-color);
|
|
|
|
background-color: var(--lep-background-color);
|
2020-05-31 23:42:21 +02:00
|
|
|
width: 100%;
|
2020-05-31 22:57:07 +02:00
|
|
|
|
|
|
|
&::placeholder {
|
|
|
|
color: var(--lep-placeholder-color);
|
|
|
|
}
|
2020-05-18 04:08:00 +02:00
|
|
|
}
|