diff --git a/wp-content/plugins/elementor-addon/assets/css/main.css b/wp-content/plugins/elementor-addon/assets/css/main.css index 2aa346a..e60a811 100644 --- a/wp-content/plugins/elementor-addon/assets/css/main.css +++ b/wp-content/plugins/elementor-addon/assets/css/main.css @@ -1 +1 @@ -.elementor-vertical-separator{display:flex;align-items:center;height:100%}.elementor-vertical-separator__line{width:1px;height:100px;background:#000}/*# sourceMappingURL=main.css.map */ \ No newline at end of file +.elementor-vertical-separator{display:flex;align-items:center;height:100%}.elementor-vertical-separator__line{width:1px;height:100px;background:#000}.elementor-widget-number-box .elementor-number-box-wrapper{display:flex;flex-direction:column;text-align:center}.elementor-widget-number-box .elementor-number-box-number{display:inline-block;flex:0 0 auto;line-height:0}.elementor-widget-number-box .elementor-number-box-content{flex-grow:1;width:100%}.elementor-widget-number-box .elementor-number-box-title{margin:0}.elementor-widget-number-box .elementor-number-box-title a{color:inherit;margin:0}.elementor-widget-number-box .elementor-number-box-description{margin:0}.elementor-widget-number-box.elementor-position-inline-end .elementor-number-box-wrapper{flex-direction:row-reverse;text-align:end}.elementor-widget-number-box.elementor-position-inline-start .elementor-number-box-wrapper{flex-direction:row;text-align:start}.elementor-widget-number-box.elementor-position-block-start .elementor-number-box-wrapper{align-items:unset !important;flex-direction:column;text-align:center}.elementor-widget-number-box.elementor-position-block-end .elementor-number-box-wrapper{align-items:unset !important;flex-direction:column-reverse;text-align:center}@media(min-width: ELEMENTOR_SCREEN_WIDESCREEN_MIN){.elementor-widget-number-box.elementor-widescreen-position-inline-end .elementor-number-box-wrapper{flex-direction:row-reverse;text-align:end}.elementor-widget-number-box.elementor-widescreen-position-inline-start .elementor-number-box-wrapper{flex-direction:row;text-align:start}.elementor-widget-number-box.elementor-widescreen-position-block-start .elementor-number-box-wrapper{align-items:unset !important;flex-direction:column;text-align:center}.elementor-widget-number-box.elementor-widescreen-position-block-end .elementor-number-box-wrapper{align-items:unset !important;flex-direction:column-reverse;text-align:center}}@media(max-width: ELEMENTOR_SCREEN_LAPTOP_MAX){.elementor-widget-number-box.elementor-laptop-position-inline-end .elementor-number-box-wrapper{flex-direction:row-reverse;text-align:end}.elementor-widget-number-box.elementor-laptop-position-inline-start .elementor-number-box-wrapper{flex-direction:row;text-align:start}.elementor-widget-number-box.elementor-laptop-position-block-start .elementor-number-box-wrapper{align-items:unset !important;flex-direction:column;text-align:center}.elementor-widget-number-box.elementor-laptop-position-block-end .elementor-number-box-wrapper{align-items:unset !important;flex-direction:column-reverse;text-align:center}}@media(max-width: ELEMENTOR_SCREEN_TABLET_EXTRA_MAX){.elementor-widget-number-box.elementor-tablet_extra-position-inline-end .elementor-number-box-wrapper{flex-direction:row-reverse;text-align:end}.elementor-widget-number-box.elementor-tablet_extra-position-inline-start .elementor-number-box-wrapper{flex-direction:row;text-align:start}.elementor-widget-number-box.elementor-tablet_extra-position-block-start .elementor-number-box-wrapper{align-items:unset !important;flex-direction:column;text-align:center}.elementor-widget-number-box.elementor-tablet_extra-position-block-end .elementor-number-box-wrapper{align-items:unset !important;flex-direction:column-reverse;text-align:center}}@media(max-width: ELEMENTOR_SCREEN_TABLET_MAX){.elementor-widget-number-box.elementor-tablet-position-inline-end .elementor-number-box-wrapper{flex-direction:row-reverse;text-align:end}.elementor-widget-number-box.elementor-tablet-position-inline-start .elementor-number-box-wrapper{flex-direction:row;text-align:start}.elementor-widget-number-box.elementor-tablet-position-block-start .elementor-number-box-wrapper{align-items:unset !important;flex-direction:column;text-align:center}.elementor-widget-number-box.elementor-tablet-position-block-end .elementor-number-box-wrapper{align-items:unset !important;flex-direction:column-reverse;text-align:center}}@media(max-width: ELEMENTOR_SCREEN_MOBILE_EXTRA_MAX){.elementor-widget-number-box.elementor-mobile_extra-position-inline-end .elementor-number-box-wrapper{flex-direction:row-reverse;text-align:end}.elementor-widget-number-box.elementor-mobile_extra-position-inline-start .elementor-number-box-wrapper{flex-direction:row;text-align:start}.elementor-widget-number-box.elementor-mobile_extra-position-block-start .elementor-number-box-wrapper{align-items:unset !important;flex-direction:column;text-align:center}.elementor-widget-number-box.elementor-mobile_extra-position-block-end .elementor-number-box-wrapper{align-items:unset !important;flex-direction:column-reverse;text-align:center}}@media(max-width: ELEMENTOR_SCREEN_MOBILE_MAX){.elementor-widget-number-box.elementor-mobile-position-inline-end .elementor-number-box-wrapper{flex-direction:row-reverse;text-align:end}.elementor-widget-number-box.elementor-mobile-position-inline-start .elementor-number-box-wrapper{flex-direction:row;text-align:start}.elementor-widget-number-box.elementor-mobile-position-block-start .elementor-number-box-wrapper{align-items:unset !important;flex-direction:column;text-align:center}.elementor-widget-number-box.elementor-mobile-position-block-end .elementor-number-box-wrapper{align-items:unset !important;flex-direction:column-reverse;text-align:center}}/*# sourceMappingURL=main.css.map */ \ No newline at end of file diff --git a/wp-content/plugins/elementor-addon/assets/css/main.css.map b/wp-content/plugins/elementor-addon/assets/css/main.css.map index 1d87010..feb6b01 100644 --- a/wp-content/plugins/elementor-addon/assets/css/main.css.map +++ b/wp-content/plugins/elementor-addon/assets/css/main.css.map @@ -1 +1 @@ -{"version":3,"sources":["main.scss"],"names":[],"mappings":"AAAA,8BACC,YAAA,CACA,kBAAA,CACA,WAAA,CAGD,oCACC,SAAA,CACA,YAAA,CACA,eAAA","file":"main.css"} \ No newline at end of file +{"version":3,"sources":["main.scss"],"names":[],"mappings":"AAAA,8BACC,YAAA,CACA,kBAAA,CACA,WAAA,CAGD,oCACC,SAAA,CACA,YAAA,CACA,eAAA,CAIA,2DACC,YAAA,CACA,qBAAA,CACA,iBAAA,CAED,0DACC,oBAAA,CACA,aAAA,CACA,aAAA,CAED,2DACC,WAAA,CACA,UAAA,CAED,yDACC,QAAA,CAED,2DACC,aAAA,CACA,QAAA,CAED,+DACC,QAAA,CAED,yFACC,0BAAA,CACA,cAAA,CAED,2FACC,kBAAA,CACA,gBAAA,CAED,0FACC,4BAAA,CACA,qBAAA,CACA,iBAAA,CAED,wFACC,4BAAA,CACA,6BAAA,CACA,iBAAA,CAED,mDACC,oGACC,0BAAA,CACA,cAAA,CAED,sGACC,kBAAA,CACA,gBAAA,CAED,qGACC,4BAAA,CACA,qBAAA,CACA,iBAAA,CAED,mGACC,4BAAA,CACA,6BAAA,CACA,iBAAA,CAAA,CAGF,+CACC,gGACC,0BAAA,CACA,cAAA,CAED,kGACC,kBAAA,CACA,gBAAA,CAED,iGACC,4BAAA,CACA,qBAAA,CACA,iBAAA,CAED,+FACC,4BAAA,CACA,6BAAA,CACA,iBAAA,CAAA,CAGF,qDACC,sGACC,0BAAA,CACA,cAAA,CAED,wGAEC,kBAAA,CACA,gBAAA,CAED,uGAEC,4BAAA,CACA,qBAAA,CACA,iBAAA,CAED,qGACC,4BAAA,CACA,6BAAA,CACA,iBAAA,CAAA,CAGF,+CACC,gGACC,0BAAA,CACA,cAAA,CAED,kGACC,kBAAA,CACA,gBAAA,CAED,iGACC,4BAAA,CACA,qBAAA,CACA,iBAAA,CAED,+FACC,4BAAA,CACA,6BAAA,CACA,iBAAA,CAAA,CAGF,qDACC,sGACC,0BAAA,CACA,cAAA,CAED,wGAEC,kBAAA,CACA,gBAAA,CAED,uGAEC,4BAAA,CACA,qBAAA,CACA,iBAAA,CAED,qGACC,4BAAA,CACA,6BAAA,CACA,iBAAA,CAAA,CAGF,+CACC,gGACC,0BAAA,CACA,cAAA,CAED,kGACC,kBAAA,CACA,gBAAA,CAED,iGACC,4BAAA,CACA,qBAAA,CACA,iBAAA,CAED,+FACC,4BAAA,CACA,6BAAA,CACA,iBAAA,CAAA","file":"main.css"} \ No newline at end of file diff --git a/wp-content/plugins/elementor-addon/assets/css/main.scss b/wp-content/plugins/elementor-addon/assets/css/main.scss index b9ee65d..25f693d 100644 --- a/wp-content/plugins/elementor-addon/assets/css/main.scss +++ b/wp-content/plugins/elementor-addon/assets/css/main.scss @@ -9,3 +9,172 @@ height: 100px; background: #000; } + +.elementor-widget-number-box { + .elementor-number-box-wrapper { + display: flex; + flex-direction: column; + text-align: center; + } + .elementor-number-box-number { + display: inline-block; + flex: 0 0 auto; + line-height: 0; + } + .elementor-number-box-content { + flex-grow: 1; + width: 100%; + } + .elementor-number-box-title { + margin: 0; + } + .elementor-number-box-title a { + color: inherit; + margin: 0; + } + .elementor-number-box-description { + margin: 0; + } + &.elementor-position-inline-end .elementor-number-box-wrapper { + flex-direction: row-reverse; + text-align: end; + } + &.elementor-position-inline-start .elementor-number-box-wrapper { + flex-direction: row; + text-align: start; + } + &.elementor-position-block-start .elementor-number-box-wrapper { + align-items: unset !important; + flex-direction: column; + text-align: center; + } + &.elementor-position-block-end .elementor-number-box-wrapper { + align-items: unset !important; + flex-direction: column-reverse; + text-align: center; + } + @media (min-width: ELEMENTOR_SCREEN_WIDESCREEN_MIN) { + &.elementor-widescreen-position-inline-end .elementor-number-box-wrapper { + flex-direction: row-reverse; + text-align: end; + } + &.elementor-widescreen-position-inline-start .elementor-number-box-wrapper { + flex-direction: row; + text-align: start; + } + &.elementor-widescreen-position-block-start .elementor-number-box-wrapper { + align-items: unset !important; + flex-direction: column; + text-align: center; + } + &.elementor-widescreen-position-block-end .elementor-number-box-wrapper { + align-items: unset !important; + flex-direction: column-reverse; + text-align: center; + } + } + @media (max-width: ELEMENTOR_SCREEN_LAPTOP_MAX) { + &.elementor-laptop-position-inline-end .elementor-number-box-wrapper { + flex-direction: row-reverse; + text-align: end; + } + &.elementor-laptop-position-inline-start .elementor-number-box-wrapper { + flex-direction: row; + text-align: start; + } + &.elementor-laptop-position-block-start .elementor-number-box-wrapper { + align-items: unset !important; + flex-direction: column; + text-align: center; + } + &.elementor-laptop-position-block-end .elementor-number-box-wrapper { + align-items: unset !important; + flex-direction: column-reverse; + text-align: center; + } + } + @media (max-width: ELEMENTOR_SCREEN_TABLET_EXTRA_MAX) { + &.elementor-tablet_extra-position-inline-end .elementor-number-box-wrapper { + flex-direction: row-reverse; + text-align: end; + } + &.elementor-tablet_extra-position-inline-start + .elementor-number-box-wrapper { + flex-direction: row; + text-align: start; + } + &.elementor-tablet_extra-position-block-start + .elementor-number-box-wrapper { + align-items: unset !important; + flex-direction: column; + text-align: center; + } + &.elementor-tablet_extra-position-block-end .elementor-number-box-wrapper { + align-items: unset !important; + flex-direction: column-reverse; + text-align: center; + } + } + @media (max-width: ELEMENTOR_SCREEN_TABLET_MAX) { + &.elementor-tablet-position-inline-end .elementor-number-box-wrapper { + flex-direction: row-reverse; + text-align: end; + } + &.elementor-tablet-position-inline-start .elementor-number-box-wrapper { + flex-direction: row; + text-align: start; + } + &.elementor-tablet-position-block-start .elementor-number-box-wrapper { + align-items: unset !important; + flex-direction: column; + text-align: center; + } + &.elementor-tablet-position-block-end .elementor-number-box-wrapper { + align-items: unset !important; + flex-direction: column-reverse; + text-align: center; + } + } + @media (max-width: ELEMENTOR_SCREEN_MOBILE_EXTRA_MAX) { + &.elementor-mobile_extra-position-inline-end .elementor-number-box-wrapper { + flex-direction: row-reverse; + text-align: end; + } + &.elementor-mobile_extra-position-inline-start + .elementor-number-box-wrapper { + flex-direction: row; + text-align: start; + } + &.elementor-mobile_extra-position-block-start + .elementor-number-box-wrapper { + align-items: unset !important; + flex-direction: column; + text-align: center; + } + &.elementor-mobile_extra-position-block-end .elementor-number-box-wrapper { + align-items: unset !important; + flex-direction: column-reverse; + text-align: center; + } + } + @media (max-width: ELEMENTOR_SCREEN_MOBILE_MAX) { + &.elementor-mobile-position-inline-end .elementor-number-box-wrapper { + flex-direction: row-reverse; + text-align: end; + } + &.elementor-mobile-position-inline-start .elementor-number-box-wrapper { + flex-direction: row; + text-align: start; + } + &.elementor-mobile-position-block-start .elementor-number-box-wrapper { + align-items: unset !important; + flex-direction: column; + text-align: center; + } + &.elementor-mobile-position-block-end .elementor-number-box-wrapper { + align-items: unset !important; + flex-direction: column-reverse; + text-align: center; + } + } +} diff --git a/wp-content/plugins/elementor-addon/elementor-addon.php b/wp-content/plugins/elementor-addon/elementor-addon.php index 41442e4..9781c33 100644 --- a/wp-content/plugins/elementor-addon/elementor-addon.php +++ b/wp-content/plugins/elementor-addon/elementor-addon.php @@ -21,8 +21,10 @@ if ( ! defined( 'ABSPATH' ) ) { */ function register_hello_world_widget( $widgets_manager ) { require_once( __DIR__ . '/widgets/vertical-separator.php' ); + require_once( __DIR__ . '/widgets/number-box.php' ); $widgets_manager->register( new \Elementor_Vertical_Separator() ); + $widgets_manager->register( new \Elementor_Number_Box() ); } add_action( 'elementor/widgets/register', 'register_hello_world_widget' ); diff --git a/wp-content/plugins/elementor-addon/widgets/number-box.php b/wp-content/plugins/elementor-addon/widgets/number-box.php new file mode 100644 index 0000000..a38c5df --- /dev/null +++ b/wp-content/plugins/elementor-addon/widgets/number-box.php @@ -0,0 +1,1002 @@ +start_controls_section( + 'section_number', + [ + 'label' => esc_html__( 'Number Box', 'elementor-addon' ), + ] + ); + + $this->add_control( + 'number_text', + [ + 'label' => esc_html__( 'Number', 'elementor-addon' ), + 'type' => Controls_Manager::TEXT, + 'dynamic' => [ + 'active' => true, + ], + 'default' => '1', + 'placeholder' => esc_html__( 'Enter number', 'elementor-addon' ), + ] + ); + + $this->add_control( + 'view', + [ + 'label' => esc_html__( 'View', 'elementor-addon' ), + 'type' => Controls_Manager::SELECT, + 'options' => [ + 'default' => esc_html__( 'Default', 'elementor-addon' ), + 'stacked' => esc_html__( 'Stacked', 'elementor-addon' ), + 'framed' => esc_html__( 'Framed', 'elementor-addon' ), + ], + 'default' => 'default', + 'prefix_class' => 'elementor-view-', + ] + ); + + $this->add_control( + 'shape', + [ + 'label' => esc_html__( 'Shape', 'elementor-addon' ), + 'type' => Controls_Manager::SELECT, + 'options' => [ + 'square' => esc_html__( 'Square', 'elementor-addon' ), + 'rounded' => esc_html__( 'Rounded', 'elementor-addon' ), + 'circle' => esc_html__( 'Circle', 'elementor-addon' ), + ], + 'default' => 'circle', + 'condition' => [ + 'view!' => 'default', + ], + 'prefix_class' => 'elementor-shape-', + ] + ); + + $this->add_control( + 'title_text', + [ + 'label' => esc_html__( 'Title', 'elementor-addon' ), + 'type' => Controls_Manager::TEXT, + 'dynamic' => [ + 'active' => true, + ], + 'default' => esc_html__( 'This is the heading', 'elementor-addon' ), + 'placeholder' => esc_html__( 'Enter your title', 'elementor-addon' ), + 'label_block' => true, + ] + ); + + $this->add_control( + 'description_text', + [ + 'label' => esc_html__( 'Description', 'elementor-addon' ), + 'type' => Controls_Manager::TEXTAREA, + 'dynamic' => [ + 'active' => true, + ], + 'default' => esc_html__( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.', 'elementor-addon' ), + 'placeholder' => esc_html__( 'Enter your description', 'elementor-addon' ), + 'rows' => 10, + ] + ); + + $this->add_control( + 'link', + [ + 'label' => esc_html__( 'Link', 'elementor-addon' ), + 'type' => Controls_Manager::URL, + 'dynamic' => [ + 'active' => true, + ], + 'separator' => 'before', + ] + ); + + $this->add_control( + 'title_size', + [ + 'label' => esc_html__( 'Title HTML Tag', 'elementor-addon' ), + 'type' => Controls_Manager::SELECT, + 'options' => [ + 'h1' => 'H1', + 'h2' => 'H2', + 'h3' => 'H3', + 'h4' => 'H4', + 'h5' => 'H5', + 'h6' => 'H6', + 'div' => 'div', + 'span' => 'span', + 'p' => 'p', + ], + 'default' => 'h3', + ] + ); + + $this->end_controls_section(); + + // Style: Box + $this->start_controls_section( + 'section_style_box', + [ + 'label' => esc_html__( 'Box', 'elementor-addon' ), + 'tab' => Controls_Manager::TAB_STYLE, + ] + ); + + $this->add_responsive_control( + 'position', + [ + 'label' => esc_html__( 'Number Position', 'elementor-addon' ), + 'type' => Controls_Manager::CHOOSE, + 'default' => 'block-start', + 'mobile_default' => 'block-start', + 'options' => [ + 'inline-start' => [ + 'title' => esc_html__( 'Start', 'elementor-addon' ), + 'icon' => 'eicon-h-align-left', + ], + 'inline-end' => [ + 'title' => esc_html__( 'End', 'elementor-addon' ), + 'icon' => 'eicon-h-align-right', + ], + 'block-start' => [ + 'title' => esc_html__( 'Top', 'elementor-addon' ), + 'icon' => 'eicon-v-align-top', + ], + 'block-end' => [ + 'title' => esc_html__( 'Bottom', 'elementor-addon' ), + 'icon' => 'eicon-v-align-bottom', + ], + ], + 'classes' => 'elementor-control-start-end', + 'classes_dictionary' => [ + 'left' => is_rtl() ? 'inline-end' : 'inline-start', + 'right' => is_rtl() ? 'inline-start' : 'inline-end', + 'top' => 'block-start', + 'bottom' => 'block-end', + ], + 'prefix_class' => 'elementor%s-position-', + ] + ); + + $this->add_responsive_control( + 'content_vertical_alignment', + [ + 'label' => esc_html__( 'Vertical Alignment', 'elementor-addon' ), + 'type' => Controls_Manager::CHOOSE, + 'options' => [ + 'top' => [ + 'title' => esc_html__( 'Top', 'elementor-addon' ), + 'icon' => 'eicon-v-align-top', + ], + 'middle' => [ + 'title' => esc_html__( 'Middle', 'elementor-addon' ), + 'icon' => 'eicon-v-align-middle', + ], + 'bottom' => [ + 'title' => esc_html__( 'Bottom', 'elementor-addon' ), + 'icon' => 'eicon-v-align-bottom', + ], + ], + 'default' => 'top', + 'selectors_dictionary' => [ + 'top' => 'start', + 'middle' => 'center', + 'bottom' => 'end', + ], + 'selectors' => [ + '{{WRAPPER}} .elementor-number-box-wrapper' => 'align-items: {{VALUE}};', + ], + 'condition' => [ + 'position' => [ 'left', 'right', 'inline-start', 'inline-end' ], + ], + ] + ); + + $this->add_responsive_control( + 'text_align', + [ + 'label' => esc_html__( 'Alignment', 'elementor-addon' ), + 'type' => Controls_Manager::CHOOSE, + 'options' => [ + 'start' => [ + 'title' => esc_html__( 'Start', 'elementor-addon' ), + 'icon' => 'eicon-text-align-left', + ], + 'center' => [ + 'title' => esc_html__( 'Center', 'elementor-addon' ), + 'icon' => 'eicon-text-align-center', + ], + 'end' => [ + 'title' => esc_html__( 'End', 'elementor-addon' ), + 'icon' => 'eicon-text-align-right', + ], + 'justify' => [ + 'title' => esc_html__( 'Justified', 'elementor-addon' ), + 'icon' => 'eicon-text-align-justify', + ], + ], + 'classes' => 'elementor-control-start-end', + 'selectors_dictionary' => [ + 'left' => is_rtl() ? 'end' : 'start', + 'right' => is_rtl() ? 'start' : 'end', + ], + 'selectors' => [ + '{{WRAPPER}} .elementor-number-box-wrapper' => 'text-align: {{VALUE}};', + ], + 'separator' => 'after', + ] + ); + + $this->add_responsive_control( + 'number_space', + [ + 'label' => esc_html__( 'Number Spacing', 'elementor-addon' ), + 'type' => Controls_Manager::SLIDER, + 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ], + 'default' => [ + 'size' => 15, + ], + 'range' => [ + 'px' => [ + 'max' => 100, + ], + 'em' => [ + 'max' => 10, + ], + 'rem' => [ + 'max' => 10, + ], + ], + 'selectors' => [ + '{{WRAPPER}} .elementor-number-box-wrapper' => 'gap: {{SIZE}}{{UNIT}};', + ], + ] + ); + + $this->add_responsive_control( + 'title_bottom_space', + [ + 'label' => esc_html__( 'Content Spacing', 'elementor-addon' ), + 'type' => Controls_Manager::SLIDER, + 'size_units' => [ 'px', 'em', 'rem', 'custom' ], + 'range' => [ + 'px' => [ + 'max' => 100, + ], + 'em' => [ + 'min' => 0, + 'max' => 10, + ], + 'rem' => [ + 'min' => 0, + 'max' => 10, + ], + ], + 'selectors' => [ + '{{WRAPPER}} .elementor-number-box-title' => 'margin-block-end: {{SIZE}}{{UNIT}};', + ], + ] + ); + + $this->end_controls_section(); + + // Style: Number + $this->start_controls_section( + 'section_style_number', + [ + 'label' => esc_html__( 'Number', 'elementor-addon' ), + 'tab' => Controls_Manager::TAB_STYLE, + ] + ); + + $this->add_responsive_control( + 'number_box_width', + [ + 'label' => esc_html__( 'Width', 'elementor-addon' ), + 'type' => Controls_Manager::SLIDER, + 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ], + 'range' => [ + 'px' => [ + 'min' => 10, + 'max' => 500, + ], + ], + 'selectors' => [ + '{{WRAPPER}} .elementor-number-box-number' => 'width: {{SIZE}}{{UNIT}};', + ], + ] + ); + + $this->add_responsive_control( + 'number_box_height', + [ + 'label' => esc_html__( 'Height', 'elementor-addon' ), + 'type' => Controls_Manager::SLIDER, + 'size_units' => [ 'px', '%', 'em', 'rem', 'vh', 'custom' ], + 'range' => [ + 'px' => [ + 'min' => 10, + 'max' => 500, + ], + ], + 'selectors' => [ + '{{WRAPPER}} .elementor-number-box-number' => 'height: {{SIZE}}{{UNIT}};', + ], + ] + ); + + $this->add_responsive_control( + 'number_box_justify', + [ + 'label' => esc_html__( 'Horizontal Alignment', 'elementor-addon' ), + 'type' => Controls_Manager::CHOOSE, + 'options' => [ + 'flex-start' => [ + 'title' => esc_html__( 'Start', 'elementor-addon' ), + 'icon' => 'eicon-h-align-left', + ], + 'center' => [ + 'title' => esc_html__( 'Center', 'elementor-addon' ), + 'icon' => 'eicon-h-align-center', + ], + 'flex-end' => [ + 'title' => esc_html__( 'End', 'elementor-addon' ), + 'icon' => 'eicon-h-align-right', + ], + ], + 'default' => 'center', + 'selectors' => [ + '{{WRAPPER}} .elementor-number-box-number' => 'display: flex; justify-content: {{VALUE}};', + ], + ] + ); + + $this->add_responsive_control( + 'number_box_align', + [ + 'label' => esc_html__( 'Vertical Alignment', 'elementor-addon' ), + 'type' => Controls_Manager::CHOOSE, + 'options' => [ + 'flex-start' => [ + 'title' => esc_html__( 'Top', 'elementor-addon' ), + 'icon' => 'eicon-v-align-top', + ], + 'center' => [ + 'title' => esc_html__( 'Middle', 'elementor-addon' ), + 'icon' => 'eicon-v-align-middle', + ], + 'flex-end' => [ + 'title' => esc_html__( 'Bottom', 'elementor-addon' ), + 'icon' => 'eicon-v-align-bottom', + ], + ], + 'default' => 'center', + 'selectors' => [ + '{{WRAPPER}} .elementor-number-box-number' => 'display: flex; align-items: {{VALUE}};', + ], + ] + ); + + $this->add_control( + 'number_box_bg_color', + [ + 'label' => esc_html__( 'Background Color', 'elementor-addon' ), + 'type' => Controls_Manager::COLOR, + 'selectors' => [ + '{{WRAPPER}} .elementor-number-box-number' => 'background-color: {{VALUE}};', + ], + 'separator' => 'before', + ] + ); + + $this->add_control( + 'number_box_text_color', + [ + 'label' => esc_html__( 'Number Color', 'elementor-addon' ), + 'type' => Controls_Manager::COLOR, + 'selectors' => [ + '{{WRAPPER}} .elementor-number-box-number .elementor-number' => 'color: {{VALUE}};', + ], + ] + ); + + $this->add_responsive_control( + 'number_box_border_radius', + [ + 'label' => esc_html__( 'Border Radius', 'elementor-addon' ), + 'type' => Controls_Manager::DIMENSIONS, + 'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ], + 'selectors' => [ + '{{WRAPPER}} .elementor-number-box-number' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', + ], + 'separator' => 'after', + ] + ); + + $this->start_controls_tabs( 'number_colors' ); + + $this->start_controls_tab( + 'number_colors_normal', + [ + 'label' => esc_html__( 'Normal', 'elementor-addon' ), + ] + ); + + $this->add_control( + 'primary_color', + [ + 'label' => esc_html__( 'Primary Color', 'elementor-addon' ), + 'type' => Controls_Manager::COLOR, + 'global' => [ + 'default' => Global_Colors::COLOR_PRIMARY, + ], + 'default' => '', + 'selectors' => [ + '{{WRAPPER}}.elementor-view-stacked .elementor-number' => 'background-color: {{VALUE}};', + '{{WRAPPER}}.elementor-view-framed .elementor-number, {{WRAPPER}}.elementor-view-default .elementor-number' => 'color: {{VALUE}}; border-color: {{VALUE}};', + ], + ] + ); + + $this->add_control( + 'secondary_color', + [ + 'label' => esc_html__( 'Secondary Color', 'elementor-addon' ), + 'type' => Controls_Manager::COLOR, + 'default' => '', + 'condition' => [ + 'view!' => 'default', + ], + 'selectors' => [ + '{{WRAPPER}}.elementor-view-framed .elementor-number' => 'background-color: {{VALUE}};', + '{{WRAPPER}}.elementor-view-stacked .elementor-number' => 'color: {{VALUE}};', + ], + ] + ); + + $this->end_controls_tab(); + + $this->start_controls_tab( + 'number_colors_hover', + [ + 'label' => esc_html__( 'Hover', 'elementor-addon' ), + ] + ); + + $this->add_control( + 'hover_primary_color', + [ + 'label' => esc_html__( 'Primary Color', 'elementor-addon' ), + 'type' => Controls_Manager::COLOR, + 'default' => '', + 'selectors' => [ + '{{WRAPPER}}.elementor-view-stacked:has(:hover) .elementor-number, + {{WRAPPER}}.elementor-view-stacked:has(:focus) .elementor-number' => 'background-color: {{VALUE}};', + '{{WRAPPER}}.elementor-view-framed:has(:hover) .elementor-number, + {{WRAPPER}}.elementor-view-default:has(:hover) .elementor-number, + {{WRAPPER}}.elementor-view-framed:has(:focus) .elementor-number, + {{WRAPPER}}.elementor-view-default:has(:focus) .elementor-number' => 'color: {{VALUE}}; border-color: {{VALUE}};', + ], + ] + ); + + $this->add_control( + 'hover_secondary_color', + [ + 'label' => esc_html__( 'Secondary Color', 'elementor-addon' ), + 'type' => Controls_Manager::COLOR, + 'default' => '', + 'condition' => [ + 'view!' => 'default', + ], + 'selectors' => [ + '{{WRAPPER}}.elementor-view-framed:has(:hover) .elementor-number, + {{WRAPPER}}.elementor-view-framed:has(:focus) .elementor-number' => 'background-color: {{VALUE}};', + '{{WRAPPER}}.elementor-view-stacked:has(:hover) .elementor-number, + {{WRAPPER}}.elementor-view-stacked:has(:focus) .elementor-number' => 'color: {{VALUE}};', + ], + ] + ); + + $this->add_control( + 'hover_number_colors_transition_duration', + [ + 'label' => esc_html__( 'Transition Duration', 'elementor-addon' ), + 'type' => Controls_Manager::SLIDER, + 'size_units' => [ 's', 'ms', 'custom' ], + 'default' => [ + 'unit' => 's', + ], + 'selectors' => [ + '{{WRAPPER}} .elementor-number' => 'transition-duration: {{SIZE}}{{UNIT}};', + ], + ] + ); + + $this->add_control( + 'hover_animation', + [ + 'label' => esc_html__( 'Hover Animation', 'elementor-addon' ), + 'type' => Controls_Manager::HOVER_ANIMATION, + ] + ); + + $this->end_controls_tab(); + + $this->end_controls_tabs(); + + $this->add_responsive_control( + 'number_size', + [ + 'label' => esc_html__( 'Size', 'elementor-addon' ), + 'type' => Controls_Manager::SLIDER, + 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ], + 'range' => [ + 'px' => [ + 'min' => 6, + 'max' => 300, + ], + ], + 'selectors' => [ + '{{WRAPPER}} .elementor-number' => 'font-size: {{SIZE}}{{UNIT}};', + ], + ] + ); + + $this->add_group_control( + Group_Control_Typography::get_type(), + [ + 'name' => 'number_typography', + 'selector' => '{{WRAPPER}} .elementor-number', + 'global' => [ + 'default' => Global_Typography::TYPOGRAPHY_PRIMARY, + ], + ] + ); + + $this->add_group_control( + Group_Control_Text_Stroke::get_type(), + [ + 'name' => 'number_stroke', + 'selector' => '{{WRAPPER}} .elementor-number', + ] + ); + + $this->add_group_control( + Group_Control_Text_Shadow::get_type(), + [ + 'name' => 'number_shadow', + 'selector' => '{{WRAPPER}} .elementor-number', + ] + ); + + $this->add_responsive_control( + 'number_padding', + [ + 'label' => esc_html__( 'Padding', 'elementor-addon' ), + 'type' => Controls_Manager::SLIDER, + 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ], + 'selectors' => [ + '{{WRAPPER}} .elementor-number' => 'padding: {{SIZE}}{{UNIT}};', + ], + 'range' => [ + 'px' => [ + 'max' => 50, + ], + 'em' => [ + 'min' => 0, + 'max' => 5, + ], + 'rem' => [ + 'min' => 0, + 'max' => 5, + ], + ], + 'condition' => [ + 'view!' => 'default', + ], + ] + ); + + $this->add_responsive_control( + 'border_width', + [ + 'label' => esc_html__( 'Border Width', 'elementor-addon' ), + 'type' => Controls_Manager::DIMENSIONS, + 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ], + 'selectors' => [ + '{{WRAPPER}} .elementor-number' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', + ], + 'condition' => [ + 'view' => 'framed', + ], + ] + ); + + $this->add_responsive_control( + 'border_radius', + [ + 'label' => esc_html__( 'Border Radius', 'elementor-addon' ), + 'type' => Controls_Manager::DIMENSIONS, + 'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ], + 'selectors' => [ + '{{WRAPPER}} .elementor-number' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', + ], + 'condition' => [ + 'view!' => 'default', + ], + 'separator' => 'before', + ] + ); + + $this->end_controls_section(); + + // Style: Content + $this->start_controls_section( + 'section_style_content', + [ + 'label' => esc_html__( 'Content', 'elementor-addon' ), + 'tab' => Controls_Manager::TAB_STYLE, + ] + ); + + $this->add_control( + 'heading_title', + [ + 'label' => esc_html__( 'Title', 'elementor-addon' ), + 'type' => Controls_Manager::HEADING, + 'separator' => 'before', + ] + ); + + $this->add_group_control( + Group_Control_Typography::get_type(), + [ + 'name' => 'title_typography', + 'selector' => '{{WRAPPER}} .elementor-number-box-title, {{WRAPPER}} .elementor-number-box-title a', + 'global' => [ + 'default' => Global_Typography::TYPOGRAPHY_PRIMARY, + ], + ] + ); + + $this->add_group_control( + Group_Control_Text_Stroke::get_type(), + [ + 'name' => 'text_stroke', + 'selector' => '{{WRAPPER}} .elementor-number-box-title', + ] + ); + + $this->add_group_control( + Group_Control_Text_Shadow::get_type(), + [ + 'name' => 'title_shadow', + 'selector' => '{{WRAPPER}} .elementor-number-box-title', + ] + ); + + $this->start_controls_tabs( 'number_box_title_colors' ); + + $this->start_controls_tab( + 'number_box_title_colors_normal', + [ + 'label' => esc_html__( 'Normal', 'elementor-addon' ), + ] + ); + + $this->add_control( + 'title_color', + [ + 'label' => esc_html__( 'Color', 'elementor-addon' ), + 'type' => Controls_Manager::COLOR, + 'default' => '', + 'selectors' => [ + '{{WRAPPER}} .elementor-number-box-title' => 'color: {{VALUE}};', + ], + 'global' => [ + 'default' => Global_Colors::COLOR_PRIMARY, + ], + ] + ); + + $this->end_controls_tab(); + + $this->start_controls_tab( + 'number_box_title_colors_hover', + [ + 'label' => esc_html__( 'Hover', 'elementor-addon' ), + ] + ); + + $this->add_control( + 'hover_title_color', + [ + 'label' => esc_html__( 'Color', 'elementor-addon' ), + 'type' => Controls_Manager::COLOR, + 'default' => '', + 'selectors' => [ + '{{WRAPPER}}:has(:hover) .elementor-number-box-title, + {{WRAPPER}}:has(:focus) .elementor-number-box-title' => 'color: {{VALUE}};', + ], + 'global' => [ + 'default' => Global_Colors::COLOR_PRIMARY, + ], + ] + ); + + $this->add_control( + 'hover_title_color_transition_duration', + [ + 'label' => esc_html__( 'Transition Duration', 'elementor-addon' ), + 'type' => Controls_Manager::SLIDER, + 'size_units' => [ 's', 'ms', 'custom' ], + 'default' => [ + 'unit' => 's', + ], + 'selectors' => [ + '{{WRAPPER}} .elementor-number-box-title' => 'transition-duration: {{SIZE}}{{UNIT}};', + ], + ] + ); + + $this->end_controls_tab(); + + $this->end_controls_tabs(); + + $this->add_responsive_control( + 'title_width', + [ + 'label' => esc_html__( 'Width', 'elementor-addon' ), + 'type' => Controls_Manager::SLIDER, + 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ], + 'range' => [ + 'px' => [ + 'min' => 10, + 'max' => 1000, + ], + ], + 'selectors' => [ + '{{WRAPPER}} .elementor-number-box-title' => 'width: {{SIZE}}{{UNIT}};', + ], + ] + ); + + $this->add_control( + 'heading_description', + [ + 'label' => esc_html__( 'Description', 'elementor-addon' ), + 'type' => Controls_Manager::HEADING, + 'separator' => 'before', + ] + ); + + $this->add_group_control( + Group_Control_Typography::get_type(), + [ + 'name' => 'description_typography', + 'selector' => '{{WRAPPER}} .elementor-number-box-description', + 'global' => [ + 'default' => Global_Typography::TYPOGRAPHY_TEXT, + ], + ] + ); + + $this->add_group_control( + Group_Control_Text_Shadow::get_type(), + [ + 'name' => 'description_shadow', + 'selector' => '{{WRAPPER}} .elementor-number-box-description', + ] + ); + + $this->add_responsive_control( + 'description_width', + [ + 'label' => esc_html__( 'Width', 'elementor-addon' ), + 'type' => Controls_Manager::SLIDER, + 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ], + 'range' => [ + 'px' => [ + 'min' => 10, + 'max' => 1000, + ], + ], + 'selectors' => [ + '{{WRAPPER}} .elementor-number-box-description' => 'width: {{SIZE}}{{UNIT}};', + ], + ] + ); + + $this->add_control( + 'description_color', + [ + 'label' => esc_html__( 'Color', 'elementor-addon' ), + 'type' => Controls_Manager::COLOR, + 'default' => '', + 'selectors' => [ + '{{WRAPPER}} .elementor-number-box-description' => 'color: {{VALUE}};', + ], + 'global' => [ + 'default' => Global_Colors::COLOR_TEXT, + ], + ] + ); + + $this->end_controls_section(); + } + + protected function render() { + $settings = $this->get_settings_for_display(); + $has_link = ! empty( $settings['link']['url'] ); + $html_tag = $has_link ? 'a' : 'span'; + + $this->add_render_attribute( 'number', 'class', 'elementor-number' ); + + if ( ! empty( $settings['hover_animation'] ) ) { + $this->add_render_attribute( 'number', 'class', 'elementor-animation-' . $settings['hover_animation'] ); + } + + $has_number = ! \Elementor\Utils::is_empty( $settings['number_text'] ); + $has_content = ! \Elementor\Utils::is_empty( $settings['title_text'] ) || ! \Elementor\Utils::is_empty( $settings['description_text'] ); + + if ( ! $has_number && ! $has_content ) { + return; + } + + if ( $has_link ) { + $this->add_link_attributes( 'link', $settings['link'] ); + $this->add_render_attribute( 'number', 'tabindex', '-1' ); + if ( ! empty( $settings['title_text'] ) ) { + $this->add_render_attribute( 'number', 'aria-label', $settings['title_text'] ); + } + } + + $this->add_render_attribute( 'description_text', 'class', 'elementor-number-box-description' ); + + $this->add_inline_editing_attributes( 'title_text', 'none' ); + $this->add_inline_editing_attributes( 'description_text' ); + ?> +
+ + +
+ < print_render_attribute_string( 'link' ); ?> print_render_attribute_string( 'number' ); ?>> + + > +
+ + + +
+ + + < class="elementor-number-box-title"> + < print_render_attribute_string( 'link' ); ?> print_render_attribute_string( 'title_text' ); ?>> + + > + > + + + +

print_render_attribute_string( 'description_text' ); ?>> + +

+ + +
+ + +
+ + <# + var hasNumber = !! settings.number_text; + var hasContent = settings.title_text || settings.description_text; + + if ( ! hasNumber && ! hasContent ) { + return; + } + + var hasLink = settings.link?.url, + htmlTag = hasLink ? 'a' : 'span', + titleSizeTag = elementor.helpers.validateHTMLTag( settings.title_size ); + + view.addRenderAttribute( 'number', 'class', 'elementor-number' ); + + if ( '' !== settings.hover_animation ) { + view.addRenderAttribute( 'number', 'class', 'elementor-animation-' + settings.hover_animation ); + } + + if ( hasLink ) { + view.addRenderAttribute( 'link', 'href', elementor.helpers.sanitizeUrl( settings.link?.url ) ); + view.addRenderAttribute( 'number', 'tabindex', '-1' ); + if ( '' !== settings.title_text ) { + view.addRenderAttribute( 'number', 'aria-label', settings.title_text ); + } + } + + view.addRenderAttribute( 'description_text', 'class', 'elementor-number-box-description' ); + + view.addInlineEditingAttributes( 'title_text', 'none' ); + view.addInlineEditingAttributes( 'description_text' ); + #> +
+ + <# if ( hasNumber ) { #> +
+ <{{{ htmlTag }}} {{{ view.getRenderAttributeString( 'link' ) }}} {{{ view.getRenderAttributeString( 'number' ) }}}> + {{{ elementor.helpers.sanitize( settings.number_text ) }}} + +
+ <# } #> + + <# if ( hasContent ) { #> +
+ + <# if ( settings.title_text ) { #> + <{{{ titleSizeTag }}} class="elementor-number-box-title"> + <{{{ htmlTag }}} {{{ view.getRenderAttributeString( 'link' ) }}} {{{ view.getRenderAttributeString( 'title_text' ) }}}> + {{{ elementor.helpers.sanitize( settings.title_text ) }}} + + + <# } #> + + <# if ( settings.description_text ) { #> +

{{{ elementor.helpers.sanitize( settings.description_text ) }}}

+ <# } #> + +
+ <# } #> + +
+ .elementor-element:not(:nth-child(5n)){border-right:1px solid hsla(0,0%,100%,.3)}.contact-tiles>.elementor-element:nth-child(n+6):nth-child(5n+1)::before{content:"";position:absolute;top:0;left:0;width:500%;border-top:1px solid hsla(0,0%,100%,.3)}/*# sourceMappingURL=custom.css.map */ \ No newline at end of file diff --git a/wp-content/themes/hello-elementor/assets/css/custom.css.map b/wp-content/themes/hello-elementor/assets/css/custom.css.map index 4d4314b..d21fd00 100644 --- a/wp-content/themes/hello-elementor/assets/css/custom.css.map +++ b/wp-content/themes/hello-elementor/assets/css/custom.css.map @@ -1 +1 @@ -{"version":3,"sources":["custom.scss"],"names":[],"mappings":"AAAA,kBACC,qCAAA,CAAA,gCAAA,CAGD,iBACC,UAAA,CAGD,iBACC,0BAAA,CAAA,qBAAA,CAIA,kBACC,eAAA,CAMD,8BACC,WAAA,CAOC,mEACC,mFAAA,CAGA,wLAEC,8CAAA,CAIH,iDACC,0EAAA,CAEA,kBAAA,CACA,8BAAA,CAEA,oJAEC,8BAAA,CAKD,0DACC,UAAA,CACA,iBAAA,CACA,UAAA,CACA,QAAA,CACA,wCAAA,CACA,+BAAA,CAEA,UAAA,CACA,WAAA,CAEA,QAAA,CACA,+KAAA,CAUA,wCAAA,CAED,8EACC,wBAAA,CAOH,oCACC,WAAA,CACA,UAAA,CACA,QAAA,CACA,wBAAA,CACA,qBAAA,CAEA,uCACC,WAAA,CAEA,0CACC,SAAA,CACA,mCAAA,CACA,WAAA,CAEA,wEAAA,CAKA,eAAA,CACA,cAAA,CACA,gBAAA,CAEA,2DACC,oDAAA,CACA,kBAAA,CAED,4DACC,iBAAA,CAQJ,iFACC,wBAAA,CAED,8CACC,oBAAA,CACA,kBAAA,CAEA,UAAA,CACA,WAAA,CACA,6BAAA,CACA,kBAAA,CAEA,YAAA,CACA,kBAAA,CACA,sBAAA,CAEA,2EACC,oBAAA,CAED,2EACC,qBAAA","file":"custom.css"} \ No newline at end of file +{"version":3,"sources":["custom.scss"],"names":[],"mappings":"AAAA,kBACC,qCAAA,CAAA,gCAAA,CAGD,iBACC,UAAA,CAGD,iBACC,0BAAA,CAAA,qBAAA,CAIA,kBACC,eAAA,CAMD,8BACC,WAAA,CAOC,mEACC,mFAAA,CAGA,wLAEC,8CAAA,CAIH,iDACC,0EAAA,CAEA,kBAAA,CACA,8BAAA,CAEA,oJAEC,8BAAA,CAKD,0DACC,UAAA,CACA,iBAAA,CACA,UAAA,CACA,QAAA,CACA,wCAAA,CACA,+BAAA,CAEA,UAAA,CACA,WAAA,CAEA,QAAA,CACA,+KACC,CAMD,wCAAA,CAED,8EACC,wBAAA,CAOH,oCACC,WAAA,CACA,UAAA,CACA,QAAA,CACA,wBAAA,CACA,qBAAA,CAEA,uCACC,WAAA,CAEA,0CACC,SAAA,CACA,mCAAA,CACA,WAAA,CAEA,wEAAA,CAKA,eAAA,CACA,cAAA,CACA,gBAAA,CAEA,2DACC,oDAAA,CACA,kBAAA,CAED,4DACC,iBAAA,CAQJ,iFACC,wBAAA,CAED,8CACC,oBAAA,CACA,kBAAA,CAEA,UAAA,CACA,WAAA,CACA,6BAAA,CACA,kBAAA,CAEA,YAAA,CACA,kBAAA,CACA,sBAAA,CAEA,2EACC,oBAAA,CAED,2EACC,qBAAA,CAMF,4CACC,iBAAA,CAEA,oDACC,UAAA,CACA,iBAAA,CACA,QAAA,CACA,QAAA,CACA,0BAAA,CAEA,SAAA,CACA,aAAA,CACA,yBAAA,CAOD,sDACC,yCAAA,CAGD,yEACC,UAAA,CACA,iBAAA,CACA,KAAA,CACA,MAAA,CACA,UAAA,CACA,uCAAA","file":"custom.css"} \ No newline at end of file diff --git a/wp-content/themes/hello-elementor/assets/css/custom.scss b/wp-content/themes/hello-elementor/assets/css/custom.scss index 9e8e01e..0050f24 100644 --- a/wp-content/themes/hello-elementor/assets/css/custom.scss +++ b/wp-content/themes/hello-elementor/assets/css/custom.scss @@ -61,11 +61,8 @@ body .hotspot-mapa { height: 18px; --r: 3px; - -webkit-mask: linear-gradient( - 0deg, - #0000 calc(3 * var(--r) / 2), - #000 0 - ), + -webkit-mask: + linear-gradient(0deg, #0000 calc(3 * var(--r) / 2), #000 0), radial-gradient( var(--r) at 50% calc(100% - 2 * var(--r)), #000 98%, @@ -142,3 +139,38 @@ body .hp-slider-cars { } } } + +.hp-number-box { + .elementor-number-box-number { + position: relative; + + &::before { + content: ''; + position: absolute; + top: 100%; + left: 50%; + transform: translateX(-50%); + + width: 1px; + height: 100svh; + background: rgba(0, 0, 0, 0.1); + } + } +} + +.contact-tiles { + > .elementor-element { + &:not(:nth-child(5n)) { + border-right: 1px solid rgba(255, 255, 255, 0.3); + } + + &:nth-child(n + 6):nth-child(5n + 1)::before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 500%; + border-top: 1px solid rgba(255, 255, 255, 0.3); + } + } +}