[MOV] website: add s_process_steps snippet from themes repo
Part of https://github.com/odoo/odoo/pull/42937 task-2088157
This commit is contained in:
qsm-odoo
@@ -62,6 +62,7 @@
|
||||
'views/snippets/s_media_list.xml',
|
||||
'views/snippets/s_showcase.xml',
|
||||
'views/snippets/s_timeline.xml',
|
||||
'views/snippets/s_process_steps.xml',
|
||||
'views/snippets/s_mega_menu_multi_menus.xml',
|
||||
'views/snippets/s_mega_menu_menu_image_menu.xml',
|
||||
'views/website_views.xml',
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
@@ -0,0 +1,75 @@
|
||||
.s_process_steps {
|
||||
.s_process_step_icon {
|
||||
margin: $grid-gutter-width 0;
|
||||
span {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
}
|
||||
.fa {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.s_process_step_content {
|
||||
padding: 0 $grid-gutter-width/2;
|
||||
}
|
||||
@include media-breakpoint-up(lg) {
|
||||
overflow-x: hidden;
|
||||
.s_process_step {
|
||||
.s_process_step_icon {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
span:after {
|
||||
content: '';
|
||||
z-index: -1;
|
||||
border-top: 1px solid gray('500');
|
||||
@include o-position-absolute(50%, 0, 0, auto);
|
||||
}
|
||||
}
|
||||
&:not(:first-child):not(:last-child) .s_process_step_icon {
|
||||
span:after {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
&:first-child .s_process_step_icon,
|
||||
&:last-child .s_process_step_icon {
|
||||
span:after {
|
||||
width: 1000%;
|
||||
}
|
||||
.fa {
|
||||
&:after {
|
||||
content: '';
|
||||
z-index: -1;
|
||||
@include o-position-absolute(50%, auto, 0, auto);
|
||||
width: 100%;
|
||||
border-top: 1px solid gray('500');
|
||||
}
|
||||
&.mx-auto:after {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:first-child .s_process_step_icon {
|
||||
.fa:after { right: 0; }
|
||||
.fa.float-right:after { width: 0; }
|
||||
}
|
||||
&:last-child .s_process_step_icon {
|
||||
span:after { left: 0; }
|
||||
.fa {
|
||||
&:after { left: 0; }
|
||||
&.float-left:after { width: 0; }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$s_process_step_line_fw: true;
|
||||
|
||||
@if $s_process_step_line_fw == true {
|
||||
.s_process_step:first-child,
|
||||
.s_process_step:last-child {
|
||||
.s_process_step_icon > span:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<odoo>
|
||||
|
||||
<template name="Steps" id="s_process_steps">
|
||||
<section class="s_process_steps pt24 pb24">
|
||||
<div class="container">
|
||||
<div class="row no-gutters">
|
||||
<div class="col-lg-3 s_process_step pt24 pb24">
|
||||
<div class="s_process_step_icon">
|
||||
<span>
|
||||
<i class="fa fa-shopping-basket fa-2x mx-auto rounded-circle bg-alpha"/>
|
||||
</span>
|
||||
</div>
|
||||
<div class="s_process_step_content text-center">
|
||||
<h2>Add to cart</h2>
|
||||
<p>Let your customers follow <br/>and understand your process.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 s_process_step pt24 pb24">
|
||||
<div class="s_process_step_icon">
|
||||
<span>
|
||||
<i class="fa fa-unlock-alt fa-2x mx-auto rounded-circle bg-beta"/>
|
||||
</span>
|
||||
</div>
|
||||
<div class="s_process_step_content text-center">
|
||||
<h2>Sign in</h2>
|
||||
<p>Click on the icon to adapt it <br/>to your purpose.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 s_process_step pt24 pb24">
|
||||
<div class="s_process_step_icon">
|
||||
<span>
|
||||
<i class="fa fa-paypal fa-2x mx-auto rounded-circle bg-gamma"/>
|
||||
</span>
|
||||
</div>
|
||||
<div class="s_process_step_content text-center">
|
||||
<h2>Pay</h2>
|
||||
<p>Duplicate blocks <br/>to add more steps.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 s_process_step pt24 pb24">
|
||||
<div class="s_process_step_icon">
|
||||
<span>
|
||||
<i class="fa fa-plane fa-2x mx-auto rounded-circle bg-delta"/>
|
||||
</span>
|
||||
</div>
|
||||
<div class="s_process_step_content text-center">
|
||||
<h2>Get Delivered</h2>
|
||||
<p>Select and delete blocks <br/>to remove some steps.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<template id="assets_snippet_s_process_steps_css_000" inherit_id="website.assets_frontend">
|
||||
<xpath expr="//link[last()]" position="after">
|
||||
<link rel="stylesheet" type="text/scss" href="/website/static/src/snippets/s_process_steps/000.scss"/>
|
||||
</xpath>
|
||||
</template>
|
||||
|
||||
</odoo>
|
||||
@@ -55,7 +55,7 @@
|
||||
<!-- Product list -->
|
||||
<t t-snippet="website.s_tabs" t-thumbnail="/website/static/src/img/snippets_thumbs/s_tabs.png"/>
|
||||
<t t-snippet="website.s_timeline" t-thumbnail="/website/static/src/img/snippets_thumbs/s_timeline.png"/>
|
||||
<!-- Steps -->
|
||||
<t t-snippet="website.s_process_steps" t-thumbnail="/website/static/src/img/snippets_thumbs/s_process_step.png"/>
|
||||
<t t-snippet="website.s_quotes_carousel" t-thumbnail="/website/static/src/img/snippets_thumbs/s_quotes_carousel.png"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user