G-Loot DS — list item with hidden actions

by Augustin Hiebel

HTML

<!-- .item-actions-hidden can be placed on the .item itself or it's parent ul -->
<ul className="item-actions-hidden">
  <li className="item">
    <div className="item-body">
      <div className="item-title">Brawl #1</div>
    </div>
    <div className="item-actions">
      <div>
        <button className="button button-sm button-secondary rounded-full tooltip tooltip-left" data-tooltip="View details">
          <span className="icon icon-view" />
        </button>
      </div>
    </div>
    <div className="item-actions">
      <div>
        <button className="button button-sm button-secondary rounded-full tooltip tooltip-left" data-tooltip="Share">
          <span className="icon icon-network-communication" />
        </button>
      </div>
    </div>
    <div className="item-actions">
      <div>
        <button className="button button-sm button-secondary rounded-full tooltip tooltip-left" data-tooltip="Delete">
          <span className="icon icon-e-remove" />
        </button>
      </div>
    </div>
  </li>
  <li className="item">
    <div className="item-body">
      <div className="item-title">Brawl #2</div>
    </div>
    <div className="item-actions">
      <div>
        <button className="button button-sm button-secondary rounded-full tooltip tooltip-left" data-tooltip="View details">
          <span className="icon icon-view" />
        </button>
      </div>
    </div>
    <div className="item-actions">
      <div>
        <button className="button button-sm button-secondary rounded-full tooltip tooltip-left" data-tooltip="Share">
          <span className="icon icon-network-communication" />
        </button>
      </div>
    </div>
    <div className="item-actions">
      <div>
        <button className="button button-sm button-secondary rounded-full tooltip tooltip-left" data-tooltip="Delete">
          <span className="icon icon-e-remove" />
        </button>
      </div>
    </div>
  </li>
</ul>