SASS implemented to emulate check box

app/scripts/controllers/main.js

@@ -14,4 +14,24 @@ angular.module('sassApp')
       'AngularJS',
       'Karma'
     ];
+
+	$scope.items = [
+		{
+			name: '3-Prong 5\' Flat Dryer Cord - Gray',
+			price: 29.99,
+			selected: true
+		},
+		{
+			name: '4-Prong 5\' Round Dryer Cord - Black',
+			price: 29.99
+		},
+		{
+			name: '6 ft. Snap-Lock™ Flexible Pipe',
+			price: 14.99
+		},
+		{
+			name: 'Dryer Exhaust Close Elbow',
+			price: 9.99
+		}
+	]
   });

app/styles/main.scss

@@ -0,0 +1,110 @@
+$fontSize: 16px;
+$fontFamily: RobotoCondReg;
+$white: #fff;
+$darkGrey: #333;
+
+@mixin display {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+}
+
+@mixin flex($type, $value) {
+  -webkit-flex-#{$type}: $value;
+  -moz-flex-#{$type}: $value;
+  -ms-flex-#{$type}: $value;          
+  flex-#{$type}: $value;
+}
+
+ul {
+  margin: 0;
+  padding: 0;
+}
+
+li {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.options {
+  .selection-list {
+    border: 2px solid $darkGrey;
+    border-radius: 10px;
+    margin-bottom: 2%;
+
+    .selection-list-item {
+      width: 100%;
+      height: 50px;
+      border-bottom: 2px solid $darkGrey;
+      font-family: $fontFamily;
+      font-size: $fontSize;
+
+      &.selected {
+        label {
+          border-radius: 5px 5px 0 0;
+          background-color: $darkGrey;
+
+          &:after {
+            background: url("../../images/select_checkmark_circle.svg") no-repeat;
+          }
+
+          .option-name {
+            color: $white;
+          }
+
+          .option-price {
+            color: $white;
+          }
+        }
+      }
+
+      label {
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        box-sizing: border-box;
+        width: 100%;
+        height: 100%;
+        padding: 10px;
+        @include display;
+
+        &:after {
+          content: "";
+          width: 30px;
+          height: 30px;
+          margin-left: 10px;
+          background: url("../../images/select_circle_empty.svg") no-repeat;
+          display: block;
+          @include flex("shrink",0);
+          -ms-flex: 0 0;
+        }
+
+        .option-element {
+          line-height: 30px;
+          text-transform: none;
+          color: $darkGrey;
+          display: block;
+        }
+
+        .option-name {
+          @extend .option-element;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          overflow: hidden;
+          @include flex("basis", 100%);
+          @include flex("grow", 5);
+          -ms-flex: 0 1 100%;
+          -webkit-box-flex: 5;
+        }
+
+        .option-price {
+          @extend .option-element;
+          margin-left: 5px;
+          @include flex("shrink",0);
+          -ms-flex: 0 0;
+        }
+      }
+    }
+  }
+}

app/views/main.html

@@ -0,0 +1,10 @@
+<div class="options">
+  <ul class="selection-list">
+    <li class="selection-list-item" ng-repeat="item in items" ng-class="{selected: item.selected}">
+        <label>
+            <span class="option-name">{{item.name}}</span>
+            <span class="option-price">${{item.price}}</span>
+        </label>
+    </li>
+  </ul>
+</div>