Added hover official colors for Social Icons widget, close elementor#…

…2032
arielk · Jul 23, 2018 · e13c3ee · e13c3ee
1 parent 45ab35d
commit e13c3ee
Show file tree

Hide file tree

Showing 2 changed files with 111 additions and 5 deletions.
diff --git a/assets/dev/scss/frontend/widgets/social-icons.scss b/assets/dev/scss/frontend/widgets/social-icons.scss
@@ -99,3 +99,70 @@
 		}
 	}
 }
+
+.elementor-element.elementor-icon-hover-color-official {
+
+	.elementor-social-icons-wrapper {
+
+		.elementor-social-icon {
+
+			&:hover {
+				opacity: 1;
+				color: white; //for override .elementor-icon class
+			}
+
+			&- {
+				&android:hover			{ background-color: $android; }
+				&apple:hover			{ background-color: $apple; }
+				&behance:hover			{ background-color: $behance; }
+				&bitbucket:hover		{ background-color: $bitbucket; }
+				&codepen:hover			{ background-color: $codepen; }
+				&delicious:hover		{ background-color: $delicious; }
+				&digg:hover				{ background-color: $digg; }
+				&dribbble:hover			{ background-color: $dribbble; }
+				&envelope:hover			{ background-color: $envelope; }
+				&facebook:hover			{ background-color: $facebook; }
+				&flickr:hover			{ background-color: $flickr; }
+				&foursquare:hover		{ background-color: $foursquare; }
+				&github:hover			{ background-color: $github; }
+				&google-plus:hover		{ background-color: $google-plus; }
+				&houzz:hover			{ background-color: $houzz; }
+				&instagram:hover		{ background-color: $instagram; }
+				&jsfiddle:hover			{ background-color: $jsfiddle; }
+				&linkedin:hover			{ background-color: $linkedin; }
+				&medium:hover			{ background-color: $medium; }
+				&odnoklassniki:hover	{ background-color: $odnoklassniki; }
+				&meetup:hover			{ background-color: $meetup; }
+				&pinterest:hover		{ background-color: $pinterest; }
+				&product-hunt:hover		{ background-color: $product-hunt; }
+				&reddit:hover			{ background-color: $reddit; }
+				&rss:hover				{ background-color: $rss; }
+				&shopping-cart:hover	{ background-color: $shopping-cart; }
+				&skype:hover			{ background-color: $skype; }
+				&slideshare:hover		{ background-color: $slideshare; }
+				&snapchat:hover			{ background-color: $snapchat; }
+				&soundcloud:hover		{ background-color: $soundcloud; }
+				&spotify:hover			{ background-color: $spotify; }
+				&stack-overflow:hover	{ background-color: $stack-overflow; }
+				&steam:hover 			{ background-color: $steam; }
+				&stumbleupon:hover 		{ background-color: $stumbleupon; }
+				&telegram:hover			{ background-color: $telegram; }
+				&thumb-tack:hover		{ background-color: $thumbtack; }
+				&tripadvisor:hover		{ background-color: $tripadvisor; }
+				&tumblr:hover			{ background-color: $tumblr; }
+				&twitch:hover			{ background-color: $twitch; }
+				&twitter:hover			{ background-color: $twitter; }
+				&vimeo:hover			{ background-color: $vimeo; }
+				&vk:hover				{ background-color: $vk; }
+				&weibo:hover			{ background-color: $weibo; }
+				&weixin:hover			{ background-color: $weixin; }
+				&whatsapp:hover			{ background-color: $whatsapp; }
+				&wordpress:hover		{ background-color: $wordpress; }
+				&xing:hover				{ background-color: $xing; }
+				&yelp:hover				{ background-color: $yelp; }
+				&youtube:hover			{ background-color: $youtube; }
+				&500px:hover			{ background-color: $five-h-px; }
+			}
+		}
+	}
+}
diff --git a/includes/widgets/social-icons.php b/includes/widgets/social-icons.php
@@ -373,19 +373,47 @@ protected function _register_controls() {
 		$this->start_controls_section(
 			'section_social_hover',
 			[
-				'label' => __( 'Icon Hover', 'elementor' ),
+				'label' => __( 'Hover', 'elementor' ),
 				'tab' => Controls_Manager::TAB_STYLE,
 			]
 		);
 
+		$this->add_control(
+			'icon_hover_color',
+			[
+				'label' => __( 'Color', 'elementor' ),
+				'type' => Controls_Manager::SELECT,
+				'default' => 'custom',
+				'condition' => [
+					'icon_color' => 'custom',
+				],
+				'options' => [
+					'custom' => __( 'Custom', 'elementor' ),
+					'official' => __( 'Official Color', 'elementor' ),
+				],
+				'prefix_class' => 'elementor-icon-hover-color-',
+			]
+		);
+
 		$this->add_control(
 			'hover_primary_color',
 			[
 				'label' => __( 'Primary Color', 'elementor' ),
 				'type' => Controls_Manager::COLOR,
 				'default' => '',
-				'condition' => [
-					'icon_color' => 'custom',
+				'conditions' => [
+					'relation' => 'and',
+					'terms' => [
+						[
+							'name' => 'icon_color',
+							'operator' => '==',
+							'value' => 'custom',
+						], [
+							'name' => 'icon_hover_color',
+							'operator' => '!=',
+							'value' => 'official',
+						],
+					],
 				],
 				'selectors' => [
 					'{{WRAPPER}} .elementor-social-icon:hover' => 'background-color: {{VALUE}};',
@@ -399,8 +427,19 @@ protected function _register_controls() {
 				'label' => __( 'Secondary Color', 'elementor' ),
 				'type' => Controls_Manager::COLOR,
 				'default' => '',
-				'condition' => [
-					'icon_color' => 'custom',
+				'conditions' => [
+					'relation' => 'and',
+					'terms' => [
+						[
+							'name' => 'icon_color',
+							'operator' => '==',
+							'value' => 'custom',
+						], [
+							'name' => 'icon_hover_color',
+							'operator' => '!=',
+							'value' => 'official',
+						],
+					],
 				],
 				'selectors' => [
 					'{{WRAPPER}} .elementor-social-icon:hover i' => 'color: {{VALUE}};',