Merge pull request #168 from arielk/elementor/widget/social-links

[social links] finished styling
elementor · Jun 29, 2016 · 45350c4 · 45350c4
2 parents 7189021 + 8345e39
commit 45350c4
Show file tree

Hide file tree

Showing 7 changed files with 205 additions and 14 deletions.
diff --git a/assets/css/frontend-rtl.css b/assets/css/frontend-rtl.css
diff --git a/assets/css/frontend-rtl.min.css b/assets/css/frontend-rtl.min.css
diff --git a/assets/css/frontend.css b/assets/css/frontend.css
diff --git a/assets/css/frontend.min.css b/assets/css/frontend.min.css
diff --git a/assets/scss/frontend/widgets/social-icons.scss b/assets/scss/frontend/widgets/social-icons.scss
@@ -11,6 +11,7 @@
 			color: white;
 			text-align: center;
 			padding: 0.6em;
+			cursor: pointer;
 
 			i {
 				font-size: 20px;
@@ -19,6 +20,52 @@
 			&:hover {
 				opacity: .5;
 			}
+
+			&- {
+				&behance		{ background-color: $behance; }
+				&bitbucket		{ background-color: $bitbucket; }
+				&codepen		{ background-color: $codepen; }
+				&delicious		{ background-color: $delicious; }
+				&digg			{ background-color: $digg; }
+				&dribbble		{ background-color: $dribbble; }
+				&facebook		{ background-color: $facebook; }
+				&flickr			{ background-color: $flickr; }
+				&foursquare		{ background-color: $foursquare; }
+				&github			{ background-color: $github; }
+				&google-plus	{ background-color: $google-plus; }
+				&instagram		{ background-color: $instagram; }
+				&jsfiddle		{ background-color: $jsfiddle; }
+				&linkedin		{ background-color: $linkedin; }
+				&medium			{ background-color: $medium; }
+				&pinterest		{ background-color: $pinterest; }
+				&product-hunt	{ background-color: $product-hunt; }
+				&reddit			{ background-color: $reddit; }
+				&snapchat		{ background-color: $snapchat; }
+				&soundcloud		{ background-color: $soundcloud; }
+				&stack-overflow { background-color: $stack-overflow; }
+				&tumblr			{ background-color: $tumblr; }
+				&twitter		{ background-color: $twitter; }
+				&vimeo			{ background-color: $vimeo; }
+				&wordpress		{ background-color: $wordpress; }
+				&youtube		{ background-color: $youtube; }
+			}
+		}
+	}
+
+	&.elementor-widget-social-icons {
+		&.elementor-align- {
+
+			&right {
+				text-align: right;
+			}
+
+			&left {
+				text-align: left;
+			}
+
+			&center {
+				text-align: center;
+			}
 		}
 	}
 

diff --git a/assets/scss/helpers/variables.scss b/assets/scss/helpers/variables.scss
@@ -54,9 +54,9 @@ $progress-bg:	#eeeeee;
 $progress-text:	#ffffff;
 
 // Editor colors
-$editor-darkest: #495157;
+$editor-darkest:#495157;
 $editor-darker: #556068;
-$editor-dark: #6d7882;
+$editor-dark: 	#6d7882;
 
 $editor-light: #a4afb7;
 $editor-lighter: #c2cbd2;
@@ -70,6 +70,34 @@ $editor-warning: #b01b1b;
 $editor-success: #39b54a;
 $editor-info: #71d7f7;
 
+//Official Social Colors
+$behance:		#1769ff;
+$bitbucket: 	#205081;
+$codepen:		#000000;
+$delicious: 	#3399ff;
+$digg:			#005be2;
+$dribbble:		#ea4c89;
+$facebook:		#3b5998;
+$flickr:		#0063dc;
+$foursquare:	#2d5be3;
+$github:		#333333;
+$google-plus:	#dd4b39;
+$instagram:		#262626;
+$jsfiddle:		#487AA2;
+$linkedin:		#0077b5;
+$medium:		#00ab6b;
+$pinterest:		#bd081c;
+$product-hunt:	#da552f;
+$reddit:		#ff4500;
+$snapchat:		#fffc00;
+$soundcloud:	#ff8800;
+$stack-overflow:#fe7a15;
+$tumblr:		#35465c;
+$twitter:		#55acee;
+$vimeo:			#1ab7ea;
+$wordpress:		#21759b;
+$youtube:		#cd201f;
+
 // Panel style
 $panel-top-shadow: -2px -5px 8px rgba(0, 0, 0, 0.1);
 $panel-bottom-shadow: 0 0 8px rgba(0, 0, 0, 0.1);

diff --git a/includes/widgets/social-icons.php b/includes/widgets/social-icons.php
@@ -37,7 +37,6 @@ protected function _register_controls() {
 					'rounded' => __( 'Rounded', 'elementor' ),
 					'square' => __( 'Square', 'elementor' ),
 					'circle' => __( 'Circle', 'elementor' ),
-					'none' => __( 'None', 'elementor' ),
 				],
 				'prefix_class' => 'elementor-shape-',
 			]
@@ -109,10 +108,9 @@ protected function _register_controls() {
 							'fa fa-medium' => __( 'Medium', 'elementor' ),
 							'fa fa-pinterest' => __( 'Pinterest', 'elementor' ),
 							'fa fa-product-hunt' => __( 'Product Hunt', 'elementor' ),
-							'fa fa-reddit' => __( 'reddit', 'elementor' ),
+							'fa fa-reddit' => __( 'Reddit', 'elementor' ),
 							'fa fa-snapchat' => __( 'Snapchat', 'elementor' ),
 							'fa fa-soundcloud' => __( 'SoundCloud', 'elementor' ),
-							'fa fa-stack-exchange' => __( 'Stack Exchange', 'elementor' ),
 							'fa fa-stack-overflow' => __( 'Stack Overflow', 'elementor' ),
 							'fa fa-tumblr' => __( 'Tumblr', 'elementor' ),
 							'fa fa-twitter' => __( 'Twitter', 'elementor' ),
@@ -162,9 +160,9 @@ protected function _register_controls() {
 				'type' => Controls_Manager::SELECT,
 				'tab' => self::TAB_STYLE,
 				'section' => 'section_social_style',
-				'default' => 'official',
+				'default' => 'default',
 				'options' => [
-					'official' => __( 'Official Color', 'elementor' ),
+					'default' => __( 'Official Color', 'elementor' ),
 					'custom' => __( 'Custom Color', 'elementor' ),
 				],
 			]
@@ -281,9 +279,9 @@ protected function render( $instance = [] ) {
 				$social = str_replace( 'fa fa-', '', $item['social'] );
 
 				if ( $has_link ) : ?>
-					<a class="elementor-social-icon-link" href="<?php echo $item['link']['url']; ?>">
+					<a class="elementor-social-icon-link" href="<?php echo esc_attr( $item['link']['url'] ); ?>">
 				<?php endif; ?>
-				<div class="elementor-icon elementor-social-icon elementor-social-icon-<?php echo $social; ?>">
+				<div class="elementor-icon elementor-social-icon elementor-social-icon-<?php echo esc_attr( $social ); ?>">
 					<i class="<?php echo $item['social']; ?>"></i>
 				</div>
 				<?php if ( $has_link ) : ?>
@@ -301,7 +299,7 @@ protected function content_template() {
 			<%
 			_.each( settings.social_icon_list, function( item ) {
 				var hasLink = item.link && item.link.url
-					social = item.social.replace( 'fa fa-', '', item.social );
+					social = item.social.replace( 'fa fa-', '' );
 
 				if ( hasLink ) { %>
 					<a class="elementor-social-icon-link" href="<%- item.link.url %>">