zhdk/madek

/**
 * ## Page header `.ui-body-title`
 *
 * Styleguide 6.6

.ui-body-title
  margin-bottom: $space-m
  position: relative

// Page Title Content

.ui-body-title-label
  overflow: hidden
  position: relative

.ui-body-title-label:after
  +dimension(170px, 100%)
  +position-top-right(0, -1px)
  background: image-url("backgrounds/page-title-overflow.png") 0 0 repeat-y
  content: " "
  display: block
  overflow: hidden
  z-index: 50

.ui-body-title-label h1
  display: inline
  white-space: nowrap

// Page Title Actions

.ui-body-title-actions
  +position-top-right(-$space-x, 0)
  background: $body-background
  padding: $space-m 0 $space-m $space-s
  z-index: 100

.ui-body-title-actions:before
  +dimension(170px, 100%)
  +position-top-left(0, -165px)
  background: image-url("backgrounds/page-title-overflow.png") 0 0 repeat-y
  content: " "
  display: block
  overflow: hidden
  z-index: 50

.ui-body-title-actions .primary-button,
.ui-body-title-actions .button
  margin-left: $space-x

.ui-body-title-actions .action-separator
  margin: $space-x $space-s
  border-left: 1px solid $mono-light
  height: $line-height-l
  width: 1px
  position: relative
  top: 2px

// Media Queries

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)
  .ui-body-title-label:after
    background: image-url("backgrounds/page-title-overflow.png") 0 0 repeat-y
    background-size: 85px 10px
    +dimension(85px, 100%)

  .ui-body-title-actions:before
    background: image-url("backgrounds/page-title-overflow.png") 0 0 repeat-y
    background-size: 85px 10px
    +dimension(85px, 100%)
    +position-top-left(0, -80px)

/* Projection Styles
 *-----------------------------------------

@if $projection

  .ui-body-title-label h1
    text-overflow: ellipsis
  .ui-body-title-label:after
    background: none
  .ui-body-title-actions:before
    background: none