openfoodfoundation/openfoodnetwork

// Search page
#groups {
  @include groupsbg;

  @include sidepaddingSm;

  @include panepadding;

  h1, p.text {
    font-weight: 300;
  }

  h1 {
    font-size: 350%;
  }

  a > .group-name {
    &:hover, &:focus, &:active {
      text-decoration: underline;
    }
  }

  .groups-icons {
    text-align: right;

    a {
      font-size: 1.5em;
    }
  }

  .groups-header {
    border: 2px solid $clr-brick-light-bright;

    @include border-radius-mixed(0.5em, 0.5em, 0, 0);

    margin: (-1rem) 0 1rem;
    padding: 1rem 0.9375rem;

    @media screen and (min-width: 640px) {
      border: 0 none;

      @include border-radius(0);

      margin: 0;
      padding: 0;
    }
  }
}

.group {
  padding-bottom: 0.5em;

  .row div {
    font-size: 110%;
  }

  .row a {
    vertical-align: middle;
  }

  .ofn-i_035-groups {
    font-size: 120%;
    vertical-align: middle;
  }
}

// Individual Page
#group-page {
  .group-logo, .group-header {
    text-align: center;
  }

  .group-logo {
    padding-bottom: 1em;
    max-height: 200px;
  }

  .group-name {
    border-bottom: 1px solid #ccc;
  }

  @media screen and (min-width: 768px) {
    .group-logo, .group-header {
      text-align: left;
    }

    .group-logo {
      max-height: 120px;
      float: left;
      padding-right: 1em;
      background-color: white;
    }
  }

  // Tabs
  .tabs dd a {
    padding: 0.25rem 0.45rem 0rem;
    font-size: 0.75rem;
    border: none;
    margin-bottom: -2px;
    margin-right: 2px;
    text-transform: capitalize;

    @include headingFont;

    @include border-radius(1em 0.25em 0 0);

    @include gradient($disabled-light, $disabled-bright);
  }

  @media screen and (min-width: 768px) {
    .tabs dd a {
      padding: 0.5rem 1rem 0.25em;
      font-size: 0.875rem;

      @include border-radius(1.5em 0.25em 0 0);
    }
  }

  @media screen and (min-width: 1024px) {
    .tabs dd a {
      padding: 0.75rem 1.5rem 0.5em;
      font-size: 1rem;

      @include border-radius(2em 0.25em 0 0);
    }
  }

  .tabs dd.active a {
    @include gradient(white, white);

    margin-bottom: -1px;
    border-top: 1px solid $light-grey;
    border-left: 1px solid $light-grey;
    border-right: 1px solid $light-grey;
    border-bottom: 0;
  }

  .tabs-content {
    border-top: 1px solid $light-grey;
    border-left: 1px solid $light-grey;
    border-right: 1px solid $light-grey;
    border-bottom: 1px solid $light-grey;
    padding: 1.5em;
  }

  // Producers tab
  .producers {
    background-image: none;
    background-color: initial;

    .active_table .active_table_node a.is_distributor, .active_table .active_table_node a.is_distributor i.ofn-i_059-producer {
      color: $clr-turquoise;
    }

    padding: 0;
  }

  // Hubs tab
  .hubs {
    background-image: none;
    padding-top: 0;
    padding-bottom: 0;
  }
}