pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[IMP] website: add mega menu snippets

Browse Source 
New mega menus :
- s_mega_menu_big_icons_subtitles
- s_mega_menu_cards
- s_mega_menu_images_subtitles
- s_mega_menu_little_icons
- s_mega_menu_menus_logos
- s_mega_menu_odoo_menu
- s_mega_menu_thumbnails

Part of https://github.com/odoo/odoo/pull/71143
task-2502208

Part-of: odoo/odoo#71143
Co-authored-by: Younn Olivier <yol@odoo.com>
Co-authored-by: qsm-odoo <qsm@odoo.com>
This commit is contained in:
Brieuc-brd
2021-09-02 14:14:50 +00:00
committed by qsm-odoo
co-authored by Younn Olivier qsm-odoo
parent aaef11f594
commit 63a3ba4a42
58 changed files with 1866 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/website/__manifest__.py
+7
View File
@@ -80,6 +80,13 @@
'views/snippets/s_product_list.xml',
'views/snippets/s_mega_menu_multi_menus.xml',
'views/snippets/s_mega_menu_menu_image_menu.xml',
'views/snippets/s_mega_menu_thumbnails.xml',
'views/snippets/s_mega_menu_little_icons.xml',
'views/snippets/s_mega_menu_images_subtitles.xml',
'views/snippets/s_mega_menu_menus_logos.xml',
'views/snippets/s_mega_menu_odoo_menu.xml',
'views/snippets/s_mega_menu_big_icons_subtitles.xml',
'views/snippets/s_mega_menu_cards.xml',
'views/snippets/s_google_map.xml',
'views/snippets/s_map.xml',
'views/snippets/s_dynamic_snippet.xml',
addons/website/data/website_data.xml
+198
View File
@@ -1004,6 +1004,204 @@
<field name="type">url</field>
<field name="url">/website/static/src/img/snippets_demo/s_references_5.png</field>
</record>
<record id="website.s_mega_menu_thumbnails_default_image_1" model="ir.attachment">
<field name="public" eval="True"/>
<field name="name">s_mega_menu_thumbnails_default_image_1.jpg</field>
<field name="type">url</field>
<field name="url">/website/static/src/img/snippets_demo/s_mega_menu_thumbnails_default_image_1.jpg</field>
</record>
<record id="website.s_mega_menu_thumbnails_default_image_2" model="ir.attachment">
<field name="public" eval="True"/>
<field name="name">s_mega_menu_thumbnails_default_image_2.jpg</field>
<field name="type">url</field>
<field name="url">/website/static/src/img/snippets_demo/s_mega_menu_thumbnails_default_image_2.jpg</field>
</record>
<record id="website.s_mega_menu_thumbnails_default_image_3" model="ir.attachment">
<field name="public" eval="True"/>
<field name="name">s_mega_menu_thumbnails_default_image_3.jpg</field>
<field name="type">url</field>
<field name="url">/website/static/src/img/snippets_demo/s_mega_menu_thumbnails_default_image_3.jpg</field>
</record>
<record id="website.s_mega_menu_thumbnails_default_image_4" model="ir.attachment">
<field name="public" eval="True"/>
<field name="name">s_mega_menu_thumbnails_default_image_4.jpg</field>
<field name="type">url</field>
<field name="url">/website/static/src/img/snippets_demo/s_mega_menu_thumbnails_default_image_4.jpg</field>
</record>
<record id="website.s_mega_menu_thumbnails_default_image_5" model="ir.attachment">
<field name="public" eval="True"/>
<field name="name">s_mega_menu_thumbnails_default_image_5.jpg</field>
<field name="type">url</field>
<field name="url">/website/static/src/img/snippets_demo/s_mega_menu_thumbnails_default_image_5.jpg</field>
</record>
<record id="website.s_mega_menu_thumbnails_default_image_6" model="ir.attachment">
<field name="public" eval="True"/>
<field name="name">s_mega_menu_thumbnails_default_image_6.jpg</field>
<field name="type">url</field>
<field name="url">/website/static/src/img/snippets_demo/s_mega_menu_thumbnails_default_image_6.jpg</field>
</record>
<record id="website.s_mega_menu_thumbnails_default_image_7" model="ir.attachment">
<field name="public" eval="True"/>
<field name="name">s_mega_menu_thumbnails_default_image_7.jpg</field>
<field name="type">url</field>
<field name="url">/website/static/src/img/snippets_demo/s_mega_menu_thumbnails_default_image_7.jpg</field>
</record>
<record id="website.s_mega_menu_thumbnails_default_image_8" model="ir.attachment">
<field name="public" eval="True"/>
<field name="name">s_mega_menu_thumbnails_default_image_8.jpg</field>
<field name="type">url</field>
<field name="url">/website/static/src/img/snippets_demo/s_mega_menu_thumbnails_default_image_8.jpg</field>
</record>
<record id="website.s_mega_menu_thumbnails_default_image_9" model="ir.attachment">
<field name="public" eval="True"/>
<field name="name">s_mega_menu_thumbnails_default_image_9.jpg</field>
<field name="type">url</field>
<field name="url">/website/static/src/img/snippets_demo/s_mega_menu_thumbnails_default_image_9.jpg</field>
</record>
<record id="website.s_mega_menu_thumbnails_default_image_10" model="ir.attachment">
<field name="public" eval="True"/>
<field name="name">s_mega_menu_thumbnails_default_image_10.jpg</field>
<field name="type">url</field>
<field name="url">/website/static/src/img/snippets_demo/s_mega_menu_thumbnails_default_image_10.jpg</field>
</record>
<record id="website.s_mega_menu_thumbnails_default_image_11" model="ir.attachment">
<field name="public" eval="True"/>
<field name="name">s_mega_menu_thumbnails_default_image_11.jpg</field>
<field name="type">url</field>
<field name="url">/website/static/src/img/snippets_demo/s_mega_menu_thumbnails_default_image_11.jpg</field>
</record>
<record id="website.s_mega_menu_images_subtitles_default_image_1" model="ir.attachment">
<field name="public" eval="True"/>
<field name="name">s_mega_menu_images_subtitles_default_image_1.jpg</field>
<field name="type">url</field>
<field name="url">/website/static/src/img/snippets_demo/s_mega_menu_images_subtitles_default_image_1.jpg</field>
</record>
<record id="website.s_mega_menu_images_subtitles_default_image_2" model="ir.attachment">
<field name="public" eval="True"/>
<field name="name">s_mega_menu_images_subtitles_default_image_2.jpg</field>
<field name="type">url</field>
<field name="url">/website/static/src/img/snippets_demo/s_mega_menu_images_subtitles_default_image_2.jpg</field>
</record>
<record id="website.s_mega_menu_images_subtitles_default_image_3" model="ir.attachment">
<field name="public" eval="True"/>
<field name="name">s_mega_menu_images_subtitles_default_image_3.jpg</field>
<field name="type">url</field>
<field name="url">/website/static/src/img/snippets_demo/s_mega_menu_images_subtitles_default_image_3.jpg</field>
</record>
<record id="website.s_mega_menu_images_subtitles_default_image_4" model="ir.attachment">
<field name="public" eval="True"/>
<field name="name">s_mega_menu_images_subtitles_default_image_4.jpg</field>
<field name="type">url</field>
<field name="url">/website/static/src/img/snippets_demo/s_mega_menu_images_subtitles_default_image_4.jpg</field>
</record>
<record id="website.s_mega_menu_images_subtitles_default_image_5" model="ir.attachment">
<field name="public" eval="True"/>
<field name="name">s_mega_menu_images_subtitles_default_image_5.jpg</field>
<field name="type">url</field>
<field name="url">/website/static/src/img/snippets_demo/s_mega_menu_images_subtitles_default_image_5.jpg</field>
</record>
<record id="website.s_mega_menu_images_subtitles_default_image_6" model="ir.attachment">
<field name="public" eval="True"/>
<field name="name">s_mega_menu_images_subtitles_default_image_6.jpg</field>
<field name="type">url</field>
<field name="url">/website/static/src/img/snippets_demo/s_mega_menu_images_subtitles_default_image_6.jpg</field>
</record>
<record id="website.s_mega_menu_images_subtitles_default_image_7" model="ir.attachment">
<field name="public" eval="True"/>
<field name="name">s_mega_menu_images_subtitles_default_image_7.jpg</field>
<field name="type">url</field>
<field name="url">/website/static/src/img/snippets_demo/s_mega_menu_images_subtitles_default_image_7.jpg</field>
</record>
<record id="website.s_mega_menu_menus_logos_default_image" model="ir.attachment">
<field name="public" eval="True"/>
<field name="name">s_mega_menu_menus_logos_default_image.jpg</field>
<field name="type">url</field>
<field name="url">/website/static/src/img/snippets_demo/s_mega_menu_menus_logos_default_image.jpg</field>
</record>
<record id="website.s_mega_menu_menus_logos_default_logo_1" model="ir.attachment">
<field name="public" eval="True"/>
<field name="name">s_mega_menu_menus_logos_default_logo_1.png</field>
<field name="type">url</field>
<field name="url">/website/static/src/img/snippets_demo/s_mega_menu_menus_logos_default_logo_1.png</field>
</record>
<record id="website.s_mega_menu_menus_logos_default_logo_2" model="ir.attachment">
<field name="public" eval="True"/>
<field name="name">s_mega_menu_menus_logos_default_logo_2.png</field>
<field name="type">url</field>
<field name="url">/website/static/src/img/snippets_demo/s_mega_menu_menus_logos_default_logo_2.png</field>
</record>
<record id="website.s_mega_menu_menus_logos_default_logo_3" model="ir.attachment">
<field name="public" eval="True"/>
<field name="name">s_mega_menu_menus_logos_default_logo_3.png</field>
<field name="type">url</field>
<field name="url">/website/static/src/img/snippets_demo/s_mega_menu_menus_logos_default_logo_3.png</field>
</record>
<record id="website.s_mega_menu_menus_logos_default_logo_4" model="ir.attachment">
<field name="public" eval="True"/>
<field name="name">s_mega_menu_menus_logos_default_logo_4.png</field>
<field name="type">url</field>
<field name="url">/website/static/src/img/snippets_demo/s_mega_menu_menus_logos_default_logo_4.png</field>
</record>
<record id="website.s_mega_menu_menus_logos_default_logo_5" model="ir.attachment">
<field name="public" eval="True"/>
<field name="name">s_mega_menu_menus_logos_default_logo_5.png</field>
<field name="type">url</field>
<field name="url">/website/static/src/img/snippets_demo/s_mega_menu_menus_logos_default_logo_5.png</field>
</record>
<record id="website.s_mega_menu_menus_logos_default_logo_6" model="ir.attachment">
<field name="public" eval="True"/>
<field name="name">s_mega_menu_menus_logos_default_logo_6.png</field>
<field name="type">url</field>
<field name="url">/website/static/src/img/snippets_demo/s_mega_menu_menus_logos_default_logo_6.png</field>
</record>
<record id="website.s_mega_menu_cards_default_image_1" model="ir.attachment">
<field name="public" eval="True"/>
<field name="name">s_mega_menu_cards_default_image_1.jpg</field>
<field name="type">url</field>
<field name="url">/website/static/src/img/snippets_demo/s_mega_menu_cards_default_image_1.jpg</field>
</record>
<record id="website.s_mega_menu_cards_default_image_2" model="ir.attachment">
<field name="public" eval="True"/>
<field name="name">s_mega_menu_cards_default_image_2.jpg</field>
<field name="type">url</field>
<field name="url">/website/static/src/img/snippets_demo/s_mega_menu_cards_default_image_2.jpg</field>
</record>
<record id="website.s_mega_menu_cards_default_image_3" model="ir.attachment">
<field name="public" eval="True"/>
<field name="name">s_mega_menu_cards_default_image_3.jpg</field>
<field name="type">url</field>
<field name="url">/website/static/src/img/snippets_demo/s_mega_menu_cards_default_image_3.jpg</field>
</record>
<record id="website.s_mega_menu_cards_default_image_4" model="ir.attachment">
<field name="public" eval="True"/>
<field name="name">s_mega_menu_cards_default_image_4.jpg</field>
<field name="type">url</field>
<field name="url">/website/static/src/img/snippets_demo/s_mega_menu_cards_default_image_4.jpg</field>
</record>
<record id="website.s_mega_menu_cards_default_image_5" model="ir.attachment">
<field name="public" eval="True"/>
<field name="name">s_mega_menu_cards_default_image_5.jpg</field>
<field name="type">url</field>
<field name="url">/website/static/src/img/snippets_demo/s_mega_menu_cards_default_image_5.jpg</field>
</record>
<record id="website.s_mega_menu_cards_default_image_6" model="ir.attachment">
<field name="public" eval="True"/>
<field name="name">s_mega_menu_cards_default_image_6.jpg</field>
<field name="type">url</field>
<field name="url">/website/static/src/img/snippets_demo/s_mega_menu_cards_default_image_6.jpg</field>
</record>
<record id="website.s_mega_menu_cards_default_image_7" model="ir.attachment">
<field name="public" eval="True"/>
<field name="name">s_mega_menu_cards_default_image_7.jpg</field>
<field name="type">url</field>
<field name="url">/website/static/src/img/snippets_demo/s_mega_menu_cards_default_image_7.jpg</field>
</record>
<record id="website.s_mega_menu_cards_default_image_8" model="ir.attachment">
<field name="public" eval="True"/>
<field name="name">s_mega_menu_cards_default_image_8.jpg</field>
<field name="type">url</field>
<field name="url">/website/static/src/img/snippets_demo/s_mega_menu_cards_default_image_8.jpg</field>
</record>
<record id="website.s_product_catalog_default_image" model="ir.attachment">
<field name="public" eval="True"/>
<field name="name">s_product_catalog_default_image.jpg</field>
addons/website/static/src/img/snippets_demo/s_mega_menu_cards_default_image_1.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

addons/website/static/src/img/snippets_demo/s_mega_menu_cards_default_image_2.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

addons/website/static/src/img/snippets_demo/s_mega_menu_cards_default_image_3.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

addons/website/static/src/img/snippets_demo/s_mega_menu_cards_default_image_4.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

addons/website/static/src/img/snippets_demo/s_mega_menu_cards_default_image_5.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

addons/website/static/src/img/snippets_demo/s_mega_menu_cards_default_image_6.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

addons/website/static/src/img/snippets_demo/s_mega_menu_cards_default_image_7.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

addons/website/static/src/img/snippets_demo/s_mega_menu_cards_default_image_8.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 27 KiB

addons/website/static/src/img/snippets_demo/s_mega_menu_images_subtitles_default_image_1.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.5 KiB

addons/website/static/src/img/snippets_demo/s_mega_menu_images_subtitles_default_image_2.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.6 KiB

addons/website/static/src/img/snippets_demo/s_mega_menu_images_subtitles_default_image_3.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.0 KiB

addons/website/static/src/img/snippets_demo/s_mega_menu_images_subtitles_default_image_4.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.4 KiB

addons/website/static/src/img/snippets_demo/s_mega_menu_images_subtitles_default_image_5.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.2 KiB

addons/website/static/src/img/snippets_demo/s_mega_menu_images_subtitles_default_image_6.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.4 KiB

addons/website/static/src/img/snippets_demo/s_mega_menu_images_subtitles_default_image_7.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 34 KiB

addons/website/static/src/img/snippets_demo/s_mega_menu_menus_logos_default_image.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 95 KiB

addons/website/static/src/img/snippets_demo/s_mega_menu_menus_logos_default_logo_1.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.7 KiB

addons/website/static/src/img/snippets_demo/s_mega_menu_menus_logos_default_logo_2.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.7 KiB

addons/website/static/src/img/snippets_demo/s_mega_menu_menus_logos_default_logo_3.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

addons/website/static/src/img/snippets_demo/s_mega_menu_menus_logos_default_logo_4.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.4 KiB

addons/website/static/src/img/snippets_demo/s_mega_menu_menus_logos_default_logo_5.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.1 KiB

addons/website/static/src/img/snippets_demo/s_mega_menu_menus_logos_default_logo_6.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.6 KiB

addons/website/static/src/img/snippets_demo/s_mega_menu_thumbnails_default_image_1.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

addons/website/static/src/img/snippets_demo/s_mega_menu_thumbnails_default_image_10.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.3 KiB

addons/website/static/src/img/snippets_demo/s_mega_menu_thumbnails_default_image_11.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 30 KiB

addons/website/static/src/img/snippets_demo/s_mega_menu_thumbnails_default_image_2.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.5 KiB

addons/website/static/src/img/snippets_demo/s_mega_menu_thumbnails_default_image_3.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.5 KiB

addons/website/static/src/img/snippets_demo/s_mega_menu_thumbnails_default_image_4.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.2 KiB

addons/website/static/src/img/snippets_demo/s_mega_menu_thumbnails_default_image_5.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.7 KiB

addons/website/static/src/img/snippets_demo/s_mega_menu_thumbnails_default_image_6.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

addons/website/static/src/img/snippets_demo/s_mega_menu_thumbnails_default_image_7.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

addons/website/static/src/img/snippets_demo/s_mega_menu_thumbnails_default_image_8.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

addons/website/static/src/img/snippets_demo/s_mega_menu_thumbnails_default_image_9.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.7 KiB

addons/website/static/src/img/snippets_thumbs/s_mega_menu_big_icons_subtitles.svg
+121
View File
@@ -0,0 +1,121 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="82" height="60" viewBox="0 0 82 60">
<defs>
<linearGradient id="linearGradient-1" x1="0%" x2="100%" y1="0%" y2="100%">
<stop offset="0%" stop-color="#00A09D"/>
<stop offset="100%" stop-color="#00E2FF"/>
</linearGradient>
<rect id="path-2" width="5" height="2" x="0" y="0"/>
<path id="path-3" d="M5.6 3zm1.4-3v1H0v-1h7z"/>
<filter id="filter-4" width="107.1%" height="150%" x="-3.6%" y="-12.5%" filterUnits="objectBoundingBox">
<feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
<feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
<feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.0995137675 0"/>
</filter>
</defs>
<g fill="none" fill-rule="evenodd" class="snippets_thumbs">
<g class="s_mega_menu_big_icons_subtitles">
<rect width="82" height="60" class="bg"/>
<g class="group" transform="translate(15 14)">
<g class="group">
<circle cx="3" cy="3" r="3" fill="url(#linearGradient-1)" class="oval"/>
<g class="rectangle" transform="translate(7 1)">
<use fill="#000" filter="url(#filter-2)" xlink:href="#path-2"/>
<use fill="#FFF" fill-opacity=".78" xlink:href="#path-2"/>
</g>
<g class="combined_shape" transform="translate(7 4)">
<use fill="#000" filter="url(#filter-4)" xlink:href="#path-3"/>
<use fill="#FFF" fill-opacity=".348" xlink:href="#path-3"/>
</g>
</g>
<g class="group" transform="translate(19)">
<circle cx="3" cy="3" r="3" fill="url(#linearGradient-1)" class="oval"/>
<g class="rectangle" transform="translate(7 1)">
<use fill="#000" filter="url(#filter-2)" xlink:href="#path-2"/>
<use fill="#FFF" fill-opacity=".78" xlink:href="#path-2"/>
</g>
<g class="combined_shape" transform="translate(7 4)">
<use fill="#000" filter="url(#filter-4)" xlink:href="#path-3"/>
<use fill="#FFF" fill-opacity=".348" xlink:href="#path-3"/>
</g>
</g>
<g class="group" transform="translate(38)">
<circle cx="3" cy="3" r="3" fill="url(#linearGradient-1)" class="oval"/>
<g class="rectangle" transform="translate(7 1)">
<use fill="#000" filter="url(#filter-2)" xlink:href="#path-2"/>
<use fill="#FFF" fill-opacity=".78" xlink:href="#path-2"/>
</g>
<g class="combined_shape" transform="translate(7 4)">
<use fill="#000" filter="url(#filter-4)" xlink:href="#path-3"/>
<use fill="#FFF" fill-opacity=".348" xlink:href="#path-3"/>
</g>
</g>
<g class="group" transform="translate(0 12)">
<circle cx="3" cy="3" r="3" fill="url(#linearGradient-1)" class="oval"/>
<g class="rectangle" transform="translate(7 1)">
<use fill="#000" filter="url(#filter-2)" xlink:href="#path-2"/>
<use fill="#FFF" fill-opacity=".78" xlink:href="#path-2"/>
</g>
<g class="combined_shape" transform="translate(7 4)">
<use fill="#000" filter="url(#filter-4)" xlink:href="#path-3"/>
<use fill="#FFF" fill-opacity=".348" xlink:href="#path-3"/>
</g>
</g>
<g class="group" transform="translate(19 12)">
<circle cx="3" cy="3" r="3" fill="url(#linearGradient-1)" class="oval"/>
<g class="rectangle" transform="translate(7 1)">
<use fill="#000" filter="url(#filter-2)" xlink:href="#path-2"/>
<use fill="#FFF" fill-opacity=".78" xlink:href="#path-2"/>
</g>
<g class="combined_shape" transform="translate(7 4)">
<use fill="#000" filter="url(#filter-4)" xlink:href="#path-3"/>
<use fill="#FFF" fill-opacity=".348" xlink:href="#path-3"/>
</g>
</g>
<g class="group" transform="translate(38 12)">
<circle cx="3" cy="3" r="3" fill="url(#linearGradient-1)" class="oval"/>
<g class="rectangle" transform="translate(7 1)">
<use fill="#000" filter="url(#filter-2)" xlink:href="#path-2"/>
<use fill="#FFF" fill-opacity=".78" xlink:href="#path-2"/>
</g>
<g class="combined_shape" transform="translate(7 4)">
<use fill="#000" filter="url(#filter-4)" xlink:href="#path-3"/>
<use fill="#FFF" fill-opacity=".348" xlink:href="#path-3"/>
</g>
</g>
<g class="group" transform="translate(0 24)">
<circle cx="3" cy="3" r="3" fill="url(#linearGradient-1)" class="oval"/>
<g class="rectangle" transform="translate(7 1)">
<use fill="#000" filter="url(#filter-2)" xlink:href="#path-2"/>
<use fill="#FFF" fill-opacity=".78" xlink:href="#path-2"/>
</g>
<g class="combined_shape" transform="translate(7 4)">
<use fill="#000" filter="url(#filter-4)" xlink:href="#path-3"/>
<use fill="#FFF" fill-opacity=".348" xlink:href="#path-3"/>
</g>
</g>
<g class="group" transform="translate(19 24)">
<circle cx="3" cy="3" r="3" fill="url(#linearGradient-1)" class="oval"/>
<g class="rectangle" transform="translate(7 1)">
<use fill="#000" filter="url(#filter-2)" xlink:href="#path-2"/>
<use fill="#FFF" fill-opacity=".78" xlink:href="#path-2"/>
</g>
<g class="combined_shape" transform="translate(7 4)">
<use fill="#000" filter="url(#filter-4)" xlink:href="#path-3"/>
<use fill="#FFF" fill-opacity=".348" xlink:href="#path-3"/>
</g>
</g>
<g class="group" transform="translate(38 24)">
<circle cx="3" cy="3" r="3" fill="url(#linearGradient-1)" class="oval"/>
<g class="rectangle" transform="translate(7 1)">
<use fill="#000" filter="url(#filter-2)" xlink:href="#path-2"/>
<use fill="#FFF" fill-opacity=".78" xlink:href="#path-2"/>
</g>
<g class="combined_shape" transform="translate(7 4)">
<use fill="#000" filter="url(#filter-4)" xlink:href="#path-3"/>
<use fill="#FFF" fill-opacity=".348" xlink:href="#path-3"/>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 6.3 KiB

addons/website/static/src/img/snippets_thumbs/s_mega_menu_cards.svg
+170
View File
@@ -0,0 +1,170 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="82" height="60" viewBox="0 0 82 60">
<defs>
<rect id="path-1" width="14" height="2" x="0" y="0"/>
<filter id="filter-2" width="107.1%" height="200%" x="-3.6%" y="-25%" filterUnits="objectBoundingBox">
<feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
<feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
<feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.292012675 0"/>
</filter>
<path id="path-3" d="M13 6zm-1-3v1H2V3h10zm2-3v1H0V0h14z"/>
<filter id="filter-4" width="107.7%" height="128.6%" x="-3.8%" y="-7.1%" filterUnits="objectBoundingBox">
<feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
<feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
<feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.0995137675 0"/>
</filter>
<rect id="path-5" width="13" height="6" x="0" y="0"/>
<linearGradient id="linearGradient-6" x1="72.875%" x2="40.332%" y1="47.367%" y2="38.122%">
<stop offset="0%" stop-color="#008374"/>
<stop offset="100%" stop-color="#006A59"/>
</linearGradient>
<linearGradient id="linearGradient-7" x1="88.517%" x2="50%" y1="46.899%" y2="50%">
<stop offset="0%" stop-color="#00AA89"/>
<stop offset="100%" stop-color="#009989"/>
</linearGradient>
</defs>
<g fill="none" fill-rule="evenodd" class="snippets_thumbs">
<g class="s_mega_menu_cards">
<rect width="82" height="60" class="bg"/>
<g class="group" transform="translate(15 9)">
<g class="group">
<g class="image_1_border">
<rect width="14" height="7" fill="#FFF" class="rectangle"/>
<g class="oval___oval_mask" transform="translate(.472 .47)">
<mask id="mask-2" fill="#fff">
<use xlink:href="#path-5"/>
</mask>
<use fill="#79D1F2" class="mask" xlink:href="#path-5"/>
<ellipse cx="10.519" cy="1.394" fill="#F3EC60" class="oval" mask="url(#mask-2)" rx="2.594" ry="2.394"/>
<ellipse cx="10.821" cy="8.706" fill="url(#linearGradient-6)" class="oval" mask="url(#mask-2)" rx="11.085" ry="5.882"/>
<ellipse cx="-10.982" cy="10" fill="url(#linearGradient-7)" class="oval" mask="url(#mask-2)" rx="26.018" ry="8.471"/>
</g>
<path fill="#FFF" d="M14 0V7H0V0H14Zm0 1H1v5h12V1z" class="rectangle_2"/>
</g>
<g class="rectangle" transform="translate(0 10)">
<use fill="#000" filter="url(#filter-2)" xlink:href="#path-1"/>
<use fill="#FFF" fill-opacity=".78" xlink:href="#path-1"/>
</g>
<g class="combined_shape" transform="translate(0 14)">
<use fill="#000" filter="url(#filter-4)" xlink:href="#path-3"/>
<use fill="#FFF" fill-opacity=".348" xlink:href="#path-3"/>
</g>
</g>
<g class="group" transform="translate(19)">
<g class="image_1_border">
<rect width="14" height="7" fill="#FFF" class="rectangle"/>
<g class="oval___oval_mask" transform="translate(.472 .47)">
<mask id="mask-2" fill="#fff">
<use xlink:href="#path-5"/>
</mask>
<use fill="#79D1F2" class="mask" xlink:href="#path-5"/>
<ellipse cx="10.519" cy="1.394" fill="#F3EC60" class="oval" mask="url(#mask-2)" rx="2.594" ry="2.394"/>
<ellipse cx="10.821" cy="8.706" fill="url(#linearGradient-6)" class="oval" mask="url(#mask-2)" rx="11.085" ry="5.882"/>
<ellipse cx="-10.982" cy="10" fill="url(#linearGradient-7)" class="oval" mask="url(#mask-2)" rx="26.018" ry="8.471"/>
</g>
<path fill="#FFF" d="M14 0V7H0V0H14Zm0 1H1v5h12V1z" class="rectangle_2"/>
</g>
<g class="rectangle" transform="translate(0 10)">
<use fill="#000" filter="url(#filter-2)" xlink:href="#path-1"/>
<use fill="#FFF" fill-opacity=".78" xlink:href="#path-1"/>
</g>
<g class="combined_shape" transform="translate(0 14)">
<use fill="#000" filter="url(#filter-4)" xlink:href="#path-3"/>
<use fill="#FFF" fill-opacity=".348" xlink:href="#path-3"/>
</g>
</g>
<g class="group" transform="translate(39)">
<g class="image_1_border">
<rect width="14" height="7" fill="#FFF" class="rectangle"/>
<g class="oval___oval_mask" transform="translate(.472 .47)">
<mask id="mask-2" fill="#fff">
<use xlink:href="#path-5"/>
</mask>
<use fill="#79D1F2" class="mask" xlink:href="#path-5"/>
<ellipse cx="10.519" cy="1.394" fill="#F3EC60" class="oval" mask="url(#mask-2)" rx="2.594" ry="2.394"/>
<ellipse cx="10.821" cy="8.706" fill="url(#linearGradient-6)" class="oval" mask="url(#mask-2)" rx="11.085" ry="5.882"/>
<ellipse cx="-10.982" cy="10" fill="url(#linearGradient-7)" class="oval" mask="url(#mask-2)" rx="26.018" ry="8.471"/>
</g>
<path fill="#FFF" d="M14 0V7H0V0H14Zm0 1H1v5h12V1z" class="rectangle_2"/>
</g>
<g class="rectangle" transform="translate(0 10)">
<use fill="#000" filter="url(#filter-2)" xlink:href="#path-1"/>
<use fill="#FFF" fill-opacity=".78" xlink:href="#path-1"/>
</g>
<g class="combined_shape" transform="translate(0 14)">
<use fill="#000" filter="url(#filter-4)" xlink:href="#path-3"/>
<use fill="#FFF" fill-opacity=".348" xlink:href="#path-3"/>
</g>
</g>
<g class="group" transform="translate(0 23)">
<g class="image_1_border">
<rect width="14" height="7" fill="#FFF" class="rectangle"/>
<g class="oval___oval_mask" transform="translate(.472 .47)">
<mask id="mask-2" fill="#fff">
<use xlink:href="#path-5"/>
</mask>
<use fill="#79D1F2" class="mask" xlink:href="#path-5"/>
<ellipse cx="10.519" cy="1.394" fill="#F3EC60" class="oval" mask="url(#mask-2)" rx="2.594" ry="2.394"/>
<ellipse cx="10.821" cy="8.706" fill="url(#linearGradient-6)" class="oval" mask="url(#mask-2)" rx="11.085" ry="5.882"/>
<ellipse cx="-10.982" cy="10" fill="url(#linearGradient-7)" class="oval" mask="url(#mask-2)" rx="26.018" ry="8.471"/>
</g>
<path fill="#FFF" d="M14 0V7H0V0H14Zm0 1H1v5h12V1z" class="rectangle_2"/>
</g>
<g class="rectangle" transform="translate(0 10)">
<use fill="#000" filter="url(#filter-2)" xlink:href="#path-1"/>
<use fill="#FFF" fill-opacity=".78" xlink:href="#path-1"/>
</g>
<g class="combined_shape" transform="translate(0 14)">
<use fill="#000" filter="url(#filter-4)" xlink:href="#path-3"/>
<use fill="#FFF" fill-opacity=".348" xlink:href="#path-3"/>
</g>
</g>
<g class="group" transform="translate(19 23)">
<g class="image_1_border">
<rect width="14" height="7" fill="#FFF" class="rectangle"/>
<g class="oval___oval_mask" transform="translate(.472 .47)">
<mask id="mask-2" fill="#fff">
<use xlink:href="#path-5"/>
</mask>
<use fill="#79D1F2" class="mask" xlink:href="#path-5"/>
<ellipse cx="10.519" cy="1.394" fill="#F3EC60" class="oval" mask="url(#mask-2)" rx="2.594" ry="2.394"/>
<ellipse cx="10.821" cy="8.706" fill="url(#linearGradient-6)" class="oval" mask="url(#mask-2)" rx="11.085" ry="5.882"/>
<ellipse cx="-10.982" cy="10" fill="url(#linearGradient-7)" class="oval" mask="url(#mask-2)" rx="26.018" ry="8.471"/>
</g>
<path fill="#FFF" d="M14 0V7H0V0H14Zm0 1H1v5h12V1z" class="rectangle_2"/>
</g>
<g class="rectangle" transform="translate(0 10)">
<use fill="#000" filter="url(#filter-2)" xlink:href="#path-1"/>
<use fill="#FFF" fill-opacity=".78" xlink:href="#path-1"/>
</g>
<g class="combined_shape" transform="translate(0 14)">
<use fill="#000" filter="url(#filter-4)" xlink:href="#path-3"/>
<use fill="#FFF" fill-opacity=".348" xlink:href="#path-3"/>
</g>
</g>
<g class="group" transform="translate(39 23)">
<g class="image_1_border">
<rect width="14" height="7" fill="#FFF" class="rectangle"/>
<g class="oval___oval_mask" transform="translate(.472 .47)">
<mask id="mask-2" fill="#fff">
<use xlink:href="#path-5"/>
</mask>
<use fill="#79D1F2" class="mask" xlink:href="#path-5"/>
<ellipse cx="10.519" cy="1.394" fill="#F3EC60" class="oval" mask="url(#mask-2)" rx="2.594" ry="2.394"/>
<ellipse cx="10.821" cy="8.706" fill="url(#linearGradient-6)" class="oval" mask="url(#mask-2)" rx="11.085" ry="5.882"/>
<ellipse cx="-10.982" cy="10" fill="url(#linearGradient-7)" class="oval" mask="url(#mask-2)" rx="26.018" ry="8.471"/>
</g>
<path fill="#FFF" d="M14 0V7H0V0H14Zm0 1H1v5h12V1z" class="rectangle_2"/>
</g>
<g class="rectangle" transform="translate(0 10)">
<use fill="#000" filter="url(#filter-2)" xlink:href="#path-1"/>
<use fill="#FFF" fill-opacity=".78" xlink:href="#path-1"/>
</g>
<g class="combined_shape" transform="translate(0 14)">
<use fill="#000" filter="url(#filter-4)" xlink:href="#path-3"/>
<use fill="#FFF" fill-opacity=".348" xlink:href="#path-3"/>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 9.8 KiB

addons/website/static/src/img/snippets_thumbs/s_mega_menu_images_subtitles.svg
+197
View File
@@ -0,0 +1,197 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="82" height="60" viewBox="0 0 82 60">
<defs>
<rect id="path-1" width="6.535" height="6.535" x="0" y="0"/>
<rect id="path-2" width="5" height="2" x="0" y="0"/>
<path id="path-3" d="M5.6 3zm2.4-3v1H0v-1h7z"/>
<rect id="path-4" width="10.5" height="9.535" x="0" y="0"/>
<path id="path-5" d="M0 0L11 0 11 1 0 1M0 2L8 2 8 3 0 3M0 4L11 4 11 5 0 5"/>
<rect id="path-6" width="8" height="1" x="34" y="3"/>
<linearGradient id="linearGradient-7" x1="72.875%" x2="40.332%" y1="46.704%" y2="35.129%">
<stop offset="0%" stop-color="#008374"/>
<stop offset="100%" stop-color="#006A59"/>
</linearGradient>
<linearGradient id="linearGradient-8" x1="88.517%" x2="50%" y1="40.057%" y2="50%">
<stop offset="0%" stop-color="#00AA89"/>
<stop offset="100%" stop-color="#009989"/>
</linearGradient>
<linearGradient id="linearGradient-9" x1="72.875%" x2="40.332%" y1="46.704%" y2="35.129%">
<stop offset="0%" stop-color="#008374"/>
<stop offset="100%" stop-color="#006A59"/>
</linearGradient>
<linearGradient id="linearGradient-10" x1="88.517%" x2="50%" y1="40.057%" y2="50%">
<stop offset="0%" stop-color="#00AA89"/>
<stop offset="100%" stop-color="#009989"/>
</linearGradient>
<filter id="filter-11" width="107.1%" height="150%" x="-3.6%" y="-12.5%" filterUnits="objectBoundingBox">
<feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
<feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
<feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.0995137675 0"/>
</filter>
</defs>
<g fill="none" fill-rule="evenodd" class="snippets_thumbs">
<g class="s_mega_menu_images_subtitles">
<rect width="82" height="60" class="bg"/>
<g class="group" transform="translate(15 17)">
<g class="group">
<g class="image_1_border">
<rect width="6" height="6" fill="#FFF" class="rectangle"/>
<g class="oval___oval_mask" transform="translate(.25 .233)">
<mask id="mask-8" fill="#fff">
<use xlink:href="#path-1"/>
</mask>
<use fill="#79D1F2" class="mask" xlink:href="#path-1"/>
<ellipse cx="5.625" cy="2.442" fill="#F3EC60" class="oval" mask="url(#mask-8)" rx="1.875" ry="1.744"/>
<ellipse cx="12.625" cy="9.465" fill="url(#linearGradient-7)" class="oval" mask="url(#mask-8)" rx="5.875" ry="3.488"/>
<ellipse cx=".125" cy="9.581" fill="url(#linearGradient-8)" class="oval" mask="url(#mask-8)" rx="9.375" ry="5.465"/>
</g>
<path fill="#FFF" d="M7 0V7H0V0H7ZM6 1H1V6H6V1Z" class="rectangle_2"/>
</g>
<g class="rectangle" transform="translate(9 1)">
<use fill="#000" filter="url(#filter-2)" xlink:href="#path-2"/>
<use fill="#FFF" fill-opacity=".78" xlink:href="#path-2"/>
</g>
<g class="combined_shape" transform="translate(9 4)">
<use fill="#000" filter="url(#filter-11)" xlink:href="#path-3"/>
<use fill="#FFF" fill-opacity=".348" xlink:href="#path-3"/>
</g>
</g>
<g class="group" transform="translate(20)">
<g class="image_1_border">
<rect width="6" height="6" fill="#FFF" class="rectangle"/>
<g class="oval___oval_mask" transform="translate(.25 .233)">
<mask id="mask-8" fill="#fff">
<use xlink:href="#path-1"/>
</mask>
<use fill="#79D1F2" class="mask" xlink:href="#path-1"/>
<ellipse cx="5.625" cy="2.442" fill="#F3EC60" class="oval" mask="url(#mask-8)" rx="1.875" ry="1.744"/>
<ellipse cx="12.625" cy="9.465" fill="url(#linearGradient-7)" class="oval" mask="url(#mask-8)" rx="5.875" ry="3.488"/>
<ellipse cx=".125" cy="9.581" fill="url(#linearGradient-8)" class="oval" mask="url(#mask-8)" rx="9.375" ry="5.465"/>
</g>
<path fill="#FFF" d="M7 0V7H0V0H7ZM6 1H1V6H6V1Z" class="rectangle_2"/>
</g>
<g class="rectangle" transform="translate(9 1)">
<use fill="#000" filter="url(#filter-2)" xlink:href="#path-2"/>
<use fill="#FFF" fill-opacity=".78" xlink:href="#path-2"/>
</g>
<g class="combined_shape" transform="translate(9 4)">
<use fill="#000" filter="url(#filter-11)" xlink:href="#path-3"/>
<use fill="#FFF" fill-opacity=".348" xlink:href="#path-3"/>
</g>
</g>
<g class="group" transform="translate(0 9)">
<g class="image_1_border">
<rect width="6" height="6" fill="#FFF" class="rectangle"/>
<g class="oval___oval_mask" transform="translate(.25 .233)">
<mask id="mask-8" fill="#fff">
<use xlink:href="#path-1"/>
</mask>
<use fill="#79D1F2" class="mask" xlink:href="#path-1"/>
<ellipse cx="5.625" cy="2.442" fill="#F3EC60" class="oval" mask="url(#mask-8)" rx="1.875" ry="1.744"/>
<ellipse cx="12.625" cy="9.465" fill="url(#linearGradient-7)" class="oval" mask="url(#mask-8)" rx="5.875" ry="3.488"/>
<ellipse cx=".125" cy="9.581" fill="url(#linearGradient-8)" class="oval" mask="url(#mask-8)" rx="9.375" ry="5.465"/>
</g>
<path fill="#FFF" d="M7 0V7H0V0H7ZM6 1H1V6H6V1Z" class="rectangle_2"/>
</g>
<g class="rectangle" transform="translate(9 1)">
<use fill="#000" filter="url(#filter-2)" xlink:href="#path-2"/>
<use fill="#FFF" fill-opacity=".78" xlink:href="#path-2"/>
</g>
<g class="combined_shape" transform="translate(9 4)">
<use fill="#000" filter="url(#filter-11)" xlink:href="#path-3"/>
<use fill="#FFF" fill-opacity=".348" xlink:href="#path-3"/>
</g>
</g>
<g class="group" transform="translate(20 9)">
<g class="image_1_border">
<rect width="6" height="6" fill="#FFF" class="rectangle"/>
<g class="oval___oval_mask" transform="translate(.25 .233)">
<mask id="mask-8" fill="#fff">
<use xlink:href="#path-1"/>
</mask>
<use fill="#79D1F2" class="mask" xlink:href="#path-1"/>
<ellipse cx="5.625" cy="2.442" fill="#F3EC60" class="oval" mask="url(#mask-8)" rx="1.875" ry="1.744"/>
<ellipse cx="12.625" cy="9.465" fill="url(#linearGradient-7)" class="oval" mask="url(#mask-8)" rx="5.875" ry="3.488"/>
<ellipse cx=".125" cy="9.581" fill="url(#linearGradient-8)" class="oval" mask="url(#mask-8)" rx="9.375" ry="5.465"/>
</g>
<path fill="#FFF" d="M7 0V7H0V0H7ZM6 1H1V6H6V1Z" class="rectangle_2"/>
</g>
<g class="rectangle" transform="translate(9 1)">
<use fill="#000" filter="url(#filter-2)" xlink:href="#path-2"/>
<use fill="#FFF" fill-opacity=".78" xlink:href="#path-2"/>
</g>
<g class="combined_shape" transform="translate(9 4)">
<use fill="#000" filter="url(#filter-11)" xlink:href="#path-3"/>
<use fill="#FFF" fill-opacity=".348" xlink:href="#path-3"/>
</g>
</g>
<g class="group" transform="translate(0 18)">
<g class="image_1_border">
<rect width="6" height="6" fill="#FFF" class="rectangle"/>
<g class="oval___oval_mask" transform="translate(.25 .233)">
<mask id="mask-8" fill="#fff">
<use xlink:href="#path-1"/>
</mask>
<use fill="#79D1F2" class="mask" xlink:href="#path-1"/>
<ellipse cx="5.625" cy="2.442" fill="#F3EC60" class="oval" mask="url(#mask-8)" rx="1.875" ry="1.744"/>
<ellipse cx="12.625" cy="9.465" fill="url(#linearGradient-7)" class="oval" mask="url(#mask-8)" rx="5.875" ry="3.488"/>
<ellipse cx=".125" cy="9.581" fill="url(#linearGradient-8)" class="oval" mask="url(#mask-8)" rx="9.375" ry="5.465"/>
</g>
<path fill="#FFF" d="M7 0V7H0V0H7ZM6 1H1V6H6V1Z" class="rectangle_2"/>
</g>
<g class="rectangle" transform="translate(9 1)">
<use fill="#000" filter="url(#filter-2)" xlink:href="#path-2"/>
<use fill="#FFF" fill-opacity=".78" xlink:href="#path-2"/>
</g>
<g class="combined_shape" transform="translate(9 4)">
<use fill="#000" filter="url(#filter-11)" xlink:href="#path-3"/>
<use fill="#FFF" fill-opacity=".348" xlink:href="#path-3"/>
</g>
</g>
<g class="group" transform="translate(20 18)">
<g class="image_1_border">
<rect width="6" height="6" fill="#FFF" class="rectangle"/>
<g class="oval___oval_mask" transform="translate(.25 .233)">
<mask id="mask-8" fill="#fff">
<use xlink:href="#path-1"/>
</mask>
<use fill="#79D1F2" class="mask" xlink:href="#path-1"/>
<ellipse cx="5.625" cy="2.442" fill="#F3EC60" class="oval" mask="url(#mask-8)" rx="1.875" ry="1.744"/>
<ellipse cx="12.625" cy="9.465" fill="url(#linearGradient-7)" class="oval" mask="url(#mask-8)" rx="5.875" ry="3.488"/>
<ellipse cx=".125" cy="9.581" fill="url(#linearGradient-8)" class="oval" mask="url(#mask-8)" rx="9.375" ry="5.465"/>
</g>
<path fill="#FFF" d="M7 0V7H0V0H7ZM6 1H1V6H6V1Z" class="rectangle_2"/>
</g>
<g class="rectangle" transform="translate(9 1)">
<use fill="#000" filter="url(#filter-2)" xlink:href="#path-2"/>
<use fill="#FFF" fill-opacity=".78" xlink:href="#path-2"/>
</g>
<g class="combined_shape" transform="translate(9 4)">
<use fill="#000" filter="url(#filter-11)" xlink:href="#path-3"/>
<use fill="#FFF" fill-opacity=".348" xlink:href="#path-3"/>
</g>
</g>
<g class="image_2_border" transform="translate(42)">
<rect width="11" height="10" fill="#FFF" class="rectangle"/>
<g class="oval___oval_mask" transform="translate(.25 .233)">
<mask id="mask-9" fill="#fff">
<use xlink:href="#path-4"/>
</mask>
<use fill="#79D1F2" class="mask" xlink:href="#path-4"/>
<ellipse cx="9.625" cy="2.442" fill="#F3EC60" class="oval" mask="url(#mask-9)" rx="1.875" ry="1.744"/>
<ellipse cx="12.625" cy="10.465" fill="url(#linearGradient-9)" class="oval" mask="url(#mask-9)" rx="5.875" ry="3.488"/>
<ellipse cx=".125" cy="10.581" fill="url(#linearGradient-10)" class="oval" mask="url(#mask-9)" rx="9.375" ry="5.465"/>
</g>
<path fill="#FFF" d="M11 0v10H0V0h11zm-11 1H1v8h9V1z" class="rectangle_2"/>
</g>
<g class="combined_shape" transform="translate(42 16)">
<use fill="#000" filter="url(#filter-12)" xlink:href="#path-5"/>
<use fill="#FFF" fill-opacity=".348" xlink:href="#path-5"/>
</g>
<g class="rectangle_copy" transform="translate(8 10)">
<use fill="#000" filter="url(#filter-11)" xlink:href="#path-6"/>
<use fill="#FFF" fill-opacity=".78" xlink:href="#path-6"/>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

addons/website/static/src/img/snippets_thumbs/s_mega_menu_little_icons.svg
+84
View File
@@ -0,0 +1,84 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="82" height="60" viewBox="0 0 82 60">
<defs>
<linearGradient id="linearGradient-1" x1="0%" x2="100%" y1="0%" y2="100%">
<stop offset="0%" stop-color="#00A09D"/>
<stop offset="100%" stop-color="#00E2FF"/>
</linearGradient>
<rect id="path-2" width="4" height="2" x="0" y="0"/>
<path id="path-3" d="M0 0L11 0 11 1 0 1M0 2L8 2 8 3 0 3M0 4L11 4 11 5 0 5"/>
<filter id="filter-4" width="105.6%" height="128.6%" x="-2.8%" y="-7.1%" filterUnits="objectBoundingBox">
<feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
<feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
<feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.0995137675 0"/>
</filter>
<rect id="path-5" width="10" height="1" x="34" y="3"/>
<filter id="filter-6" width="104.8%" height="300%" x="-2.4%" y="-50%" filterUnits="objectBoundingBox">
<feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
<feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
<feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.292012675 0"/>
</filter>
</defs>
<g fill="none" fill-rule="evenodd" class="snippets_thumbs">
<g class="s_mega_menu_little_icons">
<rect width="82" height="60" class="bg"/>
<g class="group" transform="translate(15 21)">
<g class="group" transform="translate(0 1)">
<circle cx="2" cy="2" r="2" fill="url(#linearGradient-1)" class="oval"/>
<g class="rectangle" transform="translate(5 1)">
<use fill="#000" filter="url(#filter-2)" xlink:href="#path-2"/>
<use fill="#FFF" fill-opacity=".78" xlink:href="#path-2"/>
</g>
<circle cx="2" cy="2" r="2" transform="translate(12)" fill="url(#linearGradient-1)" class="oval"/>
<g class="rectangle" transform="translate(17 1)">
<use fill="#000" filter="url(#filter-2)" xlink:href="#path-2"/>
<use fill="#FFF" fill-opacity=".78" xlink:href="#path-2"/>
</g>
<circle cx="2" cy="2" r="2" transform="translate(24)" fill="url(#linearGradient-1)" class="oval"/>
<g class="rectangle" transform="translate(29 1)">
<use fill="#000" filter="url(#filter-2)" xlink:href="#path-2"/>
<use fill="#FFF" fill-opacity=".78" xlink:href="#path-2"/>
</g>
<circle cx="2" cy="2" r="2" transform="translate(0 6)" fill="url(#linearGradient-1)" class="oval"/>
<g class="rectangle" transform="translate(6 7)">
<use fill="#000" filter="url(#filter-2)" xlink:href="#path-2"/>
<use fill="#FFF" fill-opacity=".78" xlink:href="#path-2"/>
</g>
<circle cx="2" cy="2" r="2" transform="translate(12 6)" fill="url(#linearGradient-1)" class="oval"/>
<g class="rectangle" transform="translate(17 7)">
<use fill="#000" filter="url(#filter-2)" xlink:href="#path-2"/>
<use fill="#FFF" fill-opacity=".78" xlink:href="#path-2"/>
</g>
<circle cx="2" cy="2" r="2" transform="translate(24 6)" fill="url(#linearGradient-1)" class="oval"/>
<g class="rectangle" transform="translate(29 7)">
<use fill="#000" filter="url(#filter-2)" xlink:href="#path-2"/>
<use fill="#FFF" fill-opacity=".78" xlink:href="#path-2"/>
</g>
<circle cx="2" cy="2" r="2" transform="translate(0 12)" fill="url(#linearGradient-1)" class="oval"/>
<g class="rectangle" transform="translate(6 13)">
<use fill="#000" filter="url(#filter-2)" xlink:href="#path-2"/>
<use fill="#FFF" fill-opacity=".78" xlink:href="#path-2"/>
</g>
<circle cx="2" cy="2" r="2" transform="translate(12 12)" fill="url(#linearGradient-1)" class="oval"/>
<g class="rectangle" transform="translate(17 13)">
<use fill="#000" filter="url(#filter-2)" xlink:href="#path-2"/>
<use fill="#FFF" fill-opacity=".78" xlink:href="#path-2"/>
</g>
<circle cx="2" cy="2" r="2" transform="translate(24 12)" fill="url(#linearGradient-1)" class="oval"/>
<g class="rectangle" transform="translate(29 13)">
<use fill="#000" filter="url(#filter-2)" xlink:href="#path-2"/>
<use fill="#FFF" fill-opacity=".78" xlink:href="#path-2"/>
</g>
</g>
<rect width="17" height="18" fill="#D8D8D8" class="rectangle" opacity=".219" transform="translate(36)"/>
<g class="combined_shape" transform="translate(39 7)">
<use fill="#000" filter="url(#filter-12)" xlink:href="#path-3"/>
<use fill="#FFF" fill-opacity=".348" xlink:href="#path-3"/>
</g>
<g class="rectangle_copy" transform="translate(5)">
<use fill="#000" filter="url(#filter-6)" xlink:href="#path-5"/>
<use fill="#FFF" fill-opacity=".78" xlink:href="#path-5"/>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 5.1 KiB

addons/website/static/src/img/snippets_thumbs/s_mega_menu_menus_logos.svg
+167
View File
@@ -0,0 +1,167 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="82" height="60" viewBox="0 0 82 60">
<defs>
<rect id="path-1" width="8" height="2" x="0" y="0"/>
<filter id="filter-2" width="107.1%" height="200%" x="-3.6%" y="-25%" filterUnits="objectBoundingBox">
<feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
<feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
<feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.292012675 0"/>
</filter>
<path id="path-3" d="M0 0L7 0 7 1 0 1M0 3L4 3 4 4 0 4M0 6L7 6 7 7 0 7"/>
<filter id="filter-4" width="107.7%" height="128.6%" x="-3.8%" y="-7.1%" filterUnits="objectBoundingBox">
<feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
<feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
<feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.0995137675 0"/>
</filter>
<rect id="path-5" width="10.5" height="9.535" x="0" y="0"/>
<rect id="path-6" width="9" height="2" x="0" y="0"/>
<linearGradient id="linearGradient-7" x1="72.875%" x2="40.332%" y1="46.704%" y2="35.129%">
<stop offset="0%" stop-color="#008374"/>
<stop offset="100%" stop-color="#006A59"/>
</linearGradient>
<linearGradient id="linearGradient-8" x1="88.517%" x2="50%" y1="40.057%" y2="50%">
<stop offset="0%" stop-color="#00AA89"/>
<stop offset="100%" stop-color="#009989"/>
</linearGradient>
<rect id="path-9" width="6.535" height="6.535" x="0" y="0"/>
</defs>
<g fill="none" fill-rule="evenodd" class="snippets_thumbs">
<g class="s_mega_menu_menus_logos">
<rect width="82" height="60" class="bg"/>
<g class="group" transform="translate(15 10)">
<g class="group">
<g class="rectangle">
<use fill="#000" filter="url(#filter-2)" xlink:href="#path-1"/>
<use fill="#FFF" fill-opacity=".78" xlink:href="#path-1"/>
</g>
<g class="combined_shape" transform="translate(0 4)">
<use fill="#000" filter="url(#filter-4)" xlink:href="#path-3"/>
<use fill="#FFF" fill-opacity=".348" xlink:href="#path-3"/>
</g>
</g>
<g class="group" transform="translate(12)">
<g class="rectangle">
<use fill="#000" filter="url(#filter-2)" xlink:href="#path-1"/>
<use fill="#FFF" fill-opacity=".78" xlink:href="#path-1"/>
</g>
<g class="combined_shape" transform="translate(0 4)">
<use fill="#000" filter="url(#filter-4)" xlink:href="#path-3"/>
<use fill="#FFF" fill-opacity=".348" xlink:href="#path-3"/>
</g>
</g>
<g class="group" transform="translate(24)">
<g class="rectangle">
<use fill="#000" filter="url(#filter-2)" xlink:href="#path-1"/>
<use fill="#FFF" fill-opacity=".78" xlink:href="#path-1"/>
</g>
<g class="combined_shape" transform="translate(0 4)">
<use fill="#000" filter="url(#filter-4)" xlink:href="#path-3"/>
<use fill="#FFF" fill-opacity=".348" xlink:href="#path-3"/>
</g>
</g>
<g class="group" transform="translate(0 15)">
<g class="rectangle">
<use fill="#000" filter="url(#filter-2)" xlink:href="#path-1"/>
<use fill="#FFF" fill-opacity=".78" xlink:href="#path-1"/>
</g>
<g class="combined_shape" transform="translate(0 4)">
<use fill="#000" filter="url(#filter-4)" xlink:href="#path-3"/>
<use fill="#FFF" fill-opacity=".348" xlink:href="#path-3"/>
</g>
</g>
<g class="group" transform="translate(12 15)">
<g class="rectangle">
<use fill="#000" filter="url(#filter-2)" xlink:href="#path-1"/>
<use fill="#FFF" fill-opacity=".78" xlink:href="#path-1"/>
</g>
<g class="combined_shape" transform="translate(0 4)">
<use fill="#000" filter="url(#filter-4)" xlink:href="#path-3"/>
<use fill="#FFF" fill-opacity=".348" xlink:href="#path-3"/>
</g>
</g>
<g class="group" transform="translate(24 15)">
<g class="rectangle">
<use fill="#000" filter="url(#filter-2)" xlink:href="#path-1"/>
<use fill="#FFF" fill-opacity=".78" xlink:href="#path-1"/>
</g>
<g class="combined_shape" transform="translate(0 4)">
<use fill="#000" filter="url(#filter-4)" xlink:href="#path-3"/>
<use fill="#FFF" fill-opacity=".348" xlink:href="#path-3"/>
</g>
</g>
<rect width="17" height="29" fill="#D8D8D8" class="rectangle" opacity=".219" transform="translate(36)"/>
<g class="group" transform="translate(39 6)">
<g class="image_1_border" transform="">
<rect width="11" height="10" fill="#FFF" class="rectangle"/>
<g class="oval___oval_mask" transform="translate(.25 .233)">
<mask id="mask-9" fill="#fff">
<use xlink:href="#path-5"/>
</mask>
<use fill="#79D1F2" class="mask" xlink:href="#path-5"/>
<ellipse cx="9.625" cy="2.442" fill="#F3EC60" class="oval" mask="url(#mask-9)" rx="1.875" ry="1.744"/>
<ellipse cx="12.625" cy="10.465" fill="url(#linearGradient-7)" class="oval" mask="url(#mask-9)" rx="5.875" ry="3.488"/>
<ellipse cx=".125" cy="10.581" fill="url(#linearGradient-8)" class="oval" mask="url(#mask-9)" rx="9.375" ry="5.465"/>
</g>
<path fill="#FFF" d="M11 0v10H0V0h11zm-11 1H1v8h9V1z" class="rectangle_2"/>
</g>
<g class="rectangle" transform="translate(1 13)">
<use fill="#000" filter="url(#filter-2)" xlink:href="#path-6"/>
<use fill="#FFF" fill-opacity=".78" xlink:href="#path-6"/>
</g>
</g>
<rect width="53" height="1" fill="#D8D8D8" class="rectangle_bg" opacity=".219" transform="translate(0 29)"/>
<g class="image_1_border" transform="translate(0 33)">
<rect width="6" height="6" fill="#FFF" class="rectangle"/>
<g class="oval___oval_mask" transform="translate(.25 .233)">
<mask id="mask-8" fill="#fff">
<use xlink:href="#path-9"/>
</mask>
<use fill="#79D1F2" class="mask" xlink:href="#path-9"/>
<ellipse cx="5.625" cy="2.442" fill="#F3EC60" class="oval" mask="url(#mask-8)" rx="1.875" ry="1.744"/>
<ellipse cx="12.625" cy="9.465" fill="url(#linearGradient-7)" class="oval" mask="url(#mask-8)" rx="5.875" ry="3.488"/>
<ellipse cx=".125" cy="9.581" fill="url(#linearGradient-8)" class="oval" mask="url(#mask-8)" rx="9.375" ry="5.465"/>
</g>
<path fill="#FFF" d="M7 0V7H0V0H7ZM6 1H1V6H6V1Z" class="rectangle_2"/>
</g>
<g class="image_1_border" transform="translate(15 33)">
<rect width="6" height="6" fill="#FFF" class="rectangle"/>
<g class="oval___oval_mask" transform="translate(.25 .233)">
<mask id="mask-8" fill="#fff">
<use xlink:href="#path-9"/>
</mask>
<use fill="#79D1F2" class="mask" xlink:href="#path-9"/>
<ellipse cx="5.625" cy="2.442" fill="#F3EC60" class="oval" mask="url(#mask-8)" rx="1.875" ry="1.744"/>
<ellipse cx="12.625" cy="9.465" fill="url(#linearGradient-7)" class="oval" mask="url(#mask-8)" rx="5.875" ry="3.488"/>
<ellipse cx=".125" cy="9.581" fill="url(#linearGradient-8)" class="oval" mask="url(#mask-8)" rx="9.375" ry="5.465"/>
</g>
<path fill="#FFF" d="M7 0V7H0V0H7ZM6 1H1V6H6V1Z" class="rectangle_2"/>
</g>
<g class="image_1_border" transform="translate(31 33)">
<rect width="6" height="6" fill="#FFF" class="rectangle"/>
<g class="oval___oval_mask" transform="translate(.25 .233)">
<mask id="mask-8" fill="#fff">
<use xlink:href="#path-9"/>
</mask>
<use fill="#79D1F2" class="mask" xlink:href="#path-9"/>
<ellipse cx="5.625" cy="2.442" fill="#F3EC60" class="oval" mask="url(#mask-8)" rx="1.875" ry="1.744"/>
<ellipse cx="12.625" cy="9.465" fill="url(#linearGradient-7)" class="oval" mask="url(#mask-8)" rx="5.875" ry="3.488"/>
<ellipse cx=".125" cy="9.581" fill="url(#linearGradient-8)" class="oval" mask="url(#mask-8)" rx="9.375" ry="5.465"/>
</g>
<path fill="#FFF" d="M7 0V7H0V0H7ZM6 1H1V6H6V1Z" class="rectangle_2"/>
</g>
<g class="image_1_border" transform="translate(46 33)">
<rect width="6" height="6" fill="#FFF" class="rectangle"/>
<g class="oval___oval_mask" transform="translate(.25 .233)">
<mask id="mask-8" fill="#fff">
<use xlink:href="#path-9"/>
</mask>
<use fill="#79D1F2" class="mask" xlink:href="#path-9"/>
<ellipse cx="5.625" cy="2.442" fill="#F3EC60" class="oval" mask="url(#mask-8)" rx="1.875" ry="1.744"/>
<ellipse cx="12.625" cy="9.465" fill="url(#linearGradient-7)" class="oval" mask="url(#mask-8)" rx="5.875" ry="3.488"/>
<ellipse cx=".125" cy="9.581" fill="url(#linearGradient-8)" class="oval" mask="url(#mask-8)" rx="9.375" ry="5.465"/>
</g>
<path fill="#FFF" d="M7 0V7H0V0H7ZM6 1H1V6H6V1Z" class="rectangle_2"/>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 9.5 KiB

addons/website/static/src/img/snippets_thumbs/s_mega_menu_odoo_menu.svg
+85
View File
@@ -0,0 +1,85 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="82" height="60" viewBox="0 0 82 60">
<defs>
<rect id="path-1" width="14" height="2" x="0" y="0"/>
<filter id="filter-2" width="107.1%" height="200%" x="-3.6%" y="-25%" filterUnits="objectBoundingBox">
<feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
<feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
<feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.292012675 0"/>
</filter>
<path id="path-3" d="M13 12v1H0v-1h13zm-2-3v1H0V9h11zm2-3v1H0V6h13z"/>
<filter id="filter-4" width="107.7%" height="128.6%" x="-3.8%" y="-7.1%" filterUnits="objectBoundingBox">
<feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
<feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
<feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.0995137675 0"/>
</filter>
<rect id="path-5" width="14" height="2" x="20" y="0"/>
<filter id="filter-6" width="107.1%" height="200%" x="-3.6%" y="-25%" filterUnits="objectBoundingBox">
<feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
<feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
<feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.292012675 0"/>
</filter>
<path id="path-7" d="M33 12v1H20v-1h13zm-2-3v1H20V9h11zm2-3v1H20V6h13z"/>
<filter id="filter-8" width="107.7%" height="128.6%" x="-3.8%" y="-7.1%" filterUnits="objectBoundingBox">
<feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
<feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
<feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.0995137675 0"/>
</filter>
<rect id="path-9" width="14" height="2" x="39" y="0"/>
<filter id="filter-10" width="107.1%" height="200%" x="-3.6%" y="-25%" filterUnits="objectBoundingBox">
<feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
<feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
<feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.292012675 0"/>
</filter>
<path id="path-11" d="M52 12v1H39v-1h13zm-2-3v1H39V9h11zm2-3v1H39V6h13z"/>
<filter id="filter-12" width="107.7%" height="128.6%" x="-3.8%" y="-7.1%" filterUnits="objectBoundingBox">
<feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
<feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
<feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.0995137675 0"/>
</filter>
<linearGradient id="linearGradient-13" x1="0%" x2="100%" y1="0%" y2="100%">
<stop offset="0%" stop-color="#00A09D"/>
<stop offset="100%" stop-color="#00E2FF"/>
</linearGradient>
</defs>
<g fill="none" fill-rule="evenodd" class="snippets_thumbs">
<g class="s_mega_menu_odoo_menu">
<rect width="82" height="60" class="bg"/>
<g class="group" transform="translate(15 17)">
<g class="rectangle">
<use fill="#000" filter="url(#filter-2)" xlink:href="#path-1"/>
<use fill="#FFF" fill-opacity=".78" xlink:href="#path-1"/>
</g>
<rect width="14" height="1" class="rectangle" fill="url(#linearGradient-13)" transform="translate(0 4)"/>
<g class="combined_shape" transform="translate(0 3)">
<use fill="#000" filter="url(#filter-4)" xlink:href="#path-3"/>
<use fill="#FFF" fill-opacity=".348" xlink:href="#path-3"/>
</g>
<g class="rectangle">
<use fill="#000" filter="url(#filter-6)" xlink:href="#path-5"/>
<use fill="#FFF" fill-opacity=".78" xlink:href="#path-5"/>
</g>
<rect width="14" height="1" class="rectangle" fill="url(#linearGradient-13)" transform="translate(20 4)"/>
<g class="combined_shape" transform="translate(0 3)">
<use fill="#000" filter="url(#filter-8)" xlink:href="#path-7"/>
<use fill="#FFF" fill-opacity=".348" xlink:href="#path-7"/>
</g>
<g class="rectangle">
<use fill="#000" filter="url(#filter-10)" xlink:href="#path-9"/>
<use fill="#FFF" fill-opacity=".78" xlink:href="#path-9"/>
</g>
<rect width="14" height="1" class="rectangle" fill="url(#linearGradient-13)" transform="translate(39 4)"/>
<g class="combined_shape" transform="translate(0 3)">
<use fill="#000" filter="url(#filter-12)" xlink:href="#path-11"/>
<use fill="#FFF" fill-opacity=".348" xlink:href="#path-11"/>
</g>
<g class="group" transform="translate(12 22)">
<circle cx="2" cy="2" r="2" fill="url(#linearGradient-13)" class="oval"/>
<circle cx="2" cy="2" r="2" fill="url(#linearGradient-13)" class="oval" transform="translate(6)"/>
<circle cx="2" cy="2" r="2" fill="url(#linearGradient-13)" class="oval" transform="translate(12)"/>
<circle cx="2" cy="2" r="2" fill="url(#linearGradient-13)" class="oval" transform="translate(18)"/>
<circle cx="2" cy="2" r="2" fill="url(#linearGradient-13)" class="oval" transform="translate(24)"/>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 5.5 KiB

addons/website/static/src/img/snippets_thumbs/s_mega_menu_thumbnails.svg
+148
View File
@@ -0,0 +1,148 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="82" height="60" viewBox="0 0 82 60">
<defs>
<rect id="path-1" width="12" height="2" x="0" y="0"/>
<filter id="filter-2" width="107.7%" height="200%" x="-3.8%" y="-25%" filterUnits="objectBoundingBox">
<feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
<feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
<feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.292012675 0"/>
</filter>
<rect id="path-3" width="15.059" height="19.07" x="0" y="0"/>
<rect id="path-4" width="9.535" height="9.535" x="0" y="0"/>
<linearGradient id="linearGradient-5" x1="72.875%" x2="40.332%" y1="46.704%" y2="35.129%">
<stop offset="0%" stop-color="#008374"/>
<stop offset="100%" stop-color="#006A59"/>
</linearGradient>
<linearGradient id="linearGradient-6" x1="88.517%" x2="50%" y1="40.057%" y2="50%">
<stop offset="0%" stop-color="#00AA89"/>
<stop offset="100%" stop-color="#009989"/>
</linearGradient>
<linearGradient id="linearGradient-7" x1="72.875%" x2="40.332%" y1="46.279%" y2="33.212%">
<stop offset="0%" stop-color="#008374"/>
<stop offset="100%" stop-color="#006A59"/>
</linearGradient>
<linearGradient id="linearGradient-8" x1="88.517%" x2="50%" y1="38.775%" y2="50%">
<stop offset="0%" stop-color="#00AA89"/>
<stop offset="100%" stop-color="#009989"/>
</linearGradient>
<rect id="path-9" width="6" height="2" x="0" y="0"/>
</defs>
<g fill="none" fill-rule="evenodd" class="snippets_thumbs">
<g class="s_mega_menu_thumbnails">
<rect width="82" height="60" class="bg"/>
<g class="group" transform="translate(15 11)">
<g class="image_1_border">
<rect width="10" height="10" fill="#FFF" class="rectangle"/>
<g class="oval___oval_mask" transform="translate(.25 .233)">
<mask id="mask-8" fill="#fff">
<use xlink:href="#path-4"/>
</mask>
<use fill="#79D1F2" class="mask" xlink:href="#path-4"/>
<ellipse cx="8.625" cy="2.442" fill="#F3EC60" class="oval" mask="url(#mask-8)" rx="1.875" ry="1.744"/>
<ellipse cx="12.625" cy="10.465" fill="url(#linearGradient-5)" class="oval" mask="url(#mask-8)" rx="5.875" ry="3.488"/>
<ellipse cx=".125" cy="10.581" fill="url(#linearGradient-6)" class="oval" mask="url(#mask-8)" rx="9.375" ry="5.465"/>
</g>
<path fill="#FFF" d="M10 0v10H0V0h10zm-4 1H1v8h8V1z" class="rectangle_2"/>
</g>
<g class="image_1_border" transform="translate(12)">
<rect width="10" height="10" fill="#FFF" class="rectangle"/>
<g class="oval___oval_mask" transform="translate(.25 .233)">
<mask id="mask-8" fill="#fff">
<use xlink:href="#path-4"/>
</mask>
<use fill="#79D1F2" class="mask" xlink:href="#path-4"/>
<ellipse cx="8.625" cy="2.442" fill="#F3EC60" class="oval" mask="url(#mask-8)" rx="1.875" ry="1.744"/>
<ellipse cx="12.625" cy="10.465" fill="url(#linearGradient-5)" class="oval" mask="url(#mask-8)" rx="5.875" ry="3.488"/>
<ellipse cx=".125" cy="10.581" fill="url(#linearGradient-6)" class="oval" mask="url(#mask-8)" rx="9.375" ry="5.465"/>
</g>
<path fill="#FFF" d="M10 0v10H0V0h10zm-4 1H1v8h8V1z" class="rectangle_2"/>
</g>
<g class="image_1_border" transform="translate(24)">
<rect width="10" height="10" fill="#FFF" class="rectangle"/>
<g class="oval___oval_mask" transform="translate(.25 .233)">
<mask id="mask-8" fill="#fff">
<use xlink:href="#path-4"/>
</mask>
<use fill="#79D1F2" class="mask" xlink:href="#path-4"/>
<ellipse cx="8.625" cy="2.442" fill="#F3EC60" class="oval" mask="url(#mask-8)" rx="1.875" ry="1.744"/>
<ellipse cx="12.625" cy="10.465" fill="url(#linearGradient-5)" class="oval" mask="url(#mask-8)" rx="5.875" ry="3.488"/>
<ellipse cx=".125" cy="10.581" fill="url(#linearGradient-6)" class="oval" mask="url(#mask-8)" rx="9.375" ry="5.465"/>
</g>
<path fill="#FFF" d="M10 0v10H0V0h10zm-4 1H1v8h8V1z" class="rectangle_2"/>
</g>
<g class="image_1_border" transform="translate(0 15)">
<rect width="10" height="10" fill="#FFF" class="rectangle"/>
<g class="oval___oval_mask" transform="translate(.25 .233)">
<mask id="mask-8" fill="#fff">
<use xlink:href="#path-4"/>
</mask>
<use fill="#79D1F2" class="mask" xlink:href="#path-4"/>
<ellipse cx="8.625" cy="2.442" fill="#F3EC60" class="oval" mask="url(#mask-8)" rx="1.875" ry="1.744"/>
<ellipse cx="12.625" cy="10.465" fill="url(#linearGradient-5)" class="oval" mask="url(#mask-8)" rx="5.875" ry="3.488"/>
<ellipse cx=".125" cy="10.581" fill="url(#linearGradient-6)" class="oval" mask="url(#mask-8)" rx="9.375" ry="5.465"/>
</g>
<path fill="#FFF" d="M10 0v10H0V0h10zm-4 1H1v8h8V1z" class="rectangle_2"/>
</g>
<g class="image_1_border" transform="translate(12 15)">
<rect width="10" height="10" fill="#FFF" class="rectangle"/>
<g class="oval___oval_mask" transform="translate(.25 .233)">
<mask id="mask-8" fill="#fff">
<use xlink:href="#path-4"/>
</mask>
<use fill="#79D1F2" class="mask" xlink:href="#path-4"/>
<ellipse cx="8.625" cy="2.442" fill="#F3EC60" class="oval" mask="url(#mask-8)" rx="1.875" ry="1.744"/>
<ellipse cx="12.625" cy="10.465" fill="url(#linearGradient-5)" class="oval" mask="url(#mask-8)" rx="5.875" ry="3.488"/>
<ellipse cx=".125" cy="10.581" fill="url(#linearGradient-6)" class="oval" mask="url(#mask-8)" rx="9.375" ry="5.465"/>
</g>
<path fill="#FFF" d="M10 0v10H0V0h10zm-4 1H1v8h8V1z" class="rectangle_2"/>
</g>
<g class="image_1_border" transform="translate(24 15)">
<rect width="10" height="10" fill="#FFF" class="rectangle"/>
<g class="oval___oval_mask" transform="translate(.25 .233)">
<mask id="mask-8" fill="#fff">
<use xlink:href="#path-4"/>
</mask>
<use fill="#79D1F2" class="mask" xlink:href="#path-4"/>
<ellipse cx="8.625" cy="2.442" fill="#F3EC60" class="oval" mask="url(#mask-8)" rx="1.875" ry="1.744"/>
<ellipse cx="12.625" cy="10.465" fill="url(#linearGradient-5)" class="oval" mask="url(#mask-8)" rx="5.875" ry="3.488"/>
<ellipse cx=".125" cy="10.581" fill="url(#linearGradient-6)" class="oval" mask="url(#mask-8)" rx="9.375" ry="5.465"/>
</g>
<path fill="#FFF" d="M10 0v10H0V0h10zm-4 1H1v8h8V1z" class="rectangle_2"/>
</g>
<g class="image_2_border" transform="translate(37)">
<rect width="16" height="20" fill="#FFF" class="rectangle"/>
<g class="oval___oval_mask" transform="translate(.47 .465)">
<mask id="mask-6" fill="#fff">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#path-3"/>
</mask>
<use fill="#79D1F2" class="mask" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#path-3"/>
<ellipse cx="9.647" cy="4.884" fill="#F3EC60" class="oval" mask="url(#mask-6)" rx="3.529" ry="3.488"/>
<ellipse cx="15.294" cy="20.93" fill="url(#linearGradient-7)" class="oval" mask="url(#mask-6)" rx="11.059" ry="6.977"/>
<ellipse cx="-8.235" cy="21.163" fill="url(#linearGradient-8)" class="oval" mask="url(#mask-6)" rx="17.647" ry="10.93"/>
</g>
<path fill="#FFF" d="M16 0v20H0V0h16zm-1 1H1v18h14V1z" class="rectangle_2"/>
</g>
<g class="rectangle" transform="translate(39 23)">
<use fill="#000" filter="url(#filter-2)" xlink:href="#path-1"/>
<use fill="#FFF" fill-opacity=".78" xlink:href="#path-1"/>
</g>
<rect width="53" height="8" fill="#D8D8D8" class="rectangle_bg" opacity=".219" transform="translate(0 29)"/>
<g class="rectangle" transform="translate(6 32)">
<use fill="#000" filter="url(#filter-2)" xlink:href="#path-9"/>
<use fill="#FFF" fill-opacity=".78" xlink:href="#path-9"/>
</g>
<g class="rectangle" transform="translate(18 32)">
<use fill="#000" filter="url(#filter-2)" xlink:href="#path-9"/>
<use fill="#FFF" fill-opacity=".78" xlink:href="#path-9"/>
</g>
<g class="rectangle" transform="translate(30 32)">
<use fill="#000" filter="url(#filter-2)" xlink:href="#path-9"/>
<use fill="#FFF" fill-opacity=".78" xlink:href="#path-9"/>
</g>
<g class="rectangle" transform="translate(42 32)">
<use fill="#000" filter="url(#filter-2)" xlink:href="#path-9"/>
<use fill="#FFF" fill-opacity=".78" xlink:href="#path-9"/>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 9.0 KiB

addons/website/static/src/snippets/s_mega_menu_cards/000.scss
+8
View File
@@ -0,0 +1,8 @@
.s_mega_menu_cards:not([data-vcss]) {
.nav-link {
@include hover-focus {
background: rgba(0, 0, 0, .05);
}
}
}
addons/website/static/src/snippets/s_mega_menu_images_subtitles/000.scss
+12
View File
@@ -0,0 +1,12 @@
.s_mega_menu_images_subtitles:not([data-vcss]) {
.media img {
max-width: 64px;
}
.nav-link {
@include hover-focus {
background: rgba(0, 0, 0, .05);
}
}
}
addons/website/static/src/snippets/s_mega_menu_little_icons/000.scss
+26
View File
@@ -0,0 +1,26 @@
.s_mega_menu_little_icons:not([data-vcss]) {
.nav-link {
@include hover-focus {
background: rgba(0, 0, 0, .05);
}
}
.s_mega_menu_gray_area:last-child {
// Allow to show the grey background used in the pseudo-element
z-index: 1;
&:before {
content: '';
display: block;
width: 100vw;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: -1;
pointer-events: none;
background: rgba(0, 0, 0, .05);
}
}
}
addons/website/static/src/snippets/s_mega_menu_menus_logos/000.scss
+25
View File
@@ -0,0 +1,25 @@
.s_mega_menu_menus_logos:not([data-vcss]) {
.s_mega_menu_gray_area:last-child {
// Allow to show the grey background used in the pseudo-element
z-index: 1;
&:before {
content: '';
display: block;
width: 100vw;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: -1;
pointer-events: none;
background: rgba(0, 0, 0, .05);
}
}
.s_mega_menu_menus_logos_wrapper {
// Apply color transparency to match with the preset used
border-color: rgba(0, 0, 0, .05) !important;
}
}
addons/website/static/src/snippets/s_mega_menu_odoo_menu/000.scss
+8
View File
@@ -0,0 +1,8 @@
.s_mega_menu_odoo_menu:not([data-vcss]) {
.s_mega_menu_odoo_menu_footer {
// Apply color transparency to match with the preset used
border-color: rgba(0, 0, 0, .05) !important;
background: rgba(0, 0, 0, .05) !important;
}
}
addons/website/static/src/snippets/s_mega_menu_thumbnails/000.scss
+5
View File
@@ -0,0 +1,5 @@
.s_mega_menu_thumbnails:not([data-vcss]) {
.s_mega_menu_thumbnails_footer {
background: rgba(0, 0, 0, .05);
}
}
addons/website/views/snippets/s_mega_menu_big_icons_subtitles.xml
+83
View File
@@ -0,0 +1,83 @@
<?xml version="1.0" encoding="utf-8"?>
<odoo>
<template id="s_mega_menu_big_icons_subtitles" name="Menu - Big icons &amp; subtitles">
<section class="s_mega_menu_big_icons_subtitles pt24 pb24" data-oe-shape-data="{'shape':'web_editor/Zigs/03','flip':[]}">
<div class="o_we_shape o_web_editor_Zigs_03"/>
<div class="container" >
<div class="row">
<div class="col-12 col-md-6 col-lg">
<nav class="nav flex-column w-100">
<t t-call="website.s_mega_menu_big_icons_subtitles_item">
<t t-set="_icon_classes" t-valuef="fa-user bg-o-color-1"/>
<t t-set="_title">About us</t>
<t t-set="_text">Discover our culture and our values</t>
</t>
<t t-call="website.s_mega_menu_big_icons_subtitles_item">
<t t-set="_icon_classes" t-valuef="fa-newspaper-o bg-o-color-2"/>
<t t-set="_title">Blog</t>
<t t-set="_text">Latests news and case studies</t>
</t>
<t t-call="website.s_mega_menu_big_icons_subtitles_item">
<t t-set="_icon_classes" t-valuef="fa-calendar bg-o-color-3"/>
<t t-set="_title">Events</t>
<t t-set="_text">Our seminars and trainings for you</t>
</t>
</nav>
</div>
<div class="col-12 col-md-6 col-lg">
<nav class="nav flex-column w-100">
<t t-call="website.s_mega_menu_big_icons_subtitles_item">
<t t-set="_icon_classes" t-valuef="fa-star bg-o-color-5"/>
<t t-set="_title">Customers</t>
<t t-set="_text">They trust us since years</t>
</t>
<t t-call="website.s_mega_menu_big_icons_subtitles_item">
<t t-set="_icon_classes" t-valuef="fa-handshake-o bg-o-color-3"/>
<t t-set="_title">Services</t>
<t t-set="_text">Find the perfect solution for you</t>
</t>
<t t-call="website.s_mega_menu_big_icons_subtitles_item">
<t t-set="_icon_classes" t-valuef="fa-paint-brush bg-o-color-2"/>
<t t-set="_title">Portfolio</t>
<t t-set="_text">Discover our realisations</t>
</t>
</nav>
</div>
<div class="col-12 col-md-6 col-lg">
<nav class="nav flex-column w-100">
<t t-call="website.s_mega_menu_big_icons_subtitles_item">
<t t-set="_icon_classes" t-valuef="fa-question-circle bg-o-color-1"/>
<t t-set="_title">F.A.Q.</t>
<t t-set="_text">All informations you need</t>
</t>
<t t-call="website.s_mega_menu_big_icons_subtitles_item">
<t t-set="_icon_classes" t-valuef="fa-shopping-basket bg-o-color-5"/>
<t t-set="_title">Points of sale</t>
<t t-set="_text">Find a store near you</t>
</t>
<t t-call="website.s_mega_menu_big_icons_subtitles_item">
<t t-set="_icon_classes" t-valuef="fa-legal bg-o-color-3"/>
<t t-set="_title">Legal Notice</t>
<t t-set="_text">Discover our legal notice</t>
</t>
</nav>
</div>
</div>
</div>
</section>
</template>
<template id="s_mega_menu_big_icons_subtitles_item">
<a href="#" class="nav-link o_default_snippet_text px-2 my-2 rounded text-wrap" data-name="Menu Item">
<div class="media align-items-center">
<i t-attf-class="fa rounded rounded-circle mr-3 #{_icon_class}"/>
<div class="media-body">
<h4 class="mt-0 mb-0" t-esc="_title"/>
<span><font style="font-size: 14px;" t-esc="_text"/></span>
</div>
</div>
</a>
</template>
</odoo>
addons/website/views/snippets/s_mega_menu_cards.xml
+72
View File
@@ -0,0 +1,72 @@
<?xml version="1.0" encoding="utf-8"?>
<odoo>
<template id="s_mega_menu_cards" name="Menu - Cards">
<section class="s_mega_menu_cards pt16 pb16">
<div class="container">
<nav class="row">
<t t-call="website.s_mega_menu_cards_item">
<t t-set="_img_src" t-valuef="/web/image/website.s_mega_menu_cards_default_image_1"/>
<t t-set="_title">Our team</t>
<t t-set="_text">Created in 2021, the company is young and dynamic. Discover the composition of the team and their skills.</t>
</t>
<t t-call="website.s_mega_menu_cards_item">
<t t-set="_img_src" t-valuef="/web/image/website.s_mega_menu_cards_default_image_2"/>
<t t-set="_title">Departments</t>
<t t-set="_text">Do you need specific information? Our specialists will help you with pleasure.</t>
</t>
<t t-call="website.s_mega_menu_cards_item">
<t t-set="_img_src" t-valuef="/web/image/website.s_mega_menu_cards_default_image_3"/>
<t t-set="_title">Products</t>
<t t-set="_text">We offer tailor-made products according to your needs and your budget.</t>
</t>
<t t-call="website.s_mega_menu_cards_item">
<t t-set="_img_src" t-valuef="/web/image/website.s_mega_menu_cards_default_image_4"/>
<t t-set="_title">Customers</t>
<t t-set="_text">Find out how we were able helping them and set in place solutions adapted to their needs.</t>
</t>
<div class="w-100 d-none d-md-block"/>
<t t-call="website.s_mega_menu_cards_item">
<t t-set="_img_src" t-valuef="/web/image/website.s_mega_menu_cards_default_image_5"/>
<t t-set="_title">Events</t>
<t t-set="_text">From seminars to team building activities, we offer a wide choice of events to organize.</t>
</t>
<t t-call="website.s_mega_menu_cards_item">
<t t-set="_img_src" t-valuef="/web/image/website.s_mega_menu_cards_default_image_6"/>
<t t-set="_title">Blog</t>
<t t-set="_text">Stay informed of our latest news and discover what will happen in the next weeks.</t>
</t>
<t t-call="website.s_mega_menu_cards_item">
<t t-set="_img_src" t-valuef="/web/image/website.s_mega_menu_cards_default_image_7"/>
<t t-set="_title">Deliveries</t>
<t t-set="_text">Find all information about our deliveries, express deliveries and all you need to know to return a product.</t>
</t>
<t t-call="website.s_mega_menu_cards_item">
<t t-set="_img_src" t-valuef="/web/image/website.s_mega_menu_cards_default_image_8"/>
<t t-set="_title">Points of sale</t>
<t t-set="_text">Need to pick up your order at one of our stores? Discover the nearest to you.</t>
</t>
</nav>
</div>
</section>
</template>
<template id="s_mega_menu_cards_item">
<div class="col-12 col-sm-6 col-md" data-name="Menu Item">
<a href="#" class="nav-link o_default_snippet_text rounded text-wrap text-center p-3">
<img t-att-src="_img_src" class="mb-3 rounded shadow img-fluid" alt=""/>
<h4 t-esc="_title"/>
<p class="o_default_snippet_text mb-0"><font style="font-size: 14px;" t-esc="_text"/></p>
</a>
</div>
</template>
<record id="website.s_mega_menu_cards_000_scss" model="ir.asset">
<field name="name">Menu - Cards 000 SCSS</field>
<field name="bundle">web.assets_frontend</field>
<field name="path">website/static/src/snippets/s_mega_menu_cards/000.scss</field>
</record>
</odoo>
addons/website/views/snippets/s_mega_menu_images_subtitles.xml
+77
View File
@@ -0,0 +1,77 @@
<?xml version="1.0" encoding="utf-8"?>
<odoo>
<template id="s_mega_menu_images_subtitles" name="Menu - images &amp; subtitles">
<section class="s_mega_menu_images_subtitles pt16 pb16">
<div class="container">
<div class="row">
<div class="col-12 col-sm-6 col-lg py-2">
<nav class="nav flex-column w-100">
<t t-call="website.s_mega_menu_images_subtitles_item">
<t t-set="_img_src" t-valuef="/web/image/website.s_mega_menu_images_subtitles_default_image_1"/>
<t t-set="_title">About us</t>
<t t-set="_text">Discover our culture and our values</t>
</t>
<t t-call="website.s_mega_menu_images_subtitles_item">
<t t-set="_img_src" t-valuef="/web/image/website.s_mega_menu_images_subtitles_default_image_2"/>
<t t-set="_title">Customers</t>
<t t-set="_text">They trust us since years</t>
</t>
<t t-call="website.s_mega_menu_images_subtitles_item">
<t t-set="_img_src" t-valuef="/web/image/website.s_mega_menu_images_subtitles_default_image_3"/>
<t t-set="_title">Services</t>
<t t-set="_text">Find the perfect solution for you</t>
</t>
</nav>
</div>
<div class="col-12 col-sm-6 col-lg py-2">
<nav class="nav flex-column w-100">
<t t-call="website.s_mega_menu_images_subtitles_item">
<t t-set="_img_src" t-valuef="/web/image/website.s_mega_menu_images_subtitles_default_image_4"/>
<t t-set="_title">Blog</t>
<t t-set="_text">Latests news and case studies</t>
</t>
<t t-call="website.s_mega_menu_images_subtitles_item">
<t t-set="_img_src" t-valuef="/web/image/website.s_mega_menu_images_subtitles_default_image_5"/>
<t t-set="_title">Events</t>
<t t-set="_text">Our seminars and trainings for you</t>
</t>
<t t-call="website.s_mega_menu_images_subtitles_item">
<t t-set="_img_src" t-valuef="/web/image/website.s_mega_menu_images_subtitles_default_image_6"/>
<t t-set="_title">Help center</t>
<t t-set="_text">Contact us for any issue or question</t>
</t>
</nav>
</div>
<div class="col col-md-6 col-lg py-2">
<img src="/web/image/website.s_mega_menu_images_subtitles_default_image_7" class="mb-3 rounded shadow img-fluid" alt=""/>
<h4 class="o_default_snippet_text">The team</h4>
<p class="text-muted o_default_snippet_text">
<font style="font-size: 14px;">Created in 2021, the company is young and dynamic. Discover the composition of the team and their skills.</font>
</p>
<a href="#" class="btn btn-primary o_default_snippet_text">Discover our team</a>
</div>
</div>
</div>
</section>
</template>
<template id="s_mega_menu_images_subtitles_item">
<a href="#" class="nav-link o_default_snippet_text px-2 rounded text-wrap" data-name="Menu Item">
<div class="media">
<img t-att-src="_img_src" class="mr-3 rounded shadow" alt=""/>
<div class="media-body">
<h4 class="mt-0 mb-0" t-esc="_title"/>
<span><font style="font-size: 14px;" t-esc="_text"/></span>
</div>
</div>
</a>
</template>
<record id="website.s_mega_menu_images_subtitles_000_scss" model="ir.asset">
<field name="name">Menu - images &amp; subtitles 000 SCSS</field>
<field name="bundle">web.assets_frontend</field>
<field name="path">website/static/src/snippets/s_mega_menu_images_subtitles/000.scss</field>
</record>
</odoo>
addons/website/views/snippets/s_mega_menu_little_icons.xml
+74
View File
@@ -0,0 +1,74 @@
<?xml version="1.0" encoding="utf-8"?>
<odoo>
<template id="s_mega_menu_little_icons" name="Menu - Little icons">
<section class="s_mega_menu_little_icons overflow-hidden">
<div class="container">
<div class="row">
<div class="col-12 col-sm py-2 d-flex align-items-center">
<nav class="nav flex-column">
<a href="#" class="nav-link o_default_snippet_text px-2 rounded text-wrap" data-name="Menu Item">
<i class="s_mega_menu_little_icons_icon fa fa-eye fa-fw mr-2"></i>
<b>About us</b>
</a>
<a href="#" class="nav-link o_default_snippet_text px-2 text-wrap" data-name="Menu Item">
<i class="s_mega_menu_little_icons_icon fa fa-group fa-fw mr-2"></i>
<b>Partners</b>
</a>
<a href="#" class="nav-link o_default_snippet_text px-2 text-wrap" data-name="Menu Item">
<i class="s_mega_menu_little_icons_icon fa fa-star-o fa-fw mr-2"></i>
<b>Customers</b>
</a>
</nav>
</div>
<div class="col-12 col-sm py-2 d-flex align-items-center">
<nav class="nav flex-column">
<a href="#" class="nav-link o_default_snippet_text px-2 rounded text-wrap" data-name="Menu Item">
<i class="s_mega_menu_little_icons_icon fa fa-tags fa-fw mr-2"></i>
<b>Products</b>
</a>
<a href="#" class="nav-link o_default_snippet_text px-2 rounded text-wrap" data-name="Menu Item">
<i class="s_mega_menu_little_icons_icon fa fa-handshake-o fa-fw mr-2"></i>
<b>Services</b>
</a>
<a href="#" class="nav-link o_default_snippet_text px-2 rounded text-wrap" data-name="Menu Item">
<i class="s_mega_menu_little_icons_icon fa fa-headphones fa-fw mr-2"></i>
<b>Help center</b>
</a>
</nav>
</div>
<div class="col-12 col-sm py-2 d-flex align-items-center">
<nav class="nav flex-column">
<a href="#" class="nav-link o_default_snippet_text px-2 rounded text-wrap" data-name="Menu Item">
<i class="s_mega_menu_little_icons_icon fa fa-newspaper-o fa-fw mr-2"></i>
<b>Our blog</b>
</a>
<a href="#" class="nav-link o_default_snippet_text px-2 rounded text-wrap" data-name="Menu Item">
<i class="s_mega_menu_little_icons_icon fa fa-calendar fa-fw mr-2"></i>
<b>Events</b>
</a>
<a href="#" class="nav-link o_default_snippet_text px-2 rounded text-wrap" data-name="Menu Item">
<i class="s_mega_menu_little_icons_icon fa fa-map-o fa-fw mr-2"></i>
<b>Guides</b>
</a>
</nav>
</div>
<div class="col-lg-4 p-4 s_mega_menu_gray_area">
<h4 class="o_default_snippet_text">The team</h4>
<p class="text-muted o_default_snippet_text">
<font style="font-size: 14px;">Created in 2021, the company is young and dynamic. Discover the composition of the team and their skills.</font>
</p>
<a href="#" class="btn btn-primary o_default_snippet_text">Discover our team</a>
</div>
</div>
</div>
</section>
</template>
<record id="website.s_mega_menu_little_icons_000_scss" model="ir.asset">
<field name="name">Menu - Little icons 000 SCSS</field>
<field name="bundle">web.assets_frontend</field>
<field name="path">website/static/src/snippets/s_mega_menu_little_icons/000.scss</field>
</record>
</odoo>
addons/website/views/snippets/s_mega_menu_menu_image_menu.xml
+3 -3
View File
@@ -5,7 +5,7 @@
<section class="s_mega_menu_menu_image_menu py-4">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-4 py-2 text-center">
<div class="col-12 col-sm py-2 text-center">
<h4 class="o_default_snippet_text" >Left Menu</h4>
<nav class="nav flex-column">
<t t-foreach="3" t-as="i">
@@ -16,10 +16,10 @@
</t>
</nav>
</div>
<div class="col-lg-4 py-2 text-center">
<div class="col-12 col-sm py-2 text-center">
<img class="img-fluid" src="/web/image/website.s_mega_menu_menu_image_menu_default_image"/>
</div>
<div class="col-lg-4 py-2 text-center">
<div class="col-12 col-sm py-2 text-center">
<h4 class="o_default_snippet_text">Right Menu</h4>
<nav class="nav flex-column">
<t t-foreach="3" t-as="i">
addons/website/views/snippets/s_mega_menu_menus_logos.xml
+90
View File
@@ -0,0 +1,90 @@
<?xml version="1.0" encoding="utf-8"?>
<odoo>
<template id="s_mega_menu_menus_logos" name="Menus &amp; logos">
<section class="s_mega_menu_menus_logos overflow-hidden">
<div class="container">
<div class="row">
<div class="col-12 col-lg-8">
<div class="row py-3 align-items-center h-100">
<div class="col-12 col-sm-6 col-md-4 col-lg py-2">
<h4 class="o_default_snippet_text">Women</h4>
<nav class="nav flex-column">
<a href="#" class="nav-link o_default_snippet_text px-0" data-name="Menu Item">Jacket</a>
<a href="#" class="nav-link o_default_snippet_text px-0" data-name="Menu Item">Dresses</a>
<a href="#" class="nav-link o_default_snippet_text px-0" data-name="Menu Item">Tops</a>
</nav>
</div>
<div class="col-12 col-sm-6 col-md-4 col-lg py-2">
<h4 class="o_default_snippet_text">Men</h4>
<nav class="nav flex-column">
<a href="#" class="nav-link o_default_snippet_text px-0" data-name="Menu Item">Hoodies</a>
<a href="#" class="nav-link o_default_snippet_text px-0" data-name="Menu Item">Blazers</a>
<a href="#" class="nav-link o_default_snippet_text px-0" data-name="Menu Item">Jeans</a>
</nav>
</div>
<div class="col-12 col-sm-6 col-md-4 col-lg py-2">
<h4 class="o_default_snippet_text">Children</h4>
<nav class="nav flex-column">
<a href="#" class="nav-link o_default_snippet_text px-0" data-name="Menu Item">T-shirts</a>
<a href="#" class="nav-link o_default_snippet_text px-0" data-name="Menu Item">Pants</a>
<a href="#" class="nav-link o_default_snippet_text px-0" data-name="Menu Item">Shoes</a>
</nav>
</div>
<div class="w-100 d-none d-md-block"></div>
<div class="col-12 col-sm-6 col-md-4 col-lg py-2">
<h4 class="o_default_snippet_text">New collection</h4>
<nav class="nav flex-column">
<a href="#" class="nav-link o_default_snippet_text px-0" data-name="Menu Item">Women</a>
<a href="#" class="nav-link o_default_snippet_text px-0" data-name="Menu Item">Men</a>
<a href="#" class="nav-link o_default_snippet_text px-0" data-name="Menu Item">Children</a>
</nav>
</div>
<div class="col-12 col-sm-6 col-md-4 col-lg py-2">
<h4 class="o_default_snippet_text">Accessories</h4>
<nav class="nav flex-column">
<a href="#" class="nav-link o_default_snippet_text px-0" data-name="Menu Item">Bags</a>
<a href="#" class="nav-link o_default_snippet_text px-0" data-name="Menu Item">Watches</a>
<a href="#" class="nav-link o_default_snippet_text px-0" data-name="Menu Item">Glasses</a>
</nav>
</div>
<div class="col-12 col-sm-6 col-md-4 col-lg py-2">
<h4 class="o_default_snippet_text">Promotions</h4>
<nav class="nav flex-column">
<a href="#" class="nav-link o_default_snippet_text px-0" data-name="Menu Item">Women</a>
<a href="#" class="nav-link o_default_snippet_text px-0" data-name="Menu Item">Men</a>
<a href="#" class="nav-link o_default_snippet_text px-0" data-name="Menu Item">Children</a>
</nav>
</div>
</div>
</div>
<div class="col-12 col-lg-4 py-4 d-flex align-items-center justify-content-center s_mega_menu_gray_area">
<a href="#" class="nav-link o_default_snippet_text text-center px-0" data-name="Menu Item">
<img src="/web/image/website.s_mega_menu_menus_logos_default_image" class="mb-3 rounded shadow img-fluid" alt=""/>
<h4 class="o_default_snippet_text">Spring collection has arrived !</h4>
</a>
</div>
</div>
</div>
<div class="s_mega_menu_menus_logos_wrapper border-top">
<div class="container">
<div class="row py-3">
<div class="col-4 col-md"><img src="/web/image/website.s_mega_menu_menus_logos_default_logo_1" class="img-fluid" alt=""/></div>
<div class="col-4 col-md"><img src="/web/image/website.s_mega_menu_menus_logos_default_logo_2" class="img-fluid" alt=""/></div>
<div class="col-4 col-md"><img src="/web/image/website.s_mega_menu_menus_logos_default_logo_3" class="img-fluid" alt=""/></div>
<div class="col-4 col-md"><img src="/web/image/website.s_mega_menu_menus_logos_default_logo_4" class="img-fluid" alt=""/></div>
<div class="col-4 col-md"><img src="/web/image/website.s_mega_menu_menus_logos_default_logo_5" class="img-fluid" alt=""/></div>
<div class="col-4 col-md"><img src="/web/image/website.s_mega_menu_menus_logos_default_logo_6" class="img-fluid" alt=""/></div>
</div>
</div>
</div>
</section>
</template>
<record id="website.s_mega_menu_menus_logos_000_scss" model="ir.asset">
<field name="name">Menus &amp; logos 000 SCSS</field>
<field name="bundle">web.assets_frontend</field>
<field name="path">website/static/src/snippets/s_mega_menu_menus_logos/000.scss</field>
</record>
</odoo>
addons/website/views/snippets/s_mega_menu_multi_menus.xml
+1 -1
View File
@@ -10,7 +10,7 @@
<t t-set="menu3_title">Third Menu</t>
<t t-set="menu4_title">Last Menu</t>
<t t-foreach="[menu1_title, menu2_title, menu3_title, menu4_title]" t-as="menu_title">
<div class="col-lg-3 py-2 text-center">
<div class="col-12 col-sm py-2 text-center">
<h4 class="o_default_snippet_text" t-esc="menu_title"/>
<nav class="nav flex-column">
<t t-foreach="3" t-as="i">
addons/website/views/snippets/s_mega_menu_odoo_menu.xml
+83
View File
@@ -0,0 +1,83 @@
<?xml version="1.0" encoding="utf-8"?>
<odoo>
<template id="s_mega_menu_odoo_menu" name="Odoo Menu">
<section class="s_mega_menu_odoo_menu pt16">
<div class="container">
<div class="row">
<div class="col-md-6 col-lg pt16 pb24">
<h4 class="o_default_snippet_text text-uppercase h5 font-weight-bold mt-0">Computers &amp; Devices</h4>
<div class="s_hr text-left pt4 pb16 text-o-color-3">
<hr class="w-100 mx-auto" style="border-top-width: 2px; border-top-style: solid;"/>
</div>
<nav class="nav flex-column">
<a href="#" class="nav-link o_default_snippet_text px-0" data-name="Menu Item">Laptops</a>
<a href="#" class="nav-link o_default_snippet_text px-0" data-name="Menu Item">Desktop computers</a>
<a href="#" class="nav-link o_default_snippet_text px-0" data-name="Menu Item">Components</a>
<a href="#" class="nav-link o_default_snippet_text px-0" data-name="Menu Item">Tablets</a>
<a href="#" class="nav-link o_default_snippet_text px-0" data-name="Menu Item">Smartphones</a>
<a href="#" class="nav-link o_default_snippet_text px-0" data-name="Menu Item">iPhone</a>
</nav>
</div>
<div class="col-md-6 col-lg pt16 pb24">
<h4 class="o_default_snippet_text text-uppercase h5 font-weight-bold mt-0">Monitors</h4>
<div class="s_hr text-left pt4 pb16 text-o-color-1">
<hr class="w-100 mx-auto" style="border-top-width: 2px; border-top-style: solid;"/>
</div>
<nav class="nav flex-column">
<a href="#" class="nav-link o_default_snippet_text px-0" data-name="Menu Item">Televisions</a>
<a href="#" class="nav-link o_default_snippet_text px-0" data-name="Menu Item">Office screens</a>
<a href="#" class="nav-link o_default_snippet_text px-0" data-name="Menu Item">Projectors</a>
</nav>
</div>
<div class="col-md-6 col-lg pt16 pb24">
<h4 class="o_default_snippet_text text-uppercase h5 font-weight-bold mt-0">Electronics</h4>
<div class="s_hr text-left pt4 pb16 text-o-color-2">
<hr class="w-100 mx-auto" style="border-top-width: 2px; border-top-style: solid;"/>
</div>
<nav class="nav flex-column">
<a href="#" class="nav-link o_default_snippet_text px-0" data-name="Menu Item">Camera</a>
<a href="#" class="nav-link o_default_snippet_text px-0" data-name="Menu Item">GPS &amp; navigation</a>
<a href="#" class="nav-link o_default_snippet_text px-0" data-name="Menu Item">Accessories</a>
<a href="#" class="nav-link o_default_snippet_text px-0" data-name="Menu Item">Home audio</a>
<a href="#" class="nav-link o_default_snippet_text px-0" data-name="Menu Item">Office audio</a>
</nav>
</div>
<div class="col-md-6 col-lg pt16 pb24">
<h4 class="o_default_snippet_text text-uppercase h5 font-weight-bold mt-0">Promotions</h4>
<div class="s_hr text-left pt4 pb16 text-o-color-5">
<hr class="w-100 mx-auto" style="border-top-width: 2px; border-top-style: solid;"/>
</div>
<nav class="nav flex-column">
<a href="#" class="nav-link o_default_snippet_text px-0" data-name="Menu Item">Computers</a>
<a href="#" class="nav-link o_default_snippet_text px-0" data-name="Menu Item">Electronics</a>
<a href="#" class="nav-link o_default_snippet_text px-0" data-name="Menu Item">Monitors</a>
<a href="#" class="nav-link o_default_snippet_text px-0" data-name="Menu Item">Networks</a>
</nav>
</div>
</div>
</div>
<div class="container-fluid border-top s_mega_menu_odoo_menu_footer">
<div class="row">
<div class="col-12 pt8 pb8">
<nav class="nav justify-content-center">
<a href="#" class="mx-3 my-2 text-o-color-5" style="font-size: 14px;"><i class="fa fa-fw fa-2x fa-github"></i></a>
<a href="#" class="mx-3 my-2 text-o-color-5" style="font-size: 12px;"><i class="fa fa-fw fa-2x fa-youtube-play"></i></a>
<a href="#" class="mx-3 my-2 text-o-color-5" style="font-size: 12px;"><i class="fa fa-fw fa-2x fa-twitter"></i></a>
<a href="#" class="mx-3 my-2 text-o-color-5" style="font-size: 12px;"><i class="fa fa-fw fa-2x fa-linkedin"></i></a>
<a href="#" class="mx-3 my-2 text-o-color-5" style="font-size: 12px;"><i class="fa fa-fw fa-2x fa-instagram"></i></a>
<a href="#" class="mx-3 my-2 text-o-color-5" style="font-size: 12px;"><i class="fa fa-fw fa-2x fa-facebook"></i></a>
</nav>
</div>
</div>
</div>
</section>
</template>
<record id="website.s_mega_menu_odoo_menu_000_scss" model="ir.asset">
<field name="name">Odoo Menu 000 SCSS</field>
<field name="bundle">web.assets_frontend</field>
<field name="path">website/static/src/snippets/s_mega_menu_odoo_menu/000.scss</field>
</record>
</odoo>
addons/website/views/snippets/s_mega_menu_thumbnails.xml
+114
View File
@@ -0,0 +1,114 @@
<?xml version="1.0" encoding="utf-8"?>
<odoo>
<template id="s_mega_menu_thumbnails" name="Menu - Thumbnails">
<section class="s_mega_menu_thumbnails pt24">
<div class="container">
<div class="row justify-content-center">
<div class="col-12 col-sm col-md-12 col-lg px-0">
<div class="container">
<div class="row">
<t t-call="website.s_mega_menu_thumbnails_item">
<t t-set="_img_src" t-valuef="/web/image/website.s_mega_menu_thumbnails_default_image_1"/>
<t t-set="_text">Laptops</t>
</t>
<t t-call="website.s_mega_menu_thumbnails_item">
<t t-set="_img_src" t-valuef="/web/image/website.s_mega_menu_thumbnails_default_image_2"/>
<t t-set="_text">Mouse</t>
</t>
<t t-call="website.s_mega_menu_thumbnails_item">
<t t-set="_img_src" t-valuef="/web/image/website.s_mega_menu_thumbnails_default_image_3"/>
<t t-set="_text">Keyboards</t>
</t>
<t t-call="website.s_mega_menu_thumbnails_item">
<t t-set="_img_src" t-valuef="/web/image/website.s_mega_menu_thumbnails_default_image_4"/>
<t t-set="_text">Printers</t>
</t>
<t t-call="website.s_mega_menu_thumbnails_item">
<t t-set="_img_src" t-valuef="/web/image/website.s_mega_menu_thumbnails_default_image_5"/>
<t t-set="_text">Storage</t>
</t>
<div class="w-100 d-none d-md-block"/>
<t t-call="website.s_mega_menu_thumbnails_item">
<t t-set="_img_src" t-valuef="/web/image/website.s_mega_menu_thumbnails_default_image_6"/>
<t t-set="_text">Tablets</t>
</t>
<t t-call="website.s_mega_menu_thumbnails_item">
<t t-set="_img_src" t-valuef="/web/image/website.s_mega_menu_thumbnails_default_image_7"/>
<t t-set="_text">Phones</t>
</t>
<t t-call="website.s_mega_menu_thumbnails_item">
<t t-set="_img_src" t-valuef="/web/image/website.s_mega_menu_thumbnails_default_image_8"/>
<t t-set="_text">Screens</t>
</t>
<t t-call="website.s_mega_menu_thumbnails_item">
<t t-set="_img_src" t-valuef="/web/image/website.s_mega_menu_thumbnails_default_image_9"/>
<t t-set="_text">Gaming</t>
</t>
<t t-call="website.s_mega_menu_thumbnails_item">
<t t-set="_img_src" t-valuef="/web/image/website.s_mega_menu_thumbnails_default_image_10"/>
<t t-set="_text">Sound</t>
</t>
</div>
</div>
</div>
<div class="col col-sm-6 col-md-4 col-lg-3 text-center py-2">
<a href="#" class="nav-link p-0 o_default_snippet_text" data-name="Menu Item">
<img class="img-fluid rounded shadow" src="/web/image/website.s_mega_menu_thumbnails_default_image_11" alt=""/>
<span class="d-block p-2">
<b><font style="font-size:14px;">Discover our new products</font></b>
</span>
</a>
</div>
</div>
</div>
<div class="s_mega_menu_thumbnails_footer px-0">
<div class="container row mx-auto px-0 w-100 align-items-center">
<div class="col-12 col-md-6 col-lg d-flex justify-content-center align-items-center py-2">
<p class="text-muted align-middle m-0">
<i class="s_mega_menu_thumbnails_icon fa fa-cube mr-2"></i> Free returns
</p>
</div>
<div class="col-12 col-md-6 col-lg d-flex justify-content-center align-items-center py-2">
<p class="text-muted align-middle m-0">
<i class="s_mega_menu_thumbnails_icon fa fa-shopping-basket mr-2"></i> Pickup in store
</p>
</div>
<div class="col-12 col-md-6 col-lg d-flex justify-content-center align-items-center py-2">
<p class="text-muted align-middle m-0">
<i class="s_mega_menu_thumbnails_icon fa fa-truck mr-2"></i> Express delivery
</p>
</div>
<div class="col-12 col-md-6 col-lg py-2">
<a href="#" class="btn btn-secondary d-block o_default_snippet_text">
<i class="s_mega_menu_thumbnails_icon fa fa-comments mr-2"></i> Contact us
</a>
</div>
</div>
</div>
</section>
</template>
<template id="s_mega_menu_thumbnails_item">
<div class="col-6 col-sm text-center py-2">
<a href="#" class="nav-link o_default_snippet_text p-0" data-name="Menu Item">
<img class="img-fluid rounded shadow" t-att-src="_img_src" alt=""/>
<br/>
<span class="d-block p-2">
<b>
<font style="font-size:14px;" t-esc="_text"/>
</b>
</span>
</a>
</div>
</template>
<record id="website.s_mega_menu_thumbnails_000_scss" model="ir.asset">
<field name="name">Menu - Thumbnails 000 SCSS</field>
<field name="bundle">web.assets_frontend</field>
<field name="path">website/static/src/snippets/s_mega_menu_thumbnails/000.scss</field>
</record>
</odoo>
addons/website/views/snippets/snippets.xml
+8 -1
View File
@@ -18,6 +18,13 @@
<div class="o_panel_body">
<t t-snippet="website.s_mega_menu_multi_menus" t-thumbnail="/website/static/src/img/snippets_thumbs/s_mega_menu_multi_menus.svg"/>
<t t-snippet="website.s_mega_menu_menu_image_menu" t-thumbnail="/website/static/src/img/snippets_thumbs/s_mega_menu_menu_image_menu.svg"/>
<t t-snippet="website.s_mega_menu_odoo_menu" t-thumbnail="/website/static/src/img/snippets_thumbs/s_mega_menu_odoo_menu.svg"/>
<t t-snippet="website.s_mega_menu_little_icons" t-thumbnail="/website/static/src/img/snippets_thumbs/s_mega_menu_little_icons.svg"/>
<t t-snippet="website.s_mega_menu_big_icons_subtitles" t-thumbnail="/website/static/src/img/snippets_thumbs/s_mega_menu_big_icons_subtitles.svg"/>
<t t-snippet="website.s_mega_menu_images_subtitles" t-thumbnail="/website/static/src/img/snippets_thumbs/s_mega_menu_images_subtitles.svg"/>
<t t-snippet="website.s_mega_menu_menus_logos" t-thumbnail="/website/static/src/img/snippets_thumbs/s_mega_menu_menus_logos.svg"/>
<t t-snippet="website.s_mega_menu_thumbnails" t-thumbnail="/website/static/src/img/snippets_thumbs/s_mega_menu_thumbnails.svg"/>
<t t-snippet="website.s_mega_menu_cards" t-thumbnail="/website/static/src/img/snippets_thumbs/s_mega_menu_cards.svg"/>
</div>
</div>
@@ -1000,7 +1007,7 @@
</we-select>
</div>
<div data-selector=".o_mega_menu .nav-link"
<div data-selector=".o_mega_menu .nav > .nav-link"
data-drop-in=".o_mega_menu nav"
data-drop-near=".o_mega_menu .nav-link"/>