mixin getIcon(icon, title)
  span.icon(title=title, class="fa fa-#{icon}", aria-hidden=true)(class!=attributes.class)
    if block
      block

mixin getListItem(title, subtitle, icon, status)
  li.mx-player-listview-item
    a.mx-player-listview-item-link(href="#")
      +getIcon(icon, title)(class="mx-player-listview-item-icon")
      .mx-player-listview-item-content
        span.mx-player-listview-item-name= title
          if status
            span.mx-player-status(class=status)= status
        span.mx-player-listview-item-subtitle= subtitle

.mx-player
  .mx-player-header
    h1.mx-player-header-title Videos
    - var headerActions = [{icon: "refresh", title: "Refresh Videos"}, {icon: "search", title: "Search"}, {icon: "ellipsis-v", title: "Options"}]
    ul.mx-player-header-actions
      each action in headerActions
        li.mx-player-header-action
          button.mx-player-header-action-button
            +getIcon(action.icon, action.title)
  .mx-player-listview
    - var directories = [{directory: "Internal Memory", folders: 2, status: "New"}, {directory: "sdcard1", folders: 4, status: "New"}]
    each directory in directories
      ul
        +getListItem(directory.directory, directory.folders + " folders", "folder", directory.status)
    footer.mx-player-listview.footer
      button.mx-player-playButton(title="Play last-selected media")
        +getIcon("play")
      
View Compiled
$mxPlayerBackground ?= #232323
$mxPlayerSelectedLinkColour ?= #68D1F9

.mx-player
  background $mxPlayerBackground
  font-family Roboto, menu
  color white
  &-status
    font-size 0.5em
    text-transform uppercase
    font-weight bold
    padding 0.25em 0.6em
    border-radius 0.2em
    color inherit
    margin 0 1em
    display inline-block
    &.New
      background red
  &-header
    color white
    display flex
    justify-content space-between
    padding 1em
    background transparentify($mxPlayerBackground, 0.3)
    & + .mx-player-listview
      height calc(100vh - 3.5em)
    &-title
      font-size 1.5em
      font-weight 300
    &-actions
      float right
    &-action
      & + &
        margin-left 1em
      display inline-block
      &-button
        background inherit
        color inherit
        border inherit
        padding 0.4em
        cursor pointer
  &-playButton
    box-shadow inset 0 1px transparentify(white, 0.3)
    color inherit
    cursor pointer
    background transparentify($mxPlayerBackground + 35, 0.5)
    border inherit
    padding 0.4em 0.6em
    border-radius 50%
    font-size 1.3em
    position fixed
    bottom 1.5rem
    right 0.5rem
  &-listview
    &-item
      &-content
        display inline-block
      &-icon
        margin 0 0.5em 0.5em 0.5em
        opacity 0.5
        font-size 1.2em
        display inline-block
        vertical-align middle
        color inherit
      &-link
        padding 0.5em 1em
        display block
        text-decoration none
        color inherit
        transition 0.5s linear background, border-color
        border-left 0.25em solid transparent
        &:hover, &:active
          background $mxPlayerBackground + 35
        &:visited, &:active
          color $mxPlayerSelectedLinkColour
        &:active
          border-color $mxPlayerSelectedLinkColour
      &-name
        font-size 1em
        font-weight 300
        display block
      &-subtitle
        font-size 0.8em
        font-weight 300
        display block
        opacity 0.7
View Compiled

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css
  2. https://fonts.googleapis.com/css?family=Roboto:400,300

External JavaScript

This Pen doesn't use any external JavaScript resources.