Reorganized the folder structure

admin/css/style.css → assets/admin/css/style.css

@@ -50,24 +50,24 @@
 .social-network-widget-item p + p {
 	margin-top: 1em;
 }
-.social-network-widget-item__wrapper__remove {
+.social-network-widget-item__remove {
 	display: inline-block;
 }
-.social-network-widget-item__wrapper__remove a {
+.social-network-widget-item__remove a {
 	color: #a00;
 	text-decoration: none;
 }
-.social-network-widget-item__wrapper__remove a:focus, 
-.social-network-widget-item__wrapper__remove a:hover {
+.social-network-widget-item__remove a:focus,
+.social-network-widget-item__remove a:hover {
 	color: #f00;
 }
-.social-network-widget.add-button .button:before {
+.social-network-widget.add-button .button::before {
 	left: -2px;
 	font-weight: 400;
-    content: "\f132";
-    font-family: 'dashicons';
-    vertical-align: middle;
-    display: inline-block;
-    position: relative;
-    transition: all 0.2s;
-}
+	content: "\f132";
+	font-family: "dashicons";
+	vertical-align: middle;
+	display: inline-block;
+	position: relative;
+	transition: all 0.2s;
+}

admin/js/script.js → assets/admin/js/script.js

@@ -10,7 +10,7 @@
 
     if ( ! wp ) {
         return;
-    } // End If Statement
+    } 
 
     var timeout = null;
     var SNW = {
@@ -23,7 +23,7 @@
             SNW.vars.colorpicker = '.social-network-widget-color-picker';
             SNW.vars.iconsList = '.social-network-icons-widget-list';
             SNW.vars.addBtnClassname = '.social-network-widget.add-button button';
-            SNW.vars.removeBtnClassname = '.social-network-widget-item__wrapper__remove a';
+            SNW.vars.removeBtnClassname = '.social-network-widget-item__remove a';
         },
 
         // Run after the document is loaded
@@ -55,7 +55,7 @@
                 widgetList = widgetContent.find( SNW.vars.iconsList );
                 urlId = widgetList.data( 'url-icon-id' );
                 urlName = widgetList.data( 'url-icon-name' );
-                template.find( '.social-network-widget-item__wrapper__url input' ).attr( 'id', urlId ).attr( 'name', urlName + '[]' );
+                template.find( '.social-network-widget-item__url input' ).attr( 'id', urlId ).attr( 'name', urlName + '[]' );
                 widgetList.append( template );
                 widgetLastItem = widgetContent.find( '.social-network-widget-item:last' );
                 widgetLastItem.find( 'input:first' ).trigger( 'focus' );
@@ -81,7 +81,7 @@
             $( document ).on( 'click', `div.widget${ SNW.vars.widgetID } .widget-title, div.widget${ SNW.vars.widgetID } .widget-action`, function() {
                 if ( $( this ).parents( '#available-widgets' ).length > 0 ) {
                     return;
-                } // End If Statement
+                } 
 
                 SNW._initWidget( $( this ).parents( `.widget${ SNW.vars.widgetID }` ) );
                 SNW._initColorPicker( $( this ).parents( `.widget${ SNW.vars.widgetID }` ) );
@@ -96,7 +96,7 @@
 
                     SNW._initWidget( widget );
                     SNW._initColorPicker( $( this ).parents( `.widget${ SNW.vars.widgetID }` ) );
-                } // End If Statement
+                } 
             } );
         },
 
@@ -108,7 +108,7 @@
 
                     SNW._initWidget( widget );
                     SNW._initColorPicker( $( this ) );
-                } // End If Statement
+                } 
             } );
         },
 
@@ -128,7 +128,7 @@
                     SNW._livePreviewUpdate(
                         $( this ).parents( '.form' ).find( '.widget-control-save' )
                     );
-                } // End If Statement
+                } 
             } );
         },
 
@@ -180,7 +180,7 @@
         _livePreviewUpdate: function( button ) {
             if ( ! $( document.body ).hasClass( 'wp-customizer' ) || ! button.length ) {
                 return;
-            } // End If Statement
+            } 
 
             button.trigger( 'click' ).hide();
         }

assets/public/css/style.css

@@ -0,0 +1,28 @@
+/**
+ * All of the the public-facing stylesheet code for `Social Icons` widget
+ * reside in this file.
+ *
+ * @package     social-network-widget
+ * @author      MyPreview (Github: @mahdiyazdani, @mypreview, @gookalani)
+ */
+ul.social-network-icons {
+	margin: 0;
+	padding: 0;
+	display: flex;
+	flex-wrap: wrap;
+}
+li.social-network-icons__item {
+	list-style: none;
+	padding: 0 15px 11px 0;
+}
+li.social-network-icons__item:last-child {
+	padding-right: 0;
+}
+li.social-network-icons__item a {
+	display: flex;
+	padding: 2px;
+	border-radius: 2px;
+}
+.widget li.social-network-icons__item {
+	margin: 0;
+}