emoji-picker-element/src/picker/styles/global.scss

55 lines
818 B
SCSS

@import './variables.scss';
@import './resets.scss';
*,
*::before,
*::after {
box-sizing: border-box;
}
:focus {
outline: var(--outline-color) solid var(--outline-size);
outline-offset: calc(-1 * var(--outline-size)); // fix focus ring getting cropped
}
.picker {
contain: content;
display: flex;
flex-direction: column;
background: var(--background-color);
border: 1px solid var(--border-color);
width: 100%;
height: 100%;
}
// via https://stackoverflow.com/a/19758620
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
.hidden {
opacity: 0;
pointer-events: none;
}
.abs-pos {
position: absolute;
left: 0;
top: 0;
}
.shown {
display: block;
}
.not-shown {
display: none;
}