Move CSS styles from code to styles file

assets/cp.scripts.js

@@ -3775,7 +3775,7 @@
 				$('#lbl_attributes')[0].selectedIndex = 0;
 				$('#lbl_attributes').selectpicker('refresh');
 				if($('#prod_attr_' + selValue).length > 0) { return; }
-				$('#list').append('<div class="form-group" id="prod_attr_' + selValue + '"><div><b>' + selText + '</b></div><div style="position:relative;"><select class="form-control" name="value.' + selValue + '" autocomplete="off" required disabled><option value="0">Loading values...</option></select><button type="button" class="btn btn-danger" style="position:absolute;top:0px;right:0px;" onclick="fave.ShopProductsRemove(this);" disabled>&times;</button></div></div>');
+				$('#list').append('<div class="form-group" id="prod_attr_' + selValue + '"><div><b>' + selText + '</b></div><div class="position-relative"><select class="form-control" name="value.' + selValue + '" autocomplete="off" required disabled><option value="0">Loading values...</option></select><button type="button" class="btn btn-danger btn-dynamic-remove" onclick="fave.ShopProductsRemove(this);" disabled>&times;</button></div></div>');
 				PreventDataLost();
 				$.ajax({
 					type: 'POST',
@@ -3812,7 +3812,7 @@
 			},
 
 			ShopAttributesAdd: function() {
-				$('#list').append('<div class="form-group" style="position:relative;"><input class="form-control" type="text" name="value.0" value="" placeholder="" autocomplete="off" required><button type="button" class="btn btn-danger" style="position:absolute;top:0px;right:0px;" onclick="fave.ShopAttributesRemove(this);">&times;</button></div>');
+				$('#list').append('<div class="form-group position-relative"><input class="form-control" type="text" name="value.0" value="" placeholder="" autocomplete="off" required><button type="button" class="btn btn-danger btn-dynamic-remove" onclick="fave.ShopAttributesRemove(this);">&times;</button></div>');
 				PreventDataLost();
 				setTimeout(function() {
 					$('#list input').last().focus();

assets/cp.styles.css

@@ -946,6 +946,19 @@ ul.pagination {
 	left: 32px;
 }
 
+/* Admin dynamic fields */
+.list-wrapper {
+	background: #e9ecef;
+	padding: 1rem;
+	border-radius: .25rem;
+}
+
+.btn-dynamic-remove {
+	position: absolute;
+	top: 0px;
+	right: 0px;
+}
+
 /* Bootstrap fixes */
 #sys-modal-user-settings {
 	padding-right: 0px !important;

modules/module_shop.go

@@ -115,11 +115,11 @@ func (this *Modules) shop_GetProductValuesInputs(wrap *wrapper.Wrapper, product_
 	for _, filter_id := range filter_ids {
 		result += `<div class="form-group" id="prod_attr_` + utils.IntToStr(filter_id) + `">` +
 			`<div><b>` + filter_names[filter_id] + `</b></div>` +
-			`<div style="position:relative;">` +
+			`<div class="position-relative">` +
 			`<select class="selectpicker form-control" name="value.` + utils.IntToStr(filter_id) + `" autocomplete="off" required multiple>` +
 			strings.Join(filter_values[filter_id], "") +
 			`</select>` +
-			`<button type="button" class="btn btn-danger" style="position:absolute;top:0px;right:0px;" onclick="fave.ShopProductsRemove(this);">&times;</button>` +
+			`<button type="button" class="btn btn-danger btn-dynamic-remove" onclick="fave.ShopProductsRemove(this);">&times;</button>` +
 			`</div>` +
 			`</div>`
 	}
@@ -151,7 +151,7 @@ func (this *Modules) shop_GetFilterValuesInputs(wrap *wrapper.Wrapper, filter_id
 		for rows.Next() {
 			err = rows.Scan(scan...)
 			if err == nil {
-				result += `<div class="form-group" style="position:relative;"><input class="form-control" type="text" name="value.` + html.EscapeString(string(values[0])) + `" value="` + html.EscapeString(string(values[1])) + `" placeholder="" autocomplete="off" required><button type="button" class="btn btn-danger" style="position:absolute;top:0px;right:0px;" onclick="fave.ShopAttributesRemove(this);">&times;</button></div>`
+				result += `<div class="form-group position-relative"><input class="form-control" type="text" name="value.` + html.EscapeString(string(values[0])) + `" value="` + html.EscapeString(string(values[1])) + `" placeholder="" autocomplete="off" required><button type="button" class="btn btn-danger btn-dynamic-remove" onclick="fave.ShopAttributesRemove(this);">&times;</button></div>`
 			}
 		}
 	}
@@ -818,15 +818,15 @@ func (this *Modules) RegisterModule_Shop() *Module {
 							`<label>Attributes</label>` +
 							`</div>` +
 							`<div class="col-md-9">` +
-							`<div class="list-wrapper" style="background:#e9ecef;padding:1rem;border-radius:.25rem;">` +
+							`<div class="list-wrapper">` +
 							`<div id="list">` +
 							this.shop_GetProductValuesInputs(wrap, data.A_id) +
 							`</div>` +
-							`<div class="list-button" style="position:relative;">` +
+							`<div class="list-button position-relative">` +
 							`<select class="selectpicker form-control" id="lbl_attributes" data-live-search="true">` +
 							this.shop_GetAllAttributesSelectOptions(wrap) +
 							`</select>` +
-							`<button type="button" class="btn btn-success" style="position:absolute;top:0px;right:0px;" onclick="fave.ShopProductsAdd();">Add attribute</button>` +
+							`<button type="button" class="btn btn-success btn-dynamic-remove" onclick="fave.ShopProductsAdd();">Add attribute</button>` +
 							`</div>` +
 							`</div>` +
 							`</div>` +
@@ -1088,7 +1088,7 @@ func (this *Modules) RegisterModule_Shop() *Module {
 							`<label>Attribute values</label>` +
 							`</div>` +
 							`<div class="col-md-9">` +
-							`<div class="list-wrapper" style="background:#e9ecef;padding:1rem;border-radius:.25rem;">` +
+							`<div class="list-wrapper">` +
 							`<div id="list">` +
 							this.shop_GetFilterValuesInputs(wrap, data.A_id) +
 							`</div>` +