namespace Cube\Elementor\Widgets;
-use Elementor\Widget_Base;
use Elementor\Controls_Manager;
use Elementor\Utils;
-class BackgroundImage extends Widget_Base {
+class BackgroundImage extends _Base {
protected $_has_template_content = false; // Tell Elementor that content is all rendered dynamically
return 'eicon-image';
}
- // Where to display the widget in the Elementor interface
- public function get_categories() {
- return [ 'theme-elements' ];
- }
-
/**
* List of scripts the widget depends on.
* Used to set scripts dependencies required to run the widget.
);
$this->end_controls_section();
+
+ $this->common_controls();
}
/**
* Render the widget output on the frontend.
namespace Cube\Elementor\Widgets;
use Elementor\Utils;
-use Elementor\Widget_Base;
use Elementor\Controls_Manager;
use function Roots\asset;
-class HeaderSlideshow extends Widget_Base {
+class HeaderSlideshow extends _Base {
protected $_has_template_content = false; // Tell Elementor that content is all rendered dynamically
return 'eicon-slideshow';
}
- // Where to display the widget in the Elementor interface
- public function get_categories() {
- return [ 'theme-elements' ];
- }
-
/**
* List of scripts the widget depends on.
* Used to set scripts dependencies required to run the widget.
);
$this->end_controls_section();
+
+ $this->common_controls();
}
/**
* Render the widget output on the frontend.
namespace Cube\Elementor\Widgets;
-use Elementor\Widget_Base;
use Elementor\Controls_Manager;
use Elementor\Utils;
use function Roots\asset;
-class LinkCarousel extends Widget_Base {
+class LinkCarousel extends _Base {
// Widget name / ID
public function get_name() {
return 'eicon-slider-device';
}
- // Where to display the widget in the Elementor interface
- public function get_categories() {
- return [ 'theme-elements' ];
- }
-
/**
* List of scripts the widget depends on.
* Used to set scripts dependencies required to run the widget.
);
$this->end_controls_section();
-
+ $this->common_controls();
}
/**
* Render the widget output on the frontend.
namespace Cube\Elementor\Widgets;
-use Elementor\Widget_Base;
use Elementor\Controls_Manager;
-class NewsBanner extends Widget_Base {
+class NewsBanner extends _Base {
protected $_has_template_content = false; // Tell Elementor that content is all rendered dynamically
return 'eicon-posts-ticker';
}
- // Where to display the widget in the Elementor interface
- public function get_categories() {
- return [ 'theme-elements' ];
- }
-
/**
* List of scripts the widget depends on.
* Used to set scripts dependencies required to run the widget.
);
$this->end_controls_section();
+
+ $this->common_controls();
}
/**
* Render the widget output on the frontend.
namespace Cube\Elementor\Widgets;
-use Elementor\Widget_Base;
use Elementor\Controls_Manager;
use Elementor\Utils;
use function Roots\view;
-class PictoGrid extends Widget_Base {
+class PictoGrid extends _Base {
// Widget name / ID
public function get_name() {
return 'eicon-posts-grid';
}
- // Where to display the widget in the Elementor interface
- public function get_categories() {
- return [ 'theme-elements' ];
- }
-
/**
* List of scripts the widget depends on.
* Used to set scripts dependencies required to run the widget.
'label_block' => true,
],
],
- 'title_field' => '{{{ title }}}',
+ 'title_field' => '{{{ description }}}',
]
);
$this->end_controls_section();
-
+ $this->common_controls();
}
/**
* Render the widget output on the frontend.
namespace Cube\Elementor\Widgets;
-use Elementor\Widget_Base;
use Elementor\Controls_Manager;
-
-class TextBlock extends Widget_Base {
+class TextBlock extends _Base {
// Widget name / ID
public function get_name() {
return 'eicon-post-title';
}
- // Where to display the widget in the Elementor interface
- public function get_categories() {
- return [ 'theme-elements' ];
- }
-
/**
* List of scripts the widget depends on.
* Used to set scripts dependencies required to run the widget.
$this->end_controls_section();
-
$this->start_controls_section(
'section_formatting',
[
]
);
- $this->add_control(
- 'padding_top',
- [
- 'label' => __('Disable padding top', 'cube'),
- 'type' => Controls_Manager::SWITCHER,
- 'default' => '',
- 'return_value' => 'pt-0',
- 'prefix_class' => '',
- ]
- );
-
- $this->add_control(
- 'padding_bottom',
- [
- 'label' => __('Disable padding bottom', 'cube'),
- 'type' => Controls_Manager::SWITCHER,
- 'default' => '',
- 'return_value' => 'pb-0',
- 'prefix_class' => '',
- ]
- );
-
+ /*
$this->add_control(
'title_size',
[
'default' => '',
]
);
+ */
$this->add_control(
'title_color',
);
$this->end_controls_section();
+
+ $this->common_controls();
}
/**
* Render the widget output on the frontend.
--- /dev/null
+<?php
+
+namespace Cube\Elementor\Widgets;
+
+use Elementor\Widget_Base;
+use Elementor\Controls_Manager;
+
+abstract class _Base extends Widget_Base {
+
+ // Where to display the widgets in the Elementor interface
+ // Ref: https://developers.elementor.com/widget-categories/
+ public function get_categories() {
+ return [ 'theme-elements' ];
+ }
+
+ // Wrapper for including all common controls
+ // In the future this might be multiple groups of controls
+ // Most widgets will use this but some might selectively include controls as needed.
+ public function common_controls() {
+ $this->spacing_controls();
+ }
+
+ // Common widget spacing controls
+ public function spacing_controls() {
+
+ $this->start_controls_section(
+ 'section_spacing',
+ [
+ 'label' => __( 'Spacing', 'cube' ),
+ ]
+ );
+
+ $this->add_control(
+ 'margin_top',
+ [
+ 'label' => __('Disable margin top', 'cube'),
+ 'type' => Controls_Manager::SWITCHER,
+ 'default' => '',
+ 'return_value' => 'mt-0!',
+ 'prefix_class' => '',
+ ]
+ );
+
+ $this->add_control(
+ 'margin_bottom',
+ [
+ 'label' => __('Disable margin bottom', 'cube'),
+ 'type' => Controls_Manager::SWITCHER,
+ 'default' => '',
+ 'return_value' => 'mb-0!',
+ 'prefix_class' => '',
+ ]
+ );
+
+ $this->end_controls_section();
+
+ }
+
+}
// Override default spacing between widgets
-.elementor-widget:not(:last-child)
+// All widgets get the bottom margin, even the last child because normally
+// this is desired and if it's not, we can add the class `mb-0!` to it...
+.elementor-widget-wrap .elementor-widget //:not(:last-child)
constrain(margin-bottom, $vertical-gutter) // Set margin bottom to standard gutter
// Get rid of default 10px padding around elements
.menu-item
@apply bg-purple-dark text-white font-display uppercase
+ &:hover
+ @apply text-pink
+
+ &:before // Submenu arrow
+ @apply border-pink
+
// Menu item divider
&:after
display: none
&:nth-of-type(odd)
@apply bg-pink
&:nth-of-type(even)
- @apply bg-teal
+ @apply bg-purple
+
+ &:before, &:after
+ display: none
// Language options
.locales
&:not(:last-child)
margin-right: 1.125em
+ &:hover
+ @apply text-pink
+
// Close button
#close-menu
.picto-grid
display: grid
- // Automatic number of columns based on number of children
- // but with a min-width to stop them getting too small...
- grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))
+ grid-template-columns: repeat(4, 1fr)
+ constrain(grid-gap, 5vw)
+ horizontal-spacing(5vw, margin)
+
+ +below(900px)
+ grid-template-columns: repeat(3, 1fr)
+ +below(650px)
+ grid-template-columns: repeat(2, 1fr)
+ +below(400px)
+ grid-template-columns: 1fr
&-image-wrapper
position: relative
&-image
flex: 0 0 auto
- max-width: 60% !important
- justify-self: end
- margin-bottom: 1em
+ max-width: 50% !important
+ max-height: 40%
+ margin-bottom: 0.5em
&-title
flex: 0 0 auto
&-description
text-align: center
+ max-width: 320px
+ margin: 0 auto
&:before
@apply bg-pink
// Text block widget (Elementor defaults)
.elementor-widget-cube-text //.elementor-widget-container
- vertical-spacing(7.5vw)
- constrain(padding-left, 10vw)
- constrain(padding-right, 7.5vw)
+ vertical-spacing(7.5vw, margin)
+ constrain(margin-left, 10vw)
+ constrain(margin-right, 7.5vw)
width: 100%
box-sizing: content-box // So padding doesn't influence max-width
+below(500px)
- horizontal-spacing(5vw)
+ horizontal-spacing(5vw, margin)
.text-block
+ > * + * // Automatic spacing between direct child elements
+ margin-top: 1.5em
&-title
@apply text-2xl antialiased
@apply text-xl // Note: also affected by the base HTML font size since it is converted rems
// No bottom margin if it's the last element (ie. no body below)
- &:last-child
- margin-bottom: 0
+ //&:last-child
+ // margin-bottom: 0
&-body
font-weight: 300
- margin-top: r(40px)
+ //margin-top: r(40px)
// If the body is the first child, there's no title
// so we don't want the top margin...
- &:first-child
- margin-top: 0
+ //&:first-child
+ // margin-top: 0
+
+ > * + * // Automatic spacing between direct child elements
+ margin-top: 1.5em
h3
- @apply font-medium text-lg
+ @apply font-body font-medium text-lg
a
@apply text-pink
b, strong
font-weight: 400
+ li
+ position: relative
+
+ &:before
+ content: ''
+ position: absolute
+ top: 0.4em
+ left: -1.3em
+ width: 7px
+ height: 13px
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='14' viewBox='0 0 8 14'%3E%3Cpath stroke='%23ff078b' stroke-width='2' stroke-linecap='round' d='M1 1l6 6M1 13l6-6'/%3E%3C/svg%3E")
+ background-repeat: no-repeat
+ background-size: contain
+
&-cta
@apply antialiased
margin-top: r(30px)
</ul>
@if ($button_1)
- <a href="{{ $button_1->url }}" class="header-cta btn btn-no-hover flex items-center hover:bg-teal">
+ <a href="{{ $button_1->url }}" class="header-cta btn btn-no-hover flex items-center">
<img src="@asset('images/teleconsultation.svg')" class="mr-2">
{{ $button_1->title }}
</a>
@endif
@if ($button_2)
- <a href="{{ $button_2->url }}" class="header-cta btn btn-no-hover flex items-center bg-purple hover:bg-teal">
+ <a href="{{ $button_2->url }}" class="header-cta btn btn-no-hover flex items-center bg-purple">
<img src="@asset('images/rendezvous.svg')" class="mr-2">
{{ $button_2->title }}
</a>
'3xl': '3.0909rem', // 68px
},
padding: {
+ '0!': '0 !important', // Special overrides
'100%': '100%', // Used for proportional padding to make a square
},
+ margin: {
+ '0!': '0 !important',
+ }
},
},
variants: {},
projects / ccv-wordpress.git / commitdiff