Angular: Decorators

http://angularjs.org/

by smlombardi

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0-beta.13/angular.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://guxstaging.pbi.global.pvt/design_system/styles/design_system.css">
<div class="col-xs-12">

<a href=""><span class="glyphicon fa-2x glyphicon-plus"></span>&nbsp;Add</a>

    <section class="row miller-columns spacer-top-md" id="manageUsers-table">

      <!-- left -->
      <div class="col-xs-4 first-column">
        <div class="panel panel-default">
          <div class="list-group">

            <a class="list-group-item active">
              <span>Admin</span>
              <i class="pull-right fa fa-angle-right fa-lg"></i>
            </a>
            <a class="list-group-item">
              <span>User</span>
              <i class="pull-right fa fa-angle-right fa-lg"></i>
            </a>

          </div>
        </div>

      </div>

      <!-- right -->
      <div class="col-xs-8 last-column">


        <!--CASE 1: Help text if nothing is selected on left-->
        <div ng-if="!contactView.item" class="help-block spacer-top-lg text-center" id="addressBook-helpBlock" data-translate="ADDRESSBOOK.CONTACTVIEW.HELP"></div>

        <!--CASE 2: Detail view-->
        <div class="spacer-top-sm">

          <!--Form shown only for new role being added-->
          <form class="form-inline pull-left">
            <div class="form-group">
              <input type="text" class="form-control">
            </div>
            <a class="btn btn-link">Save</a>
          </form>

          <ul class="list-inline pull-right">
            <li><a class="btn btn-link">Edit Name</a></li> <!--Hidden when adding new role-->
            <li><a class="btn btn-link">Copy</a></li>
            <li><a class="btn btn-link text-danger">Delete</a></li> <!--Disabled when adding new role-->
          </ul>
        </div>

        <div class="clearfix"></div>
  ...

CSS

.miller-columns {
	    height: 450px;
    }
.btn-link.text-danger{
    color: #a94442;
} 
.miller-columns .last-column {
    padding-left: 15px;
    border: solid 1px #c0c0c0;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}
.list-group-item {
	    		line-height: 20px;
}
.list-group-item+.list-group-item {
    border-top: solid 1px #c0c0c0;
}

.list-group-item a, a:hover, a:active, a.row-selected {
    border-radius: 0;
}

.list-group-item:before {
	    			content:'';
	    			background: url('https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-forward-512.png') no-repeat center/80%;
	    			width: 20px;
	    			height: 100%;
	    			display: block;
	    			position: absolute;
	    			right: 10px;
	    			top: 0;
	    			bottom: 0;
	    		}
.inner-column .list-group-item {
    padding-left: 30px;
}

.inner-column .list-group-item:before {
    left: 0;
}
	.list-group-details .list-group-item {
      border: 0;
	}