$elementor->widgets_manager->register_widget_type( new Widgets\HeaderSlideshow() );
$elementor->widgets_manager->register_widget_type( new Widgets\NewsBanner() );
$elementor->widgets_manager->register_widget_type( new Widgets\LinkCarousel() );
+ $elementor->widgets_manager->register_widget_type( new Widgets\PictoGrid() );
}
protected function _customise_sections() {
--- /dev/null
+<?php
+
+namespace Cube\Elementor\Widgets;
+
+use Elementor\Widget_Base;
+use Elementor\Controls_Manager;
+use Elementor\Utils;
+
+use function Roots\view;
+
+
+class PictoGrid extends Widget_Base {
+
+ // Widget name / ID
+ public function get_name() {
+ return 'cube-picto-grid';
+ }
+
+ // Elementor widget title
+ public function get_title() {
+ return __( 'Picto Grid', 'cube' );
+ }
+
+ // Elementor interface icon
+ public function get_icon() {
+ 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.
+ *
+ * @since 1.0.0
+ * @access public
+ * @return array Widget scripts dependencies.
+ */
+ public function get_script_depends() {
+ return [];
+ }
+ /**
+ * Register the widget controls.
+ * Adds different input fields to allow the user to change and customize the widget settings.
+ *
+ * @since 1.0.0
+ * @access protected
+ */
+ protected function _register_controls() {
+
+ $this->start_controls_section(
+ 'section_content',
+ [
+ 'label' => __( 'Picto Grid', 'cube' ),
+ ]
+ );
+
+ $this->add_control(
+ 'items',
+ [
+ 'label' => __( 'Pictogrammes', 'cube' ),
+ 'type' => Controls_Manager::REPEATER,
+ 'fields' => [
+ [
+ 'name' => 'image',
+ 'label' => __('Pictogramme', 'cube'),
+ 'label_block' => true,
+ 'type' => Controls_Manager::MEDIA,
+ 'default' => [
+ 'url' => Utils::get_placeholder_image_src(),
+ ],
+ ],
+ [
+ 'name' => 'title',
+ 'label' => __( 'Titre', 'cube' ),
+ 'type' => Controls_Manager::TEXTAREA,
+ 'label_block' => true,
+ 'default' => '',
+ ],
+ [
+ 'name' => 'description',
+ 'label' => __( 'Description', 'cube' ),
+ 'type' => Controls_Manager::TEXTAREA,
+ 'label_block' => true,
+ ],
+ ],
+ 'title_field' => '{{{ title }}}',
+ ]
+ );
+ $this->end_controls_section();
+
+
+ }
+ /**
+ * Render the widget output on the frontend.
+ * Written in PHP and used to generate the final HTML.
+ *
+ * @since 1.0.0
+ * @access protected
+ */
+ protected function render() {
+ $items = $this->get_settings('items');
+ echo view('widgets/picto-grid', compact('items'));
+ }
+}
@apply font-bold text-xs uppercase
@apply px-10 py-3
font-smoothing()
+ transition: background-color 0.25s
+
+ &:hover
+ @apply bg-teal
&-text
@apply z-10 relative
- &-no-hover:before
- display: none
-
- &:hover:before
- transform: scaleX(1)
- opacity: 1
+ //&-no-hover:before
+ // display: none
+ //
+ //&:hover:before
+ // transform: scaleX(1)
+ // opacity: 1
//&:before
// content: ''
// transition: transform 0.2s ease-out
// Circle hover effect
- &:hover:before
- transform: scale(1.1) translateY(-50%)
- opacity: 1
-
- &:before
- content: ''
- position: absolute
- top: 50%
- left: 0
- z-index: 1
- background-color: rgba(#fff, 0.15)
- width: 100%
- padding-bottom: 100%
- border-radius: 50%
- transform: scale(0) translateY(-50%)
- transform-origin: top center
- transition: all 0.2s ease-out
- opacity: 0
+ //&:hover:before
+ // transform: scale(1.1) translateY(-50%)
+ // opacity: 1
+ //
+ //&:before
+ // content: ''
+ // position: absolute
+ // top: 50%
+ // left: 0
+ // z-index: 1
+ // background-color: rgba(#fff, 0.15)
+ // width: 100%
+ // padding-bottom: 100%
+ // border-radius: 50%
+ // transform: scale(0) translateY(-50%)
+ // transform-origin: top center
+ // transition: all 0.2s ease-out
+ // opacity: 0
--- /dev/null
+.site-footer
+ a:not(.btn)
+ &:hover
+ @apply text-pink
a
@apply text-white
@apply block py-2 px-4 m-0
+ transition: background-color 0.25s
&:hover
- @apply text-white
- background-color: rgba(#fff, 0.2)
+ @apply text-white bg-pink-light
// Language switcher and action buttons
--- /dev/null
+.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))
+
+ &-image-wrapper
+ position: relative
+ max-width: 195px
+ border-radius: 50%
+ background-color: #585666
+ margin: 0 auto
+
+ &-sizer
+ padding-bottom: 100% // Ratio based sizing to make a square
+
+ &-image-content
+ position: absolute
+ top: 0
+ left: 0
+ width: 100%
+ height: 100%
+ display: flex
+ flex-direction: column
+ align-items: center
+ justify-content: center
+
+ &-image
+ flex: 0 0 auto
+ max-width: 60% !important
+ justify-self: end
+ margin-bottom: 1em
+
+ &-title
+ flex: 0 0 auto
+ color: #fff
+ font-size: 24px
+ text-align: center
+
+ &-description
+ text-align: center
+
+ &:before
+ @apply bg-pink
+ content: ''
+ display: block
+ width: 48px
+ height: 5px
+ margin: 1em auto
+
+
@apply font-medium text-lg
a
- color: theme('colors.pink')
+ @apply text-pink
+
+ &:hover
+ @apply text-teal
b, strong
font-weight: 400
-<footer class="bg-purple-dark text-white antialiased pt-2v pb-1v">
+<footer class="site-footer bg-purple-dark text-white antialiased pt-2v pb-1v">
<div class="container">
<div class="flex pb-2v sm:flex-col-reverse">
<div class="w-1/2 pl-4v sm:pl-2v sm:w-full sm:pt-8">
</div>
{{-- Copyright message and links --}}
- <div class="pl-4v sm:pl-2v pr-2v text-sm opacity-50">
+ <div class="pl-4v sm:pl-2v pr-2v text-sm" style="color:#9796a0">
@php(dynamic_sidebar('sidebar-footer-copyright'))
</div>
</div>
</ul>
@if ($button_1)
- <a href="{{ $button_1->url }}" class="header-cta btn flex items-center">
+ <a href="{{ $button_1->url }}" class="header-cta btn btn-no-hover flex items-center hover:bg-teal">
<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 flex items-center bg-teal">
+ <a href="{{ $button_2->url }}" class="header-cta btn btn-no-hover flex items-center bg-purple hover:bg-teal">
<img src="@asset('images/rendezvous.svg')" class="mr-2">
{{ $button_2->title }}
</a>
--- /dev/null
+{{-- PICTO GRID --}}
+<div class="picto-grid">
+ @foreach ($items as $item)
+ <div class="picto-grid-item">
+ <div class="picto-grid-image-wrapper">
+ <div class="picto-grid-image-wrapper-sizer"></div>
+ <div class="picto-grid-image-content">
+ @if ($item['image']['url'])
+ <img class="picto-grid-image" src="{{ $item['image']['url'] }}" alt="">
+ @endif
+ @if ($item['title'])
+ <p class="picto-grid-title">{{ $item['title'] }}</p>
+ @endif
+ </div>
+ </div>
+ <p class="picto-grid-description">{{ $item['description'] }}</p>
+ </div>
+ @endforeach
+</div>
'inherit': 'inherit',
'dark': '#1A0707', // Text colour
'light': '#F6F5F5', // Light grey backgrounds
+ 'purple': '#5A5488',
'purple-dark': '#2E2C40', // Footer and other dark sections
'pink': '#FF078B', // Accent colour
+ 'pink-light': '#FF7EC3',
'teal': '#2CC4CF', // Accent colour
},
fontFamily: {
projects / ccv-wordpress.git / commitdiff