From ad97722b1b35aff50d0adf13a19715f7b8373c07 Mon Sep 17 00:00:00 2001 From: Richard Sassine Date: Tue, 4 May 2021 18:00:38 +0300 Subject: initial commit --- theme_common/static/src/js/compatibility_editor.js | 19 + theme_common/static/src/js/preheader.js | 115 ++ .../src/old_snippets/s_animated_boxes/000.js | 15 + .../src/old_snippets/s_animated_boxes/000.scss | 77 ++ .../src/old_snippets/s_banner_parallax/000.scss | 55 + .../s_banner_parallax/000_variables.scss | 11 + .../static/src/old_snippets/s_big_icons/000.scss | 42 + .../old_snippets/s_big_icons/000_variables.scss | 23 + .../static/src/old_snippets/s_big_image/000.scss | 13 + .../src/old_snippets/s_big_image_parallax/000.scss | 12 + .../src/old_snippets/s_clonable_boxes/000.scss | 34 + .../src/old_snippets/s_color_blocks_4/000.scss | 25 + .../src/old_snippets/s_color_blocks_img/000.scss | 13 + .../src/old_snippets/s_compact_menu/000.scss | 37 + .../static/src/old_snippets/s_css_slider/000.js | 122 ++ .../static/src/old_snippets/s_css_slider/000.scss | 153 +++ .../old_snippets/s_css_slider/000_variables.scss | 10 + .../static/src/old_snippets/s_discount/000.scss | 99 ++ .../src/old_snippets/s_discount/000_variables.scss | 8 + .../static/src/old_snippets/s_event_list/000.scss | 188 +++ .../old_snippets/s_event_list/000_variables.scss | 4 + .../static/src/old_snippets/s_event_slide/000.scss | 51 + .../src/old_snippets/s_features_carousel/000.scss | 69 ++ .../s_features_carousel/000_variables.scss | 7 + .../static/src/old_snippets/s_full_menu/000.scss | 46 + .../s_header_text_big_picture/000.scss | 11 + .../static/src/old_snippets/s_icon_box/000.scss | 12 + .../src/old_snippets/s_images_carousel/000.scss | 26 + .../static/src/old_snippets/s_images_row/000.scss | 15 + .../src/old_snippets/s_menu_three_columns/000.scss | 39 + .../static/src/old_snippets/s_mini_nav_bar/000.js | 31 + .../src/old_snippets/s_mini_nav_bar/000.scss | 27 + .../src/old_snippets/s_news_carousel/000.scss | 27 + .../static/src/old_snippets/s_pricing/000.scss | 31 + .../src/old_snippets/s_products_carousel/000.scss | 91 ++ .../s_products_carousel/000_variables.scss | 6 + .../static/src/old_snippets/s_profile/000.scss | 34 + .../static/src/old_snippets/s_progress/000.scss | 73 ++ .../src/old_snippets/s_separator_nav/000.scss | 24 + .../src/old_snippets/s_showcase_image/000.scss | 106 ++ .../s_showcase_image/000_variables.scss | 6 + .../src/old_snippets/s_showcase_slider/000.js | 132 ++ .../src/old_snippets/s_showcase_slider/000.scss | 241 ++++ .../s_showcase_slider/000_variables.scss | 10 + .../src/old_snippets/s_team_profiles/000.scss | 5 + .../src/old_snippets/s_text_picture_text/000.scss | 10 + .../static/src/old_snippets/s_two_columns/000.scss | 5 + .../static/src/scss/compatibility-saas-10-1.scss | 17 + .../static/src/scss/compatibility-saas-10-2.scss | 28 + .../scss/compatibility-saas-11.4-variables.scss | 62 + .../static/src/scss/compatibility-saas-11.4.scss | 1276 ++++++++++++++++++++ theme_common/static/src/scss/fonts.scss | 9 + theme_common/static/src/scss/mixins.scss | 1205 ++++++++++++++++++ .../options/colors/option_colors_02_variables.scss | 3 + .../options/colors/option_colors_03_variables.scss | 3 + .../options/colors/option_colors_04_variables.scss | 3 + .../options/colors/option_colors_05_variables.scss | 3 + .../options/colors/option_colors_06_variables.scss | 3 + .../options/colors/option_colors_07_variables.scss | 3 + .../options/colors/option_colors_08_variables.scss | 3 + .../options/colors/option_colors_09_variables.scss | 3 + .../static/src/scss/primary_variables.scss | 5 + 62 files changed, 4836 insertions(+) create mode 100644 theme_common/static/src/js/compatibility_editor.js create mode 100644 theme_common/static/src/js/preheader.js create mode 100644 theme_common/static/src/old_snippets/s_animated_boxes/000.js create mode 100644 theme_common/static/src/old_snippets/s_animated_boxes/000.scss create mode 100644 theme_common/static/src/old_snippets/s_banner_parallax/000.scss create mode 100644 theme_common/static/src/old_snippets/s_banner_parallax/000_variables.scss create mode 100644 theme_common/static/src/old_snippets/s_big_icons/000.scss create mode 100644 theme_common/static/src/old_snippets/s_big_icons/000_variables.scss create mode 100644 theme_common/static/src/old_snippets/s_big_image/000.scss create mode 100644 theme_common/static/src/old_snippets/s_big_image_parallax/000.scss create mode 100644 theme_common/static/src/old_snippets/s_clonable_boxes/000.scss create mode 100644 theme_common/static/src/old_snippets/s_color_blocks_4/000.scss create mode 100644 theme_common/static/src/old_snippets/s_color_blocks_img/000.scss create mode 100644 theme_common/static/src/old_snippets/s_compact_menu/000.scss create mode 100644 theme_common/static/src/old_snippets/s_css_slider/000.js create mode 100644 theme_common/static/src/old_snippets/s_css_slider/000.scss create mode 100644 theme_common/static/src/old_snippets/s_css_slider/000_variables.scss create mode 100644 theme_common/static/src/old_snippets/s_discount/000.scss create mode 100644 theme_common/static/src/old_snippets/s_discount/000_variables.scss create mode 100644 theme_common/static/src/old_snippets/s_event_list/000.scss create mode 100644 theme_common/static/src/old_snippets/s_event_list/000_variables.scss create mode 100644 theme_common/static/src/old_snippets/s_event_slide/000.scss create mode 100644 theme_common/static/src/old_snippets/s_features_carousel/000.scss create mode 100644 theme_common/static/src/old_snippets/s_features_carousel/000_variables.scss create mode 100644 theme_common/static/src/old_snippets/s_full_menu/000.scss create mode 100644 theme_common/static/src/old_snippets/s_header_text_big_picture/000.scss create mode 100644 theme_common/static/src/old_snippets/s_icon_box/000.scss create mode 100644 theme_common/static/src/old_snippets/s_images_carousel/000.scss create mode 100644 theme_common/static/src/old_snippets/s_images_row/000.scss create mode 100644 theme_common/static/src/old_snippets/s_menu_three_columns/000.scss create mode 100644 theme_common/static/src/old_snippets/s_mini_nav_bar/000.js create mode 100644 theme_common/static/src/old_snippets/s_mini_nav_bar/000.scss create mode 100644 theme_common/static/src/old_snippets/s_news_carousel/000.scss create mode 100644 theme_common/static/src/old_snippets/s_pricing/000.scss create mode 100644 theme_common/static/src/old_snippets/s_products_carousel/000.scss create mode 100644 theme_common/static/src/old_snippets/s_products_carousel/000_variables.scss create mode 100644 theme_common/static/src/old_snippets/s_profile/000.scss create mode 100644 theme_common/static/src/old_snippets/s_progress/000.scss create mode 100644 theme_common/static/src/old_snippets/s_separator_nav/000.scss create mode 100644 theme_common/static/src/old_snippets/s_showcase_image/000.scss create mode 100644 theme_common/static/src/old_snippets/s_showcase_image/000_variables.scss create mode 100644 theme_common/static/src/old_snippets/s_showcase_slider/000.js create mode 100644 theme_common/static/src/old_snippets/s_showcase_slider/000.scss create mode 100644 theme_common/static/src/old_snippets/s_showcase_slider/000_variables.scss create mode 100644 theme_common/static/src/old_snippets/s_team_profiles/000.scss create mode 100644 theme_common/static/src/old_snippets/s_text_picture_text/000.scss create mode 100644 theme_common/static/src/old_snippets/s_two_columns/000.scss create mode 100644 theme_common/static/src/scss/compatibility-saas-10-1.scss create mode 100644 theme_common/static/src/scss/compatibility-saas-10-2.scss create mode 100644 theme_common/static/src/scss/compatibility-saas-11.4-variables.scss create mode 100644 theme_common/static/src/scss/compatibility-saas-11.4.scss create mode 100644 theme_common/static/src/scss/fonts.scss create mode 100644 theme_common/static/src/scss/mixins.scss create mode 100644 theme_common/static/src/scss/options/colors/option_colors_02_variables.scss create mode 100644 theme_common/static/src/scss/options/colors/option_colors_03_variables.scss create mode 100644 theme_common/static/src/scss/options/colors/option_colors_04_variables.scss create mode 100644 theme_common/static/src/scss/options/colors/option_colors_05_variables.scss create mode 100644 theme_common/static/src/scss/options/colors/option_colors_06_variables.scss create mode 100644 theme_common/static/src/scss/options/colors/option_colors_07_variables.scss create mode 100644 theme_common/static/src/scss/options/colors/option_colors_08_variables.scss create mode 100644 theme_common/static/src/scss/options/colors/option_colors_09_variables.scss create mode 100644 theme_common/static/src/scss/primary_variables.scss (limited to 'theme_common/static/src') diff --git a/theme_common/static/src/js/compatibility_editor.js b/theme_common/static/src/js/compatibility_editor.js new file mode 100644 index 0000000..0f3aeb3 --- /dev/null +++ b/theme_common/static/src/js/compatibility_editor.js @@ -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]); + } + }, +}); +}); diff --git a/theme_common/static/src/js/preheader.js b/theme_common/static/src/js/preheader.js new file mode 100644 index 0000000..7c1e8e2 --- /dev/null +++ b/theme_common/static/src/js/preheader.js @@ -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); + +}); diff --git a/theme_common/static/src/old_snippets/s_animated_boxes/000.js b/theme_common/static/src/old_snippets/s_animated_boxes/000.js new file mode 100644 index 0000000..ec39eab --- /dev/null +++ b/theme_common/static/src/old_snippets/s_animated_boxes/000.js @@ -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', +}); +}); diff --git a/theme_common/static/src/old_snippets/s_animated_boxes/000.scss b/theme_common/static/src/old_snippets/s_animated_boxes/000.scss new file mode 100644 index 0000000..00bc21b --- /dev/null +++ b/theme_common/static/src/old_snippets/s_animated_boxes/000.scss @@ -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; + } +} diff --git a/theme_common/static/src/old_snippets/s_banner_parallax/000.scss b/theme_common/static/src/old_snippets/s_banner_parallax/000.scss new file mode 100644 index 0000000..b651dbc --- /dev/null +++ b/theme_common/static/src/old_snippets/s_banner_parallax/000.scss @@ -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; + } + } + } + } + } +} diff --git a/theme_common/static/src/old_snippets/s_banner_parallax/000_variables.scss b/theme_common/static/src/old_snippets/s_banner_parallax/000_variables.scss new file mode 100644 index 0000000..1515989 --- /dev/null +++ b/theme_common/static/src/old_snippets/s_banner_parallax/000_variables.scss @@ -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 {} diff --git a/theme_common/static/src/old_snippets/s_big_icons/000.scss b/theme_common/static/src/old_snippets/s_big_icons/000.scss new file mode 100644 index 0000000..b1e5fc4 --- /dev/null +++ b/theme_common/static/src/old_snippets/s_big_icons/000.scss @@ -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'); +} diff --git a/theme_common/static/src/old_snippets/s_big_icons/000_variables.scss b/theme_common/static/src/old_snippets/s_big_icons/000_variables.scss new file mode 100644 index 0000000..828f6a4 --- /dev/null +++ b/theme_common/static/src/old_snippets/s_big_icons/000_variables.scss @@ -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')); + } + } +} diff --git a/theme_common/static/src/old_snippets/s_big_image/000.scss b/theme_common/static/src/old_snippets/s_big_image/000.scss new file mode 100644 index 0000000..01244e8 --- /dev/null +++ b/theme_common/static/src/old_snippets/s_big_image/000.scss @@ -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; + + } +} diff --git a/theme_common/static/src/old_snippets/s_big_image_parallax/000.scss b/theme_common/static/src/old_snippets/s_big_image_parallax/000.scss new file mode 100644 index 0000000..f97c5c3 --- /dev/null +++ b/theme_common/static/src/old_snippets/s_big_image_parallax/000.scss @@ -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; + } +} diff --git a/theme_common/static/src/old_snippets/s_clonable_boxes/000.scss b/theme_common/static/src/old_snippets/s_clonable_boxes/000.scss new file mode 100644 index 0000000..b1dbcaf --- /dev/null +++ b/theme_common/static/src/old_snippets/s_clonable_boxes/000.scss @@ -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; + } +} diff --git a/theme_common/static/src/old_snippets/s_color_blocks_4/000.scss b/theme_common/static/src/old_snippets/s_color_blocks_4/000.scss new file mode 100644 index 0000000..5075141 --- /dev/null +++ b/theme_common/static/src/old_snippets/s_color_blocks_4/000.scss @@ -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; + } +} diff --git a/theme_common/static/src/old_snippets/s_color_blocks_img/000.scss b/theme_common/static/src/old_snippets/s_color_blocks_img/000.scss new file mode 100644 index 0000000..011f7e4 --- /dev/null +++ b/theme_common/static/src/old_snippets/s_color_blocks_img/000.scss @@ -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; + +} diff --git a/theme_common/static/src/old_snippets/s_compact_menu/000.scss b/theme_common/static/src/old_snippets/s_compact_menu/000.scss new file mode 100644 index 0000000..68eea85 --- /dev/null +++ b/theme_common/static/src/old_snippets/s_compact_menu/000.scss @@ -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; + } + } + } + } + } +} diff --git a/theme_common/static/src/old_snippets/s_css_slider/000.js b/theme_common/static/src/old_snippets/s_css_slider/000.js new file mode 100644 index 0000000..99d225c --- /dev/null +++ b/theme_common/static/src/old_snippets/s_css_slider/000.js @@ -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 = $('').insertAfter($container.find('.navigation')); + $container.find('.slider .slide').each(function (index) { + var dotWrapper = (index === 0) ? $('
  • ') : $('
  • '), + dot = $('').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')); + }, + }); +}); diff --git a/theme_common/static/src/old_snippets/s_css_slider/000.scss b/theme_common/static/src/old_snippets/s_css_slider/000.scss new file mode 100644 index 0000000..3fdc00f --- /dev/null +++ b/theme_common/static/src/old_snippets/s_css_slider/000.scss @@ -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; + } + } +} diff --git a/theme_common/static/src/old_snippets/s_css_slider/000_variables.scss b/theme_common/static/src/old_snippets/s_css_slider/000_variables.scss new file mode 100644 index 0000000..aa8ae79 --- /dev/null +++ b/theme_common/static/src/old_snippets/s_css_slider/000_variables.scss @@ -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 {} diff --git a/theme_common/static/src/old_snippets/s_discount/000.scss b/theme_common/static/src/old_snippets/s_discount/000.scss new file mode 100644 index 0000000..b50b1e1 --- /dev/null +++ b/theme_common/static/src/old_snippets/s_discount/000.scss @@ -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; + } +} diff --git a/theme_common/static/src/old_snippets/s_discount/000_variables.scss b/theme_common/static/src/old_snippets/s_discount/000_variables.scss new file mode 100644 index 0000000..02c65f2 --- /dev/null +++ b/theme_common/static/src/old_snippets/s_discount/000_variables.scss @@ -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 {} diff --git a/theme_common/static/src/old_snippets/s_event_list/000.scss b/theme_common/static/src/old_snippets/s_event_list/000.scss new file mode 100644 index 0000000..33b47b2 --- /dev/null +++ b/theme_common/static/src/old_snippets/s_event_list/000.scss @@ -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; + } + } + } + } + } +} diff --git a/theme_common/static/src/old_snippets/s_event_list/000_variables.scss b/theme_common/static/src/old_snippets/s_event_list/000_variables.scss new file mode 100644 index 0000000..b60bbd1 --- /dev/null +++ b/theme_common/static/src/old_snippets/s_event_list/000_variables.scss @@ -0,0 +1,4 @@ +$color-facebook: #4b6ea8; +$color-twitter: #4fd5f8; +$color-google: #dd4b39; +$s-event-list-main-size: 120px; diff --git a/theme_common/static/src/old_snippets/s_event_slide/000.scss b/theme_common/static/src/old_snippets/s_event_slide/000.scss new file mode 100644 index 0000000..ee803f6 --- /dev/null +++ b/theme_common/static/src/old_snippets/s_event_slide/000.scss @@ -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; + } +} diff --git a/theme_common/static/src/old_snippets/s_features_carousel/000.scss b/theme_common/static/src/old_snippets/s_features_carousel/000.scss new file mode 100644 index 0000000..6ed4489 --- /dev/null +++ b/theme_common/static/src/old_snippets/s_features_carousel/000.scss @@ -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; + } + } +} diff --git a/theme_common/static/src/old_snippets/s_features_carousel/000_variables.scss b/theme_common/static/src/old_snippets/s_features_carousel/000_variables.scss new file mode 100644 index 0000000..44c3246 --- /dev/null +++ b/theme_common/static/src/old_snippets/s_features_carousel/000_variables.scss @@ -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 {} diff --git a/theme_common/static/src/old_snippets/s_full_menu/000.scss b/theme_common/static/src/old_snippets/s_full_menu/000.scss new file mode 100644 index 0000000..ed86269 --- /dev/null +++ b/theme_common/static/src/old_snippets/s_full_menu/000.scss @@ -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; + } + } +} diff --git a/theme_common/static/src/old_snippets/s_header_text_big_picture/000.scss b/theme_common/static/src/old_snippets/s_header_text_big_picture/000.scss new file mode 100644 index 0000000..bdd5b35 --- /dev/null +++ b/theme_common/static/src/old_snippets/s_header_text_big_picture/000.scss @@ -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; + } +} diff --git a/theme_common/static/src/old_snippets/s_icon_box/000.scss b/theme_common/static/src/old_snippets/s_icon_box/000.scss new file mode 100644 index 0000000..2ddec1f --- /dev/null +++ b/theme_common/static/src/old_snippets/s_icon_box/000.scss @@ -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; + } +} diff --git a/theme_common/static/src/old_snippets/s_images_carousel/000.scss b/theme_common/static/src/old_snippets/s_images_carousel/000.scss new file mode 100644 index 0000000..5007997 --- /dev/null +++ b/theme_common/static/src/old_snippets/s_images_carousel/000.scss @@ -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; + } +} diff --git a/theme_common/static/src/old_snippets/s_images_row/000.scss b/theme_common/static/src/old_snippets/s_images_row/000.scss new file mode 100644 index 0000000..a059e1d --- /dev/null +++ b/theme_common/static/src/old_snippets/s_images_row/000.scss @@ -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; + } +} diff --git a/theme_common/static/src/old_snippets/s_menu_three_columns/000.scss b/theme_common/static/src/old_snippets/s_menu_three_columns/000.scss new file mode 100644 index 0000000..38568fe --- /dev/null +++ b/theme_common/static/src/old_snippets/s_menu_three_columns/000.scss @@ -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; + } + } + } + } +} diff --git a/theme_common/static/src/old_snippets/s_mini_nav_bar/000.js b/theme_common/static/src/old_snippets/s_mini_nav_bar/000.js new file mode 100644 index 0000000..e9cedec --- /dev/null +++ b/theme_common/static/src/old_snippets/s_mini_nav_bar/000.js @@ -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); + } + }, +}); +}); diff --git a/theme_common/static/src/old_snippets/s_mini_nav_bar/000.scss b/theme_common/static/src/old_snippets/s_mini_nav_bar/000.scss new file mode 100644 index 0000000..06893cc --- /dev/null +++ b/theme_common/static/src/old_snippets/s_mini_nav_bar/000.scss @@ -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; +} diff --git a/theme_common/static/src/old_snippets/s_news_carousel/000.scss b/theme_common/static/src/old_snippets/s_news_carousel/000.scss new file mode 100644 index 0000000..a06afae --- /dev/null +++ b/theme_common/static/src/old_snippets/s_news_carousel/000.scss @@ -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; + } +} diff --git a/theme_common/static/src/old_snippets/s_pricing/000.scss b/theme_common/static/src/old_snippets/s_pricing/000.scss new file mode 100644 index 0000000..f475e53 --- /dev/null +++ b/theme_common/static/src/old_snippets/s_pricing/000.scss @@ -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; +} diff --git a/theme_common/static/src/old_snippets/s_products_carousel/000.scss b/theme_common/static/src/old_snippets/s_products_carousel/000.scss new file mode 100644 index 0000000..fc90b51 --- /dev/null +++ b/theme_common/static/src/old_snippets/s_products_carousel/000.scss @@ -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; + } + } + } + } +} diff --git a/theme_common/static/src/old_snippets/s_products_carousel/000_variables.scss b/theme_common/static/src/old_snippets/s_products_carousel/000_variables.scss new file mode 100644 index 0000000..7d0238f --- /dev/null +++ b/theme_common/static/src/old_snippets/s_products_carousel/000_variables.scss @@ -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 {} diff --git a/theme_common/static/src/old_snippets/s_profile/000.scss b/theme_common/static/src/old_snippets/s_profile/000.scss new file mode 100644 index 0000000..33b358e --- /dev/null +++ b/theme_common/static/src/old_snippets/s_profile/000.scss @@ -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'); +} diff --git a/theme_common/static/src/old_snippets/s_progress/000.scss b/theme_common/static/src/old_snippets/s_progress/000.scss new file mode 100644 index 0000000..25dbb88 --- /dev/null +++ b/theme_common/static/src/old_snippets/s_progress/000.scss @@ -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; + } + } +} diff --git a/theme_common/static/src/old_snippets/s_separator_nav/000.scss b/theme_common/static/src/old_snippets/s_separator_nav/000.scss new file mode 100644 index 0000000..66e8559 --- /dev/null +++ b/theme_common/static/src/old_snippets/s_separator_nav/000.scss @@ -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; +} diff --git a/theme_common/static/src/old_snippets/s_showcase_image/000.scss b/theme_common/static/src/old_snippets/s_showcase_image/000.scss new file mode 100644 index 0000000..0cf49dd --- /dev/null +++ b/theme_common/static/src/old_snippets/s_showcase_image/000.scss @@ -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; + } + } + } +} diff --git a/theme_common/static/src/old_snippets/s_showcase_image/000_variables.scss b/theme_common/static/src/old_snippets/s_showcase_image/000_variables.scss new file mode 100644 index 0000000..46eb944 --- /dev/null +++ b/theme_common/static/src/old_snippets/s_showcase_image/000_variables.scss @@ -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; diff --git a/theme_common/static/src/old_snippets/s_showcase_slider/000.js b/theme_common/static/src/old_snippets/s_showcase_slider/000.js new file mode 100644 index 0000000..cbdb73a --- /dev/null +++ b/theme_common/static/src/old_snippets/s_showcase_slider/000.js @@ -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 = $("