­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ widgets->prepare_help_url( 'https://crocoblock.com/knowledge-base/jetsmartfilters/jetsmartfilters-how-to-use-alphabet-filter/', $this->get_name() ); } public function register_filter_style_controls() { $css_scheme = apply_filters( 'jet-smart-filters/widgets/alphabet/css-scheme', array( 'list-wrapper' => '.jet-alphabet-list-wrapper', 'list-fieldset' => '.jet-alphabet-list-wrapper > fieldset', 'list-item' => '.jet-alphabet-list__row', 'item' => '.jet-alphabet-list__item', 'button' => '.jet-alphabet-list__button', ) ); $this->start_controls_section( 'section_items_style', array( 'label' => esc_html__( 'Items', 'jet-smart-filters' ), 'tab' => Controls_Manager::TAB_STYLE, 'show_label' => false, ) ); $this->add_responsive_control( 'items_space_between', array( 'label' => esc_html__( 'Space Between', 'jet-smart-filters' ), 'type' => Controls_Manager::SLIDER, 'size_units' => array( 'px', ), 'range' => array( 'px' => array( 'min' => 0, 'max' => 50, ), ), 'default' => array( 'size' => 10, 'unit' => 'px', ), 'selectors' => array( '{{WRAPPER}} ' . $css_scheme['list-fieldset'] => 'gap: {{SIZE}}{{UNIT}};' ), ) ); $this->add_responsive_control( 'items_alignment', array( 'label' => esc_html__( 'Alignment', 'jet-smart-filters' ), 'type' => Controls_Manager::CHOOSE, 'toggle' => false, 'default' => 'flex-start', 'options' => array( 'flex-start' => array( 'title' => esc_html__( 'Left', 'jet-smart-filters' ), 'icon' => 'eicon-text-align-left', ), 'center' => array( 'title' => esc_html__( 'Center', 'jet-smart-filters' ), 'icon' => 'eicon-text-align-center', ), 'flex-end' => array( 'title' => esc_html__( 'Right', 'jet-smart-filters' ), 'icon' => 'eicon-text-align-right', ), ), 'selectors' => array( '{{WRAPPER}} ' . $css_scheme['list-fieldset'] => 'justify-content: {{VALUE}};', ) ) ); $this->end_controls_section(); $this->start_controls_section( 'section_item_style', array( 'label' => esc_html__( 'Item', 'jet-smart-filters' ), 'tab' => Controls_Manager::TAB_STYLE, 'show_label' => false, ) ); $this->add_responsive_control( 'item_min_width', array( 'label' => esc_html__( 'Minimal Width', 'jet-smart-filters' ), 'type' => Controls_Manager::SLIDER, 'size_units' => array( 'px' ), 'range' => array( 'px' => array( 'min' => 10, 'max' => 500, ), ), 'selectors' => array( '{{WRAPPER}} ' . $css_scheme['button'] => 'min-width: {{SIZE}}{{UNIT}};', ), ) ); $this->add_group_control( Group_Control_Typography::get_type(), array( 'name' => 'item_typography', 'selector' => '{{WRAPPER}} ' . $css_scheme['button'], ) ); $this->start_controls_tabs( 'item_style_tabs' ); $this->start_controls_tab( 'item_normal_styles', array( 'label' => esc_html__( 'Normal', 'jet-smart-filters' ), ) ); $this->add_control( 'item_normal_color', array( 'label' => esc_html__( 'Color', 'jet-smart-filters' ), 'type' => Controls_Manager::COLOR, 'selectors' => array( '{{WRAPPER}} ' . $css_scheme['button'] => 'color: {{VALUE}}', ), ) ); $this->add_control( 'item_normal_background_color', array( 'label' => esc_html__( 'Background Color', 'jet-smart-filters' ), 'type' => Controls_Manager::COLOR, 'selectors' => array( '{{WRAPPER}} ' . $css_scheme['button'] => 'background-color: {{VALUE}}', ), ) ); $this->end_controls_tab(); $this->start_controls_tab( 'item_checked_styles', array( 'label' => esc_html__( 'Checked', 'jet-smart-filters' ), ) ); $this->add_control( 'item_checked_color', array( 'label' => esc_html__( 'Color', 'jet-smart-filters' ), 'type' => Controls_Manager::COLOR, 'selectors' => array( '{{WRAPPER}} .jet-alphabet-list__input:checked ~ ' . $css_scheme['button'] => 'color: {{VALUE}}', ), ) ); $this->add_control( 'item_checked_background_color', array( 'label' => esc_html__( 'Background Color', 'jet-smart-filters' ), 'type' => Controls_Manager::COLOR, 'selectors' => array( '{{WRAPPER}} .jet-alphabet-list__input:checked ~ ' . $css_scheme['button'] => 'background-color: {{VALUE}}', ), ) ); $this->add_control( 'item_checked_border_color', array( 'label' => esc_html__( 'Border Color', 'jet-smart-filters' ), 'type' => Controls_Manager::COLOR, 'selectors' => array( '{{WRAPPER}} .jet-alphabet-list__input:checked ~ ' . $css_scheme['button'] => 'border-color: {{VALUE}}', ), ) ); $this->end_controls_tab(); $this->end_controls_tabs(); $this->add_responsive_control( 'item_padding', array( 'label' => esc_html__( 'Padding', 'jet-smart-filters' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => array( 'px', '%' ), 'selectors' => array( '{{WRAPPER}} ' . $css_scheme['button'] => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ), 'separator' => 'before' ) ); $this->add_group_control( Group_Control_Border::get_type(), array( 'name' => 'item_border', 'label' => esc_html__( 'Border', 'jet-smart-filters' ), 'fields_options' => array( 'border' => array( 'default' => 'solid', ), ), 'selector' => '{{WRAPPER}} ' . $css_scheme['button'], ) ); $this->add_control( 'item_border_radius', array( 'label' => esc_html__( 'Border Radius', 'jet-smart-filters' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => array( 'px', '%' ), 'selectors' => array( '{{WRAPPER}} ' . $css_scheme['button'] => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ), ) ); $this->add_group_control( Group_Control_Box_Shadow::get_type(), array( 'name' => 'item_shadow', 'selector' => '{{WRAPPER}} ' . $css_scheme['button'], ) ); $this->end_controls_section(); } }