Jump to content

Template:IconButton/styles.css

From Scampsopedia
.scamp-icon-button * {
  box-sizing: border-box;
}

.scamp-icon-button {
  transition: background-color 0.2s ease;
  border-radius: 8px;
}

.scamp-icon-button--horizontal {
	display: flex;
}

.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 figure,
.scamp-icon-button__img span {
  display: block;
  width: 100%;
  height: 100%;
  text-align: center;
}

.scamp-icon-button .scamp-icon-button__img img {
  aspect-ratio: 1;
  object-fit: contain;
}

.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 {
  flex: 1;
}