diff --git a/app/images/select_checkmark_circle.svg b/app/images/select_checkmark_circle.svg
new file mode 100644
index 0000000..1c437b6
--- /dev/null
+++ b/app/images/select_checkmark_circle.svg
@@ -0,0 +1,16 @@
+
+
+
+
diff --git a/app/images/select_circle_empty.svg b/app/images/select_circle_empty.svg
new file mode 100644
index 0000000..3f82e84
--- /dev/null
+++ b/app/images/select_circle_empty.svg
@@ -0,0 +1,12 @@
+
+
+
+
diff --git a/app/scripts/controllers/main.js b/app/scripts/controllers/main.js
index d3a5b9c..93e3812 100644
--- a/app/scripts/controllers/main.js
+++ b/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
+ }
+ ]
});
diff --git a/app/styles/main.scss b/app/styles/main.scss
index e69de29..ede6312 100644
--- a/app/styles/main.scss
+++ b/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;
+ }
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/app/views/main.html b/app/views/main.html
index e69de29..fc793ed 100644
--- a/app/views/main.html
+++ b/app/views/main.html
@@ -0,0 +1,10 @@
+
+
+ -
+
+
+
+