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

[IMP] website: add accordion styles

Browse Source 
This commit adds new classes and options to the accordion snippet in
order to add new styles and allow switching the side where the collapse
status icon floats to.

task-2457232

closes odoo/odoo#69543

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Co-authored-by: Tom De Caluwé <tdc@odoo.com>
This commit is contained in:
Guillaume Clemens
2021-10-04 18:38:43 +00:00
committed by qsm-odoo
co-authored by Tom De Caluwé
parent 7f60ed43af
commit bb6379e4f9
2 changed files with 107 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/website/static/src/snippets/s_faq_collapse/000.scss
+88 -8
View File
@@ -1,35 +1,115 @@
.s_faq_collapse {
.accordion .card {
.card-header {
cursor: pointer;
display: inline-block;
width: 100%;
padding: .5em 0;
position: relative;
padding: .5em 1em;
padding-left: 2.25em;
border-radius: 0;
outline: none;
&:before {
content:'\f056';
content: '\f056';
font-family: 'FontAwesome';
display: inline-block;
margin: 0 .5em 0 .75em;
color: $gray-600;
position: absolute;
margin-left: -1.5em;
}
&.collapsed:before {
content:'\f055';
font-family: 'FontAwesome';
content: '\f055';
}
&:hover,
&:focus {
text-decoration: none;
}
}
.s_faq_collapse_right_icon {
padding-left: 1em;
&:before {
position: static;
float: right;
margin-left: 0;
}
& + div .card-body {
padding-left: 1em;
}
}
.card-body {
padding: 1em 2.25em;
padding: 1em;
padding-left: 2.25em;
}
}
.card-body p:last-child,
.card-body ul:last-child {
margin-bottom: 0;
}
&.s_faq_collapse_light {
.accordion .card {
border-left: 0;
border-right: 0;
border-radius: 0;
.card-header {
background-color: transparent;
&:before {
content:'\f068';
}
&.collapsed:before {
content:'\f067';
}
}
.s_faq_collapse_right_icon {
padding-left: 0;
}
.card-header + div .card-body {
padding-left: 0;
padding-right: 0;
}
}
}
&.s_faq_collapse_big {
.accordion .card {
border: 0;
.card-header {
background-color: transparent;
font-size: $font-size-lg * 1.5;
&:before {
content:'\f068';
}
&.collapsed:before {
content:'\f067';
}
}
.s_faq_collapse_right_icon {
padding-left: 0;
}
.card-header + div .card-body {
padding-left: 0;
padding-right: 0;
}
}
}
&.s_faq_collapse_boxed {
.accordion .card {
border: 0;
margin: $btn-padding-y-lg 0;
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
.card-header {
border: 0;
}
.card-header.collapsed {
background-color: transparent;
}
.collapse.show, .collapsing {
.card-body {
background-color: rgba(0, 0, 0, 0.03) !important;
}
}
}
}
}
addons/website/views/snippets/s_faq_collapse.xml
+19
View File
@@ -36,6 +36,25 @@
</section>
</template>
<template id="s_faq_collapse_options" inherit_id="website.snippet_options">
<xpath expr="." position="inside">
<div data-selector=".s_faq_collapse">
<we-select string="Card Style">
<we-button title="Default" data-select-class="">Default</we-button>
<we-button title="Light" data-select-class="s_faq_collapse_light">Light</we-button>
<we-button title="Boxed" data-select-class="s_faq_collapse_boxed">Boxed</we-button>
<we-button title="Big" data-select-class="s_faq_collapse_big">Big</we-button>
</we-select>
<we-button-group string="Collapse Icon" data-apply-to=".card-header">
<we-button title="Left" data-select-class=""
data-img="/website/static/src/img/snippets_options/pos_left.svg"/>
<we-button title="Right" data-select-class="s_faq_collapse_right_icon"
data-img="/website/static/src/img/snippets_options/pos_right.svg"/>
</we-button-group>
</div>
</xpath>
</template>
<record id="website.s_faq_collapse_000_scss" model="ir.asset">
<field name="name">Faq collapse 000 SCSS</field>
<field name="bundle">web.assets_frontend</field>