cortex-cms/cortex

View on GitHub
app/assets/stylesheets/cortex/components/jumbo-button.scss

Summary

Maintainability
Test Coverage
.jumbo-button {
  @include aspect-ratio(16, 9);

  border: $data-table-dividers;
  border-bottom: 4px solid $color-teal;

  &:hover {
    background-color: $jumbo-button-hover-background;
  }

  &:active {
    background-color: $jumbo-button-active-background;
  }
}

.jumbo-button__content {
  @include transform(translate(-50%, -50%));

  position: absolute;
  top: 50%;
  left: 50%;
  text-align: center;
  text-transform: uppercase;
}

.jumbo-button__content__icon {
  margin-bottom: 32px;

  img {
    height: 128px;
  }
}

.jumbo-button__content__add {
  margin-bottom: 32px;
  display: none;

  img {
    height: 128px;
  }
}