Line Testing

HTML

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">

<p>
This example is using font-awesome icons, but same approach can be used for our grommet font pack.
</p>

<div id="capsule_tree" class="desc">
  <ul class="tree">
    <li class="option_set">
      Service Blueprints
      <ul>
        <li class="option warning">
          <i class="fas fa-exclamation-triangle"></i>&nbsp;vCenter- F5 Networks BIGIP LTM Load...
        </li>
        <li class="option success">
          <i class="fas fa-check-circle"></i>&nbsp;vCenter- F5 Networks BIGIP LTM Load...
        </li>
      </ul>
    </li>
    <li class="option_set">
      Service Offerings
    </li>
    <li class="option_set">
      Resource Offerings
      <ul>
        <li class="option danger">
          <i class="fas fa-times"></i>&nbsp;F5 Load Balancing Service 17.8.1
        </li>
      </ul>
    </li>
    <li class="option_set">
      Service Component Templates
      <ul>
        <li class="option success">
          <i class="fas fa-check-circle"></i>&nbsp;Template 1
        </li>
        <li class="option success">
          <i class="fas fa-check-circle"></i>&nbsp;Template 2
        </li>
      </ul>
    </li>
    <li class="option_set">
      Service Component Types
      <ul>
        <li class="option success">
          <i class="fas fa-check-circle"></i>&nbsp;Type 1
        </li>
        <li class="option success">
          <i class="fas fa-check-circle"></i>&nbsp;Type 2
        </li>
      </ul>
    </li>
    <li class="option_set">
      OO Content Packs
      <ul>
        <li class="option success">
          <i class="fas fa-check-circle"></i>&nbsp;f5-big-ip-ltm-load-balancer-17.8.5
        </li>
        <li class="option success">
          <i class="fas fa-check-circle"></i>&nbsp;vcenter-compute-16.12
        </li>
        <li class="option success">
    ...

CSS

body {
  font-size: 12px;
  font-family: arial;
  color: #333333;
}

.desc {
  width: 300px;
  border: 1px solid #b2b2b2;
  padding: 5px;
  overflow: auto;
  max-height: 400px;
}

ul.offering {
  list-style: none;
}

ul.tree li.option_set {
  color: #0073e7;
}

ul.tree li.option {
  text-overflow: ellipsis;
  white-space: nowrap;
}

ul.tree li.option.active {
  font-weight: bold;
}

ul.tree li.option.warning i {
  color: #f48b34;
}

ul.tree li.option.success i {
  color: #1aac60;
}

ul.tree li.option.danger i {
  color: #e5004c;
}

ul.tree li.option:not(.active) .option_set {
  display: none;
}

ul.tree,
ul.tree ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.tree ul {
  margin-left: 5px;
}

ul.tree li {
  margin: 0;
  padding: 0 7px;
  line-height: 20px;
  color: #333;
  font-weight: 400;
  border-left: 1px solid #BFBFBF;
}

ul.tree li:last-child {
  border-left: none;
}

ul.tree li:before {
  position: relative;
  top: -0.3em;
  height: 1em;
  width: 7px;
  color: white;
  border-bottom: 1px solid #BFBFBF;
  content: "";
  display: inline-block;
  left: -7px;
}

ul.tree li:last-child:before {
  border-left: 1px solid #BFBFBF;
}

JavaScript

$(document).ready(function() {
  $("input[name$='offering']").click(function() {
    var test = $(this).val();

    $("div.desc").hide();
    $("#offering" + test).show();
  });
});