$widgets_manager->register(new Widgets\AssocationList());
$widgets_manager->register(new Widgets\BannerTitle());
$widgets_manager->register(new Widgets\BlockOrganisation());
+ $widgets_manager->register(new Widgets\CarouselHome());
+ $widgets_manager->register(new Widgets\StickyNav());
}
public function register_widgets_category($elements_manager) {
// '4xl-5xl' => '4XL ↔ 5XL (112px — 160px)',
's-l' => 'S ↔ L (16px — 40px)',
+ 's-l-custom' => '(38px — 43px)',
'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)',
+ '36-126' => '(36px — 126px)',
+ '2xl-5xl' => '2XL ↔ 5XL (72px — 126px)'
];
}
}
\ No newline at end of file
--- /dev/null
+<?php
+
+namespace Cube\Widgets;
+
+use Elementor\Controls_Manager;
+
+class CarouselHome extends _Base {
+
+ public function get_name() {
+ return 'cube-carousel-home';
+ }
+
+ public function get_title() {
+ return esc_html__( 'Carousel accueil', 'cube' );
+ }
+
+ public function get_icon() {
+ return 'eicon-banner';
+ }
+
+ protected function register_controls() {
+
+ $this->start_controls_section(
+ 'content_section',
+ [
+ 'label' => esc_html__('Content', 'cube'),
+ 'tab' => Controls_Manager::TAB_CONTENT,
+ ]
+ );
+
+ $repeater = new \Elementor\Repeater();
+
+ $repeater->add_control(
+ 'title',
+ [
+ 'label' => esc_html__( 'Title', 'cube' ),
+ 'type' => Controls_Manager::TEXT,
+ 'placeholder' => esc_html__( 'List Item', 'cube' ),
+ 'default' => esc_html__( 'List Item', 'cube' ),
+ 'label_block' => true,
+ 'dynamic' => [
+ 'active' => true,
+ ],
+ ]
+ );
+
+ $repeater->add_control(
+ 'text',
+ [
+ 'label' => esc_html__( 'Text content', 'cube' ),
+ 'type' => Controls_Manager::TEXTAREA,
+ 'placeholder' => esc_html__( 'Your text content', 'cube' ),
+ 'default' => esc_html__( 'Lorem ipsum dolor', 'cube' ),
+ 'label_block' => true,
+ 'dynamic' => [
+ 'active' => true,
+ ],
+ ]
+ );
+
+ $repeater->add_control(
+ 'link_text',
+ [
+ 'label' => esc_html__( 'Text link', 'cube' ),
+ 'type' => Controls_Manager::TEXT,
+ 'placeholder' => esc_html__( 'https://your-link.com', 'cube' ),
+ 'default' => esc_html__('Lorem ipsum'),
+ 'label_block' => true,
+ 'dynamic' => [
+ 'active' => true,
+ ],
+ ]
+ );
+
+ $repeater->add_control(
+ 'link',
+ [
+ 'label' => esc_html__( 'Link', 'cube' ),
+ 'type' => Controls_Manager::URL,
+ 'placeholder' => esc_html__( 'https://your-link.com', 'cube' ),
+ 'dynamic' => [
+ 'active' => true,
+ ],
+ ]
+ );
+
+ $repeater->add_control(
+ 'background_image',
+ [
+ 'label' => esc_html__( 'Background image', 'cube' ),
+ 'type' => Controls_Manager::MEDIA
+ ]
+ );
+
+ $repeater->add_control(
+ 'background_color',
+ [
+ 'label' => esc_html__( 'Background color', 'cube' ),
+ 'type' => Controls_Manager::COLOR,
+ 'selectors' => [
+ '{{WRAPPER}} .rightside .overlay' => 'background-color: {{VALUE}}',
+ ],
+ ]
+ );
+
+ /* End repeater */
+ $this->add_control(
+ 'slides',
+ [
+ 'label' => esc_html__( 'Slides', 'cube' ),
+ 'type' => Controls_Manager::REPEATER,
+ 'fields' => $repeater->get_controls(), /* Use our repeater */
+ 'default' => [
+ [
+ 'title' => 'Slide #1',
+ 'text' => esc_html__( 'Lorem ipsum dolor', 'cube' ),
+ 'link' => '',
+ ],
+ [
+ 'text' => esc_html__( 'List Item #2', 'cube' ),
+ 'link' => '',
+ ]
+ ],
+ 'title_field' => '{{{ text }}}',
+ ]
+ );
+
+ $this->end_controls_section();
+ }
+
+ protected function render() {
+ $settings = $this->get_settings_for_display();
+
+ if ( $settings['slides'] ) {
+ echo '<div class="home-carousel">';
+ foreach ( $settings['slides'] as $key => $item ) {
+ $background_image = $item['background_image']['url'];
+ $active = "";
+ if($key === 0){
+ $active = "active";
+ }
+
+ echo '<div class="carousel-slide container '.$active.'">
+ <div class="leftside">
+ <div class="overlay overlayside" style="background-image: url('.$background_image.')"></div>
+ </div>
+ <div class="rightside">
+ <div class="overlay overlayside"></div>
+ <div class="text">
+ <h1 class="text-3xl">'.$item['title'].'</h1>
+ <p>
+ '.$item['text'].'
+ </p>
+ <a class="btn white" href="'.$item['link']['url'].'">'.$item['link_text'].'</a>
+ </div>
+ </div>
+ </div>
+ ';
+ }
+ echo '</div>';
+ }
+ }
+
+ protected function content_template() {
+ ?>
+ <# if ( settings.slides.length ) { #>
+ <div class="home-carousel">
+ <# _.each( settings.slides, function( item ) { #>
+ <dt class="elementor-repeater-item-{{ item._id }}">{{{ item.list_title }}}</dt>
+ <dd>{{{ item.list_content }}}</dd>
+ <div class="carousel-slide container $active">
+ <div class="leftside">
+ <div class="overlay overlayside" style='background-image: url("{{{ item.background_image.url }}}")'></div>
+ </div>
+ <div class="rightside">
+ <div class="overlay overlayside"></div>
+ <div class="text">
+ <h1 class="text-3xl">{{{ item.title }}}</h1>
+ <p>{{{ item.text }}}</p>
+ <a href="{{{ item.link }}}">{{{ item.link_text }}}</a>
+ </div>
+ </div>
+ </div>
+ <# }); #>
+ </div>
+ <# } #>
+ <?php
+ }
+}
\ No newline at end of file
--- /dev/null
+<?php
+
+namespace Cube\Widgets;
+
+use Elementor\Controls_Manager;
+
+class StickyNav extends CarouselHome
+{
+
+ public function get_name()
+ {
+ return 'cube-sticky-nav';
+ }
+
+ public function get_title()
+ {
+ return esc_html__('Sticky nav', 'cube');
+ }
+
+ public function get_icon()
+ {
+ return 'eicon-banner';
+ }
+
+ protected function render() {
+ $settings = $this->get_settings_for_display();
+
+ if ( $settings['slides'] ) {
+ echo '<div class="sticky-nav">';
+ echo '<div class="leftside">';
+ foreach ( $settings['slides'] as $item ) {
+ echo '
+ <div class="text">
+ <h3 class="text-2xl">'.$item['title'].'</h3>
+ <p>
+ '.$item['text'].'
+ </p>
+ </div>
+ ';
+ }
+ echo '</div>';
+ echo '<div class="rightside">';
+ foreach ( $settings['slides'] as $item ) {
+ echo '<img src="'.$item['background_image']['url'].'" />';
+ }
+ echo '</div>';
+ echo '</div>';
+ }
+ }
+}
\ No newline at end of file
]
);
+ $this->add_control(
+ 'cta_class',
+ [
+ 'label' => esc_html__( 'Call to Action class', 'cube' ),
+ 'type' => Controls_Manager::SELECT,
+ 'options' => [
+ 'orange' => [
+ 'title' => esc_html__( 'Orange', 'cube' ),
+ ],
+ 'red' => [
+ 'title' => esc_html__( 'Red', 'cube' ),
+ ]
+ ],
+ 'toggle' => true,
+ ]
+ );
+
$this->end_controls_section();
$this->start_controls_section(
'style_section',
'label' => esc_html__( 'Background color', 'cube' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
- '{{WRAPPER}} .highlight-' => 'background-color: {{VALUE}}',
+ '{{WRAPPER}} .highlight-bar' => 'background-color: {{VALUE}}',
],
- ],
- ''
+ ]
);
$this->end_controls_section();
}
$body = $this->parse_text_editor($this->get_settings('body'));
$cta_text = $this->get_settings('cta_text');
$cta_link = $this->get_settings('cta_link');
+ $cta_class = $this->get_settings('cta_class') ? $this->get_settings('cta_class') : '';
if ( ! empty( $cta_link['url'] ) ) {
$this->add_render_attribute( 'cta_text', 'href', $cta_link['url'] );
$this->add_render_attribute('above_title', 'class', ["text-blockbtn-above-title font-semibold"]);
$this->add_render_attribute('title', 'class', ["text-blockbtn-title font-bold text-xl"]);
$this->add_render_attribute('body', 'class', ['text-blockbtn-body font-semibold']);
- $this->add_render_attribute('cta_text', 'class', ['text-blockbtn-cta btn font-semibold']);
+ $this->add_render_attribute('cta_text', 'class', ["text-blockbtn-cta btn font-semibold $cta_class"]);
// Rendered content
echo '<div class="text-blockbtn">';
--- /dev/null
+<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50">
+ <g id="Groupe_55" data-name="Groupe 55" transform="translate(-293 -17)">
+ <g id="Ellipse_13" data-name="Ellipse 13" transform="translate(294 18)" fill="#fff" stroke="rgba(20,20,20,0.25)" stroke-width="1">
+ <circle cx="24" cy="24" r="24" stroke="none"/>
+ <circle cx="24" cy="24" r="24.5" fill="none"/>
+ </g>
+ <g id="Groupe_50" data-name="Groupe 50" transform="translate(-2)">
+ <line id="Ligne_23" data-name="Ligne 23" x2="17" transform="translate(314.49 35.99) rotate(45)" fill="none" stroke="#333" stroke-width="1"/>
+ <line id="Ligne_33" data-name="Ligne 33" x2="17" transform="translate(326.511 35.99) rotate(135)" fill="none" stroke="#333" stroke-width="1"/>
+ </g>
+ </g>
+</svg>
--- /dev/null
+<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50">
+ <g id="Groupe_55" data-name="Groupe 55" transform="translate(-293 -17)">
+ <g id="Ellipse_13" data-name="Ellipse 13" transform="translate(294 18)" fill="#fff" stroke="rgba(20,20,20,0.25)" stroke-width="1">
+ <circle cx="24" cy="24" r="24" stroke="none"/>
+ <circle cx="24" cy="24" r="24.5" fill="none"/>
+ </g>
+ <g id="Groupe_50" data-name="Groupe 50" transform="translate(-2)">
+ <line id="Ligne_23" data-name="Ligne 23" x2="17" transform="translate(312 42)" fill="none" stroke="#333" stroke-width="1"/>
+ <line id="Ligne_24" data-name="Ligne 24" x2="17" transform="translate(312 36)" fill="none" stroke="#333" stroke-width="1"/>
+ <line id="Ligne_25" data-name="Ligne 25" x2="17" transform="translate(312 48)" fill="none" stroke="#333" stroke-width="1"/>
+ </g>
+ </g>
+</svg>
width: 80%
max-width: 1344px
+.full-container
+ .elementor-container
+ width: 100%
+ max-width: 100%
+
.btn
border: 1px solid
border-radius: 10px
padding: 15px 26px
display: inline-block
cursor: pointer
+ font-weight: 600
+ transition: all .3s
+ &.white
+ color: #FFFFFF
+ border-color: rgba(255,255,255,.5)
+ &:hover
+ background-color: rgba(195,203,240,.5)
+
+ &.orange
+ border-color: map-get($colors, 'orange','full')
+ &:hover
+ background-color: rgba(255,226,199,.5)
+
+ &.red
+ border-color: map-get($colors, 'red','full')
+ &:hover
+ background-color: rgba(249,195,211,.5)
.image-double
.elementor-container
$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))
-$breakpoint: ('phone': '500px', 'tablet': '768px', 'small-desktop': '1024px', 'desktop': '1344px', 'widescreen': '1680px')
+$breakpoint: ('phone': '500px', 'tablet': '768px', 'small-desktop': '1140px', 'desktop': '1344px', 'widescreen': '1680px')
$textPositions: ('left','center','right')
@for $i from 1 through 12
--space-2xs-xs: clamp(0.50rem, calc(0.42rem + 0.39vw), 0.75rem)
--space-xs-s: clamp(0.75rem, calc(0.67rem + 0.39vw), 1.00rem)
--space-s-m: clamp(1.00rem, calc(0.84rem + 0.78vw), 1.50rem)
- --space-m-l: clamp(1.50rem, calc(1.34rem + 0.78vw), 2.00rem)
+ --space-m-l: clamp(1.50rem, calc(1.32rem + 0.81vw), 2.00rem)
--space-l-xl: clamp(2.13rem, calc(1.11rem + 5.08vw), 5.38rem)
--space-xl-2xl: clamp(3.00rem, calc(2.69rem + 1.56vw), 4.00rem)
--space-2xl-3xl: clamp(4.00rem, calc(3.38rem + 3.13vw), 6.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-8xl-9xl: clamp(5.38rem, calc(4.63rem + 3.71vw), 7.75rem)
--space-2xl-5xl: clamp(4.00rem, calc(2.75rem + 6.25vw), 7.875rem)
+ --space-s-l-custom: clamp(2.38rem, calc(2.28rem + 0.49vw), 2.69rem)
+ --space-10xl-11xl: clamp(6.75rem, calc(5.38rem + 6.10vw), 10.50rem)
+ --space-10xl-11xl-2: clamp(4.50rem, calc(2.30rem + 9.76vw), 10.50rem)
+
+ --space-20-44: clamp(1.25rem, calc(0.70rem + 2.44vw), 2.75rem)
+ --space-36-126: clamp(2.25rem, calc(0.19rem + 9.15vw), 7.88rem)
+ --space-56-128: clamp(3.50rem, calc(1.85rem + 7.32vw), 8.00rem)
--step--2: clamp(1.93rem, calc(1.58rem + 1.74vw), 3.04rem)
--step--1: clamp(2.17rem, calc(1.66rem + 2.55vw), 3.80rem)
+++ /dev/null
-footer.content-info {
- padding: 51px 0;
-}
-
-.nav-footer li:not(:last-child) {
- margin-right: 42px;
-}
--- /dev/null
+footer.content-info
+ padding: 51px 0
+ .container
+ +screen-size("small-desktop", "max")
+ flex-direction: column
+
+ .brand
+ +screen-size("small-desktop", "max")
+ margin-bottom: 36px
+
+.nav-footer
+ +screen-size("small-desktop", "max")
+ margin-bottom: 51px
+ li:not(:last-child)
+ margin: 0 0 19px
+ +screen-size("small-desktop")
+ margin: 0 42px 0 0
+ #menu-nav-footer
+ +screen-size("small-desktop", "max")
+ flex-direction: column
+ text-align: center
margin-right: 62px
}
li.current-menu-item a,
- li.current-menu-item:hover a {
- color: theme('colors.red.clear');
+ li:hover a {
+ border-bottom: 1px solid;
}
a {
font-weight: 500;
+ transition: all .3s;
+ padding-bottom: 2px;
}
}
--- /dev/null
+.home-carousel
+ position: relative
+ height: 100vh //798px
+ overflow: hidden
+ .carousel
+ &-slide
+ width: 100%
+ height: 100%
+ position: absolute
+ top: 0
+ left: 50%
+ display: flex
+ transform: translateX(-50%)
+ &.active
+ z-index: 1
+ [class*="side"]
+ .overlay
+ height: 100%
+ .text
+ opacity: 1
+ transition: opacity 750ms cubic-bezier(0.77, 0, 0.175, 1) 0s, top 1s
+ top: 0
+
+ &:not(.active)
+ [class*="side"]
+ .overlay
+ height: 0
+
+ .leftside,
+ .rightside
+ width: 50%
+ height: 100%
+ position: relative
+
+ .overlay
+ width: calc(100% + ((100vw - 1344px) / 2) )
+ +screen-size('desktop', 'max')
+ width: 100%
+
+ position: absolute
+ left: 0
+ transition: all .7s
+ img
+ object-fit: cover
+
+ .leftside
+ .overlay
+ background-position: center
+ background-size: cover
+ background-repeat: no-repeat
+ +screen-size('desktop', 'min')
+ left: calc((-100vw + 1344px) / 2)
+
+ .rightside
+ display: flex
+ align-items: flex-end
+
+ .text
+ padding-bottom: 137px
+ padding-left: calc(8.66% * 2)
+ position: relative
+ transition: opacity 750ms cubic-bezier(0.77, 0, 0.175, 1) 0s, top 1s
+ opacity: 0
+ top: 50px
+ *
+ color: #ffffff
+ p
+ margin-bottom: var(--space-20-44)
+ h1
+ margin-left: calc(-137px - 16.66%)
+ margin-bottom: 30px
+ font-size: var(--step-3) !important
+
+ &.next
+ .leftside
+ margin-bottom: auto
+ .overlay
+ top: 0
+ .rightside
+ margin-top: auto
+ .overlay
+ bottom: 0
+
+ &:not(.active)
+ .overlay
+ height: 0
+ transition: height 0s
+ transition-delay: 1s
+
+ &.next
+ .text
+ animation-name: anime
+ animation-duration: .8s
+
+@keyframes anime
+ 0%
+ top: 0
+ 50%
+ top: -1.25vw
+ 100%
+ top: 1.25vw
--- /dev/null
+.nav-primary
+ &.active
+ transform: translateX(0)
+ +screen-size('small-desktop', 'max')
+ position: absolute
+ background: white
+ width: 100%
+ height: 100vh
+ top: 0
+ left: 0
+ padding-top: 126px
+ transform: translateX(-100%)
+ transition: all .3s
+ #menu-menu
+ flex-direction: column
+ padding: 0
+ +screen-size('small-desktop', 'max')
+ width: 80%
+ margin: 0 auto
+ +screen-size('tablet', 'max')
+ width: 90%
+
+ li
+ font-size: 39px
+ padding: 18px 0
+ margin-right: 0
+ border-bottom: 1px solid #D8D8D8
+
+.nav-controls
+ .close
+ display: none
+ +screen-size('small-desktop')
+ display: none
.banner-title
- padding: 168px 0
+ padding: var(--space-10xl-11xl) 0 var(--space-10xl-11xl-2)
h1,h2,h3
font-size: var(--step-0)
max-width: 889px
--- /dev/null
+.sticky-nav
+ display: grid
+ grid-template-columns: repeat(2, 1fr)
+ .leftside
+ width: 66.66%
+ margin: 0 auto
+ .text
+ margin-bottom: var(--space-56-128)
+ &:not(.active)
+ *
+ color: #DDDDDD
+ h3
+ margin-bottom: var(--space-m-l)
+
+ .rightside
+ position: relative
+ height: 0
+ padding-bottom: 107.3%
+ margin-top: calc(-32px - var(--space-l-2xl))
+ img
+ position: absolute
+ top: 0
+ left: 0
+ width: 100%
+ height: 100%
+ object-fit: cover
+
+.special-container
+ .elementor-container
+ max-width: 100%
+++ /dev/null
-const path = require('path');
-
-module.exports = {
- entry: {
- app: './src/js/app.js'
- },
- output: {
- path: path.resolve(__dirname, 'dist'),
- filename: 'bundle.js'
- },
- module: {
- rules: [
- {
- test: /\.js$/,
- exclude: /node_modules/,
- use: {
- loader: 'babel-loader'
- }
- }
- ]
- }
-};
projects / sycomore-fondation.git / commitdiff
