Files
element-call-Github/src/button/ReactionToggleButton.module.css
2024-11-14 13:40:19 +00:00

89 lines
1.6 KiB
CSS

.raisedButton > svg {
color: var(--cpd-color-icon-on-solid-primary);
}
.reactionPopupMenu {
display: flex;
}
.reactionPopupMenuModal {
top: 82vh !important;
}
.reactionPopupMenu section {
height: fit-content;
flex: auto;
}
.reactionsMenuSection {
margin: auto 0;
}
:root {
--reaction-button-padding: 1em;
--reaction-button-size: 1.4em;
--reaction-button-fontsize: 1.6em;
}
.reactionsMenu {
min-height: calc(
var(--reaction-button-size) + var(--reaction-button-padding)
);
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: var(--cpd-separator-spacing);
/* Height of 3 rows plus padding. */
max-height: calc(
(
var(--reaction-button-size) + var(--reaction-button-padding) +
var(--cpd-separator-spacing)
) * 4
);
max-width: 22.5em;
overflow-y: auto;
list-style: none;
}
.reactionButton {
padding: var(--reaction-button-padding);
font-size: 1.6em;
width: var(--reaction-button-size);
height: var(--reaction-button-size);
border-radius: var(--cpd-radius-pill-effect);
font-size: var(--reaction-button-fontsize);
min-block-size: unset;
border: none;
}
@media (max-width: 660px) {
:root {
--reaction-button-size: 1em;
--reaction-button-fontsize: 1em;
}
}
.verticalSeperator {
background-color: var(--cpd-color-gray-800);
width: 1px;
height: auto;
margin-left: var(--cpd-separator-spacing);
margin-right: var(--cpd-separator-spacing);
}
.alert {
margin-bottom: var(--cpd-space-3x);
animation: grow-in 200ms;
height: 2.5em;
}
@keyframes grow-in {
from {
height: 0;
}
to {
height: 2.5em;
}
}