designed poll entries

src/app/components/create-status/poll-editor/poll-editor.component.html

@@ -1,6 +1,8 @@
 <div class="poll-editor">
-    <div *ngFor="let e of entries">
-        <app-poll-entry class="poll-editor__entry" [entry]="e" (removeEvent)="removeElement(e)"></app-poll-entry>
+    <div class="poll-editor__entries">
+        <div *ngFor="let e of entries">
+            <app-poll-entry class="poll-editor__entry" [entry]="e" (removeEvent)="removeElement(e)"></app-poll-entry>
+        </div>
     </div>
 
     <div class="poll-editor__footer">

src/app/components/create-status/poll-editor/poll-editor.component.scss

@@ -6,6 +6,10 @@
     min-height: 30px;
     margin: 0 5px;
 
+    &__entries {
+        padding: 2px 0;
+    }
+
     &__entry {
         display: block;
     }

src/app/components/create-status/poll-editor/poll-entry/poll-entry.component.html

@@ -1,16 +1,16 @@
 <div class="poll-entry">
-    <div class="poll-entry__multi">
-        <a href (click)="toogleMulti()" class="poll-entry__multi--link">
-
-        </a>
-    </div>
-    <div class="poll-entry__label">
-        <input type="text" [(ngModel)]="entry.label" />
-    </div>
-
     <div class="poll-entry__remove">
-        <a href (click)="remove()" title="remove">
+        <a href (click)="remove()" title="remove" class="poll-entry__remove--link">
             <fa-icon [icon]="faTimes"></fa-icon>
         </a>
     </div>
+    <div class="poll-entry__multi">
+        <a href (click)="toogleMulti()" class="poll-entry__multi--link">
+            <span class="check-mark" [class.check-mark__round]="!entry.isMulti" [class.check-mark__box]="entry.isMulti">
+            </span>
+        </a>
+    </div>
+    <div class="poll-entry__label">
+        <input type="text" [(ngModel)]="entry.label" class="poll-entry__label--input"/>
+    </div>
 </div>

src/app/components/create-status/poll-editor/poll-entry/poll-entry.component.scss

@@ -1,19 +1,66 @@
+@import "variables";
+
+$selector-size: 20px;
+$selector-padding: 5px;
+
 .poll-entry {
+    position: relative;    
 
     &__multi {
         &--link {
             display: block;
-            width: 20px;
-            height: 20px;
-            outline: 1px solid greenyellow;
+            padding: $selector-padding;
+            width: calc(#{$selector-size} + 2 * #{$selector-padding});
+            float: left;
         }
     }
 
     &__label {
+        height: calc(#{$selector-size} + 2 * #{$selector-padding});
+        padding-top: 3px;
 
+        &--input {
+            width: calc(100% - #{$selector-size} - 2 * #{$selector-padding} - 30px); 
+            border:1px solid  $poll-editor-input-border;
+
+            &:focus {
+                outline: none !important;
+                border:1px solid $poll-editor-input-border-focus;
+                box-shadow: 0 0 0 #fff;
+            }
+        }
     }
 
-    &__remove {
+    &__remove {               
+        float: right;
+        width: 25px;
+        height: 30px;
 
+        &--link {
+            position: absolute;
+            top: -2px;
+            right: 5px;
+            color: rgb(139, 139, 139);
+            padding: 5px;
+
+            &:hover {
+                color: rgb(0, 0, 0);
+            }
+        }
+    }
+}
+
+.check-mark {
+    display: block;
+    border: 1px solid rgb(100, 100, 100);
+    width: $selector-size;
+    height: $selector-size;
+
+    &__round {
+        border-radius: 50px;        
+    }
+
+    &__box {
+        border-radius: 3px;
     }
 }

src/sass/_variables.scss

@@ -87,5 +87,7 @@ $poll-editor-background: #32384d;
 $poll-editor-background: #fff;
 
 $poll-editor-separator: #e7e7e7;
+$poll-editor-input-border: #b9b9b9;
+$poll-editor-input-border-focus: #007be0;
 
 $scheduler-background: #32384d;