_teams.scss

.view-teams {

  // resets for existing styles
  div.course-wrapper section.course-content {
    padding: 0;

    p {
      margin-bottom: ($baseline/4);
    }
  }

  p, span {
    color: inherit;
    font-weight: inherit;
  }

  .icon {
    font-family: "FontAwesome";
    color: inherit;
  }

  // layout
  .page-header {
    @include clearfix();
    border-bottom: 1px solid $gray-l3;
    padding: $baseline $baseline ($baseline/2) $baseline;

    .page-title {
      @extend %t-title4;
      margin-bottom: ($baseline/4);
      text-transform: none;
      color: $black;
    }

    .page-description {
      @extend %t-copy-sub1;
      margin-bottom: ($baseline/4);
      color: $gray;
    }
  }

  .page-header.has-secondary {

    .page-header-main {
      display: inline-block;
      width: flex-grid(8,12);
    }

    .page-header-secondary {
      @include text-align(right);
      display: inline-block;
      width: flex-grid(4,12);
      vertical-align: text-bottom;
    }
  }

  // ui bits
  .breadcrumbs {
    @extend %t-copy-sub1;

    .nav-item {
      @include margin-right($baseline/2);
      display: inline-block;
    }

    .icon {
      @include margin-right($baseline/4);
      display: inline-block;
      color: $gray-l2;

      @include rtl {
        @include transform(rotateY(180deg));
      }
    }
  }

  .page-header-search {

    .wrapper-search-input {
      display: inline-block;
      position: relative;
      vertical-align: middle;
    }

    .search-label {
      @extend %text-sr;
    }

    .search-field {
      transition: all $tmg-f2 ease-in-out;
      border: 1px solid $gray-l4;
      border-radius: 3px;
      padding: ($baseline/4) ($baseline/2);
      font-family: inherit;
      color: $gray;
    }

    .action-search {
      @extend %button-reset;
      background-color: $gray-l3;
      padding: ($baseline/5) ($baseline/2);
      text-shadow: none;
      vertical-align: middle;

      .icon {
        color: $white;
      }

      // STATE: hover and focus
      &:hover,
      &:focus {
        background-color: $blue;
      }
    }

    .action-clear {
      @include right(0);
      @include margin(0, ($baseline/4), 0, 0);
      @extend %button-reset;
      position: absolute;
      top: 0;
      padding: ($baseline/4);
      color: $gray-l3;

      // STATE: hover and focus
      &:hover,
      &:focus {
        color: $black;
      }
    }
  }

  // main content bits
  .page-content {
    padding: $baseline;
  }

  .page-content-nav {
    @extend %page-content-nav;
  }

  .intro {
    @extend %t-weight4;
  }

  .listing-tools {
    margin: ($baseline/10) $baseline;
  }

  // reset general ul styles
  .cards-list {
    margin: 0;
    padding: 0;
  }

  .card {
    @include clearfix();
    transition: all $tmg-f2 ease-in-out;
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 30%; // TODO: susy grid
    margin: ($baseline) 1.2%;
    border: 1px solid $gray-l4;
    border-bottom: 2px solid $gray-l3;
    border-radius: 3px;
    background-color: $white;
    color: $black;

    // STATE: hover, active, and focus
    &:hover,
    &:active,
    &:focus {
      box-shadow: 0 0 5px 1px $m-blue-t1;

      .card-description {
        color: $base-font-color;
      }
    }

    .wrapper-card-core {
      @include clearfix();
      padding: ($baseline);
    }

    .card-type {
      @extend %t-copy-sub2;
      text-transform: uppercase;
      color: $gray;
    }

    .card-title {
      @extend %t-title5;
      @extend %t-strong;
      margin-bottom: rem(.5);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .card-description {
      @extend %t-copy-sub1;
      color: $gray;
    }

    .card-actions {
      @include clearfix();

      .action-view {
        @extend %btn-pl-default-base;
        @include float(right);
        margin: ($baseline/4) 0;
      }
    }

    .wrapper-card-meta {
      @include clearfix();
      @extend %t-copy-sub1;
      padding: ($baseline/2) $baseline;
      background-color: $gray-l6;
      color: $gray;

      .meta-detail {
        @include margin(($baseline/4) ($baseline*.75) ($baseline/4) 0);
        color: $gray-d1;

        abbr {
          border: 0;
          text-decoration: none;
        }

        .icon {
          @include margin-right ($baseline/4);
        }
      }

      .member-count {
        display: inline-block;
        vertical-align: middle;
        @include margin-right($baseline/4);
      }

      .list-member-thumbs {
        @extend %ui-no-list;
        display: inline-block;
        vertical-align: middle;

        .item-member-thumb {
          display: inline-block;
          margin: 0 ($baseline/4);
        }

        img {
          width: $baseline;
          height: $baseline;
          border-radius: ($baseline/5);
          border: 1px solid $gray-l4;
        }
      }
    }

    &.square-card {

      .card-description { // replace with js or char limit
        height: 4rem;
        overflow: hidden;
      }

      .wrapper-card-meta {

        &.has-actions {
          .card-meta,
          .card-actions {
            display: inline-block;
            width: 48%; // TODO: susy grid
            vertical-align: middle;
          }
        }
      }
    }

    &.list-card {
      width: auto;
      display: block;

      .card-core {
        display: inline-block;
        vertical-align: middle;
        width: 84%; // TODO: susy grid
      }

      .card-meta {
        @include clearfix();
      }

      .meta-detail {
        display: inline-block;
        vertical-align: middle;
      }

      .team-activity {
        @include float(right);
      }

      .card-actions {
        display: inline-block;
        vertical-align: middle;
        width: 15%; // TODO: susy grid
      }
    }

    &.has-pennant {

      .pennant {
        @extend %t-copy-sub2;
        @extend %t-strong;
        display: block;
        position: absolute;
        top: ($baseline/2);
        @include left(-($baseline/4));
        box-shadow: 1px 1px 1px 0 $blue-d1;
        background-color: $m-blue-l2;
        padding: ($baseline/10) ($baseline*.75);
        text-transform: uppercase;
        color: $white;
      }
    }

    &.is-unavailable {
      background-color: $gray-l5;

      .wrapper-card-meta {
        background-color: $gray-l4;
      }
    }
  }

  .team-profile {

    .page-content-main {
      display: inline-block;
      width: flex-grid(8, 12);
      vertical-align: top;
    }

    .page-content-secondary {
      display: inline-block;
      width: flex-grid(4,12);
      @include margin-left($baseline * 0.75);
      margin-bottom: $baseline;

      @extend %t-copy-sub1;
      color: $gray;

      div, .team-detail-header {
        margin-bottom: ($baseline/4);
      }

      .image-url {
        border: 2px solid $outer-border-color;
        border-radius: ($baseline/4);
        margin-bottom: ($baseline/4);
      }

      .leave-team {
        margin-bottom: $baseline;
        margin-top: ($baseline/2);
      }

      .invite-header, .invite-text {
        margin-bottom: ($baseline/2);
      }

      .invite-team {
        margin-top: ($baseline);
        margin-bottom: ($baseline/2);
      }
      .invite-link-input {
        width: 100%;
      }

      .member-profile {
        position: relative;
        display: inline-block;

        @include tooltip-hover-style(-($baseline*2));
      }
    }
  }

  .create-team {

    legend {
      @extend %t-title6;
      @extend %t-weight4;
      margin-bottom: ($baseline/4);
    }

    .description {
      @extend %t-copy-sub1;
      margin-bottom: ($baseline/2);
      color: $gray-l1;
    }

    .form-field {
      margin: 0 0 ($baseline*0.75) 0;

      .label {
        display: block;
        margin-bottom: ($baseline/4);
      }

      &.is-required {
        @extend %t-weight4;

        .label:after {
          @include margin-left($baseline/4);
          content: "*";
        }
      }

      .input-text {
        @extend %t-copy-base;
        transition: all $tmg-f2 ease-in-out 0s;
        display: block;
        width: 90%;
        height: 100%;
        margin-bottom: ($baseline/4);
        border: 1px solid $gray-l2;
        padding: ($baseline/2);
      }

      .input-select {
        @extend %t-copy-base;
        width: 90%;
        margin-bottom: ($baseline/4);
        border: 1px solid $gray-l2;
      }

      .input-text,
      .input-select {

        &:focus {
          border: 1px solid $blue;

          + .tip {
            color: $blue;
          }
        }
      }

      &.has-errors {

        .input-text,
        .input-select {
          border: 1px solid $alert-color;

          + .tip {
            color: $alert-color;
          }
        }
      }

      .tip {
        @extend %t-copy-sub1;
        display: block;
        color: $gray-l1;
      }
    }

    .required-wrapper {
      display: inline-block;
      vertical-align: top;
      width: 60%; // TODO: susy grid
    }

    .optional-wrapper {
      display: inline-block;
      vertical-align: top;
      width: 35%; // TODO: susy grid
      @include margin-left(2%);
      border-left: 2px solid $gray-l4;
      padding-left: 2%;
    }
  }

  .form-actions {
    margin-top: $baseline;
  }

  .action {
    @extend %t-copy;
    @extend %t-action2;
    @include margin-right ($baseline/2);
    padding: ($baseline/2) $baseline;
  }

  .action-primary {
    @extend %btn-primary-blue;
    display: inline-block;
    text-shadow: none;
  }

  .action-cancel {
    @extend %button-reset;
    display: inline-block;
    border: 1px solid transparent;
    color: $gray;

    // STATE: hover and focus
    &:hover,
    &:focus {
      border: 1px solid $link-color;
      color: $link-color;
    }
  }

  .header-action-view {
    display: inline-block;
    width: 33%;
    vertical-align: text-bottom;

    .join-team.form-actions, .join-team-message {
      @include text-align(right);
    }
  }

  .join-team-message {
    @extend %t-copy-sub1;
    @include text-align(right);
    color: $gray-l1;
    display: block;
    margin-bottom: ($baseline/4);
  }

  .team-actions {
    @extend %ui-well;
    margin: 20px 1.2%;
    color: $gray;
    text-align: center;

    .title {
      @extend %t-title6;
      @extend %t-strong;
      margin-bottom: ($baseline/2);
      text-align: inherit;
      color: inherit;
    }

    .copy {
      text-align: inherit;
      color: inherit;
    }
  }
}

.teams-content {

  .teams-main {

    .team-edit-fields {
      overflow: hidden;
      position: relative;
      width: 100%;
      @include clearfix();

      .team-required-fields {
        @include float(left);
        width: 55%;

        .u-field {
          @include margin-right($baseline*2);
        }

        .u-field.u-field-name {
          padding-bottom: $baseline;

          .u-field-value {
            width: 100%;

            input {
              border-radius: ($baseline/5);
              height: ($baseline*2);
            }
          }

          .u-field-message {
            @include padding-left(0);
            padding-top: ($baseline/4);
            width: 100%;
          }
        }

        .u-field.u-field-description {

          .u-field-value {
            width: 100%;

            textarea {
              width: 100%;
              height: ($baseline*5);
              border-radius: ($baseline/5)
            }
          }

          .u-field-footer {

            .u-field-message {
              display: block;
              @extend %t-copy-sub1;
              @include padding-left(0);
              margin-top: ($baseline/4);
              color: $gray-l1;
              width: 100%;
            }
          }
        }

        .u-field-title {
          padding-bottom: ($baseline/4);
          color: $base-font-color;
          width: 100%;
        }
      }

      .team-optional-fields {
        @include float(left);
        @include margin-left($baseline*2);
        width: 40%;

        .u-field.u-field-optional_description {
          margin-bottom: ($baseline/2);

          .u-field-title {
            color: $base-font-color;
            font-weight: $font-semibold;
            margin-bottom: ($baseline/5);
          }

          .u-field-value {
            display: none;
          }
        }

        .u-field.u-field-language {
          margin-bottom: ($baseline/5);
        }

        .u-field-value-display {
          display: none;
        }

        .u-field-title {
          color: $base-font-color;
        }

        .u-field-message {
          @include padding-left(0);
        }

        .u-field-title, .u-field-value, .u-field-message {
          width: 100%;
        }
      }

    }

    .u-field {
      padding: 0;
    }

    .u-field.error {
      input, textarea {
        border-color: $error-color;
      }

      .u-field-message-help, .u-field-description-message {
        color: $error-color !important;
      }
    }

    .create-team.wrapper-msg {
      margin: 0 0 $baseline 0;
    }
  }
}

// vertical line between required and optional fields
.vertical-line:after {
  height: 100%;
  border-left: 2px solid $gray-l4;
  content: "";
  position: absolute;
}

.form-instructions {
  margin: ($baseline/2) 0 $baseline 0;
}

.create-team.form-actions {
  margin-top: $baseline;
}