Template:IconButton/styles.css: Difference between revisions

Latest revision as of 18:17, 14 January 2026

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

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

.scamp-icon-button--horizontal {
  flex-direction: row;
}

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

.scamp-icon-button--horizontal .scamp-link-button a {
  flex: 1;
  display: inline-flex;
  align-items: center;
}

.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--horizontal.scamp-icon-button--sm .scamp-icon-button__img a {
	padding: 0.5rem;
}

.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;
}