conference-opportunities/conference-opportunities

View on GitHub
app/assets/stylesheets/conferences/_header.scss

Summary

Maintainability
Test Coverage
.conferences-header {
  @extend .jumbotron-fluid;
  position: relative;
  padding: 7rem 0;
  background-size: cover;
  background-color: #999;
  background-image: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), url('https://images.unsplash.com/photo-1462823985959-022de68638a2?dpr=2&auto=format&crop=entropy&fit=crop&w=1500&h=844&q=80&cs=tinysrgb');
  background-position: center;

  &__title,
  &__subtitle {
    text-align: center;
    color: #fff;
  }

  &__title-link {
    color: inherit;
    border-bottom: 0.15rem solid rgba(#fff, 0.9);

    &:hover {
      text-decoration: none;
      color: inherit;
    }
  }

  &__filter-list {
    @extend .nav;
    @extend .nav-inline;
    text-align: center;
    width: 100%;
    position: absolute;
    bottom: 0;
  }

  &__filter {
    @extend .nav-link;
    color: #fff;
    position: relative;
    padding-bottom: 1rem;

    &:hover {
      color: #fff;
    }

    &:after {
      position: absolute;
      bottom: 0;
      left: 50%;
      content: '';
      margin-left: -10px;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-bottom: 10px solid $body-bg;
    }
  }
}