Topcoat playground

Messing around in topcoat

by Wayne Humphrey

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/topcoat/0.8.0/css/topcoat-mobile-dark.min.css">
<div class="list-container">
  <div class="topcoat-list rounded">
    <h3 class="topcoat-list__header">Category</h3>
    <ul class="topcoat-list__container">
      <li class="topcoat-list__item">
        Item
      </li>
      <li class="topcoat-list__item">
        Item
      </li>
      <li class="topcoat-list__item">
        Item
      </li>
    </ul>
  </div>
</div>

CSS

.list-container {
  width: 90%;
  margin: 1em auto;
}

li.topcoat-list__item {
  cursor: pointer;
}

li.topcoat-list__item:after {
  content: "@";
  float: right;
}

li.selected {
  background-color: #C6C8C8;
  color: #454646;
}

.rounded {
  -moz-border-radius: 1em;
  border-radius: 1em;
}

JavaScript

$("li.topcoat-list__item").on("click", function(a) {
  // Change background color
  //$(".selected").removeClass("selected");
  //$(this).toggleClass("selected");
  $(this).css({
    'background-color': '#C6C8C8',
    'color': '#454646'
  })
  $(this).animate({
    'background-color': '#454646',
    'color': '#C6C8C8'
  }, 2000);
});