Template:IconButton/styles.css
Appearance
.scamp-icon-button * {
box-sizing: border-box;
}
.scamp-icon-button {
transition: background-color 0.2s ease;
border-radius: 8px;
}
.scamp-icon-button:hover {
background-color: var(--background-color-interactive--hover);
}
.scamp-icon-button:hover .scamp-link-button {
background-color: var(--scamp-primary--hover);
border: 1px solid var(--scamp-primary-border--hover);
}
.scamp-icon-button__img a {
padding: 1rem;
}
.scamp-icon-button__img a,
.scamp-icon-button__img span {
display: block;
width: 100%;
height: 100%;
text-align: center;
}
.scamp-icon-button__img img {
aspect-ratio: 1;
}
.scamp-icon-button.scamp-icon-button--sm .scamp-icon-button__img img {
width: 32px;
height: 32px;
}
.scamp-icon-button.scamp-icon-button--md .scamp-icon-button__img img {
width: 48px;
height: 48px;
}
.scamp-icon-button.scamp-icon-button--lg .scamp-icon-button__img img {
width: 64px;
height: 64px;
}
.scamp-icon-button .scamp-link-button {
width: 100%;
}