Repeading container groups - reinstating delete control

src/app/dynaform/dynaform.component.html

@@ -40,21 +40,20 @@
 					</div>
 				</div>
 				<div *ngFor="let container of meta.meta; let i = index" class="dyna-rc-container" [ngClass]="{ 'dyna-rc-display-all': meta.display === 'ALL' }">
-					<div *ngIf="meta.showDeleteControl" class="text-right">
-						<a	[ngClass]="{ 'btn-disabled': !deleteRCMemberAllowed(meta.name) }"
-							(click)="deleteRCMember(meta.name, i)">
-							<i class="fa fa-trash"></i>
-						</a>
-					</div>
+					<button *ngIf="meta.showDeleteControl" class="btn btn-sm btn-icon btn-outline-danger dyna-rc-btn-delete"
+						[disabled]="!deleteRCMemberAllowed(meta.name)"
+						(click)="deleteRCMember(meta.name, i)">
+						<clr-icon shape="trash"></clr-icon>
+					</button>
 					<ng-container *ngTemplateOutlet="dynaform; context: getRCTemplateContext(meta.name, i)"></ng-container>
 				</div>
 				<div *ngIf="meta.showAddControl && meta.display === 'ALL'" class="clr-row">
 					<div class="clr-col-sm-12">
-						<a class="btn btn-sm btn-success"
+						<button class="btn btn-sm btn-success dyna-rc-btn-add"
 							[ngClass]="{ 'btn-disabled': !addRCMemberAllowed(meta.name) }"
 							(click)="addRCMember(meta.name)">
-							+ Add New
-						</a>
+							<clr-icon shape="plus"></clr-icon> Add New
+						</button>
 					</div>
 				</div>
 			</ng-container>

src/styles.scss

@@ -75,10 +75,15 @@ div.clr-col-sm-8 {
 }
 
 .short-field {
-	input {
-		background-color: yellow !important;
+	input, select {
+		border-width: 1px;
+		border-style: solid;
+		border-top-color: green;
+		border-left-color: blueviolet;
+		border-right-color: teal;
+		border-bottom-width: 2px;
 		border-bottom-color: magenta;
-		width: 50px;
+		width: 60px;
 		padding-left: 10px;
 	}
 }
@@ -195,14 +200,24 @@ input, textarea, select {
 }
 
 .dyna-rc-container.dyna-rc-display-all, .dyna-rc-control.dyna-rc-display-all {
-	margin-bottom: 7px;
 	border-bottom: 4px #CCC solid;
+	padding-bottom: 1rem;
 	&:first-child {
-		padding-top: 7px;
+		margin-top: 1rem;
 		border-top: 4px #CCC solid;
+		> button {
+			margin-top: 1rem;
+		}
 	}
 }
 
+.dyna-rc-btn-delete {
+	float: right;
+	margin-right: 0;
+}
+
+// ---------------------------------------------------------------------------------------------------------------------
+
 .dyna-hidden {
 	display: none;
 }