From: soufiane Date: Tue, 9 May 2023 16:26:05 +0000 (+0200) Subject: wip #5812 @7:00 X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=1f89c5cadc2943f75fc8a35cd6af1677ad8157db;p=sycomore-fondation.git wip #5812 @7:00 --- diff --git a/wp-content/mu-plugins/cube/Init.php b/wp-content/mu-plugins/cube/Init.php index 6d9b794..05b0489 100644 --- a/wp-content/mu-plugins/cube/Init.php +++ b/wp-content/mu-plugins/cube/Init.php @@ -32,6 +32,8 @@ class Setup { $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) { @@ -205,11 +207,13 @@ class Setup { // '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 diff --git a/wp-content/mu-plugins/cube/Widgets/CarouselHome.php b/wp-content/mu-plugins/cube/Widgets/CarouselHome.php new file mode 100644 index 0000000..44183fd --- /dev/null +++ b/wp-content/mu-plugins/cube/Widgets/CarouselHome.php @@ -0,0 +1,189 @@ +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 '
'; + foreach ( $settings['slides'] as $key => $item ) { + $background_image = $item['background_image']['url']; + $active = ""; + if($key === 0){ + $active = "active"; + } + + echo '
+
+
+
+
+
+
+

'.$item['title'].'

+

+ '.$item['text'].' +

+ '.$item['link_text'].' +
+
+
+ '; + } + echo '
'; + } + } + + protected function content_template() { + ?> + <# if ( settings.slides.length ) { #> +
+ <# _.each( settings.slides, function( item ) { #> +
{{{ item.list_title }}}
+
{{{ item.list_content }}}
+
+
+
+
+
+
+
+

{{{ item.title }}}

+

{{{ item.text }}}

+ {{{ item.link_text }}} +
+
+
+ <# }); #> +
+ <# } #> + get_settings_for_display(); + + if ( $settings['slides'] ) { + echo '
'; + echo '
'; + foreach ( $settings['slides'] as $item ) { + echo ' +
+

'.$item['title'].'

+

+ '.$item['text'].' +

+
+ '; + } + echo '
'; + echo '
'; + foreach ( $settings['slides'] as $item ) { + echo ''; + } + echo '
'; + echo '
'; + } + } +} \ No newline at end of file diff --git a/wp-content/mu-plugins/cube/Widgets/TextWithBtn.php b/wp-content/mu-plugins/cube/Widgets/TextWithBtn.php index 209ce1d..98dd472 100644 --- a/wp-content/mu-plugins/cube/Widgets/TextWithBtn.php +++ b/wp-content/mu-plugins/cube/Widgets/TextWithBtn.php @@ -95,6 +95,23 @@ class TextWithBtn extends _Base { ] ); + $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', @@ -109,10 +126,9 @@ class TextWithBtn extends _Base { '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(); } @@ -133,6 +149,7 @@ class TextWithBtn extends _Base { $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'] ); @@ -148,7 +165,7 @@ class TextWithBtn extends _Base { $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 '
'; diff --git a/wp-content/themes/sycomore-fondation/resources/images/close-menu.svg b/wp-content/themes/sycomore-fondation/resources/images/close-menu.svg new file mode 100644 index 0000000..f140fa9 --- /dev/null +++ b/wp-content/themes/sycomore-fondation/resources/images/close-menu.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/wp-content/themes/sycomore-fondation/resources/images/open-menu.svg b/wp-content/themes/sycomore-fondation/resources/images/open-menu.svg new file mode 100644 index 0000000..966765b --- /dev/null +++ b/wp-content/themes/sycomore-fondation/resources/images/open-menu.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/wp-content/themes/sycomore-fondation/resources/styles/common/global.sass b/wp-content/themes/sycomore-fondation/resources/styles/common/global.sass index bbfceaf..9f0f7a6 100644 --- a/wp-content/themes/sycomore-fondation/resources/styles/common/global.sass +++ b/wp-content/themes/sycomore-fondation/resources/styles/common/global.sass @@ -7,12 +7,34 @@ 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 diff --git a/wp-content/themes/sycomore-fondation/resources/styles/common/helpers.sass b/wp-content/themes/sycomore-fondation/resources/styles/common/helpers.sass index 4c194e7..8d0ef63 100644 --- a/wp-content/themes/sycomore-fondation/resources/styles/common/helpers.sass +++ b/wp-content/themes/sycomore-fondation/resources/styles/common/helpers.sass @@ -1,7 +1,7 @@ $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 @@ -58,7 +58,7 @@ $textPositions: ('left','center','right') --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) @@ -71,7 +71,15 @@ $textPositions: ('left','center','right') --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) diff --git a/wp-content/themes/sycomore-fondation/resources/styles/partials/footer.css b/wp-content/themes/sycomore-fondation/resources/styles/partials/footer.css deleted file mode 100644 index 942bdc2..0000000 --- a/wp-content/themes/sycomore-fondation/resources/styles/partials/footer.css +++ /dev/null @@ -1,7 +0,0 @@ -footer.content-info { - padding: 51px 0; -} - -.nav-footer li:not(:last-child) { - margin-right: 42px; -} diff --git a/wp-content/themes/sycomore-fondation/resources/styles/partials/footer.sass b/wp-content/themes/sycomore-fondation/resources/styles/partials/footer.sass new file mode 100644 index 0000000..20c5d00 --- /dev/null +++ b/wp-content/themes/sycomore-fondation/resources/styles/partials/footer.sass @@ -0,0 +1,21 @@ +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 diff --git a/wp-content/themes/sycomore-fondation/resources/styles/partials/header.scss b/wp-content/themes/sycomore-fondation/resources/styles/partials/header.scss index ad4aa60..2a388c6 100644 --- a/wp-content/themes/sycomore-fondation/resources/styles/partials/header.scss +++ b/wp-content/themes/sycomore-fondation/resources/styles/partials/header.scss @@ -23,10 +23,12 @@ body.sticky header.banner { 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; } } diff --git a/wp-content/themes/sycomore-fondation/resources/styles/partials/home-carousel.sass b/wp-content/themes/sycomore-fondation/resources/styles/partials/home-carousel.sass new file mode 100644 index 0000000..6579791 --- /dev/null +++ b/wp-content/themes/sycomore-fondation/resources/styles/partials/home-carousel.sass @@ -0,0 +1,101 @@ +.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 diff --git a/wp-content/themes/sycomore-fondation/resources/styles/partials/responsive-navigation.sass b/wp-content/themes/sycomore-fondation/resources/styles/partials/responsive-navigation.sass new file mode 100644 index 0000000..c259e5a --- /dev/null +++ b/wp-content/themes/sycomore-fondation/resources/styles/partials/responsive-navigation.sass @@ -0,0 +1,33 @@ +.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 diff --git a/wp-content/themes/sycomore-fondation/resources/styles/widgets/bannerTitle.sass b/wp-content/themes/sycomore-fondation/resources/styles/widgets/bannerTitle.sass index abd50e9..e85ca44 100644 --- a/wp-content/themes/sycomore-fondation/resources/styles/widgets/bannerTitle.sass +++ b/wp-content/themes/sycomore-fondation/resources/styles/widgets/bannerTitle.sass @@ -1,5 +1,5 @@ .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 diff --git a/wp-content/themes/sycomore-fondation/resources/styles/widgets/stickyNav.sass b/wp-content/themes/sycomore-fondation/resources/styles/widgets/stickyNav.sass new file mode 100644 index 0000000..2fb4571 --- /dev/null +++ b/wp-content/themes/sycomore-fondation/resources/styles/widgets/stickyNav.sass @@ -0,0 +1,30 @@ +.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% diff --git a/wp-content/themes/sycomore-fondation/webpack.config.js b/wp-content/themes/sycomore-fondation/webpack.config.js deleted file mode 100644 index fb6904b..0000000 --- a/wp-content/themes/sycomore-fondation/webpack.config.js +++ /dev/null @@ -1,22 +0,0 @@ -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' - } - } - ] - } -};