zhdk/madek

/**
 * ## Default thumbnail style, independent from visualization mode `.ui-thumbnail`
 *
 * Styleguide 6.19

/* Default thumbnail style not relying on the parent .grid class

.ui-thumbnail
  display: inline-block
  margin: -15px
  padding: 15px
  position: relative
  .ui-thumbnail-privacy
    display: none
    +position-top-left(16px, 16px)
  .ui-thumbnail-image-wrapper
    line-height: 0
    position: relative
    vertical-align: middle
  .ui-thumbnail-image-holder
    overflow: hidden
    position: relative
    .ui-thumbnail-table-image-holder
      display: table
      .ui-thumbnail-cell-image-holder
        display: table-cell
        vertical-align: middle
        +dimension(130px, 88px)
  .ui-thumbnail-image
    +min-dimension(auto, auto)
    +max-dimension(130px, 88px)
    margin: 0 auto
  .ui-thumbnail-meta
    display: none
  .ui-thumbnail-meta-title,
  .ui-thumbnail-meta-subtitle
    height: 34px
    overflow: hidden
  .ui-thumbnail-meta-title
    line-height: $line-height-s
    padding-top: $space-x
  .ui-thumbnail-actions
    display: none
  .ui-thumbnail-dropdown
    display: none
    margin-top: $space-s

.ui-thumbnail.media-set,
.ui-thumbnail.filter-set
  .ui-thumbnail-image-wrapper
    +box-shadow(0 1px 2px 0px $darken, $space-x $space-x 0px 0px $white, $space-x $space-x 2px 0px $darken-strong)
  .ui-thumbnail-image-holder
    +dimension(130px, 130px)
    .ui-thumbnail-table-image-holder
      height: 1000px
      left: -435px
      position: relative
      top: -435px
      width: 1000px
      .ui-thumbnail-cell-image-holder
        +dimension(130px, 130px)
        .ui-thumbnail-inner-image-holder
          display: inline-block
          .ui-thumbnail-image
            +min-dimension(auto, auto)
            +max-dimension(400px, 400px)

.ui-thumbnail.media-entry,
.ui-thumbnail.media-entry-incomplete
  .ui-thumbnail-image-wrapper
    +dimension(130px, 130px)
  .ui-thumbnail-image-holder
    +dimension(130px, 88px)
    position: relative
    top: 21px

.ui-thumbnail.video .ui-thumbnail-image-wrapper
  background: $white image-url("backgrounds/thumb-video-backg.png") 0 0px no-repeat

/* Additional Set hover styles
 *-----------------------------------------

.ui-thumbnail-level-up-items,
.ui-thumbnail-level-down-items
  +micro-clearfix
  display: none
  border-style: solid
  background-image: image-url("backgrounds/container-midtone-darker.png")
  background-size: 29px 29px
  border-color: $darken
  left: 0
  padding: $space-s $space-x
  position: absolute
  right: 0
  text-align: center
  z-index: 101

.ui-thumbnail-level-up-items
  +border-top-radius($border-radius-m)
  +box-shadow(0 -1px 2px $darken-more)
  bottom: 100%
  border-width: 0 0 1px
  padding-bottom: $space-s

.ui-thumbnail-level-down-items
  +border-bottom-radius($border-radius-m)
  +box-shadow(0 1px 2px $darken-more)
  top: 100%
  border-width: 1px 0 0
  padding-top: $space-s

.ui-thumbnail-level-notes
  // color: $mono-light
  font-size: $font-s
  padding-bottom: $space-x

.ui-thumbnail-level-items
  +micro-clearfix
  clear: both
  display: block

.ui-thumbnail-level-item
  +dimension(60px, 60px)
  +float-left
  display: block
  padding: 5px
  &.odd
  &.even
    +float-right

.ui-thumbnail-level-item
  padding: 8px

.ui-thumbnail-level-item.media_set
  .ui-level-image-wrapper
    +box-shadow(0 1px 2px 0px $darken, 3px 3px 0px 0px $white, 3px 3px 2px 0px $darken-more)

.ui-level-image-wrapper
  +box-shadow(0 1px 3px $darken)
  +dimension(50px, 50px)
  border: 1px solid $mono-mid
  background: $white
  display: block
  line-height: 0
  padding: 4px
  position: relative
  vertical-align: middle

.ui-thumbnail-level-image-holder
  +dimension(50px, 50px)
  display: inline-block
  overflow: hidden
  position: relative

.ui-thumbnail-level-image
  +position-top-right(50%, 50%)
  +position-bottom-left(50%, 50%)
  +min-dimension(auto, 100%)
  +max-dimension(100%, auto)
  margin-top: -50%
  margin-left: -50%

.ui-thumbnail-level-holder
  +dimension(60px, 60px)

// Set thumbs' extra elements - arrows

.ui-thumbnail-level-up-items,
.ui-thumbnail-level-down-items
  &:after,
  &:before
    border: solid transparent
    border-color: rgba(255, 255, 255, 0)
    content: " "
    height: 0
    left: 50%
    pointer-events: none
    position: absolute
    width: 0
  &:after
    border-width: 5px
    margin-left: -5px
  &:before
    border-width: 7px
    margin-left: -7px

.ui-thumbnail-level-up-items
  &:after
    border-bottom-color: #ffffff
    bottom: -1px
    box-shadow: 0 1px 0 white
  &:before
    border-color: rgba(255, 255, 255, 0)
    border-bottom-color: $darken
    bottom: -1px

.ui-thumbnail-level-down-items
  &:after
    border-top-color: #ffffff
    top: -1px
  &:before
    border-color: rgba(255, 255, 255, 0)
    border-top-color: $darken
    box-shadow: 0 -1px 0 white
    top: -1px

// Set thumbs' extra elements - thumbnails

.ui-thumbnail-level-up-items .thumbnail.odd,
.ui-thumbnail-level-down-items .thumbnail.odd
  margin: $space-s $space-s $space-s 0

.ui-thumbnail-level-up-items .thumbnail.even,
.ui-thumbnail-level-down-items .thumbnail.even
  margin: $space-s 0 $space-s $space-s

// Filterset Flag

.ui-thumbnail.filter-set
  width: 140px

.ui-thumbnail-filterset-flag
  +position-top-right(16px, 16px)
  +dimension(21px, 21px)
  background-color: $white
  border-color: $mono-mid
  border-style: solid
  border-width: 0 0 1px 1px
  display: block
  z-index: 10
  .icon-filter
    position: relative
    color: $mono-strong
    margin-left: 4px
    top: 2px
    font-size: 14px

// Media Queries

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)
  .ui-thumbnail.video .ui-thumbnail-image-wrapper
    background: $white image-url("backgrounds/thumb-video-backg@2x.png") 0 0px no-repeat
    background-size: 138px 138px

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

@if $projection
  .ui-thumbnail.video .ui-thumbnail-image-wrapper
    background: $white image-url("backgrounds/thumb-video-backg-projct.png") 0 0px no-repeat