zhdk/madek

/**
 * Media Resources Tiles Mode `.ui-resources.tiles`
 *-----------------------------------------

.ui-resources.tiles
  width: 100%

  .ui-resources-page
    display: block
    width: 100%

  .ui-resources-page-items
    +micro-clearfix
    list-style: none

/**
 *  Vertical variation
 *-----------------------------------------

.ui-resources.tiles.vertical
  display: block
  position: relative

  .ui-resources-page-items
    +column-gap($space-m)
    +column-width(300px)
    margin: 0 $space-x
    padding: $space-s 0 0

  .ui-resource
    +box-sizing(border-box)
    display: inline-block
    margin-bottom: $space-m
    padding: $space-x

    -webkit-column-span: 1
    -moz-column-span: 1
    column-span: 1

  .ui-resource
    +column-break-inside(avoid)
    width: 100%

  .ui-tile
    display: block
    min-height: 55px
    padding-bottom: 0

  .ui-tile__image
    +dimension(100%,auto)
    background-color: white // for images with transparency

  &.large
    .ui-resources-page-items
      +column-width(400px)
  &.small
    .ui-resources-page-items
      +column-width(200px)

  // States

  .ui-tile
    .ui-tile__foot
      +transition
      opacity: 0
      z-index: 1000
    &:hover
      .ui-tile__foot
        opacity: 1

/**
 *  Horizontal variation
 *-----------------------------------------

.ui-resources.tiles.horizontal
  position: relative
  height: 290px

  .ui-resources-page-items
    +force-scrollbars
    +position-top-right(0, 0)
    +position-bottom-left(0, 0)
    display: block
    overflow-y: hidden
    overflow-x: auto
    white-space: nowrap

  .ui-resource
    float: none
    display: inline-block
    margin: 0 $space-s

  .ui-tile
    .ui-tile__image
      +dimension(auto, 200px)
      min-width: 0

  &.small
    height: 210px
    .ui-tile
      .ui-tile__image
        +dimension(auto, 125px)
        min-width: 0

  &.large
    height: 385px
    .ui-tile
      .ui-tile__image
        +dimension(auto, 300px)
        min-width: 0
/* Layout switching
 *-----------------------------------------

// - hide extra tile-markup when layout!==tile
.ui-resources
  .ui-tile
    display: none
  
// - un-hide it when layout===tile, but hide the rest!
.ui-resources.tiles
  .ui-tile
    display: inline-block
  .ui-resource-head, .ui-resource-body
    display: none

// hide certain actions when the user is guest (not logged in)
.ui-resources
  .no-guest
    display: none
  &.active
    .no-guest
      display: initial