diff --git a/assets/sass/abstracts/_mixins.scss b/assets/sass/abstracts/_mixins.scss
index e69de29..5d01104 100644
--- a/assets/sass/abstracts/_mixins.scss
+++ b/assets/sass/abstracts/_mixins.scss
@@ -0,0 +1,11 @@
+@mixin font-icon {
+ font-family: "Font Awesome 6 Free";
+ font-weight: 900;
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ display: var(--fa-display, inline-block);
+ font-style: normal;
+ font-variant: normal;
+ line-height: 1;
+ text-rendering: auto;
+}
diff --git a/assets/sass/abstracts/_variables.scss b/assets/sass/abstracts/_variables.scss
index eb1155d..06b8ecc 100644
--- a/assets/sass/abstracts/_variables.scss
+++ b/assets/sass/abstracts/_variables.scss
@@ -14,6 +14,8 @@ $gray-base: #212529 !default;
$blue: #605be5 !default;
$dark-blue: #333366 !default;
$light-gray: #e8e8e8 !default;
+$black: #000 !default;
+$white: #fff !default;
// Text and Paragraph
diff --git a/assets/sass/theme.scss b/assets/sass/theme.scss
index 393b9ba..18d030c 100644
--- a/assets/sass/theme.scss
+++ b/assets/sass/theme.scss
@@ -4,7 +4,11 @@
@import "theme/general";
@import "theme/header-and-footer";
@import "theme/navigation";
-@import "theme/navigation-toggle";
@import "theme/posts-and-pages";
@import "theme/comments";
@import "theme/layouts";
+
+// Elements
+
+@import "theme/navigation-toggle";
+@import "theme/search-form";
diff --git a/assets/sass/theme/_header.scss b/assets/sass/theme/_header.scss
index 49c13c6..e981a2b 100644
--- a/assets/sass/theme/_header.scss
+++ b/assets/sass/theme/_header.scss
@@ -22,8 +22,10 @@
}
.site-branding {
- &.show-logo {
+ display: flex;
+ align-items: center;
+ &.show-logo {
.site-title {
display: none !important;
}
@@ -50,5 +52,13 @@
text-decoration: none;
}
}
+
+ // Header Section
+ .header-section {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 16px;
+ }
}
diff --git a/assets/sass/theme/_navigation-toggle.scss b/assets/sass/theme/_navigation-toggle.scss
index 4bb2797..5e7aa6b 100644
--- a/assets/sass/theme/_navigation-toggle.scss
+++ b/assets/sass/theme/_navigation-toggle.scss
@@ -3,8 +3,6 @@
*/
@use "sass:math";
-// Settings
-// ==================================================
$hamburger-padding-x: 15px !default;
$hamburger-padding-y: 15px !default;
$hamburger-layer-width: 40px !default;
@@ -16,9 +14,6 @@ $hamburger-hover-opacity: 0.7 !default;
$hamburger-active-layer-color: $hamburger-layer-color !default;
$hamburger-active-hover-opacity: $hamburger-hover-opacity !default;
-// To use CSS filters as the hover effect instead of opacity,
-// set $hamburger-hover-use-filter as true and
-// change the value of $hamburger-hover-filter accordingly.
$hamburger-hover-use-filter: false !default;
$hamburger-hover-filter: opacity(50%) !default;
$hamburger-active-hover-filter: $hamburger-hover-filter !default;
diff --git a/assets/sass/theme/_navigation.scss b/assets/sass/theme/_navigation.scss
index 87110fb..b8889b8 100644
--- a/assets/sass/theme/_navigation.scss
+++ b/assets/sass/theme/_navigation.scss
@@ -12,12 +12,104 @@
.site-navigation {
- ul {
- display: flex;
+ ul.menu, ul.menu ul {
+ margin: 0;
padding: 0;
list-style: none;
}
+ ul.menu {
+ display: flex;
+ flex-wrap: wrap;
+
+ li {
+ position: relative;
+ display: flex;
+
+ a {
+ display: block;
+ padding: 10px 16px;
+
+ &:hover {
+ text-decoration: none;
+ }
+ }
+
+ &.menu-item-has-children {
+ padding-inline-end: 13px;
+
+ > a {
+ padding: 10px 7px 10px 16px;
+ }
+
+ &:after {
+ content: '\f107';
+ width: 13px;
+ height: 14px;
+ position: absolute;
+ top: 50%;
+ right: 0;
+ transform: translateY(-50%);
+ @include font-icon;
+ }
+
+ &:focus-within {
+ & > ul {
+ display: block;
+ }
+ }
+ }
+
+ ul {
+ background: $white;
+ min-width: 210px;
+ padding: 10px 0;
+ position: absolute;
+ z-index: 10;
+ left: 0;
+ top: 100%;
+ max-height: 0;
+ border-radius: 8px;
+ transform: scaleY(0);
+ transform-origin: top;
+ box-shadow: 0 12px 12px #0000001a;
+ transition: max-height 200ms, transform 200ms;
+
+ li {
+ display: block;
+ border-block-end: solid 1px $light-gray;
+
+ a {
+ text-align: left;
+ opacity: .78;
+ transition: opacity 200ms ease-in-out 0ms;
+
+ &:hover {
+ opacity: 1;
+ }
+ }
+ }
+
+ li:last-child {
+ border-block-end: none;
+ }
+ }
+
+
+ &:hover {
+
+ & > ul {
+ transform: scaleY(1);
+ max-height: 100vh;
+ }
+
+ &.menu-item-has-children:after {
+ transform: translateY(-50%) rotate(180deg);
+ }
+
+ }
+ }
+ }
}
.site-navigation-dropdown {
diff --git a/assets/sass/theme/_search-form.scss b/assets/sass/theme/_search-form.scss
new file mode 100644
index 0000000..2e2a506
--- /dev/null
+++ b/assets/sass/theme/_search-form.scss
@@ -0,0 +1,159 @@
+.search-form {
+
+ //&:not(.show) {
+ // display: none;
+ //}
+
+ .font-icon-svg-container {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ &__toggle {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ width: var(--e-wpkit-header-search--toggle-size, 2.5rem); /* 40/16 */
+ height: var(--e-wpkit-header-search--toggle-size, 2.5rem); /* 40/16 */
+ min-width: 2.5rem; /* 40/16 */
+ min-height: 2.5rem; /* 40/16 */
+
+ .font-icon-svg-container {
+ font-size: var(--e-wpkit-header-search--toggle-size, 1.5rem); /* 24/16 */
+ }
+
+ > * {
+ pointer-events: none;
+ }
+ }
+
+ &--skin-classic {
+ }
+
+ &--skin-minimal {
+ }
+
+ &--skin-full_screen {
+ }
+}
+
+.search-overlay {
+ padding-top: 5.625rem; /* 90/16 */
+ position: fixed;
+ width: 100%;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ z-index: 9999;
+ visibility: hidden;
+ opacity: 0;
+ transition: all 200ms ease-in-out 0ms;
+ background: var(--e-wpkit-search-full-screen--overlay-background, #fff);
+
+ &.is-visible {
+ opacity: 1;
+ visibility: visible;
+ }
+
+ .search-top {
+
+ position: relative;
+ margin-block-end: 2.625rem; /* 42/16 */
+
+ }
+
+ .container {
+ width: 100%;
+ max-width: 100%;
+ display: block;
+ margin-right: auto;
+ margin-left: auto;
+ padding-left: 0;
+ padding-right: 0;
+
+ }
+
+ .close-search {
+
+ font-size: 1.625rem; /* 26/16 */
+ line-height: 1;
+ user-select: none;
+ cursor: pointer;
+ width: 2.625rem; /* 42/16 */
+ height: 2.625rem; /* 42/16 */
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ position: absolute;
+ top: 0;
+ right: 0;
+
+ &:after {
+ content: '\f00d';
+ font-family: var(--fa-style-family, "Font Awesome 6 Free");
+ font-weight: var(--fa-style, 900);
+ transform-origin: center;
+ transition: all 300ms ease-in-out 0ms;
+ }
+
+ &:hover:after {
+ transform: rotate(180deg);
+ }
+
+ }
+
+ .search-form {
+
+ &__container {
+
+ display: flex;
+ position: relative;
+
+ }
+
+ .search-field {
+ --e-wpkit-search-field-gutter-y: 1rem; /* 16/16 */
+ --e-wpkit-search-full-screen--field-height: 2.25rem; /* 36/16 */
+ --e-wpkit-search-full-screen--field-pe: 2.25rem; /* 36/16 */
+
+ border-radius: 0;
+ padding: 0 calc(var(--e-wpkit-search-full-screen--field-pe) + 0.625rem) var(--e-wpkit-search-field-gutter-y) 0;
+ min-height: calc(var(--e-wpkit-search-full-screen--field-height) + var(--e-wpkit-search-field-gutter-y));
+ border: 0;
+ border-bottom: 2px solid #000;
+ background: transparent;
+
+ }
+
+ .search-submit {
+
+ color: var(--e-wpkit-search-full-screen--submit, #333);
+ font-size: var(--e-wpkit-search-full-screen--submit-size, 2.25rem); /* 36/16 */
+ border: none;
+ padding: 0;
+ position: absolute;
+ top: 0;
+ right: 0;
+ z-index: 10;
+
+ &:hover {
+ opacity: .72;
+ background: transparent;
+ }
+
+ &:focus {
+ outline: 0;
+ }
+
+ &__text {
+ @extend .screen-reader-text;
+ }
+
+ }
+ }
+
+}
diff --git a/assets/scripts/frontend/wpkit-elementor-frontend.js b/assets/scripts/frontend/wpkit-elementor-frontend.js
index c3f3700..a4fc1f7 100644
--- a/assets/scripts/frontend/wpkit-elementor-frontend.js
+++ b/assets/scripts/frontend/wpkit-elementor-frontend.js
@@ -3,8 +3,6 @@ class wpkitElementorHandler {
this.initSettings();
this.initElements();
this.boundEvents();
-
- console.log(this.elements.menuToggle);
}
initSettings() {
@@ -13,6 +11,10 @@ class wpkitElementorHandler {
menuToggle: '.site-header .site-navigation-toggle',
menuToggleContainer: '.site-header .site-navigation-toggle-container',
dropdownMenu: '.site-header .site-navigation-dropdown',
+ searchFormToggle: '.site-header .header-search-toggle-container .search-form__toggle',
+ searchFormToggleContainer: '.site-header .header-search-toggle-container',
+ searchFormOverlay: '.search-overlay',
+ searchFormClose: '.search-overlay .close-search',
}
}
}
@@ -20,67 +22,92 @@ class wpkitElementorHandler {
initElements() {
this.elements = {
window,
- menuToggle: document.querySelector(this.settings.selectors.menuToggle),
- menuToggleContainer: document.querySelector(this.settings.selectors.menuToggleContainer),
- dropdownMenu: document.querySelector(this.settings.selectors.dropdownMenu),
+ menuToggle: document.querySelector( this.settings.selectors.menuToggle ),
+ menuToggleContainer: document.querySelector( this.settings.selectors.menuToggleContainer ),
+ dropdownMenu: document.querySelector( this.settings.selectors.dropdownMenu ),
+ searchFormToggle: document.querySelector( this.settings.selectors.searchFormToggle ),
+ searchFormToggleContainer: document.querySelector( this.settings.selectors.searchFormToggleContainer ),
+ searchFormOverlay: document.querySelector( this.settings.selectors.searchFormOverlay ),
+ searchFormClose: document.querySelector( this.settings.selectors.searchFormClose ),
}
}
boundEvents() {
- if (!this.elements.menuToggleContainer || this.elements.menuToggleContainer?.classList.contains('hide')) {
- return;
+ if ( this.elements.menuToggleContainer && ! this.elements.menuToggleContainer?.classList.contains( 'hide' ) ) {
+ this.elements.menuToggle.addEventListener( 'click', () => this.menuToggleHandle() );
+ this.elements.menuToggle.addEventListener( 'keyup', ( event ) => {
+ const ENTER_KEY = 13;
+ const SPACE_KEY = 32;
+ const ESC_KEY = 27;
+
+ if ( ENTER_KEY === event.keyCode || SPACE_KEY === event.keyCode || ESC_KEY === event.keyCode ) {
+ event.currentTarget.click();
+ }
+ } );
+
+ this.elements.dropdownMenu.querySelectorAll( '.menu-item-has-children > a' ).forEach( ( anchorEl ) => anchorEl.addEventListener( 'click', ( event ) => this.menuChildrenHandle( event ) ) );
}
- this.elements.menuToggle.addEventListener('click', () => this.menuToggleHandle());
- this.elements.menuToggle.addEventListener('keyup', (event) => {
- const ENTER_KEY = 13;
- const SPACE_KEY = 32;
- const ESC_KEY = 27;
-
- if (ENTER_KEY === event.keyCode || SPACE_KEY === event.keyCode || ESC_KEY === event.keyCode) {
- event.currentTarget.click();
- }
- });
-
- this.elements.dropdownMenu.querySelectorAll('.menu-item-has-children > a').forEach((anchorEl) => anchorEl.addEventListener('click', (event) => this.menuChildrenHandle(event)));
+ // Search form events.
+ if ( this.elements.searchFormToggleContainer && ! this.elements.searchFormToggleContainer.classList.contains( 'hide' ) ) {
+ this.elements.searchFormToggle.addEventListener( 'click', this.searchFormOverlayHandle.bind( this ) );
+ this.elements.searchFormClose.addEventListener( 'click', this.searchFormCloseHandle.bind( this ) );
+ }
}
closeMenuItems() {
- this.elements.menuToggleContainer.classList.remove('is-active');
- this.elements.window.removeEventListener('resize', () => this.closeMenuItems());
+ this.elements.menuToggleContainer.classList.remove( 'is-active' );
+ this.elements.window.removeEventListener( 'resize', () => this.closeMenuItems() );
}
menuToggleHandle() {
- const isDropdownVisible = !this.elements.menuToggleContainer.classList.contains('is-active');
+ const isDropdownVisible = ! this.elements.menuToggleContainer.classList.contains( 'is-active' );
- this.elements.menuToggle.setAttribute('aria-expanded', isDropdownVisible);
- this.elements.dropdownMenu.setAttribute('aria-hidden', !isDropdownVisible);
- this.elements.menuToggleContainer.classList.toggle('is-active', isDropdownVisible);
- this.elements.menuToggle.classList.toggle('is-active', isDropdownVisible);
+ this.elements.menuToggle.setAttribute( 'aria-expanded', isDropdownVisible );
+ this.elements.dropdownMenu.setAttribute( 'aria-hidden', ! isDropdownVisible );
+ this.elements.menuToggleContainer.classList.toggle( 'is-active', isDropdownVisible );
+ this.elements.menuToggle.classList.toggle( 'is-active', isDropdownVisible );
// Always close all sub active items.
- this.elements.dropdownMenu.querySelectorAll('.is-active').forEach(item => item.classList.remove('is-active'));
+ this.elements.dropdownMenu.querySelectorAll( '.is-active' ).forEach( item => item.classList.remove( 'is-active' ) );
- if (isDropdownVisible) {
- this.elements.window.addEventListener('resize', () => this.closeMenuItems());
+ if ( isDropdownVisible ) {
+ this.elements.window.addEventListener( 'resize', () => this.closeMenuItems() );
} else {
- this.elements.window.removeEventListener('resize', () => this.closeMenuItems());
+ this.elements.window.removeEventListener( 'resize', () => this.closeMenuItems() );
}
}
- menuChildrenHandle(event) {
+ menuChildrenHandle( event ) {
const anchor = event.currentTarget;
const parentLi = anchor.parentElement;
- if (!parentLi?.classList) {
+ if ( ! parentLi?.classList ) {
return;
}
- parentLi.classList.toggle('is-active');
+ parentLi.classList.toggle( 'is-active' );
}
+
+ searchFormOverlayHandle() {
+ const isOverlayVisible = ! this.elements.searchFormOverlay.classList.toggle( 'is-visible' );
+
+ this.elements.searchFormToggle.setAttribute( 'aria-expanded', ! isOverlayVisible );
+ this.elements.searchFormOverlay.classList.toggle( 'is-visible', ! isOverlayVisible );
+ this.elements.searchFormOverlay.setAttribute( 'aria-hidden', isOverlayVisible );
+ }
+
+ searchFormCloseHandle() {
+ const isOverlayVisible = ! this.elements.searchFormOverlay.classList.toggle( 'is-visible' );
+
+ this.elements.searchFormToggle.setAttribute( 'aria-expanded', ! isOverlayVisible );
+ this.elements.searchFormOverlay.classList.remove( 'is-visible', isOverlayVisible );
+ this.elements.searchFormOverlay.setAttribute( 'aria-hidden', isOverlayVisible );
+ }
+
}
-document.addEventListener('DOMContentLoaded', () => {
+document.addEventListener( 'DOMContentLoaded', () => {
new wpkitElementorHandler();
-});
+} );
diff --git a/header.php b/header.php
index 0f07d17..f09004f 100644
--- a/header.php
+++ b/header.php
@@ -4,7 +4,10 @@
*
* This is the template that displays all of the section and everything up until main.
*
- * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
+ * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
+ *
+ * @package WpKitElementor
+ * @since WpKitElementor 2.0
*/
if ( ! defined( 'ABSPATH' ) ) {
@@ -28,7 +31,7 @@
kits_manager->get_active_kit();
+ if ( ! isset( $wp_kit_elementor_settings['kit_settings'] ) ) {
+ $get_kit = Plugin::$instance->kits_manager->get_active_kit();
- $wp_kit_elementor_settings['kit_settings'] = $the_kit->get_settings();
+ $wp_kit_elementor_settings['kit_settings'] = $get_kit->get_settings();
}
if ( isset( $wp_kit_elementor_settings['kit_settings'][ $setting_id ] ) ) {
@@ -89,6 +89,7 @@ function wp_kit_elementor_show_hide( $setting_id ) {
return ( 'yes' === wp_kit_elementor_get_settings( $setting_id ) ? 'show' : 'hide' );
}
+
/**
* Dynamic Header Classes
*/
@@ -128,15 +129,39 @@ function wp_kit_elementor_get_header_layout_classes() {
$layout_classes[] = 'menu-dropdown-none';
}
+ $header_search_skin = wp_kit_elementor_get_settings( 'wpkit_elementor_header_search_skin' );
+ if ( 'classic' === $header_search_skin ) {
+ $layout_classes[] = 'header-search-form--skin-classic';
+ } elseif ( 'minimal' === $header_search_skin ) {
+ $layout_classes[] = 'header-search-form--skin-minimal';
+ } elseif ( 'full_screen' === $header_search_skin ) {
+ $layout_classes[] = 'header-search-form--skin-full_screen';
+ }
+
$wpkit_elementor_header_menu_layout = wp_kit_elementor_get_settings( 'wpkit_elementor_header_menu_layout' );
if ( 'dropdown' === $wpkit_elementor_header_menu_layout ) {
$layout_classes[] = 'menu-layout-dropdown';
}
+ $wpkit_elementor_header_search_layout = wp_kit_elementor_get_settings( 'wpkit_elementor_header_search_display' );
+ if ( 'yes' === $wpkit_elementor_header_search_layout ) {
+ $layout_classes[] = 'header-search-form';
+ }
+
return implode( ' ', $layout_classes );
}
}
+if ( ! function_exists( 'wp_kit_elementor_header_search_form' ) ) {
+ function wp_kit_elementor_header_search_form() {
+ $header_search_skin = wp_kit_elementor_get_settings( 'wpkit_elementor_header_search_skin' );
+
+ echo get_search_form();
+ // echo 'search form';
+ }
+}
+
+
add_action( 'wp_enqueue_scripts', function () {
$suffix = defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ? '' : '.min';
diff --git a/includes/settings/class-settings-header.php b/includes/settings/class-settings-header.php
index ff7c221..4c46ea3 100644
--- a/includes/settings/class-settings-header.php
+++ b/includes/settings/class-settings-header.php
@@ -162,7 +162,7 @@ protected function register_tab_controls() {
'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
'range' => [
'px' => [
- 'max' => 2000,
+ 'max' => 1600,
],
'em' => [
'max' => 100,
@@ -284,7 +284,7 @@ protected function register_tab_controls() {
'wpkit_elementor_header_logo_type' => 'logo'
],
'selectors' => [
- '.site-header .site-branding .site-logo ' => 'width: {{SIZE}}{{UNIT}};',
+ '.site-header .site-branding .site-logo' => 'width: {{SIZE}}{{UNIT}};',
],
]
);
@@ -494,7 +494,7 @@ protected function register_tab_controls() {
'wpkit_elementor_header_menu_hamburgers',
[
'type' => Controls_Manager::SELECT,
- 'label' => esc_html__( 'Hamburgers', 'wp-kit-elementor' ),
+ 'label' => esc_html__( 'Type', 'wp-kit-elementor' ),
'default' => 'collapse',
'options' => [
'slider' => esc_html__( 'Slider', 'wp-kit-elementor' ),
@@ -626,6 +626,328 @@ protected function register_tab_controls() {
]
);
+ $this->add_control(
+ 'wpkit_elementor_header_search_skin',
+ [
+ 'type' => Controls_Manager::SELECT,
+ 'label' => esc_html__( 'Skin', 'wp-kit-elementor' ),
+ 'default' => 'classic',
+ 'options' => [
+ 'classic' => esc_html__( 'Classic', 'wp-kit-elementor' ),
+ 'minimal' => esc_html__( 'Minimal', 'wp-kit-elementor' ),
+ 'full_screen' => esc_html__( 'Full Screen (Beta)', 'wp-kit-elementor' ),
+ ],
+ 'condition' => [
+ 'wpkit_elementor_header_search_display' => 'yes',
+ ]
+ ]
+ );
+
+ $this->add_control(
+ 'wpkit_elementor_header_search_toggle_size',
+ [
+ 'type' => Controls_Manager::SLIDER,
+ 'label' => esc_html__( 'Toggle Size', 'wp-kit-elementor' ),
+ 'default' => [
+ 'size' => 24
+ ],
+ 'range' => [
+ 'px' => [
+ 'max' => 60,
+ ],
+ ],
+ 'condition' => [
+ 'wpkit_elementor_header_search_display' => 'yes',
+ ],
+ 'selectors' => [
+ '.site-header .header-search-toggle-container .search-form__toggle' => '--e-wpkit-header-search--toggle-size: {{SIZE}}{{UNIT}};',
+ '.site-header .header-search-toggle-container .search-form__toggle .font-icon-svg-container' => '--e-wpkit-header-search--toggle-size: {{SIZE}}{{UNIT}};',
+ ],
+ ]
+ );
+
+ $this->add_control(
+ 'wpkit_elementor_header_search_placeholder',
+ [
+ 'type' => Controls_Manager::TEXT,
+ 'label' => esc_html__( 'Placeholder', 'wp-kit-elementor' ),
+ 'label_block' => true,
+ 'default' => esc_attr__( 'Search...', 'wp-kit-elementor' ),
+ 'separator' => 'before',
+ 'dynamic' => [
+ 'active' => true,
+ ],
+ 'condition' => [
+ 'wpkit_elementor_header_search_display' => 'yes',
+ ],
+ ]
+ );
+
+ $this->add_control(
+ 'wpkit_elementor_header_search_full_screen_heading_head',
+ [
+ 'type' => Controls_Manager::HEADING,
+ 'separator' => 'before',
+ 'label' => esc_html__( 'Heading', 'wp-kit-elementor' ),
+ 'conditions' => [
+ 'relation' => 'and',
+ 'terms' => [
+ [
+ 'name' => 'wpkit_elementor_header_search_display',
+ 'operator' => '=',
+ 'value' => 'yes'
+ ],
+ [
+ 'name' => 'wpkit_elementor_header_search_skin',
+ 'operator' => '=',
+ 'value' => 'full_screen'
+ ]
+ ],
+ ],
+ ]
+ );
+
+ $this->add_control(
+ 'wpkit_elementor_header_search_full_screen_heading_text',
+ [
+ 'type' => Controls_Manager::TEXTAREA,
+ 'label' => esc_html__( 'Heading', 'wp-kit-elementor' ),
+ 'label_block' => true,
+ 'default' => esc_attr__( 'What are you looking for?', 'wp-kit-elementor' ),
+ 'dynamic' => [
+ 'active' => true,
+ ],
+ 'conditions' => [
+ 'relation' => 'and',
+ 'terms' => [
+ [
+ 'name' => 'wpkit_elementor_header_search_display',
+ 'operator' => '=',
+ 'value' => 'yes'
+ ],
+ [
+ 'name' => 'wpkit_elementor_header_search_skin',
+ 'operator' => '=',
+ 'value' => 'full_screen'
+ ]
+ ],
+ ],
+ ]
+ );
+
+ $this->add_control(
+ 'wpkit_elementor_header_search_full_screen_heading_color',
+ [
+ 'label' => esc_html__( 'Color', 'wp-kit-elementor' ),
+ 'type' => Controls_Manager::COLOR,
+ 'conditions' => [
+ 'relation' => 'and',
+ 'terms' => [
+ [
+ 'name' => 'wpkit_elementor_header_search_display',
+ 'operator' => '=',
+ 'value' => 'yes'
+ ],
+ [
+ 'name' => 'wpkit_elementor_header_search_skin',
+ 'operator' => '=',
+ 'value' => 'full_screen'
+ ]
+ ],
+ ],
+ 'selectors' => [
+ '.search-overlay .search-form__title' => 'color: {{VALUE}}',
+ ],
+ ]
+ );
+
+ $this->add_group_control(
+ Group_Control_Typography::get_type(),
+ [
+ 'name' => 'wpkit_elementor_header_search_full_screen_heading_typography',
+ 'conditions' => [
+ 'relation' => 'and',
+ 'terms' => [
+ [
+ 'name' => 'wpkit_elementor_header_search_display',
+ 'operator' => '=',
+ 'value' => 'yes'
+ ],
+ [
+ 'name' => 'wpkit_elementor_header_search_skin',
+ 'operator' => '=',
+ 'value' => 'full_screen'
+ ]
+ ],
+ ],
+ 'selector' => '.search-overlay .search-form__title',
+ ]
+ );
+
+ $this->add_control(
+ 'wpkit_elementor_header_search_full_screen_button_head',
+ [
+ 'type' => Controls_Manager::HEADING,
+ 'separator' => 'before',
+ 'label' => esc_html__( 'Button', 'wp-kit-elementor' ),
+ 'conditions' => [
+ 'relation' => 'and',
+ 'terms' => [
+ [
+ 'name' => 'wpkit_elementor_header_search_display',
+ 'operator' => '=',
+ 'value' => 'yes'
+ ],
+ [
+ 'name' => 'wpkit_elementor_header_search_skin',
+ 'operator' => '=',
+ 'value' => 'full_screen'
+ ]
+ ],
+ ],
+ ]
+ );
+
+ $this->add_control(
+ 'wpkit_elementor_header_search_full_screen_submit_color',
+ [
+ 'label' => esc_html__( 'Color', 'wp-kit-elementor' ),
+ 'type' => Controls_Manager::COLOR,
+ 'conditions' => [
+ 'relation' => 'and',
+ 'terms' => [
+ [
+ 'name' => 'wpkit_elementor_header_search_display',
+ 'operator' => '=',
+ 'value' => 'yes'
+ ],
+ [
+ 'name' => 'wpkit_elementor_header_search_skin',
+ 'operator' => '=',
+ 'value' => 'full_screen'
+ ]
+ ],
+ ],
+ 'selectors' => [
+ '.search-overlay .search-form .search-submit' => 'color: {{VALUE}}',
+ ],
+ ]
+ );
+
+ $this->add_control(
+ 'wpkit_elementor_header_search_full_screen_submit_size',
+ [
+ 'type' => Controls_Manager::SLIDER,
+ 'label' => esc_html__( 'Size', 'wp-kit-elementor' ),
+ 'conditions' => [
+ 'relation' => 'and',
+ 'terms' => [
+ [
+ 'name' => 'wpkit_elementor_header_search_display',
+ 'operator' => '=',
+ 'value' => 'yes'
+ ],
+ [
+ 'name' => 'wpkit_elementor_header_search_skin',
+ 'operator' => '=',
+ 'value' => 'full_screen'
+ ]
+ ],
+ ],
+ 'selectors' => [
+ '.search-overlay .search-form .search-field' => '--e-wpkit-search-full-screen--field-height: {{SIZE}}{{UNIT}}; --e-wpkit-search-full-screen--field-pe: {{SIZE}}{{UNIT}};',
+ '.search-overlay .search-form .search-submit' => '--e-wpkit-search-full-screen--submit-size: {{SIZE}}{{UNIT}};',
+ ],
+ ]
+ );
+
+ $this->add_control(
+ 'wpkit_elementor_header_search_full_screen_overlay_head',
+ [
+ 'type' => Controls_Manager::HEADING,
+ 'separator' => 'before',
+ 'label' => esc_html__( 'Overlay', 'wp-kit-elementor' ),
+ 'conditions' => [
+ 'relation' => 'and',
+ 'terms' => [
+ [
+ 'name' => 'wpkit_elementor_header_search_display',
+ 'operator' => '=',
+ 'value' => 'yes'
+ ],
+ [
+ 'name' => 'wpkit_elementor_header_search_skin',
+ 'operator' => '=',
+ 'value' => 'full_screen'
+ ]
+ ],
+ ],
+ ]
+ );
+
+ $this->add_control(
+ 'wpkit_elementor_header_search_full_screen_container_width',
+ [
+ 'type' => Controls_Manager::SLIDER,
+ 'label' => esc_html__( 'Container Width', 'wp-kit-elementor' ),
+ 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
+ 'range' => [
+ 'px' => [
+ 'max' => 1600,
+ ],
+ 'em' => [
+ 'max' => 100,
+ ],
+ 'rem' => [
+ 'max' => 100,
+ ],
+ ],
+ 'conditions' => [
+ 'relation' => 'and',
+ 'terms' => [
+ [
+ 'name' => 'wpkit_elementor_header_search_display',
+ 'operator' => '=',
+ 'value' => 'yes'
+ ],
+ [
+ 'name' => 'wpkit_elementor_header_search_skin',
+ 'operator' => '=',
+ 'value' => 'full_screen'
+ ]
+ ],
+ ],
+ 'selectors' => [
+ '.search-overlay .container' => 'width: {{SIZE}}{{UNIT}};',
+ ],
+ ]
+ );
+
+ $this->add_group_control(
+ Group_Control_Background::get_type(),
+ [
+ 'name' => 'wpkit_elementor_header_search_full_screen_overlay_background',
+ 'types' => [ 'classic', 'gradient' ],
+ 'exclude' => [ 'image' ],
+ 'conditions' => [
+ 'relation' => 'and',
+ 'terms' => [
+ [
+ 'name' => 'wpkit_elementor_header_search_display',
+ 'operator' => '=',
+ 'value' => 'yes'
+ ],
+ [
+ 'name' => 'wpkit_elementor_header_search_skin',
+ 'operator' => '=',
+ 'value' => 'full_screen'
+ ]
+ ],
+ ],
+ 'selector' => '.search-overlay',
+ ]
+ );
+
$this->end_controls_section();
}
diff --git a/includes/template-functions.php b/includes/template-functions.php
index f6d0fa8..1780c5d 100644
--- a/includes/template-functions.php
+++ b/includes/template-functions.php
@@ -8,3 +8,4 @@
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly.
}
+
diff --git a/template-parts/dynamic-header.php b/template-parts/dynamic-header.php
new file mode 100644
index 0000000..12a461b
--- /dev/null
+++ b/template-parts/dynamic-header.php
@@ -0,0 +1,119 @@
+ 'primary',
+ 'fallback_cb' => false,
+ 'echo' => false
+] );
+?>
+
+
+
+
+
+
+
diff --git a/template-parts/header-dynamic.php b/template-parts/header-dynamic.php
deleted file mode 100644
index 9e71b17..0000000
--- a/template-parts/header-dynamic.php
+++ /dev/null
@@ -1,83 +0,0 @@
- 'primary',
- 'fallback_cb' => false,
- 'echo' => false
-] );
-?>
-