Github emoji-picker-element/Picker.scss at 9975b341e96ef996f20576d25305771fe7c2c...

emoji-picker-element/Picker.scss at 9975b341e96ef996f20576d25305771fe7c2cc77 · nolanlawson/emoji-picker-element · GitHubPermalink

@import '../../styles/global.scss';

// These z-indexes are used to manage the skintone picker animation and make it look nicer. // The skintone picker should appear to expand "behind" the skintone button. $skintoneZIndex1: 1; $skintoneZIndex2: 2; $skintoneZIndex3: 3;

// // skintone picker //

.skintone-button-wrapper { background: var(--background); z-index: $skintoneZIndex3; }

.skintone-button-wrapper.expanded { z-index: $skintoneZIndex1; // place behind the skintone dropdown after the listbox has animated }

.skintone-list { position: absolute; right: 0; top: 0; z-index: $skintoneZIndex2; overflow: visible; background: var(--background); border-bottom: var(--border-size) solid var(--border-color); border-radius: 0 0 var(--skintone-border-radius) var(--skintone-border-radius); will-change: transform; transition: transform 0.2s ease-in-out; transform-origin: center 0;

@media (prefers-reduced-motion: reduce) { // We still want the transition event to fire, so we can listen for the transitionend event // but unfortunately transition: none would just eliminate this entirely. So just make it // effectively instant. I found 0.001s looks best in Firefox (avoids a jerky split-second animation) // while still fixing WebKit (which doesn't work if you set 0s or transition-delay: -1s or other hacks). // see also: https://github.com/jensimmons/cssremedy/issues/11 transition-duration: 0.001s; }

&.no-animate { transition: none; } }

// // 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%; }

.category { padding: var(--emoji-padding); font-size: var(--category-font-size); color: var(--category-font-color); }

// // emoji //

button.emoji, .emoji { 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); line-height: 1; overflow: hidden; font-family: var(--font-family); cursor: pointer;

// see https://css-tricks.com/solving-sticky-hover-states-with-media-hover-hover/ @media(hover: hover) and (pointer: fine) { &:hover { background: var(--button-hover-background); } }

&:active, &.active { background: var(--button-active-background); } }

.custom-emoji { height: var(--total-emoji-size); width: var(--total-emoji-size); padding: var(--emoji-padding); object-fit: contain; pointer-events: none; background-repeat: no-repeat; background-position: center center; background-size: var(--emoji-size) var(--emoji-size); }

// // nav //

.nav { display: grid; justify-content: space-between; align-items: center; contain: content; }

.nav-button { display: flex; justify-content: center; align-items: center; }

// // indicator //

.indicator-wrapper { display: flex; border-bottom: 1px solid var(--border-color); }

.indicator { $opacityAnim: 0.1s; $transformAnim: 0.25s; width: calc(100% / var(--num-groups)); height: var(--indicator-height); opacity: var(--indicator-opacity); background-color: var(--indicator-color); will-change: transform, opacity; transition: opacity #{$opacityAnim} linear, transform #{$transformAnim} ease-in-out;

@media (prefers-reduced-motion: reduce) { will-change: opacity; transition: opacity #{$opacityAnim} linear; } }

// // search //

.pad-top { width: 100%; height: var(--emoji-padding); z-index: $skintoneZIndex3; background: var(--background); }

.search-row { display: flex; align-items: center; position: relative; padding-left: var(--emoji-padding); padding-bottom: var(--emoji-padding); }

.search-wrapper { flex: 1; min-width: 0; }

input.search { padding: var(--input-padding); border-radius: var(--input-border-radius); border: var(--input-border-size) solid var(--input-border-color); background: var(--background); 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); } }

// favorites

.favorites { display: flex; flex-direction: row; border-top: var(--border-size) solid var(--border-color); contain: content; }

// // unsupported warning //

.message { padding: var(--emoji-padding); }