Skip to content

Commit e1afc16

Browse files
Daddie2Daddie2
committed
Active search
1 parent cf9cbd3 commit e1afc16

1 file changed

Lines changed: 100 additions & 18 deletions

File tree

‎widgets/Latest-Posts-Hover.php‎

Lines changed: 100 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -659,7 +659,7 @@ protected function _register_controls()
659659
$this->add_control(
660660
'filter_active',
661661
[
662-
'label' => esc_html__('Filter Active', 'Latest-Posts-Hover'),
662+
'label' => esc_html__('Button Filter Active', 'Latest-Posts-Hover'),
663663
'type' => \Elementor\Controls_Manager::SWITCHER,
664664
'label_on' => esc_html__('On', 'Latest-Posts-Hover'),
665665
'label_off' => esc_html__('Off', 'Latest-Posts-Hover'),
@@ -704,7 +704,7 @@ protected function _register_controls()
704704
$this->add_control(
705705
'text_color_inactive',
706706
[
707-
'label' => esc_html__('Inactive text color', 'Latest-Posts-Hover'),
707+
'label' => esc_html__('Button filter Inactive text color', 'Latest-Posts-Hover'),
708708
'type' => \Elementor\Controls_Manager::COLOR,
709709
'default' => 'white',
710710
'selectors' => [
@@ -715,7 +715,7 @@ protected function _register_controls()
715715
$this->add_control(
716716
'text_font_inactive',
717717
[
718-
'label' => esc_html__('Inactive text Font Family', 'Latest-Posts-Hover'),
718+
'label' => esc_html__('Button filter Inactive text Font Family', 'Latest-Posts-Hover'),
719719
'type' => \Elementor\Controls_Manager::FONT,
720720
'default' => "Work Sans",
721721
'selectors' => [
@@ -726,7 +726,7 @@ protected function _register_controls()
726726
$this->add_control(
727727
'background_color_inactive',
728728
[
729-
'label' => esc_html__('Inactive background color', 'Latest-Posts-Hover'),
729+
'label' => esc_html__('Button filter Inactive background color', 'Latest-Posts-Hover'),
730730
'type' => \Elementor\Controls_Manager::COLOR,
731731
'default' => 'black',
732732
'selectors' => [
@@ -737,7 +737,7 @@ protected function _register_controls()
737737
$this->add_control(
738738
'inactive_font_size',
739739
[
740-
'label' => esc_html__('Inactive text Font Size', 'Latest-Posts-Hover'),
740+
'label' => esc_html__('Button filter Inactive text Font Size', 'Latest-Posts-Hover'),
741741
'type' => \Elementor\Controls_Manager::SLIDER,
742742
'default' => [
743743
'size' => 18,
@@ -757,7 +757,7 @@ protected function _register_controls()
757757
$this->add_control(
758758
'Text_inactive_bold',
759759
[
760-
'label' => esc_html__('Inactive text bold', 'Latest-Posts-Hover'),
760+
'label' => esc_html__('Button filter Inactive text bold', 'Latest-Posts-Hover'),
761761
'type' => \Elementor\Controls_Manager::SWITCHER,
762762
'label_on' => esc_html__('On', 'Latest-Posts-Hover'),
763763
'label_off' => esc_html__('Off', 'Latest-Posts-Hover'),
@@ -771,7 +771,7 @@ protected function _register_controls()
771771
$this->add_control(
772772
'text_color_active',
773773
[
774-
'label' => esc_html__('Active text clor', 'Latest-Posts-Hover'),
774+
'label' => esc_html__('Button filter Active text clor', 'Latest-Posts-Hover'),
775775
'type' => \Elementor\Controls_Manager::COLOR,
776776
'default' => 'white',
777777
'selectors' => [
@@ -782,7 +782,7 @@ protected function _register_controls()
782782
$this->add_control(
783783
'text_font_active',
784784
[
785-
'label' => esc_html__('Active text Font Family', 'Latest-Posts-Hover'),
785+
'label' => esc_html__('Button filter Active text Font Family', 'Latest-Posts-Hover'),
786786
'type' => \Elementor\Controls_Manager::FONT,
787787
'default' => "Work Sans",
788788
'selectors' => [
@@ -793,7 +793,7 @@ protected function _register_controls()
793793
$this->add_control(
794794
'background_color_active',
795795
[
796-
'label' => esc_html__('Active background color', 'Latest-Posts-Hover'),
796+
'label' => esc_html__('Button filter Active background color', 'Latest-Posts-Hover'),
797797
'type' => \Elementor\Controls_Manager::COLOR,
798798
'default' => 'red',
799799
'selectors' => [
@@ -804,7 +804,7 @@ protected function _register_controls()
804804
$this->add_control(
805805
'active_font_size',
806806
[
807-
'label' => esc_html__('Active text Font Size', 'Latest-Posts-Hover'),
807+
'label' => esc_html__('Button filter Active text Font Size', 'Latest-Posts-Hover'),
808808
'type' => \Elementor\Controls_Manager::SLIDER,
809809
'default' => [
810810
'size' => 18,
@@ -824,7 +824,7 @@ protected function _register_controls()
824824
$this->add_control(
825825
'Text_active_bold',
826826
[
827-
'label' => esc_html__('Active text bold ', 'Latest-Posts-Hover'),
827+
'label' => esc_html__('Button filter Active text bold ', 'Latest-Posts-Hover'),
828828
'type' => \Elementor\Controls_Manager::SWITCHER,
829829
'label_on' => esc_html__('On', 'Latest-Posts-Hover'),
830830
'label_off' => esc_html__('Off', 'Latest-Posts-Hover'),
@@ -838,7 +838,7 @@ protected function _register_controls()
838838
$this->add_control(
839839
'text_color_hover',
840840
[
841-
'label' => esc_html__('Hover text color', 'Latest-Posts-Hover'),
841+
'label' => esc_html__('Button filter Hover text color', 'Latest-Posts-Hover'),
842842
'type' => \Elementor\Controls_Manager::COLOR,
843843
'default' => 'white',
844844
'selectors' => [
@@ -849,7 +849,7 @@ protected function _register_controls()
849849
$this->add_control(
850850
'text_font_hover',
851851
[
852-
'label' => esc_html__('hover text Font Family', 'Latest-Posts-Hover'),
852+
'label' => esc_html__('Button filter hover text Font Family', 'Latest-Posts-Hover'),
853853
'type' => \Elementor\Controls_Manager::FONT,
854854
'default' => "Work Sans",
855855
'selectors' => [
@@ -860,7 +860,7 @@ protected function _register_controls()
860860
$this->add_control(
861861
'background_color_hover',
862862
[
863-
'label' => esc_html__('Hover background color', 'Latest-Posts-Hover'),
863+
'label' => esc_html__('Button filter Hover background color', 'Latest-Posts-Hover'),
864864
'type' => \Elementor\Controls_Manager::COLOR,
865865
'default' => 'orange',
866866
'selectors' => [
@@ -872,7 +872,7 @@ protected function _register_controls()
872872
$this->add_control(
873873
'hover_font_size',
874874
[
875-
'label' => esc_html__('Hover text Font Size', 'Latest-Posts-Hover'),
875+
'label' => esc_html__('Button filter Hover text Font Size', 'Latest-Posts-Hover'),
876876
'type' => \Elementor\Controls_Manager::SLIDER,
877877
'default' => [
878878
'size' => 18,
@@ -892,7 +892,7 @@ protected function _register_controls()
892892
$this->add_control(
893893
'Text_hover_bold',
894894
[
895-
'label' => esc_html__('Hover text Bold', 'Latest-Posts-Hover'),
895+
'label' => esc_html__(' Button filter Hover text Bold', 'Latest-Posts-Hover'),
896896
'type' => \Elementor\Controls_Manager::SWITCHER,
897897
'label_on' => esc_html__('On', 'Latest-Posts-Hover'),
898898
'label_off' => esc_html__('Off', 'Latest-Posts-Hover'),
@@ -903,7 +903,20 @@ protected function _register_controls()
903903
],
904904
]
905905
);
906-
906+
$this->add_control(
907+
'search_active',
908+
[
909+
'label' => esc_html__('Search Active', 'Latest-Posts-Hover'),
910+
'type' => \Elementor\Controls_Manager::SWITCHER,
911+
'label_on' => esc_html__('On', 'Latest-Posts-Hover'),
912+
'label_off' => esc_html__('Off', 'Latest-Posts-Hover'),
913+
'return_value' => 'flex',
914+
'default' => 'none',
915+
'selectors' => [
916+
'{{WRAPPER}} .container2' => 'display: {{VALUE}};',
917+
],
918+
]
919+
);
907920
$this->end_controls_section();
908921
}
909922
private function get_category()
@@ -982,7 +995,12 @@ protected function render()
982995
}
983996
echo '">' . $category_name . '</button>';
984997
}
985-
echo '</form> </div>';
998+
echo '</form> <div class="container2">
999+
<div class="search">
1000+
<input type="text" placeholder="Search...">
1001+
<button type="submit"><i class="fa fa-search"></i></button>
1002+
</div>
1003+
</div> </div>';
9861004
echo '<div class="card2-container">';
9871005
$selected_page_id = $settings['selected_page'];
9881006

@@ -1090,6 +1108,70 @@ protected function render()
10901108
echo 'prova';
10911109
}
10921110
echo '<style>
1111+
* {
1112+
box-sizing: border-box;
1113+
outline: 0;
1114+
font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
1115+
}
1116+
1117+
.container2 {
1118+
width: 400px;
1119+
height: 50px;
1120+
margin-bottom: 5px;
1121+
display: none;
1122+
}
1123+
.container2 .search {
1124+
position: relative;
1125+
height: 100%;
1126+
1127+
}
1128+
.container2 .search input {
1129+
width: 50px;
1130+
height: 50px;
1131+
position: absolute;
1132+
right: calc(50% - 25px);
1133+
top: 0;
1134+
padding: 0 25px;
1135+
border: 0;
1136+
border-radius: 25px;
1137+
color: #4e4e4e;
1138+
font-size: 18px;
1139+
font-weight: 300;
1140+
box-shadow: 0 5px 12px 0 rgba(0, 0, 0, 0.1),
1141+
0 1px 28px 0 rgba(0, 0, 0, 0.2),
1142+
0 0 40px 0 rgba(0, 0, 0, 0.1);
1143+
transition: all 0.6s cubic-bezier(0, 2, 1, -1);
1144+
}
1145+
.container2 .search button {
1146+
width: 50px;
1147+
height: 50px;
1148+
position: absolute;
1149+
right: calc(50% - 25px);
1150+
top: 0;
1151+
margin: auto;
1152+
background: #2d2926;
1153+
color: #fff;
1154+
font-size: 15px;
1155+
border: 0;
1156+
border-radius: 50%;
1157+
box-shadow: 0 6px 28px 0 rgba(0, 0, 0, 0.0), 0 5px 55px 0 rgba(0, 0, 0, 0.0);
1158+
cursor: pointer;
1159+
transition:all 0.6s cubic-bezier(0, 2, 1, -1);
1160+
}
1161+
1162+
.container2 .search input:focus,
1163+
.container2 .search input:active,
1164+
.container2 .search:hover input {
1165+
width: 400px;
1166+
right:0;
1167+
}
1168+
.container2 .search input:focus + button,
1169+
.container2 .search input:active + button,
1170+
.container2 .search:hover button {
1171+
right: 0;
1172+
box-shadow: 0 6px 28px 0 rgba(0, 0, 0, 0.3), 0 5px 55px 0 rgba(0, 0, 0, 0.2);
1173+
}
1174+
10931175
.category-filter {
10941176
display: none;
10951177
justify-content:right;

0 commit comments

Comments
 (0)