[REF] website: move s_alert snippet to dedicated files

This commit is contained in:
qsm-odoo
2019-12-18 00:52:49 +01:00
5 changed files with 69 additions and 57 deletions
+1
View File
@@ -37,6 +37,7 @@
'views/snippets/s_three_columns.xml',
'views/snippets/s_picture.xml',
'views/snippets/s_carousel.xml',
'views/snippets/s_alert.xml',
'views/website_views.xml',
'views/website_visitor_views.xml',
'views/res_config_settings_views.xml',
@@ -417,38 +417,6 @@ table.table_desc tr td {
}
// Alert
.s_alert {
margin: $grid-gutter-width/2 0;
border: 1px solid;
border-radius: 0.25rem;
p, ul, ol {
&:last-child {
margin-bottom: 0;
}
}
&_sm {
padding: $grid-gutter-width/3;
font-size: $font-size-sm;
}
&_md {
padding: $grid-gutter-width/2;
font-size: $font-size-base;
}
&_lg {
padding: $grid-gutter-width;
font-size: $font-size-lg;
}
&_icon {
float: left;
margin-right: 10px;
}
&_content {
overflow: hidden;
}
}
// Comparisons
.s_comparisons {
.card-body {
@@ -0,0 +1,30 @@
.s_alert {
margin: $grid-gutter-width/2 0;
border: 1px solid;
border-radius: 0.25rem;
p, ul, ol {
&:last-child {
margin-bottom: 0;
}
}
&_sm {
padding: $grid-gutter-width/3;
font-size: $font-size-sm;
}
&_md {
padding: $grid-gutter-width/2;
font-size: $font-size-base;
}
&_lg {
padding: $grid-gutter-width;
font-size: $font-size-lg;
}
&_icon {
float: left;
margin-right: 10px;
}
&_content {
overflow: hidden;
}
}
+38
View File
@@ -0,0 +1,38 @@
<?xml version="1.0" encoding="utf-8"?>
<odoo>
<template id="s_alert" name="Alert">
<div class="s_alert s_alert_md alert-delta w-100 clearfix">
<i class="fa fa-2x fa-info-circle s_alert_icon"/>
<div class="s_alert_content">
<p>Explain the benefits you offer. <br/>Don't write about products or services here, write about solutions.</p>
</div>
</div>
</template>
<template id="s_alert_options" inherit_id="website.snippet_options">
<xpath expr="." position="inside">
<div data-selector=".s_alert">
<we-colorpicker string="Color"
data-select-style="true"
data-css-property="background-color"
data-color-prefix="alert-"/>
</div>
<div data-selector=".s_alert">
<we-select string="Size">
<we-button data-select-class="s_alert_sm">Small</we-button>
<we-button data-select-class="s_alert_md">Medium</we-button>
<we-button data-select-class="s_alert_lg">Large</we-button>
</we-select>
</div>
</xpath>
</template>
<template id="assets_snippet_s_alert_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_alert/000.scss"/>
</xpath>
</template>
</odoo>
@@ -1,15 +1,6 @@
<?xml version="1.0" encoding="utf-8"?>
<odoo>
<template id="s_alert" name="Alert">
<div class="s_alert s_alert_md alert-delta w-100 clearfix">
<i class="fa fa-2x fa-info-circle s_alert_icon"/>
<div class="s_alert_content">
<p>Explain the benefits you offer. <br/>Don't write about products or services here, write about solutions.</p>
</div>
</div>
</template>
<template id="s_card" name="Card">
<div class="s_card card bg-white w-100">
<h4 class="card-header">Feature Title</h4>
@@ -770,14 +761,6 @@
data-color-prefix="bg-"/>
</div>
<!-- COLOR | .s_alert -->
<div data-selector=".s_alert">
<we-colorpicker string="Color"
data-select-style="true"
data-css-property="background-color"
data-color-prefix="alert-"/>
</div>
<!-- H-ALIGN | .s_btn -->
<div data-selector=".s_btn, .s_share">
<we-select string="Alignment">
@@ -787,14 +770,6 @@
</we-select>
</div>
<div data-selector=".s_alert">
<we-select string="Size">
<we-button data-select-class="s_alert_sm">Small</we-button>
<we-button data-select-class="s_alert_md">Medium</we-button>
<we-button data-select-class="s_alert_lg">Large</we-button>
</we-select>
</div>
<div data-selector=".s_alert, .s_card">
<we-select string="Width">
<we-button data-select-class="w-25">25%</we-button>