mirror of
https://github.com/odoo/design-themes.git
synced 2025-10-07 01:18:52 +07:00
[ADD] theme 14.0
This commit is contained in:
Jeremy Kersten
File diff suppressed because one or more lines are too long
@@ -0,0 +1,19 @@
|
||||
odoo.define('theme_common.compatibility_editor', function (require) {
|
||||
'use strict';
|
||||
|
||||
var sOptions = require('web_editor.snippets.options');
|
||||
|
||||
sOptions.registry.BackgroundImage.include({
|
||||
/**
|
||||
* @override
|
||||
*/
|
||||
background: function (previewMode, widgetValue, params) {
|
||||
this._super.apply(this, arguments);
|
||||
|
||||
var customClass = this.$target.attr('class').match(/\b(bg-img-\d+)\b/);
|
||||
if (customClass) {
|
||||
this.$target.removeClass(customClass[1]);
|
||||
}
|
||||
},
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,115 @@
|
||||
odoo.define('theme_common.preheader', function (require) {
|
||||
'use strict';
|
||||
|
||||
var publicWidget = require('web.public.widget');
|
||||
require('website.content.menu');
|
||||
|
||||
publicWidget.registry.StandardAffixedHeader.include({
|
||||
/**
|
||||
* @override
|
||||
*/
|
||||
start: function () {
|
||||
this.$preheader = this.$el.find('#o_theme_preheader');
|
||||
this.preheaderVisible = this.$preheader.css('display') !== 'none';
|
||||
return this._super.apply(this, arguments);
|
||||
},
|
||||
/**
|
||||
* @override
|
||||
*/
|
||||
destroy: function () {
|
||||
this.$el.find('#o_theme_preheader').show();
|
||||
return this._super.apply(this, arguments);
|
||||
},
|
||||
|
||||
//--------------------------------------------------------------------------
|
||||
// Private
|
||||
//--------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* @override
|
||||
*/
|
||||
_updateHeaderOnScroll: function (scrollTop) {
|
||||
var def = this._super.apply(this, arguments);
|
||||
if (this.preheaderVisible) {
|
||||
if (this.$el.hasClass('o_header_is_scrolled')) {
|
||||
this.$el.find('#o_theme_preheader').hide();
|
||||
} else {
|
||||
this.$el.find('#o_theme_preheader').show(200);
|
||||
}
|
||||
}
|
||||
return def;
|
||||
}
|
||||
});
|
||||
publicWidget.registry.FixedHeader.include({
|
||||
/**
|
||||
* @override
|
||||
*/
|
||||
start: function () {
|
||||
this.$preheader = this.$el.find('#o_theme_preheader');
|
||||
this.preheaderVisible = this.$preheader.css('display') !== 'none';
|
||||
return this._super.apply(this, arguments);
|
||||
},
|
||||
/**
|
||||
* @override
|
||||
*/
|
||||
destroy: function () {
|
||||
this.$el.css('transform', '');
|
||||
return this._super.apply(this, arguments);
|
||||
},
|
||||
|
||||
//--------------------------------------------------------------------------
|
||||
// Private
|
||||
//--------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* @override
|
||||
*/
|
||||
_updateHeaderOnScroll: function (scrollTop) {
|
||||
var def = this._super.apply(this, arguments);
|
||||
if (this.preheaderVisible) {
|
||||
if (this.$el.hasClass('o_header_is_scrolled')) {
|
||||
if (!this.$el.hasClass('o_header_disappears') && !this.$el.hasClass('o_header_fade_out')) {
|
||||
const preheaderHeight = this.$el.find('#o_theme_preheader').outerHeight();
|
||||
this.$el.css('transform', 'translate(0, -' + preheaderHeight + 'px)');
|
||||
}
|
||||
} else {
|
||||
this.$el.css('transform', '');
|
||||
}
|
||||
}
|
||||
return def;
|
||||
}
|
||||
});
|
||||
|
||||
const BaseDisappearingPreheader = {
|
||||
/**
|
||||
* @override
|
||||
*/
|
||||
start: function () {
|
||||
this.$preheader = this.$el.find('#o_theme_preheader');
|
||||
this.preheaderVisible = this.$preheader.css('display') !== 'none';
|
||||
return this._super.apply(this, arguments);
|
||||
},
|
||||
|
||||
//--------------------------------------------------------------------------
|
||||
// Private
|
||||
//--------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* @override
|
||||
*/
|
||||
_showHeader: function () {
|
||||
var def = this._super.apply(this, arguments);
|
||||
if (this.preheaderVisible) {
|
||||
const preheaderHeight = this.$preheader.outerHeight();
|
||||
if (this.$el.hasClass('o_header_is_scrolled')) {
|
||||
this.$el.css('transform', 'translate(0, -' + preheaderHeight + 'px)');
|
||||
}
|
||||
}
|
||||
return def;
|
||||
}
|
||||
};
|
||||
|
||||
publicWidget.registry.DisappearingHeader.include(BaseDisappearingPreheader);
|
||||
publicWidget.registry.FadeOutHeader.include(BaseDisappearingPreheader);
|
||||
|
||||
});
|
||||
@@ -0,0 +1,15 @@
|
||||
odoo.define('theme_common.s_animated_boxes_frontend', function (require) {
|
||||
'use strict';
|
||||
|
||||
var publicWidget = require('web.public.widget');
|
||||
|
||||
/**
|
||||
* This is a fix for some apple devices.
|
||||
* The slide of animated boxes widget is shown on hover or click on mobile
|
||||
* devices, but iOS only activates :hover if the element targeted is
|
||||
* clickable.
|
||||
*/
|
||||
publicWidget.registry._fixAnimatedBoxesAppleClick = publicWidget.registry._fixAppleCollapse.extend({
|
||||
selector: '.s_animated_boxes .item',
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,77 @@
|
||||
|
||||
#wrapwrap .s_animated_boxes{
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
.item {
|
||||
height: 200px;
|
||||
background-size: cover;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
|
||||
> * {
|
||||
z-index: 0;
|
||||
position: relative;
|
||||
padding-top: $grid-gutter-width/2;
|
||||
padding-bottom: $grid-gutter-width/2;
|
||||
}
|
||||
.slide {
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-size: cover;
|
||||
left: 0;
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
padding: $grid-gutter-width/2;
|
||||
transition: opacity 400ms;
|
||||
|
||||
&.visible{
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
&:hover .slide{
|
||||
opacity: 1;
|
||||
transition: opacity 100ms;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
height: auto;
|
||||
min-height: 200px;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
min-height: 200px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.v-align {
|
||||
display: inline-block;
|
||||
width: 98%;
|
||||
vertical-align: middle;
|
||||
|
||||
top: auto;
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Used in editing mode
|
||||
body.editor_enable .s_animated_boxes {
|
||||
.item:hover .slide {
|
||||
display: none;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.item.showSlide .slide, .item.showSlide:hover .slide {
|
||||
display: block;
|
||||
opacity: 1;
|
||||
transform: translateY(0%)!important;
|
||||
transform: translateX(0%)!important;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
$s-banner-parallax-text-color: o-color('alpha') !default;
|
||||
|
||||
#wrapwrap .s_banner_parallax {
|
||||
margin-bottom: 0px !important;
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
background-position: $s-banner-parallax-bg-position;
|
||||
}
|
||||
@include s-banner-parallax-height-hook;
|
||||
|
||||
.container-fluid {
|
||||
|
||||
.row {
|
||||
height: $s-banner-parallax-height;
|
||||
@include s-banner-parallax-row-hook;
|
||||
|
||||
.hero-bg {
|
||||
padding-left: $s-banner-parallax-padding;
|
||||
color: $s-banner-parallax-text-color;
|
||||
@include s-banner-parallax-hero-bg-hook;
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
text-align: center;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: $s-banner-parallax-h1-size;
|
||||
text-shadow: $s-banner-parallax-text-shadow;
|
||||
|
||||
@media screen and (max-width: 360px) { // FIXME
|
||||
font-size: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 40px;
|
||||
text-shadow: $s-banner-parallax-text-shadow;
|
||||
|
||||
@media screen and (max-width: 360px) { // FIXME
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
max-height: $s-banner-parallax-img-height;
|
||||
|
||||
@media screen and (max-width: 360px) { // FIXME
|
||||
max-height: 200px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
$s-banner-parallax-height: 500px;
|
||||
$s-banner-parallax-padding: 130px;
|
||||
$s-banner-parallax-img-height: 200px;
|
||||
$s-banner-parallax-text-shadow: 1px 1px 11px rgba(0, 0, 0, 0.86);
|
||||
$s-banner-parallax-text-color: null;
|
||||
$s-banner-parallax-bg-position: center !important;
|
||||
$s-banner-parallax-h1-size: 80px;
|
||||
|
||||
@mixin s-banner-parallax-row-hook {}
|
||||
@mixin s-banner-parallax-height-hook {}
|
||||
@mixin s-banner-parallax-hero-bg-hook {}
|
||||
@@ -0,0 +1,42 @@
|
||||
.s_big_icons {
|
||||
text-align: center;
|
||||
@include s-big-icon-circle-height-hook;
|
||||
//fix -- without this in mobile view the circles go to the top and so they hide the h2 and h3 above it.
|
||||
.col-lg-12 {
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
|
||||
.s_big_icons_box {
|
||||
text-align: center;
|
||||
width: 150px;
|
||||
margin: 0 auto;
|
||||
.fa {
|
||||
color: #fff;
|
||||
font-size: 40px;
|
||||
@include s-big-icon-circle-fa-hook;
|
||||
}
|
||||
}
|
||||
|
||||
.s_big_icons_icon {
|
||||
width: $s-big-icon-circle-icon-size;
|
||||
height: $s-big-icon-circle-icon-size;
|
||||
text-align: center;
|
||||
padding: 40px 0;
|
||||
transition: all 0.3s ease-in-out;
|
||||
border-radius: 80px;
|
||||
margin: 0px auto;
|
||||
h5 {
|
||||
margin-top: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
.s_big_icons_box:hover .s_big_icons_icon {
|
||||
transition: all 0.3s ease-in-out;
|
||||
background-color: o-color('gamma');
|
||||
}
|
||||
|
||||
.s_big_icons_box:hover .s_big_icons_content h4 {
|
||||
transition: all 0.3s ease-in-out;
|
||||
color: o-color('gamma');
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
$s-big-icon-circle-icon-size: 120px;
|
||||
|
||||
@mixin s-big-icon-circle-height-hook {}
|
||||
@mixin s-big-icon-circle-fa-hook {}
|
||||
|
||||
@mixin o-theme-chd-big-icons-classes($border, $font-color) {
|
||||
.s_big_icons_box {
|
||||
.s_big_icons_icon {
|
||||
border: $border;
|
||||
color: #fff;
|
||||
.fa {
|
||||
color: o-color('alpha') !important;
|
||||
}
|
||||
h5.o_default_snippet_text {
|
||||
color: $font-color;
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
&:hover .s_big_icons_icon {
|
||||
@include o-theme-chd-big-icons-styles($h5-color: o-color('alpha'));
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
#wrapwrap .s_big_image {
|
||||
height: 760px;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
#wrapwrap .s_big_image_content {
|
||||
z-index: 999;
|
||||
h1 {
|
||||
color: white;
|
||||
font-size: 60px;
|
||||
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
#wrapwrap .s_big_image_parallax {
|
||||
min-height: 780px;
|
||||
padding-top: 80px;
|
||||
}
|
||||
|
||||
#wrapwrap .s_big_image_parallax_content {
|
||||
z-index: 999;
|
||||
h1 {
|
||||
color: white;
|
||||
font-size: 60px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
|
||||
#wrapwrap .s_clonable_boxes {
|
||||
width: 100%;
|
||||
height: auto!important; // Force height to avoid overlaps
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
|
||||
> div {
|
||||
display: flex;
|
||||
flex-flow: column wrap;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
padding-top: $grid-gutter-width/2;
|
||||
padding-bottom: $grid-gutter-width/2;
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
html[data-no-flex] .s_clonable_boxes {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
.item {
|
||||
height: 200px;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
#wrapwrap .s_color_blocks_4 {
|
||||
.row {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
|
||||
// Fix for safari browser as it 'supports' flex but not with the right
|
||||
// behavior
|
||||
&::before, &::after {
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
[class*="col-lg-"] {
|
||||
padding: 64px 20px;
|
||||
}
|
||||
@include media-breakpoint-down(md) {
|
||||
[class*="col-lg-"] {
|
||||
flex: 1 1 100%;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
|
||||
#wrapwrap .s_color_blocks_img_title {
|
||||
margin-bottom: 0px;
|
||||
h5 {
|
||||
padding-top: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
#wrapwrap .s_color_blocks_img_img img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
#wrapwrap .s_compact_menu {
|
||||
overflow: hidden;
|
||||
|
||||
.container-fluid .menu-container {
|
||||
overflow: hidden;
|
||||
|
||||
> div {
|
||||
&.s_compact_menu_row_title {
|
||||
h4 {
|
||||
font-size: 20px;
|
||||
}
|
||||
.fa {
|
||||
margin: 20px 0px;
|
||||
}
|
||||
}
|
||||
|
||||
> .row {
|
||||
min-height: 150px;
|
||||
height: auto;
|
||||
border-left: 3px solid gray('200');
|
||||
|
||||
> .menublock {
|
||||
margin: 0 0 0 20px;
|
||||
padding: 0 20px 0 0;
|
||||
border-bottom: 1px solid gray('200');
|
||||
float: left;
|
||||
h4 {
|
||||
font-weight: bold;
|
||||
}
|
||||
span {
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,122 @@
|
||||
odoo.define('theme_common.s_css_slider_frontend', function (require) {
|
||||
'use strict';
|
||||
|
||||
var publicWidget = require('web.public.widget');
|
||||
|
||||
publicWidget.registry.s_css_slider = publicWidget.Widget.extend({
|
||||
selector: ".s_css_slider",
|
||||
disabledInEditableMode: false,
|
||||
|
||||
start: function () {
|
||||
var self = this;
|
||||
var $container = self.$target;
|
||||
$container.find(".s_css_slider_pagination").remove();
|
||||
// create slider pagination
|
||||
var sliderPagination = self.createSliderPagination($container);
|
||||
self.bindEvents($container, sliderPagination);
|
||||
$(window).on("resize", function () {
|
||||
self.resizeImgs($container);
|
||||
}).trigger("resize");
|
||||
return this._super.apply(this, arguments);
|
||||
},
|
||||
|
||||
bindEvents: function ($container, sliderPagination) {
|
||||
var self = this,
|
||||
$next_btn = $container.find('.next'),
|
||||
$prev_btn = $container.find('.prev');
|
||||
|
||||
$next_btn.on('click.s_css', function (e) {
|
||||
self.nextSlide($container, sliderPagination);
|
||||
});
|
||||
|
||||
$prev_btn.on('click.s_css', function (e) {
|
||||
self.prevSlide($container, sliderPagination);
|
||||
});
|
||||
|
||||
if ($container.hasClass("autoplay") && this.editableMode !== true) {
|
||||
var interval;
|
||||
var autoplay = function () {
|
||||
interval = setInterval(function () {
|
||||
if (!$next_btn.hasClass("inactive")) {
|
||||
self.nextSlide($container, sliderPagination);
|
||||
} else {
|
||||
self.prevSlide($container, sliderPagination, 0);
|
||||
}
|
||||
}, 3000);
|
||||
};
|
||||
autoplay();
|
||||
$container.hover(function () { clearInterval(interval); });
|
||||
$container.mouseleave(function () { autoplay(); });
|
||||
}
|
||||
|
||||
sliderPagination.on('click.s_css', function () {
|
||||
var selectedDot = $(this);
|
||||
if (!selectedDot.hasClass('selected')) {
|
||||
var selectedPosition = selectedDot.index(),
|
||||
activePosition = $container.find('.slider .selected').index();
|
||||
if ( activePosition < selectedPosition) {
|
||||
self.nextSlide($container, sliderPagination, selectedPosition);
|
||||
} else {
|
||||
self.prevSlide($container, sliderPagination, selectedPosition);
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
resizeImgs: function ($container) {
|
||||
var cont_h = $container.height(),
|
||||
imgs = $container.find(".slide img");
|
||||
|
||||
imgs.each(function () {
|
||||
var $img = $(this),
|
||||
img_h = $img.height();
|
||||
if (img_h > cont_h) {
|
||||
$img.css("width", "100%");
|
||||
$img.css("margin-top", (cont_h - img_h)/2);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
createSliderPagination: function ($container) {
|
||||
var wrapper = $('<ul class="s_css_slider_pagination"></ul>').insertAfter($container.find('.navigation'));
|
||||
$container.find('.slider .slide').each(function (index) {
|
||||
var dotWrapper = (index === 0) ? $('<li class="selected"></li>') : $('<li></li>'),
|
||||
dot = $('<a href="#0"></a>').appendTo(dotWrapper);
|
||||
dotWrapper.appendTo(wrapper);
|
||||
dot.text(index+1);
|
||||
});
|
||||
return wrapper.children('li');
|
||||
},
|
||||
|
||||
nextSlide: function ($container, $pagination, $n) {
|
||||
var self = this,
|
||||
visibleSlide = $container.find('.slider .selected'),
|
||||
navigationDot = $container.find('.s_css_slider_pagination .selected');
|
||||
|
||||
if (typeof $n === 'undefined') $n = visibleSlide.index() + 1;
|
||||
visibleSlide.removeClass('selected');
|
||||
$container.find('.slider .slide').eq($n).addClass('selected').prevAll().addClass('move-left');
|
||||
navigationDot.removeClass('selected');
|
||||
$pagination.eq($n).addClass('selected');
|
||||
self.updateNavigation($container, $container.find('.slider .slide').eq($n));
|
||||
},
|
||||
|
||||
prevSlide: function ($container, $pagination, $n) {
|
||||
var self = this,
|
||||
visibleSlide = $container.find('.slider .selected'),
|
||||
navigationDot = $container.find('.s_css_slider_pagination .selected');
|
||||
|
||||
if (typeof $n === 'undefined') $n = visibleSlide.index() - 1;
|
||||
visibleSlide.removeClass('selected');
|
||||
$container.find('.slider .slide').eq($n).addClass('selected').removeClass('move-left').nextAll().removeClass('move-left');
|
||||
navigationDot.removeClass('selected');
|
||||
$pagination.eq($n).addClass('selected');
|
||||
self.updateNavigation($container, $container.find('.slider .slide').eq($n));
|
||||
},
|
||||
|
||||
updateNavigation: function ($container, $active) {
|
||||
$container.find('.prev').toggleClass('inactive', $active.is(':first-child'));
|
||||
$container.find('.next').toggleClass('inactive', $active.is(':last-child'));
|
||||
},
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,153 @@
|
||||
|
||||
#wrapwrap .s_css_slider {
|
||||
position: relative;
|
||||
min-height: 150px;
|
||||
|
||||
.wrapper {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
transition: width 400ms;
|
||||
/* Force Hardware Acceleration */
|
||||
transform: translateZ(0);
|
||||
backface-visibility: hidden;
|
||||
|
||||
@include s-css-slider-wrapper-hook;
|
||||
}
|
||||
|
||||
.slider{
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
overflow: hidden;
|
||||
@include s-css-slider-slider-hook;
|
||||
}
|
||||
|
||||
.slider .slide {
|
||||
position: absolute;
|
||||
list-style: none;
|
||||
overflow: hidden;
|
||||
top:0;
|
||||
left:0;
|
||||
margin: 0;
|
||||
z-index: 10;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
transform: translate(100%, 0);
|
||||
transition: transform 300ms linear;
|
||||
.info {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
|
||||
&:not([class*=bg-]) {
|
||||
color : $s-css-slider-info-text-color;
|
||||
background-color : $s-css-slider-info-bg-color;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
padding: $grid-gutter-width;
|
||||
padding-top: $grid-gutter-width*0.5;
|
||||
@include o-position-absolute(30%, $left: 60px);
|
||||
max-width: 60%;
|
||||
}
|
||||
}
|
||||
img {
|
||||
display:block;
|
||||
width:100%;
|
||||
|
||||
// Fix the image size on some devices (e.g. iPhone X)
|
||||
@media screen and (max-width: 400px) {
|
||||
// The image height was greater than the container height
|
||||
height: 100%;
|
||||
|
||||
// Necessary if we don't want images of different sizes
|
||||
// see resizeImgs() in s_css_slider_frontend.js
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
}
|
||||
&.selected {
|
||||
position:relative;
|
||||
z-index:12;
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
&.move-left {
|
||||
transform: translate(-100%, 0);
|
||||
}
|
||||
}
|
||||
.navigation li {
|
||||
position:absolute;
|
||||
z-index:12;
|
||||
top:50%;
|
||||
list-style:none;
|
||||
bottom:auto;
|
||||
transform: translate(0, -50%);
|
||||
|
||||
span {
|
||||
display: block;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
overflow: hidden;
|
||||
font-size: 1.6em;
|
||||
color: $s-css-slider-navigation-color;
|
||||
text-shadow: $s-css-slider-navigation-text-shadow;
|
||||
white-space: nowrap;
|
||||
transition: e("opacity 200ms, visibility 0s");
|
||||
|
||||
@include s-css-slider-navigation-buttons-hook;
|
||||
|
||||
&.inactive {
|
||||
opacity:0;
|
||||
visibility:hidden;
|
||||
transition: e("opacity 200ms 0s, visibility 0s 200ms");
|
||||
}
|
||||
&:hover {
|
||||
opacity:.7;
|
||||
}
|
||||
}
|
||||
&:first-of-type {
|
||||
left:10px;
|
||||
}
|
||||
&:last-of-type {
|
||||
right:10px;
|
||||
}
|
||||
|
||||
@include s-css-slider-navigation-hook;
|
||||
}
|
||||
|
||||
.s_css_slider_pagination {
|
||||
position:absolute;
|
||||
padding: 0;
|
||||
z-index: 12;
|
||||
bottom: 30px;
|
||||
left: 50%;
|
||||
right:auto;
|
||||
transform: translate(-50%, 0);
|
||||
|
||||
li {
|
||||
display:inline-block;
|
||||
float:left;
|
||||
margin:0 5px;
|
||||
}
|
||||
li.selected a {
|
||||
background:#f5f4f3;
|
||||
}
|
||||
a {
|
||||
display:block;
|
||||
height:12px;
|
||||
width:12px;
|
||||
border-radius:50%;
|
||||
box-shadow: 0 1px 0 #333;
|
||||
border:1px solid #f5f4f3;
|
||||
background-color:rgba(255,255,255,0);
|
||||
overflow:hidden;
|
||||
text-indent:100%;
|
||||
white-space:nowrap;
|
||||
}
|
||||
&:after {
|
||||
content:"";
|
||||
display:table;
|
||||
clear:both;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
$s-css-slider-navigation-color: white;
|
||||
$s-css-slider-navigation-text-shadow: 0 1px 0 #333;
|
||||
$s-css-slider-info-bg-color: #fff;
|
||||
$s-css-slider-info-text-color: #333;
|
||||
|
||||
@mixin s-css-slider-wrapper-hook {}
|
||||
@mixin s-css-slider-slider-hook {}
|
||||
@mixin s-css-slider-slider-hover-hook {}
|
||||
@mixin s-css-slider-navigation-hook {}
|
||||
@mixin s-css-slider-navigation-buttons-hook {}
|
||||
@@ -0,0 +1,99 @@
|
||||
|
||||
#wrapwrap .s_discount_box {
|
||||
background: white;
|
||||
padding: 30px 0;
|
||||
border-radius: $s-discount-box-border-radius;
|
||||
position: relative;
|
||||
box-shadow: 0px 0px 5px 0px rgba(gray('700'), 0.5);
|
||||
word-wrap: break-word;
|
||||
|
||||
&:before {
|
||||
content: " ";
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
background: white;
|
||||
border-radius: 20px;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 20px;
|
||||
margin-left: -10px;
|
||||
}
|
||||
|
||||
@include s-discount-box-hook;
|
||||
}
|
||||
|
||||
#wrapwrap .s_discount_brand {
|
||||
text-transform: uppercase;
|
||||
letter-spacing: $s-discount-brand-letter-spacing;
|
||||
padding: 10px 15px;
|
||||
margin-top: 10px;
|
||||
text-align: center;
|
||||
min-height: 100px;
|
||||
@include s-discount-brand-hook;
|
||||
}
|
||||
|
||||
#wrapwrap .s_discount_amount {
|
||||
min-height: 100px;
|
||||
position: relative;
|
||||
font-size: $s-discount-amount-size;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
padding: 20px 15px;
|
||||
text-shadow: 1px 1px 2px 0px white;
|
||||
color: white;
|
||||
|
||||
&:after {
|
||||
content: " ";
|
||||
border-right: 20px solid rgba(0, 0, 0, 0);
|
||||
border-left: 20px solid rgba(0, 0, 0, 0);
|
||||
position: absolute;
|
||||
bottom: -20px;
|
||||
left: 20%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
#wrapwrap .s_discount_type {
|
||||
font-size: 20px;
|
||||
|
||||
letter-spacing: 1px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
#wrapwrap .s_discount_descr {
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
color: gray('800');
|
||||
margin-top: 10px;
|
||||
padding: 20px 25px;
|
||||
@include s-discount-descr-hook;
|
||||
}
|
||||
|
||||
#wrapwrap .s_discount_ends {
|
||||
padding: 0 25px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
#wrapwrap .s_discount_coupon {
|
||||
min-height: 50px;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
padding: 20px 15px;
|
||||
|
||||
a {
|
||||
color: $s-discount-coupon-color;
|
||||
}
|
||||
}
|
||||
|
||||
#wrapwrap .s_discount_code {
|
||||
letter-spacing: 1px;
|
||||
border-radius: 4px;
|
||||
margin-top: 10px;
|
||||
background: #f0f0f0;
|
||||
color: gray('800');
|
||||
.code {
|
||||
padding: 10px 15px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
$s-discount-box-border-radius: 20px;
|
||||
$s-discount-brand-letter-spacing: 3px;
|
||||
$s-discount-coupon-color: white;
|
||||
$s-discount-amount-size: 80px;
|
||||
|
||||
@mixin s-discount-brand-hook {}
|
||||
@mixin s-discount-descr-hook {}
|
||||
@mixin s-discount-box-hook {}
|
||||
@@ -0,0 +1,188 @@
|
||||
|
||||
#wrapwrap .s_event_list_item {
|
||||
@include clearfix;
|
||||
box-shadow: 0px 0px 5px rgba(black, 0.25);
|
||||
margin: 0px 0px 20px;
|
||||
|
||||
> time {
|
||||
display: block;
|
||||
padding: 5px;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
div {
|
||||
display: none;
|
||||
}
|
||||
.s_event_list_day, .s_event_list_month, .s_event_list_time {
|
||||
display: block;
|
||||
line-height: 1;
|
||||
}
|
||||
.s_event_list_day {
|
||||
font-size: 50px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
.s_event_list_month {
|
||||
font-size: 30px;
|
||||
}
|
||||
.s_event_list_time {
|
||||
font-size: 16px;
|
||||
font-weight: 200;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
}
|
||||
> .s_event_list_icon {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
> .s_event_list_info,
|
||||
> .s_event_list_social {
|
||||
> ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
> li {
|
||||
float: left;
|
||||
color: gray('800');
|
||||
font-size: 11px;
|
||||
font-weight: 300;
|
||||
|
||||
&:hover {
|
||||
color: gray('800');
|
||||
background-color: gray('200');
|
||||
}
|
||||
|
||||
> a {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
> .s_event_list_info {
|
||||
padding-top: 5px;
|
||||
text-align: center;
|
||||
> .s_event_list_title {
|
||||
margin: 5px 0 0;
|
||||
@include o-text-overflow;
|
||||
}
|
||||
> .s_event_list_desc {
|
||||
font-size: 14px;
|
||||
font-weight: 300;
|
||||
margin: 8px 0 0;
|
||||
word-wrap: break-word;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-height: 2.2em;
|
||||
line-height: 1.1em;
|
||||
.fa {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
> ul {
|
||||
margin-top: 10px;
|
||||
> li {
|
||||
width: 50%;
|
||||
> a {
|
||||
display: block;
|
||||
width: 100%;
|
||||
color: gray('800');
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
> .s_event_list_social > ul {
|
||||
> li {
|
||||
width: 33.3333%;
|
||||
padding: 0px;
|
||||
> a {
|
||||
padding: 9px 0px 3px;
|
||||
}
|
||||
|
||||
&:hover > a {
|
||||
color: white!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.s_event_list_facebook a {
|
||||
color: $color-facebook!important;
|
||||
}
|
||||
.s_event_list_twitter a {
|
||||
color: $color-twitter!important;
|
||||
}
|
||||
.s_event_list_google_plus a {
|
||||
color: $color-google!important;
|
||||
}
|
||||
.s_event_list_facebook:hover a {
|
||||
background-color: $color-facebook !important;
|
||||
}
|
||||
.s_event_list_twitter:hover a {
|
||||
background-color: $color-twitter !important;
|
||||
}
|
||||
.s_event_list_google_plus:hover a {
|
||||
background-color: $color-google !important;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
#wrapwrap .s_event_list_item {
|
||||
display: flex;
|
||||
position: relative;
|
||||
> .s_event_list_icon {
|
||||
width: $s-event-list-main-size;
|
||||
height: $s-event-list-main-size;
|
||||
float: left;
|
||||
text-align: center;
|
||||
.fa {
|
||||
line-height: $s-event-list-main-size;
|
||||
}
|
||||
}
|
||||
> img {
|
||||
height: $s-event-list-main-size;
|
||||
}
|
||||
> time {
|
||||
max-width: $s-event-list-main-size;
|
||||
}
|
||||
> time, > img {
|
||||
flex: 1 1 auto;
|
||||
min-height: $s-event-list-main-size;
|
||||
min-width: $s-event-list-main-size;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
float: left;
|
||||
}
|
||||
> .s_event_list_info {
|
||||
flex: 1 1 auto;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
min-height: $s-event-list-main-size;
|
||||
padding-right: 40px;
|
||||
text-align: left;
|
||||
> .s_event_list_title, .s_event_list_desc {
|
||||
padding: 0px 10px;
|
||||
}
|
||||
> ul {
|
||||
@include o-position-absolute($left: 0, $bottom: 0, $right: 40px);
|
||||
}
|
||||
}
|
||||
> .s_event_list_social {
|
||||
flex: 1 1 auto;
|
||||
@include o-position-absolute($top: 0, $right: 0, $bottom: 0);
|
||||
width: 40px;
|
||||
> ul {
|
||||
height: 100%;
|
||||
border-left: 1px solid lighten(gray('200'), 10%);
|
||||
> li {
|
||||
width: 100%;
|
||||
height: 33.333%;
|
||||
> a {
|
||||
padding: 9px 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
$color-facebook: #4b6ea8;
|
||||
$color-twitter: #4fd5f8;
|
||||
$color-google: #dd4b39;
|
||||
$s-event-list-main-size: 120px;
|
||||
@@ -0,0 +1,51 @@
|
||||
#wrapwrap .s_event_slide {
|
||||
overflow: hidden;
|
||||
.row {
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
box-shadow: inset 0px -7px 9px -6px rgba(0,0,0,0.45);
|
||||
.s_event_slide_title{
|
||||
float: left;
|
||||
@media screen and (max-width: 640px) { // FIXME
|
||||
padding-bottom: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.s_event_slide_list {
|
||||
float: right;
|
||||
border-left: 4px solid o-color('epsilon');
|
||||
.header-border {
|
||||
width: 20%;
|
||||
height: 5px;
|
||||
margin-bottom: 15px;
|
||||
border-radius: 10px;
|
||||
background-color: o-color('epsilon');
|
||||
}
|
||||
> .row > div {
|
||||
border-right: 1px solid gray('200');
|
||||
border-bottom: 1px solid gray('200');
|
||||
text-align: left;
|
||||
h4 {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.event {
|
||||
height: 400px;
|
||||
overflow: hidden;
|
||||
overflow-y: scroll;
|
||||
padding-top: 40px;
|
||||
@include media-breakpoint-down(sm) {
|
||||
overflow: visible;
|
||||
height: auto;
|
||||
}
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.fa {
|
||||
display: inline-block;
|
||||
margin-top: 50px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
|
||||
#wrapwrap .s_features_carousel {
|
||||
//height: 650px;
|
||||
@include s-features-carousel-inner-hook;
|
||||
[class*="col-lg-"] img {
|
||||
max-height: 400px;
|
||||
}
|
||||
|
||||
.circle {
|
||||
position: relative;
|
||||
height: 250px;
|
||||
width: 250px;
|
||||
@media only screen and (max-width : 360px) { // FIXME
|
||||
width: 165px;
|
||||
height: 165px;
|
||||
}
|
||||
}
|
||||
.mask {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
padding: 40px;
|
||||
border-radius: 50%;
|
||||
font-size: 20px;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
@include s-features-carousel-mask-hook;
|
||||
@media only screen and (max-width : 360px) { // FIXME
|
||||
font-size: 15px;
|
||||
line-height: 15px;
|
||||
padding: 15px;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
border-bottom: {
|
||||
width: $s-features-carousel-border-width;
|
||||
style: $s-features-carousel-border-style;
|
||||
color: if(s-features-carousel-border-color != null, $s-features-carousel-border-color, gray('600'));
|
||||
}
|
||||
text-align: center;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
.carousel-indicators {
|
||||
border-top: 1px dotted gray('600');
|
||||
padding-top: 32px;
|
||||
visibility: $s-features-carousel-indicators-visible;
|
||||
li {
|
||||
border: 1px solid gray('200');
|
||||
}
|
||||
}
|
||||
.carousel-indicators .active {
|
||||
border: 1px solid o-color('gamma') !important;
|
||||
}
|
||||
.carousel-control-prev,
|
||||
.carousel-control-next {
|
||||
opacity: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
@include media-breakpoint-down(sm) {
|
||||
[class*="col-lg-"] > p {
|
||||
padding: 0 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
$s-features-carousel-border-width: 1px;
|
||||
$s-features-carousel-border-style: dotted;
|
||||
$s-features-carousel-border-color: null; // (default to a BS color)
|
||||
$s-features-carousel-indicators-visible: hidden;
|
||||
|
||||
@mixin s-features-carousel-inner-hook {}
|
||||
@mixin s-features-carousel-mask-hook {}
|
||||
@@ -0,0 +1,46 @@
|
||||
#wrapwrap .s_full_menu {
|
||||
overflow: hidden;
|
||||
.container-fluid {
|
||||
h2 {
|
||||
text-align: center;
|
||||
}
|
||||
h4 {
|
||||
font-size: 20px;
|
||||
}
|
||||
.menu-container > .s_full_menu_content {
|
||||
border-left: 3px solid gray('200');
|
||||
.row {
|
||||
.s_full_menu_content_description {
|
||||
border-bottom: 1px solid gray('200');
|
||||
padding-bottom: 15px;
|
||||
line-height: 1;
|
||||
span {
|
||||
text-transform: uppercase;
|
||||
list-style: none;
|
||||
}
|
||||
@media screen and (max-width: 1024px) { // FIXME
|
||||
font-size: 12px;
|
||||
}
|
||||
@media screen and (max-width: 360px) { // FIXME
|
||||
top: 0px;
|
||||
}
|
||||
}
|
||||
img {
|
||||
max-width: 200px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.price {
|
||||
font-size: 2vw;
|
||||
@media screen and (max-width: 360px) { // FIXME
|
||||
font-size: 6.5vw;
|
||||
}
|
||||
}
|
||||
.slash {
|
||||
font-size: 2vw;
|
||||
@media screen and (max-width: 360px) { // FIXME
|
||||
font-size: 6.5vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
#wrapwrap .s_header_text_big_picture {
|
||||
.s_header_text_big_picture_picturecol {
|
||||
padding: 0;
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
[class*="col-lg-"] p {
|
||||
padding: 0 25px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
#wrapwrap .s_icon_box {
|
||||
.fa {
|
||||
margin: 10px 20px;
|
||||
&:hover {
|
||||
transition: all 0.3s ease-in-out;
|
||||
color: o-color('gamma');
|
||||
}
|
||||
}
|
||||
.icon_box_content {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
.s_images_carousel {
|
||||
height: 400px;
|
||||
&.carousel {
|
||||
@include media-breakpoint-down(md) {
|
||||
height: auto !important;
|
||||
}
|
||||
.carousel-inner,
|
||||
.carousel-item {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
@include media-breakpoint-up(lg) {
|
||||
img {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
}
|
||||
}
|
||||
.carousel-caption {
|
||||
background-color: #fff;
|
||||
color: $body-color;
|
||||
padding: 5px 0;
|
||||
bottom: 55px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
.s_images_row {
|
||||
.s_images_row_overlay {
|
||||
min-height: 250px;
|
||||
&:after {
|
||||
content: '';
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.s_images_row_body {
|
||||
// @include o-position-absolute($spacer,$spacer,$spacer,$spacer);
|
||||
background-color: #fff;
|
||||
padding: $spacer/2 $spacer;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
#wrapwrap .s_menu_three_columns {
|
||||
.three-column {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
z-index: 800;
|
||||
.big-menu {
|
||||
height: 150px;
|
||||
position: relative;
|
||||
padding: 0;
|
||||
@include media-breakpoint-down(sm) {
|
||||
height: 100px;
|
||||
}
|
||||
@media only screen and (max-width : 360px) { // FIXME
|
||||
height: 80px;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
&:hover, &:focus {
|
||||
text-decoration: none;
|
||||
background-color: $white;
|
||||
transition: all 200ms ease;
|
||||
}
|
||||
}
|
||||
h2 {
|
||||
line-height: 150px;
|
||||
margin-top: 0;
|
||||
@include media-breakpoint-down(sm) {
|
||||
line-height: 100px;
|
||||
line-height: 100px;
|
||||
}
|
||||
@media only screen and (max-width : 360px) { // FIXME
|
||||
height: 80px;
|
||||
line-height: 80px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
odoo.define('theme_common.s_mini_nav_bar', function (require) {
|
||||
'use strict';
|
||||
|
||||
const dom = require('web.dom');
|
||||
var publicWidget = require('web.public.widget');
|
||||
|
||||
publicWidget.registry.miniNavbarScroll = publicWidget.Widget.extend({
|
||||
selector: '.s_mini_nav_bar a[href*="#"]:not([href="#"])',
|
||||
events: {
|
||||
'click': '_onClick',
|
||||
},
|
||||
|
||||
//----------------------------------------------------------------------
|
||||
// Handlers
|
||||
//----------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Called on click on the mini navbar link -> scroll to the section.
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
_onClick: function (ev) {
|
||||
var index = $(this).parent().index();
|
||||
var target = $('.o_scroll_nav').get(index);
|
||||
if (target) {
|
||||
ev.preventDefault();
|
||||
dom.scrollTo(target);
|
||||
}
|
||||
},
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,27 @@
|
||||
|
||||
#wrapwrap .s_mini_nav_bar_nav {
|
||||
position: relative;
|
||||
top: -50px;
|
||||
height: 82px;
|
||||
padding: 0px;
|
||||
.btn {
|
||||
font-family: $font-family-sans-serif;
|
||||
text-align: center;
|
||||
width: 82px;
|
||||
height: 82px;
|
||||
line-height: 1.33;
|
||||
border-radius: 48px;
|
||||
border: 0px;
|
||||
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
#wrapwrap .s_mini_nav_bar_content h1 {
|
||||
color: white;
|
||||
font-size: 60px;
|
||||
}
|
||||
|
||||
#wrapwrap .s_mini_nav_bar_item {
|
||||
margin: 0 20px;
|
||||
min-height: 100px;
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
.s_news_carousel {
|
||||
.carousel-inner {
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.s_news_carousel_date {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: $grid-gutter-width;
|
||||
}
|
||||
|
||||
.s_news_carousel_day {
|
||||
line-height: 1;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.s_news_carousel_month {
|
||||
margin-bottom: 10px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.s_news_carousel_content {
|
||||
padding: $grid-gutter-width;
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
#wrapwrap .s_pricing strong {
|
||||
font-weight: 700;
|
||||
color: gray('800');
|
||||
}
|
||||
|
||||
#wrapwrap .s_pricing_footer {
|
||||
height: 32px;
|
||||
}
|
||||
#wrapwrap .s_pricing_box {
|
||||
box-shadow: 0px 2px 5px 0px rgba(black, 0.1);
|
||||
border: 1px solid lighten(gray('200'), 10%);
|
||||
}
|
||||
|
||||
#wrapwrap .s_pricing_header {
|
||||
padding: 24px 12px;
|
||||
min-height: 180px;
|
||||
|
||||
h2 {
|
||||
font-weight: 700;
|
||||
}
|
||||
h3 {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
#wrapwrap .s_pricing_features {
|
||||
padding: 15px 10px 15px 10px;
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
font-size: 14px;
|
||||
}
|
||||
@@ -0,0 +1,91 @@
|
||||
|
||||
#wrapwrap .s_products_carousel {
|
||||
|
||||
.carousel-inner {
|
||||
height: $s-products-carousel-carousel-height;
|
||||
.carousel-item {
|
||||
height: 100%
|
||||
}
|
||||
}
|
||||
|
||||
.carousel-indicators {
|
||||
visibility: $s-products-carousel-indicators-visible;
|
||||
bottom: $s-products-carousel-indicators-position;
|
||||
}
|
||||
|
||||
.carousel-control-prev,
|
||||
.carousel-control-next {
|
||||
cursor: pointer;
|
||||
opacity: 1;
|
||||
width: 70px;
|
||||
}
|
||||
|
||||
.carousel-control-prev-icon,
|
||||
.carousel-control-next-icon {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.row {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.container-fluid {
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
|
||||
.product-widget {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
text-align: center;
|
||||
|
||||
@media screen and (max-width: 360px) {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.widget{
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
|
||||
@media screen and (max-width: 360px) {
|
||||
transform: none;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
img {
|
||||
max-height: 120px;
|
||||
&:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hero-bg {
|
||||
padding: $s-products-carousel-hero-bg-padding;
|
||||
color: o-color('alpha');
|
||||
text-align: center;
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
padding-top: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 360px) {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 85px;
|
||||
text-shadow: 1px 1px 11px rgba(0, 0, 0, 0.86);
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
font-size: 65px;
|
||||
}
|
||||
@media screen and (max-width: 360px) {
|
||||
font-size: 35px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
$s-products-carousel-carousel-height: 500px;
|
||||
$s-products-carousel-indicators-position: 0;
|
||||
$s-products-carousel-indicators-visible: hidden;
|
||||
$s-products-carousel-hero-bg-padding: 60px 90px 0 90px;
|
||||
|
||||
@mixin s-products-carousel-hook {}
|
||||
@@ -0,0 +1,34 @@
|
||||
#wrapwrap .s_profile_box {
|
||||
min-height: 450px;
|
||||
color: gray('800');
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: gray('800');
|
||||
}
|
||||
|
||||
span.tags
|
||||
{
|
||||
background: gray('700');
|
||||
border-radius: 2px;
|
||||
color: white;
|
||||
padding: 2px 4px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
#wrapwrap .s_profile_box_divider {
|
||||
border-top: 1px solid lighten(gray('600'), 15%);
|
||||
}
|
||||
|
||||
#wrapwrap .s_profile_box_emphasis:hover {
|
||||
transition: all 0.3s ease-in-out;
|
||||
background-color: lighten(gray('200'), 10%);
|
||||
}
|
||||
|
||||
#wrapwrap .s_profile .card p, #wrapwrap .s_profile .card h2 {
|
||||
color: gray('800');
|
||||
}
|
||||
@@ -0,0 +1,73 @@
|
||||
#wrapwrap .s_progress {
|
||||
> div > .row > div {
|
||||
border-left-width: 1px;
|
||||
border-left-style: solid;
|
||||
@include media-breakpoint-down(sm) {
|
||||
border-bottom-width: 1px;
|
||||
border-bottom-style: solid;
|
||||
border-left-width: 0;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
border-left-width: 0;
|
||||
}
|
||||
|
||||
&:last-child .process {
|
||||
color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.fa {
|
||||
font-size: 60px;
|
||||
}
|
||||
.icon-container {
|
||||
max-width: 250px;
|
||||
}
|
||||
.progress-iconset {
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
min-height: 230px;
|
||||
@include media-breakpoint-down(sm) {
|
||||
min-height: 50px;
|
||||
}
|
||||
|
||||
&:after, &:before {
|
||||
content: " ";
|
||||
display: block;
|
||||
width: 50%;
|
||||
height: 50px;
|
||||
border-right: 1px solid silver;
|
||||
margin: 10px 0;
|
||||
}
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.progress-content ~ .progress-iconset {
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
&:before {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.process {
|
||||
font-size: 25px;
|
||||
height: 25px;
|
||||
text-align: right;
|
||||
width: 100%;
|
||||
@include media-breakpoint-down(sm) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.progress-content {
|
||||
padding: 10px 25px;
|
||||
min-height: 230px;
|
||||
@include media-breakpoint-down(sm) {
|
||||
min-height: 50px;
|
||||
}
|
||||
h1 {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
|
||||
#wrapwrap .s_separator_nav {
|
||||
position: relative;
|
||||
top: -50px;
|
||||
height: 82px;
|
||||
padding: 0px;
|
||||
.btn {
|
||||
font-family: $font-family-sans-serif;
|
||||
text-align: center;
|
||||
width: 82px;
|
||||
height: 82px;
|
||||
padding-top: 24px;
|
||||
font-size: 26px;
|
||||
line-height: 1.33;
|
||||
border-radius: 48px;
|
||||
border: 0px;
|
||||
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
#wrapwrap .s_separator_nav_item {
|
||||
margin: 0 20px;
|
||||
min-height: 100px;
|
||||
}
|
||||
@@ -0,0 +1,106 @@
|
||||
|
||||
#wrapwrap .s_showcase_image {
|
||||
height: auto;
|
||||
text-align: left;
|
||||
.info {
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
> .row {
|
||||
height: 100%;
|
||||
}
|
||||
figure {
|
||||
background-size : cover;
|
||||
position : relative;
|
||||
height : 200px;
|
||||
|
||||
// Layout Options
|
||||
// =======================
|
||||
&.tl figcaption {
|
||||
top : 0;
|
||||
left : 0;
|
||||
bottom : auto;
|
||||
right : auto;
|
||||
margin-left : 14px;
|
||||
text-align: right;
|
||||
}
|
||||
&.tr figcaption {
|
||||
top : 0;
|
||||
left : auto;
|
||||
bottom : auto;
|
||||
right : 0;
|
||||
}
|
||||
&.bl figcaption {
|
||||
top : auto;
|
||||
left : 0;
|
||||
bottom : 0;
|
||||
margin-left : 14px;
|
||||
right : auto;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
figcaption {
|
||||
position : absolute;
|
||||
bottom : 0;
|
||||
width : 100%;
|
||||
text-shadow : $s-showcase-image-caption-text-shadow;
|
||||
font-size : $s-showcase-image-caption-font-size-mobile;
|
||||
padding : $s-showcase-image-caption-padding;
|
||||
|
||||
&:not([class*=bg-]) {
|
||||
color : $s-showcase-image-caption-color;
|
||||
background : $s-showcase-image-caption-bg;
|
||||
}
|
||||
|
||||
h6 {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
height: 350px;
|
||||
.info {
|
||||
height: 100%;
|
||||
margin-bottom: 0;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
justify-content: center;
|
||||
}
|
||||
figure {
|
||||
height: 100%;
|
||||
}
|
||||
figcaption {
|
||||
position : absolute;
|
||||
bottom : 0;
|
||||
right : 0;
|
||||
width : 50%;
|
||||
font-size : $s-showcase-image-caption-font-size-desktop;
|
||||
padding : $s-showcase-image-caption-padding;
|
||||
}
|
||||
}
|
||||
|
||||
&.s_right {
|
||||
text-align: right;
|
||||
figure {
|
||||
float: right;
|
||||
|
||||
// Layout Options
|
||||
// =======================
|
||||
&.tl figcaption {
|
||||
margin-left: 0;
|
||||
}
|
||||
&.tr figcaption {
|
||||
margin-right : 14px;
|
||||
}
|
||||
&.bl figcaption {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
figcaption {
|
||||
margin-right : 14px;
|
||||
text-align : left;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
$s-showcase-image-caption-bg : white;
|
||||
$s-showcase-image-caption-color : #333;
|
||||
$s-showcase-image-caption-padding : 1em;
|
||||
$s-showcase-image-caption-font-size-mobile : 1em;
|
||||
$s-showcase-image-caption-font-size-desktop : .8em;
|
||||
$s-showcase-image-caption-text-shadow : none;
|
||||
@@ -0,0 +1,132 @@
|
||||
odoo.define("theme_common.s_showcase_slider_frontend", function (require) {
|
||||
"use strict";
|
||||
|
||||
const dom = require('web.dom');
|
||||
var publicWidget = require('web.public.widget');
|
||||
|
||||
publicWidget.registry.s_showcase_slider = publicWidget.Widget.extend({
|
||||
selector: ".s_showcase_slider",
|
||||
|
||||
start: function () {
|
||||
_.defer(this.bindEvents.bind(this)); // FIXME delayed to counter a web_editor bug which off all click event
|
||||
this.createPagination();
|
||||
return this._super.apply(this, arguments);
|
||||
},
|
||||
|
||||
destroy: function () {
|
||||
this._super.apply(this, arguments);
|
||||
_.defer(this.unbindEvents.bind(this)); // FIXME delayed to counter a web_editor bug which off all click event
|
||||
this.destroyPagination();
|
||||
this.$target.removeClass("active");
|
||||
},
|
||||
|
||||
bindEvents: function () {
|
||||
// Enlarge image on click if not already enlarged
|
||||
this.$target.on("click.s_showcase_slider", ".s_ss_slider", (function (e) {
|
||||
if (this.$target.hasClass("active")) return;
|
||||
|
||||
this.$target
|
||||
.addClass("active")
|
||||
.one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend", (function () {
|
||||
dom.scrollTo(this.$target[0], {
|
||||
duration: 200,
|
||||
extraOffset: 70,
|
||||
});
|
||||
this.$target.trigger("transitionIsFinished");
|
||||
}).bind(this));
|
||||
}).bind(this));
|
||||
|
||||
// Close the enlarged image on close icon click
|
||||
this.$target.on("click.s_showcase_slider", ".s_ss_close", (function (e) {
|
||||
this.$target.removeClass("active");
|
||||
}).bind(this));
|
||||
|
||||
// Handle click navigation
|
||||
this.$target.on("click.s_showcase_slider", ".s_ss_prev", this.prevSlide.bind(this));
|
||||
this.$target.on("click.s_showcase_slider", ".s_ss_next", this.nextSlide.bind(this));
|
||||
this.$target.on("click.s_showcase_slider", ".s_ss_slider_pagination > li > a", (function (e) {
|
||||
e.preventDefault();
|
||||
var $selectedDot = $(e.currentTarget).parent();
|
||||
if ($selectedDot.hasClass("selected")) return;
|
||||
this.changeSlide($selectedDot.index());
|
||||
}).bind(this));
|
||||
|
||||
// Keyboard slider navigation
|
||||
$(document).on("keyup.s_showcase_slider", (function (e) {
|
||||
if (!this.$target.hasClass("active")) return;
|
||||
|
||||
switch (e.which) {
|
||||
case $.ui.keyCode.LEFT:
|
||||
this.prevSlide();
|
||||
break;
|
||||
case $.ui.keyCode.RIGHT:
|
||||
this.nextSlide();
|
||||
break;
|
||||
case $.ui.keyCode.ESCAPE:
|
||||
this.$target.removeClass("active");
|
||||
break;
|
||||
}
|
||||
}).bind(this));
|
||||
},
|
||||
|
||||
unbindEvents: function () {
|
||||
this.$target.off(".s_showcase_slider");
|
||||
$(document).off(".s_showcase_slider");
|
||||
},
|
||||
|
||||
createPagination: function () { // FIXME pagination should be saved with editor but keep this for compatibility
|
||||
this.$target.find(".s_ss_slider_pagination").remove(); // Remove saved-with-editor pagination
|
||||
|
||||
this.$pagination = $("<ul/>", {class: "s_ss_slider_pagination"});
|
||||
this.$pagination.insertAfter(this.$target.find(".s_ss_slider_navigation"));
|
||||
|
||||
var nbSlides = this.$target.find(".s_ss_slider").children().length;
|
||||
for (var i = 0 ; i < nbSlides ; i++) {
|
||||
this.$pagination.append("<li><a href=\"#\"></a></li>");
|
||||
}
|
||||
|
||||
this.$pagination.children().eq(this.getCurrentIndex()).addClass("selected");
|
||||
},
|
||||
|
||||
destroyPagination: function () {
|
||||
if (this.$pagination) {
|
||||
this.$pagination.remove();
|
||||
this.$pagination = null;
|
||||
}
|
||||
},
|
||||
|
||||
prevSlide: function () {
|
||||
var nbSlides = this.$target.find(".s_ss_slider").children().length;
|
||||
var currentIndex = this.getCurrentIndex();
|
||||
this.changeSlide(currentIndex > 0 ? (currentIndex - 1) : (nbSlides - 1));
|
||||
},
|
||||
|
||||
nextSlide: function () {
|
||||
var nbSlides = this.$target.find(".s_ss_slider").children().length;
|
||||
var currentIndex = this.getCurrentIndex();
|
||||
this.changeSlide((currentIndex + 1) % nbSlides);
|
||||
},
|
||||
|
||||
getCurrentIndex: function () {
|
||||
return this.$target.find(".s_ss_slider > .selected").index();
|
||||
},
|
||||
|
||||
changeSlide: function (n) {
|
||||
var $slides = this.$target.find(".s_ss_slider > li").removeClass("selected");
|
||||
this.$target.find(".s_ss_slider_pagination > li").removeClass("selected");
|
||||
|
||||
var $slide = $slides.eq(n).addClass("selected");
|
||||
$slides.removeClass("move-left");
|
||||
$slide.prevAll().addClass("move-left");
|
||||
|
||||
this.$pagination.children().eq(n).addClass("selected");
|
||||
this.updateNavigation();
|
||||
},
|
||||
|
||||
updateNavigation: function () {
|
||||
var $active = this.$target.find(".s_ss_slider > .selected");
|
||||
this.$target.find(".s_ss_prev").toggleClass("inactive", $active.is(":first-child"));
|
||||
this.$target.find(".s_ss_next").toggleClass("inactive", $active.is(":last-child"));
|
||||
},
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,241 @@
|
||||
|
||||
#wrapwrap .s_showcase_slider {
|
||||
position: relative;
|
||||
|
||||
.s_ss_slider_wrapper {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
transition: width 400ms;
|
||||
/* Force Hardware Acceleration */
|
||||
transform: translateZ(0);
|
||||
backface-visibility: hidden;
|
||||
|
||||
@include s-showcase-slider-wrapper-hook;
|
||||
|
||||
.s_ss_close {
|
||||
display: none;
|
||||
@include o-position-absolute(30px, 30px);
|
||||
z-index: 12;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
font-size: 1.6em;
|
||||
text-align: right;
|
||||
color: $s-ss-slider-navigation-color;
|
||||
text-shadow: $s-ss-slider-navigation-text-shadow;
|
||||
transition: transform 0.3s 0s, visibility 0s 0.4s;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
@include s-showcase-slider-close-hook;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.s_ss_slider {
|
||||
padding: 0;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
overflow: hidden;
|
||||
&:before { /* never visible - this is used by javascript to check the current window size */
|
||||
content: 'mobile';
|
||||
display: none;
|
||||
}
|
||||
@include s-showcase-slider-slider-hook;
|
||||
|
||||
li {
|
||||
@include o-position-absolute($top: 0, $left: 0);
|
||||
list-style: none;
|
||||
z-index: 10;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transform: translate(100%, 0);
|
||||
transition: transform 300ms linear;
|
||||
img {
|
||||
display:block;
|
||||
width:100%;
|
||||
}
|
||||
&.selected {
|
||||
position:relative;
|
||||
z-index:12;
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
&.move-left {
|
||||
transform: translate(-100%, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.s_ss_slider_navigation li {
|
||||
@include o-position-absolute($top: 50%);
|
||||
z-index:12;
|
||||
list-style:none;
|
||||
transform: translate(0, -50%);
|
||||
|
||||
span {
|
||||
display: block;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
overflow: hidden;
|
||||
font-size: 1.6em;
|
||||
color: $s-ss-slider-navigation-color;
|
||||
text-shadow: $s-ss-slider-navigation-text-shadow;
|
||||
white-space: nowrap;
|
||||
transition: e("opacity 200ms, visibility 0s");
|
||||
|
||||
@include s-showcase-slider-navigation-buttons-hook;
|
||||
|
||||
&.inactive {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: e("opacity 200ms 0s, visibility 0s 200ms");
|
||||
}
|
||||
&:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
&:first-of-type {
|
||||
left: 10px;
|
||||
}
|
||||
&:last-of-type {
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
@include s-showcase-slider-navigation-hook;
|
||||
}
|
||||
|
||||
.s_ss_slider_pagination {
|
||||
@include o-position-absolute($left: 50%, $bottom: 30px);
|
||||
z-index: 12;
|
||||
transform: translate(-50%, 0);
|
||||
visibility: hidden;
|
||||
li {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
margin: 0 5px;
|
||||
}
|
||||
li.selected a {
|
||||
background: #f5f4f3;
|
||||
}
|
||||
a {
|
||||
display: block;
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 1px 0 #333;
|
||||
border: 1px solid #f5f4f3;
|
||||
background-color: rgba(255,255,255,0);
|
||||
overflow: hidden;
|
||||
text-indent: 100%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
&:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
.s_ss_item_info {
|
||||
padding: 50px 5%;
|
||||
|
||||
@include s-showcase-slider-info-hook;
|
||||
}
|
||||
|
||||
// ================ READABLE
|
||||
&.readable {
|
||||
font-size: 100%;
|
||||
.s_ss_item_info {
|
||||
padding: 0 20px;
|
||||
}
|
||||
}
|
||||
|
||||
// ================ SLIDER ACTIVE
|
||||
&.active .s_ss_slider_wrapper .s_ss_close {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transition: transform 0.3s 0s, visibility 0s 0s, opacity .4s .4s;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
#wrapwrap .s_showcase_slider {
|
||||
.s_ss_slider {
|
||||
cursor: pointer;
|
||||
&:before { content: 'desktop'; }
|
||||
&:after {
|
||||
content: '';
|
||||
display: block;
|
||||
@include o-position-absolute($top: 0, $left: 0);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
background: rgba(255, 255, 255, 0.4);
|
||||
background-size: 48px;
|
||||
opacity: 0;
|
||||
z-index: 14;
|
||||
transition: opacity 200ms;
|
||||
}
|
||||
&:hover::after {
|
||||
opacity: 1;
|
||||
}
|
||||
@include s-showcase-slider-slider-hover-hook;
|
||||
}
|
||||
|
||||
.s_ss_item_info {
|
||||
@include o-position-absolute(0, 0);
|
||||
width: 50%;
|
||||
padding: 60px 60px 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.s_ss_slider_wrapper {
|
||||
width: 50%;
|
||||
.s_ss_close {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.s_ss_slider_navigation li,
|
||||
.s_ss_slider_pagination {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity 0.4s 0s, visibility 0s .4s;
|
||||
}
|
||||
|
||||
.s_ss_slider_navigation li {
|
||||
&:first-child {
|
||||
left: 30px;
|
||||
}
|
||||
li:last-child {
|
||||
right: 30px;
|
||||
}
|
||||
}
|
||||
// ================ SLIDER ACTIVE
|
||||
&.active {
|
||||
.s_ss_slider {
|
||||
cursor: auto;
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.s_ss_slider_wrapper {
|
||||
width: 100%;
|
||||
z-index: 10;
|
||||
}
|
||||
.s_ss_slider_navigation li,
|
||||
.s_ss_slider_pagination {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transition: opacity 0.4s .4s, visibility 0s .4s;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
$s-ss-slider-navigation-color : white;
|
||||
$s-ss-slider-navigation-text-shadow : 0 1px 0 #333;
|
||||
|
||||
@mixin s-showcase-slider-wrapper-hook {}
|
||||
@mixin s-showcase-slider-slider-hook {}
|
||||
@mixin s-showcase-slider-slider-hover-hook {}
|
||||
@mixin s-showcase-slider-navigation-hook {}
|
||||
@mixin s-showcase-slider-navigation-buttons-hook {}
|
||||
@mixin s-showcase-slider-close-hook {}
|
||||
@mixin s-showcase-slider-info-hook {}
|
||||
@@ -0,0 +1,5 @@
|
||||
.s_team_profiles {
|
||||
[class*="col-"] {
|
||||
color: initial;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
#wrapwrap .s_text_picture_text {
|
||||
h3 {
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
|
||||
.row div:nth-child(2) img {
|
||||
margin-bottom: 20px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
#wrapwrap .s_two_columns {
|
||||
[class*="col-lg-"] > img {
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
// This file is for compatibility since saas-10 web_editor refactoring.
|
||||
// As a fix to work properly in the editor, some classes have been renamed.
|
||||
// To allow a smooth transition, old classes alias are created here.
|
||||
|
||||
@mixin bg-compatibility-mixin($bg, $color) {
|
||||
background-color: $bg;
|
||||
color: $color;
|
||||
.text-muted {
|
||||
color: rgba($color, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
.black { @include bg-compatibility-mixin($black, gray('600')); }
|
||||
.darkgray { @include bg-compatibility-mixin(gray('800'), $white); }
|
||||
.gray { @include bg-compatibility-mixin(gray('700'), $white); }
|
||||
.lightgray { @include bg-compatibility-mixin(gray('200'), gray('700')); }
|
||||
.white { @include bg-compatibility-mixin($white, gray('700')); }
|
||||
@@ -0,0 +1,28 @@
|
||||
// This file is for compatibility since saas-10 web_editor refactoring.
|
||||
// As a fix to work properly in the editor, some classes have been renamed.
|
||||
// To allow a smooth transition, old classes alias are created here.
|
||||
|
||||
// Define new theme variables in case the user changes its theme
|
||||
$gray-light-light: gray('200');
|
||||
$gray-light-dark: gray('600');
|
||||
$gray-dark-light: gray('700');
|
||||
$gray-dark-dark: gray('900');
|
||||
$gray-darkest: gray('900');
|
||||
|
||||
body .color-black { color: $black; }
|
||||
body .color-white { color: $white; }
|
||||
body .color-gray-lighter { color: gray('200'); }
|
||||
body .color-gray-light-light { color: $gray-light-light; }
|
||||
body .color-gray-light { color: gray('600'); }
|
||||
body .color-gray-light-dark { color: $gray-light-dark; }
|
||||
body .color-gray { color: gray('700'); }
|
||||
body .color-gray-dark-light { color: $gray-dark-light; }
|
||||
body .color-gray-dark { color: gray('900'); }
|
||||
body .color-gray-dark-dark { color: $gray-dark-dark; }
|
||||
body .color-gray-darker { color: gray('900'); }
|
||||
body .color-gray-darkest { color: $gray-darkest; }
|
||||
body .color-alpha { color: o-color('alpha'); }
|
||||
body .color-beta { color: o-color('beta'); }
|
||||
body .color-gamma { color: o-color('gamma'); }
|
||||
body .color-delta { color: o-color('delta'); }
|
||||
body .color-epsilon { color: o-color('epsilon'); }
|
||||
@@ -0,0 +1,62 @@
|
||||
|
||||
@mixin carousel-indicators($bottom, $bottom-sm) {
|
||||
bottom: $bottom;
|
||||
li {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-color: gray('900');
|
||||
margin: 0;
|
||||
&:hover {
|
||||
border-color: o-color('alpha');
|
||||
}
|
||||
&.active {
|
||||
background-color: o-color('alpha');
|
||||
border-color: o-color('alpha');
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
@include media-breakpoint-down(md) {
|
||||
bottom: $bottom-sm;
|
||||
}
|
||||
}
|
||||
|
||||
$s-banner-2-background-position: 50% 50%;
|
||||
$s-banner-2-content-margin: 0;
|
||||
|
||||
$s-banner-3-carosel-control-color: rgba(0, 0, 0, 0);
|
||||
$s-banner-3-carosel-control-height: 100%;
|
||||
$s-banner-3-padding: 130px;
|
||||
$s-banner-3-fa-color: o-color('gamma');
|
||||
$s-banner-3-carousel-height: 500px;
|
||||
$s-banner-3-text-shadow: 1px 1px 11px rgba(0, 0, 0, 0.86);
|
||||
$s-banner-3-hero-bg-color: o-color('alpha');
|
||||
$s-banner-3-indicators-visible: hidden;
|
||||
$s-banner-3-h1-size: 80px;
|
||||
$s-banner-3-h2-size: 40px;
|
||||
$s-banner-3-h1-mobile-font-size: 50px;
|
||||
|
||||
@mixin s-banner-3-col-center-hook {};
|
||||
@mixin s-banner-3-row-hook {};
|
||||
@mixin s-banner-3-carousel-control-hook {};
|
||||
@mixin s-banner-3-carousel-control-right-hook {};
|
||||
@mixin s-banner-3-carousel-control-left-hook {};
|
||||
|
||||
$s-text-big-picture-padding: 50px 0;
|
||||
$s-text-big-picture-text-align: left;
|
||||
|
||||
@mixin s-text-big-picture-hero-hook {};
|
||||
@mixin s-big-picture-text-hero-hook {};
|
||||
|
||||
$s-big-picture-text-padding: 50px 0;
|
||||
$s-big-picture-text-align: left;
|
||||
|
||||
@mixin s-big-picture-text-hero-hook {};
|
||||
@mixin s-big-picture-row-hook {};
|
||||
|
||||
$s-cubes-big-cube-min-height: 600px;
|
||||
|
||||
$s-products-carousel-carousel-control-color: rgba(0, 0, 0, 0);
|
||||
$s-products-carousel-carousel-icon-color: o-color('gamma') !default;
|
||||
|
||||
$s-timeline-company-color: null;
|
||||
$s-timeline-color: if(variable-exists(color-wind), $color-wind, #F7F7F7);
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,9 @@
|
||||
/**
|
||||
* Fonts which are not google fonts and thus need to be served by Odoo directly.
|
||||
* Ideally, using google fonts is always better !
|
||||
*
|
||||
* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
|
||||
* ! Please triple check Licence before to add new font !
|
||||
* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
|
||||
*/
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,3 @@
|
||||
$o-color-palette-number: 2;
|
||||
$o-theme-color-palette-number: 2;
|
||||
$o-gray-color-palette-number: 2;
|
||||
@@ -0,0 +1,3 @@
|
||||
$o-color-palette-number: 3;
|
||||
$o-theme-color-palette-number: 3;
|
||||
$o-gray-color-palette-number: 3;
|
||||
@@ -0,0 +1,3 @@
|
||||
$o-color-palette-number: 4;
|
||||
$o-theme-color-palette-number: 4;
|
||||
$o-gray-color-palette-number: 4;
|
||||
@@ -0,0 +1,3 @@
|
||||
$o-color-palette-number: 5;
|
||||
$o-theme-color-palette-number: 5;
|
||||
$o-gray-color-palette-number: 5;
|
||||
@@ -0,0 +1,3 @@
|
||||
$o-color-palette-number: 6;
|
||||
$o-theme-color-palette-number: 6;
|
||||
$o-gray-color-palette-number: 6;
|
||||
@@ -0,0 +1,3 @@
|
||||
$o-color-palette-number: 7;
|
||||
$o-theme-color-palette-number: 7;
|
||||
$o-gray-color-palette-number: 7;
|
||||
@@ -0,0 +1,3 @@
|
||||
$o-color-palette-number: 8;
|
||||
$o-theme-color-palette-number: 8;
|
||||
$o-gray-color-palette-number: 8;
|
||||
@@ -0,0 +1,3 @@
|
||||
$o-color-palette-number: 9;
|
||||
$o-theme-color-palette-number: 9;
|
||||
$o-gray-color-palette-number: 9;
|
||||
@@ -0,0 +1,5 @@
|
||||
//------------------------------------------------------------------------------
|
||||
// s_medias_list
|
||||
//------------------------------------------------------------------------------
|
||||
|
||||
$s-medias-list-bg-color-main: null; // Default to BS color
|
||||
Reference in New Issue
Block a user