zhdk/madek

/**
 * ## Featured entries `.ui-featured-entries`
 *
 * .small     - Small thumbnails variation
 * .active    - Large active variation showing actions on thumbnails
 * .small.active  - Small active variation showing actions on thumbnails
 *
 * Styleguide 7.10

/**
 *  NORMAL variation
 *-----------------------------------------

.ui-featured-entries
  height: 400px
  position: relative

.ui-featured-entries-list
  +position-top-right(0, 0)
  +position-bottom-left(0, 0)
  display: block
  overflow-y: hidden
  overflow-x: auto
  white-space: nowrap

.ui-featured-entries-item
  float: none
  display: inline-block

.ui-featured-entry
  +box-shadow(0 1px 5px $darken-more)
  +dimension(auto, 320px)
  background: $white
  display: inline-block
  position: relative
  margin: 0 $space-m 0 0
  &:hover
    text-decoration: none

.ui-featured-entry.filterset
  .ui-featured-entry-filterset-flag
    +position-top-right(0,0)
    background: $white
    display: block
    height: 20px
    text-align: center
    width: 20px
    i
      font-size: 14px
      color: $mono-mid
      position: relative
      top: 1px

.ui-featured-entry-metadata
  +position-bottom-right(0, 0)
  +position-bottom-left(0, 0)
  background: $white
  overflow: hidden
  margin-right: 10px
  padding: $space-s
  .ui-thumbnail-name,
  .ui-thumbnail-author
    height: $space-m
    white-space: nowrap
    margin-right: 10px
    overflow: hidden
    text-align: left
  &:after
    +background(linear-gradient(right, $white, rgba(255, 255, 255, 0)))
    +dimension(20%, 100%)
    +position-top-right(0, 0)
    display: block
    content: " "
    z-index: 50

.ui-featured-entry img
  +dimension(auto, 260px)
  display: inline-block

.ui-featured-entry-actions
  display: none
  .block
    display: block
  .ui-featured-entry-action
    opacity: $opacity-strong
    &:hover
      opacity: 1.0
    a
      color: $white
      &:hover
        text-decoration: none

.ui-featured-entry-type
  +position-top-right($space-s + 2px, 0)
  z-index: 100
  color: $mono-mid

.ui-featured-entry-type
  +position-top-right($space-s + 2px, 0)
  z-index: 100
  color: $mono-mid

/**
 *  SMALL variation
 *-----------------------------------------

.ui-featured-entries.small
  height: 200px
  .ui-featured-entry
    +dimension(auto, 170px)
    margin-right: $space-x
  .ui-featured-entry img
    +dimension(auto, 170px)
  .ui-featured-entry-metadata
    display: none

/**
 *  ACTIVE variation
 *-----------------------------------------

.ui-featured-entries.active
  .ui-featured-entries-item:hover
    position: relative
    .ui-featured-entry-actions
      +border-radius($border-radius-m)
      +dimension(100px, 20px)
      +position-bottom-left(70px, 50%)
      +position-bottom-right(70px, 50%)
      background: $darken-more
      display: block
      margin-left: -50px
      text-align: center
    .ui-featured-entry-action
      display: inline-block
      margin: 0 2px
    .ui-featured-action-delete,
    .ui-featured-action-browse,
    .ui-featured-action-edit,
    .ui-featured-action-select
      color: $white
      &:hover
        text-decoration: none
  &.small .ui-featured-entries-item:hover .ui-featured-entry-actions
    bottom: 15px