css/packages/primer-box/lib/box.scss

// Box
// Intended to replace simple-box, boxed-group, and table-list

.Box {
  background-color: $white;
  border: $border-width $border-style $border-gray-dark;
  border-radius: $border-radius;
}

// Box padding density options
.Box--condensed {
  line-height: $lh-condensed;

  .Box-header {
    padding: $spacer-2 $spacer-3;
  }

  .Box-body {
    padding: $spacer-2 $spacer-3;
  }

  .Box-footer {
    padding: $spacer-2 $spacer-3;
  }

  .Box-btn-octicon {
    &.btn-octicon {
      padding: $spacer-2 $spacer-3;
      margin: (-$spacer-2) (-$spacer-3);
      line-height: $lh-condensed;
    }
  }

  .Box-row {
    padding: $spacer-2 $spacer-3;
  }

}

.Box--spacious {
  .Box-header {
    padding: $spacer-4;
    line-height: $lh-condensed;
  }

  .Box-title {
    font-size: $h3-size;
  }

  .Box-body {
    padding: $spacer-4;
  }

  .Box-footer {
    padding: $spacer-4;
  }

  .Box-btn-octicon {
    &.btn-octicon {
      padding: $spacer-4;
      margin: (-$spacer-4) (-$spacer-4);
    }
  }

  .Box-row {
    padding: $spacer-4;
  }

}

.Box-header {
  padding: $spacer-3;
  margin: -1px -1px 0 -1px;
  background-color: $bg-gray;
  border-color: $border-gray-dark;
  border-style: $border-style;
  border-width: $border-width;
  border-top-left-radius: $border-radius;
  border-top-right-radius: $border-radius;
}

.Box-title {
  font-size: $body-font-size;
  font-weight: $font-weight-bold;
}

.Box-body {
  padding: $spacer-3;
  border-bottom: $border-width $border-style $border-gray;

  // Ensures bottom-border doesn't poke out when .Box-body used without box-footer
  &:last-of-type {
    margin-bottom: -1px;
    border-bottom-right-radius: 2px;
    border-bottom-left-radius: 2px;
  }
}

// Box rows
.Box-row {
  padding: $spacer-3;
  margin-top: -1px;
  list-style-type: none; // To account for applying Box component to a list
  border-top: $border-width $border-style $border-gray;

  &:first-of-type {
    border-top-color: transparent;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
  }

  &:last-of-type {
    border-bottom-right-radius: 2px;
    border-bottom-left-radius: 2px;
  }

  // Adds a blue vertical line to the left of the row
  // For indicating a row item is unread
  &.Box-row--unread,
  // .unread to be deprecated with .Box-row-unread
  &.unread {
    box-shadow: 2px 0 0 $blue inset;
  }

  &.navigation-focus {
    // Focus styles for when drag icon
    .Box-row--drag-button {
      color: $text-blue;
      cursor: grab;
      opacity: 100;
    }

    // Grabbing while row is dragged
    &.is-dragging .Box-row--drag-button {
      cursor: grabbing;
    }

    // Row dragging styles
    &.sortable-chosen {
      background-color: $bg-gray-light;
    }

    // Makes dragging row background gray
    &.sortable-ghost {
      background-color: $bg-gray;

      // Hides contents of row while dragging so row looks solid gray
      .Box-row--drag-hide {
        opacity: 0;
      }
    }

  }
}

.Box-row--focus-gray {
  &.navigation-focus {
    background-color: $bg-gray;
  }
}

.Box-row--focus-blue {
  &.navigation-focus {
    background-color: $bg-blue-light;
  }
}

.Box-row--hover-gray {
  &:hover {
    background-color: $bg-gray;
  }
}

.Box-row--hover-blue {
  &:hover {
    background-color: $bg-blue-light;
  }
}

// Optional link style
// Makes links on mobile blue since they don't have hover state,
// and links are dark-gray with blue hover on desktop.
.Box-row-link {
  @include breakpoint(md) {

    color: $text-gray-dark;
    text-decoration: none;

    &:hover {
      color: $text-blue;
      text-decoration: none;
    }

  }
}

// Optional drag icon styles for reordering items
// Focus styles included in .Box-row above
.Box-row--drag-button {
  opacity: 0;
}

.Box-footer {
  padding: $spacer-3;
  margin-top: -1px; // prevents double border when used with .Box-body
  border-top: $border-width $border-style $border-gray;
}

// Option for a box with scrolling content
.Box--scrollable {
  max-height: 324px;
  overflow: scroll;
}

// Box themes

.Box--blue {
  border-color: $border-blue-light;

  .Box-header {
    background-color: $bg-blue-light;
    border-color: $border-blue-light;
  }

  .Box-body {
    border-color: $border-blue-light;
  }

  .Box-row {
    border-color: $border-blue-light;
  }

  .Box-footer {
    border-color: $border-blue-light;
  }
}

// Applies and red border to the outside of the box,
// but not to the border separating rows.
.Box--danger {
  border-color: $border-red;

  .Box-row {
    &:first-of-type {
      border-color: $border-red;
    }
  }

  .Box-body {
    &:last-of-type {
      border-color: $border-red;
    }
  }
}

.Box-header--blue {
  background-color: $bg-blue-light;
  border-color: $border-blue-light;
}

// Box row highlight themes

.Box-row--yellow {
  background-color: $yellow-100;
}

.Box-row--blue {
  background-color: $bg-blue-light;
}

.Box-row--gray {
  background-color: $bg-gray;
}

//Box with btn-octicon
.Box-btn-octicon {

  // Increase specificity when btn-octicon is used because comes after .Box in the cascade
  &.btn-octicon {
    padding: $spacer-3 $spacer-3;
    margin: (-$spacer-3) (-$spacer-3);
    line-height: $lh-default; // override btn-octicon line-height
  }
}