$this->customise_sections();
$this->customise_widget();
- $this->customise_container();
}
public function register_widgets($widgets_manager) {
public function customise_widget() {
// Add some extra hooks that we can use on the Elementor elements...
add_action('elementor/frontend/widget/before_render', function (Element_Base $element) {
- // Add number child items in this container
- //$element->add_render_attribute('_wrapper', 'class', 'm-0');
-
+ if($element->get_name() === "image") {
+ $element->add_render_attribute('_wrapper', 'class', 'image-single-container');
+ }
}, 10, 3);
}
- public function customise_container() {
- // Add some extra hooks that we can use on the Elementor elements...
- add_action('elementor/frontend/container/before_render', function (Element_Base $element) {
- // Add number child items in this container
- var_dump($element);
- });
- }
-
public static function spacing_options() {
// List of base spacing scales along with their descriptions
// Note: this should match what is in the theme's `tailwind.config.cjs`
'2xs' => '2XS (8px — 10px)',
'xs' => 'XS (12px — 15px)',
's' => 'S (16px — 20px)',
- 'm' => 'M (24px — 30px)',
+ 'm' => 'M (23px)',
'l' => 'L (32px — 40px)',
'xl' => 'XL (48px — 60px)',
'2xl' => '2XL (64px — 80px)',
'm-xl' => 'M ↔ XL (24px — 60px)',
'l-xl' => 'L ↔ XL (34px — 86px)',
'l-2xl' => 'L ↔ 2XL (38px — 86px)',
+ '2xl-custom' => '2XL (72px — 86px)',
'2xl-5xl' => '2XL ↔ 5XL (72px — 126px)',
];
}
--- /dev/null
+<?php
+
+namespace Cube\Widgets;
+
+use Elementor\Controls_Manager;
+
+class CarouselSelection extends _Base
+{
+
+ public function get_name()
+ {
+ return 'cube-carousel-selection';
+ }
+
+ public function get_title()
+ {
+ return esc_html__('Carousel selection', 'cube');
+ }
+
+ public function get_icon()
+ {
+ return 'eicon-post-title';
+ }
+
+ protected function register_controls()
+ {
+ $this->start_controls_section(
+ 'content_section',
+ [
+ 'label' => esc_html__('Content', 'cube'),
+ 'tab' => Controls_Manager::TAB_CONTENT,
+ ]
+ );
+ }
+
+}
\ No newline at end of file
'toggle' => true,
]
);
+
+ $this->add_control(
+ 'text_position',
+ [
+ 'label' => esc_html__( 'Text position', 'cube' ),
+ 'type' => Controls_Manager::SELECT,
+ 'options' => [
+ 'left' => [
+ 'title' => esc_html__( 'Left', 'cube' ),
+ ],
+ 'center' => [
+ 'title' => esc_html__( 'Center', 'cube' ),
+ ],
+ 'right' => [
+ 'title' => esc_html__( 'Right', 'cube' ),
+ ]
+ ],
+ 'default' => 'right',
+ 'toggle' => true,
+ ]
+ );
}
/**
$title_tag = $this->get_settings('title_tag');
$size = $this->get_settings('text_size');
$weight = $this->get_settings('text_weight');
+ $position = $this->get_settings('text_position');
$size_classes = [
'large' => 'text-lg',
$this->add_inline_editing_attributes('title', 'none');
// CSS Classes for elements
- $this->add_render_attribute('title', 'class', ["highlight relative font-$weight $size_classes[$size]"]);
+ $this->add_render_attribute('title', 'class', ["highlight relative font-$weight $size_classes[$size] auto-$position"]);
// Rendered content
weight_classes = {
'bold': 'font-bold',
'semibold': 'font-semibold',
- }
+ };
+
+ position_classes = {
+ 'left': 'auto-left',
+ 'center': 'auto-center',
+ 'right': 'auto-right',
+ };
view.addRenderAttribute(
'title',
{
- 'class': [ 'highlight', weight_classes[settings.text_weight], size_classes[settings.text_size] ]
+ 'class': [ 'highlight', weight_classes[settings.text_weight], size_classes[settings.text_size], position_classes[settings.text_position] ]
}
);
#>
<# if ('' !== settings.title) { #>
- <{{{ settings.title_tag }}} {{{ view.getRenderAttributeString( 'title' ) }}}>
- <span class="relative z-1">{{{ settings.title }}}</span>
- <span class='highlight-bar'></span>
- </{{{ settings.title_tag }}}>
+ <{{{ settings.title_tag }}} {{{ view.getRenderAttributeString( 'title' ) }}}>
+ <span class="relative z-1">{{{ settings.title }}}</span>
+ <span class='highlight-bar'></span>
+ </{{{ settings.title_tag }}}>
<# } #>
<?php
--- /dev/null
+console.log('ok')
+
+window.addEventListener('elementor/frontend/init', function () {
+
+ elementorFrontend.hooks.addAction('frontend/element_ready/cube-staff-carousel.default', async function() {
+ import 'swiper/css';
+ const { Swiper } = await import('swiper');
+ })
+
+})
&:not(.highlight)
font-family: "Circe", sans-serif
line-height: 100%
+
+body,p,a
+ color: map-get($colors, 'grey','dark')
+
+.image-single-container img
+ border-radius: 3px
$fontSizes: ( '3xl': 9.313rem,'2xl': 4.768rem,'xl': 3.815rem,'lg': 1.953rem,'md': 1.25rem, 'sm': 1rem)
$fontWeights: (light: 300,normal: 400,medium: 500,semibold: 600,bold: 700,'extra-bold': 800,black: 900)
-$colors: ('red': ('full': '#F42865','clear': '#707070','transparent': 'rgba(249,195,211,.5)'),'turquoise': '#28CABD','blue': ('full': '#092CC8','clear': '#C3CBF0'),'orange': ( 'full': '#FD6120','transparent': 'rgba(255,226,199,.5)'),'grey': ('disabled': '#B0B4C1','dark': '#141414'))
+$colors: ('red': ('full': #F42865,'clear': #707070,'transparent': rgba(249,195,211,.5)),'turquoise': #28CABD,'blue': ('full': #092CC8,'clear': #C3CBF0),'orange': ( 'full': #FD6120,'transparent': rgba(255,226,199,.5)),'grey': ('disabled': #B0B4C1,'dark': #141414))
$breakpoint: ('phone': '500px', 'tablet': '768px', 'small-desktop': '1024px', 'desktop': '1344px', 'widescreen': '1680px')
+$textPositions: ('left','center','right')
@for $i from 1 through 12
.col-#{$i}
+screen-size('widescreen')
gap: #{$y}vw 21px
+@each $textPosition in $textPositions
+ .auto-#{$textPosition}
+ @if $textPosition == "center"
+ margin: auto
+ @else
+ margin-#{$textPosition}: auto
+
/* @link https://utopia.fyi/space/calculator?c=320,16,1.125,1344,16,1.25,6,2,&s=0.75|0.5|0.25,1.5|2|3|4|6|7|8,s-l|m-xl|l-2xl|2xl-4xl&g=s,l,xl,12 */
\:root
--space-2xs: clamp(0.50rem, calc(0.50rem + 0.00vw), 0.50rem)
--space-xs: clamp(0.75rem, calc(0.75rem + 0.00vw), 0.75rem)
--space-s: clamp(1.00rem, calc(1.00rem + 0.00vw), 1.00rem)
- --space-m: clamp(1.50rem, calc(1.50rem + 0.00vw), 1.50rem)
+ --space-m: clamp(1.44rem, calc(1.44rem + 0.00vw), 1.44rem)
--space-l: clamp(2.00rem, calc(2.00rem + 0.00vw), 2.00rem)
--space-xl: clamp(3.00rem, calc(3.00rem + 0.00vw), 3.00rem)
--space-2xl: clamp(4.00rem, calc(4.00rem + 0.00vw), 4.00rem)
--space-s-l: clamp(1.00rem, calc(0.69rem + 1.56vw), 2.00rem)
--space-m-xl: clamp(1.50rem, calc(1.03rem + 2.34vw), 3.00rem)
--space-l-2xl: clamp(2.375rem, calc(1.38rem + 3.13vw), 5.375rem)
+ --space-2xl-custom: clamp(4.63rem, calc(4.39rem + 1.17vw), 5.38rem)
--space-2xl-4xl: clamp(4.00rem, calc(3.06rem + 4.69vw), 7.00rem)
--space-2xl-5xl: clamp(4.00rem, calc(2.75rem + 6.25vw), 7.875rem)