fiedl/your_platform

View on GitHub
app/assets/stylesheets/your_platform/box.sass

Summary

Maintainability
Test Coverage

// boxes should not overflow:
// https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/

.box
  /* These are technically the same, but use both */
  overflow-wrap: break-word
  word-wrap: break-word

  -ms-word-break: break-all
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  //word-break: break-all
  /* Instead use this non-standard one: */
  word-break: break-word

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto
  -moz-hyphens: auto
  -webkit-hyphens: auto
  hyphens: auto

.box_header
  display: flex
  width: 100%
  .box_heading
    flex-grow: 1

.box .box_header .tool
  display: inline-block

.box.danger_zone
  .panel-heading
    background: #d9534f
    color: white

.box .box_content
  img
    max-width: 100%
  .avatar img
    max-width: none