/// /// This file regroups the website design rules. /// $-seen-urls: (); @each $alias, $key in $o-font-aliases-to-keys { $-url: o-get-font-info($alias, 'url'); @if $-url and index($-seen-urls, $-url) == null { $-seen-urls: append($-seen-urls, $-url); @import url("https://fonts.googleapis.com/css?family=#{unquote($-url)}&display=swap"); } @else { $-name: o-get-font-info($alias, 'name'); $-attachment: o-get-font-info($alias, 'attachment'); @if $-attachment { @import url("/web/content/#{$-attachment}/google-font-#{unquote($-name)}"); } } } :root { // The color behind the boxed layout is forced by Odoo. The box background // color uses the `$body-bg` variable. // grep: BOXED_BODY_BG_ODOO @if o-website-value('layout') != 'full' { $-boxed-layout-body-bg: o-color('body'); --#{$variable-prefix}body-bg-rgb: #{to-rgb($-boxed-layout-body-bg)}; --#{$variable-prefix}body-bg: #{$-boxed-layout-body-bg}; } // Border color // Let borders color adapt according to body and CCs. Also, set a fallback // value for browsers that don't support the color-mix function (used by // 'fade-currentColor'). --o-border-color: #{o-color('300')}; --o-border-color: #{fade-currentColor()}; // The theme customize modal JS will need to know the value of some scss // variables used to render the user website, and those may have been // customized by themes, the user or anything else (so there is no file to // parse to get them). Those will be printed here as CSS variables. @include print-variable('support-13-0-color-system', $o-support-13-0-color-system); @include print-variable('has-customized-13-0-color-system', $o-has-customized-13-0-color-system); // 1) Handle default values @include print-variable('header-font-size', $font-size-base); $-font-website-value: o-website-value('font'); @include print-variable('headings-font', $-font-website-value); @include print-variable('navbar-font', $-font-website-value); @include print-variable('buttons-font', $-font-website-value); // 2) The values in the $theme-colors map are already printed by Bootstrap. // 3) The values in the $colors map are also printed by Bootstrap. However, // we have color variables which can contain a reference to a color // combination and that is the info we want in that case. @each $key in ('menu', 'header-sales_one', 'header-sales_two', 'header-sales_three', 'header-sales_four', 'footer', 'copyright') { $-value: map-get($o-color-palette, $key); @if type-of($-value) == 'number' { @include print-variable($key, $-value); } } // 4) The Odoo values map, $o-website-values, must be printed. @each $key, $value in $o-website-values { @include print-variable($key, $value); } // 5) Use final value used by the theme @include print-variable('logo-height', $o-theme-navbar-logo-height); @include print-variable('fixed-logo-height', $o-theme-navbar-fixed-logo-height); $-font-names: map-keys($o-theme-font-configs); @include print-variable('number-of-fonts', length($-font-names)); $i: 1; @each $font-name in $-font-names { @include print-variable('font-number-#{$i}', $font-name); $i: $i + 1; } // Note: font-size are not needed as already added by web_editor for the // font-size dropdown @include print-variable('paragraph-margin-top', $paragraph-margin-top); @include print-variable('paragraph-margin-bottom', $paragraph-margin-bottom); @include print-variable('h2-line-height', $h2-line-height); @include print-variable('h3-line-height', $h3-line-height); @include print-variable('h4-line-height', $h4-line-height); @include print-variable('h5-line-height', $h5-line-height); @include print-variable('h6-line-height', $h6-line-height); @include print-variable('display-1-line-height', $display-1-line-height); @include print-variable('display-2-line-height', $display-2-line-height); @include print-variable('display-3-line-height', $display-3-line-height); @include print-variable('display-4-line-height', $display-4-line-height); // We cannot rely on $o-theme-hx-font because they contain the list of // fallback fonts (unicode...). $-headings-or-main-font: o-website-value('headings-font') or o-website-value('font'); @include print-variable('h2-font', o-website-value('h2-font') or $-headings-or-main-font); @include print-variable('h3-font', o-website-value('h3-font') or $-headings-or-main-font); @include print-variable('h4-font', o-website-value('h4-font') or $-headings-or-main-font); @include print-variable('h5-font', o-website-value('h5-font') or $-headings-or-main-font); @include print-variable('h6-font', o-website-value('h6-font') or $-headings-or-main-font); @include print-variable('display-1-font', o-website-value('display-1-font') or $-headings-or-main-font); @include print-variable('display-2-font', o-website-value('display-2-font') or $-headings-or-main-font); @include print-variable('display-3-font', o-website-value('display-3-font') or $-headings-or-main-font); @include print-variable('display-4-font', o-website-value('display-4-font') or $-headings-or-main-font); @include print-variable('set-headings-font', o-get-font-info('headings')); @include print-variable('set-h2-font', o-get-font-info('h2')); @include print-variable('set-h3-font', o-get-font-info('h3')); @include print-variable('set-h4-font', o-get-font-info('h4')); @include print-variable('set-h5-font', o-get-font-info('h5')); @include print-variable('set-h6-font', o-get-font-info('h6')); @include print-variable('set-display-1-font', o-get-font-info('display-1')); @include print-variable('set-display-2-font', o-get-font-info('display-2')); @include print-variable('set-display-3-font', o-get-font-info('display-3')); @include print-variable('set-display-4-font', o-get-font-info('display-4')); @include print-variable('headings-line-height', $headings-line-height); @include print-variable('headings-margin-top', $headings-margin-top); @include print-variable('headings-margin-bottom', $headings-margin-bottom); @include print-variable('h2-margin-top', $h2-margin-top); @include print-variable('h3-margin-top', $h3-margin-top); @include print-variable('h4-margin-top', $h4-margin-top); @include print-variable('h5-margin-top', $h5-margin-top); @include print-variable('h6-margin-top', $h6-margin-top); @include print-variable('display-1-margin-top', $display-1-margin-top); @include print-variable('display-2-margin-top', $display-2-margin-top); @include print-variable('display-3-margin-top', $display-3-margin-top); @include print-variable('display-4-margin-top', $display-4-margin-top); @include print-variable('h2-margin-bottom', $h2-margin-bottom); @include print-variable('h3-margin-bottom', $h3-margin-bottom); @include print-variable('h4-margin-bottom', $h4-margin-bottom); @include print-variable('h5-margin-bottom', $h5-margin-bottom); @include print-variable('h6-margin-bottom', $h6-margin-bottom); @include print-variable('display-1-margin-bottom', $display-1-margin-bottom); @include print-variable('display-2-margin-bottom', $display-2-margin-bottom); @include print-variable('display-3-margin-bottom', $display-3-margin-bottom); @include print-variable('display-4-margin-bottom', $display-4-margin-bottom); @include print-variable('set-buttons-font', o-get-font-info('buttons')); @include print-variable('btn-padding-y', $btn-padding-y); @include print-variable('btn-padding-x', $btn-padding-x); @include print-variable('btn-font-size', $btn-font-size); @include print-variable('btn-padding-y-sm', $btn-padding-y-sm); @include print-variable('btn-padding-x-sm', $btn-padding-x-sm); @include print-variable('btn-font-size-sm', $btn-font-size-sm); @include print-variable('btn-padding-y-lg', $btn-padding-y-lg); @include print-variable('btn-padding-x-lg', $btn-padding-x-lg); @include print-variable('btn-font-size-lg', $btn-font-size-lg); @include print-variable('btn-border-width', $btn-border-width); @include print-variable('btn-border-radius', $btn-border-radius); @include print-variable('btn-border-radius-sm', $btn-border-radius-sm); @include print-variable('btn-border-radius-lg', $btn-border-radius-lg); @include print-variable('input-padding-y', $input-padding-y); @include print-variable('input-padding-x', $input-padding-x); @include print-variable('input-font-size', $input-font-size); @include print-variable('input-padding-y-sm', $input-padding-y-sm); @include print-variable('input-padding-x-sm', $input-padding-x-sm); @include print-variable('input-font-size-sm', $input-font-size-sm); @include print-variable('input-padding-y-lg', $input-padding-y-lg); @include print-variable('input-padding-x-lg', $input-padding-x-lg); @include print-variable('input-font-size-lg', $input-font-size-lg); @include print-variable('input-border-width', $input-border-width); @include print-variable('input-border-radius', $input-border-radius); @include print-variable('input-border-radius-sm', $input-border-radius-sm); @include print-variable('input-border-radius-lg', $input-border-radius-lg); @include print-variable('color-palettes-name', $o-original-color-palette-name); @include print-variable('has-customized-colors', $o-has-customized-colors); // 6) Get list of colorpalette custom colors $custom-colors: (); @each $key, $value in $o-color-palette { $custom-colors: append($custom-colors, $key); } @include print-variable('custom-colors', $custom-colors); } @mixin body-image-bg-style() { background-image: url("/#{str-slice(o-website-value('body-image'), 2)}"); background-position: center; background-attachment: fixed; @if o-website-value('body-image-type') == 'pattern' { background-size: auto; background-repeat: repeat; } @else { background-size: cover; background-repeat: no-repeat; } }; #wrapwrap { @if o-website-value('body-image') { @include body-image-bg-style(); } @if o-website-value('layout') != 'full' { > main { // The color behind the boxed layout is forced by Odoo. The box // background color uses the `$body-bg` variable. // grep: BOXED_BODY_BG_ODOO background-color: $body-bg; } @include media-breakpoint-up(sm) { padding-right: $grid-gutter-width * 2; padding-left: $grid-gutter-width * 2; > * { // When the website is visually acting like a container (eg. // boxed layout), increase its maximum size to handle bigger // horizontal paddings. $-max-widths: (); @each $key, $value in $container-max-widths { $-max-widths: map-merge($-max-widths, ( #{$key}: $value + $grid-gutter-width * 2, )); } @include make-container(0); @include make-container-max-widths($-max-widths); } > header .container { max-width: 100% !important; } // Vertical alignment when top-menu has visually "no background" $-menu-color: o-color('menu-custom') or o-color('menu'); @if (not $-menu-color or $-menu-color == o-color('body')) { > header { .navbar, .container { padding-left: 0; padding-right: 0; } } } } @if o-website-value('layout') == 'framed' { @include media-breakpoint-up(md) { padding-top: $grid-gutter-width; padding-bottom: $grid-gutter-width * 1.5; } } @else if o-website-value('layout') == 'postcard' { @include media-breakpoint-up(md) { $-border-radius: $border-radius-lg; // Don't know why (browser rounding mistake?) but the inner // border radius must be 1px lower for this to be visually ok // (despite the fact there is no border or any space) $-inner-border-radius: $-border-radius - 0.0625rem; > * { margin-bottom: $spacer * 2; } > header { &, &.o_header_affix { .navbar { @include border-bottom-radius($-border-radius); } } } > main, > footer { @include border-radius($-border-radius); .oe_structure > :first-child { @include border-top-radius($-inner-border-radius); } } > main .oe_structure > :last-child, .o_footer_copyright { @include border-bottom-radius($-inner-border-radius); } } } } } // We don't want the area to be visible in edit mode when we edit the popup that // is shared on all pages, otherwise the .o_editable area has a minimum height // when it is focused. #o_shared_blocks { min-height: 0px; height: 0px; &:empty { display: none; } } .navbar { .navbar-collapse { min-width: 0; // Allows it to shrink during loading } .btn { // This was a default bootstrap style before but it was removed from // the library at some point. It seems important in the header so that // the header does not flicker during loading. white-space: nowrap; } .o_menu_image_placeholder { width: 80px !important; } // TODO in master: remove the `#top_menu` selector. #top_menu, .top_menu { flex-wrap: nowrap !important; &.o_menu_loading { overflow: hidden !important; opacity: 0 !important; } } } .navbar-brand, .navbar-text, .navbar .nav-link, .navbar a.js_change_lang span, .navbar a.o_add_language { @if $o-theme-navbar-font != $o-theme-font { font-family: $o-theme-navbar-font; } } .navbar-light { // Style only navbar-light which Odoo is only supposed to use in standard // anyway. Automatically mimic navbar-dark if the user's menu color is dark. // Note: this only works because navbar-light is defined before navbar-dark, // we may want to use a safest way when possible. @include o-apply-colors('menu'); @include o-apply-colors('menu-custom'); $-menu-color: o-color('menu-custom') or o-color('menu'); @if ($-menu-color and color-contrast($-menu-color) != $color-contrast-dark) { --NavLinkWithBackground-bg-color: #{rgba($navbar-dark-active-color, .1)}; --NavLinkWithBackground-bg-color--hover: #{rgba($navbar-dark-active-color, .2)}; --NavStretch-placeholder-color: #{rgba($navbar-dark-active-color, .3)}; --HeaderSeparator-bg-color: #{rgba($navbar-dark-active-color, .15)}; @extend .navbar-dark; .btn-close { filter: $btn-close-white-filter; } } @include o-add-gradient('menu-gradient'); } // TODO this should be reviewed. While it allowed to choose a color for the // navbar text, there is no :hover effect, the active item is not visible and // the selector is probably too specific and should rather be about extending // bootstrap if possible. #wrapwrap:not(.o_header_overlay) header, header.o_header_is_scrolled { .nav-item > .nav-link > *, .nav-item > .nav-link::after, .js_language_selector span, .badge { color: o-website-value('header-text-color') !important; } } .o_navlink_background { background: var(--NavLinkWithBackground-bg-color, rgba($navbar-light-active-color, .05)); &:hover { background: var(--NavLinkWithBackground-bg-color--hover, rgba($navbar-light-active-color, .1)); } } .o_navlink_background_hover:hover { background: var(--NavLinkWithBackground-bg-color, rgba($navbar-light-active-color, .05)); } // Apply background color to the offcanvas menu .o_navbar_mobile { height: 100dvh; background-color: o-color('menu-custom') or o-color('menu'); } $-header-nav-link-height: $nav-link-height; @if o-website-value('header-font-size') { $-header-nav-link-height: o-website-value('header-font-size') * $line-height-base + $nav-link-padding-y * 2; header { font-size: o-website-value('header-font-size'); .dropdown-menu, .btn { font-size: inherit !important; } } } @if $o-theme-navbar-logo-height { // With default values, this makes it slightly bigger than standard // navbar-brand, which is what we want header .navbar-brand { font-size: $o-theme-navbar-logo-height / $line-height-base; $-logo-padding-y: max(0, $-header-nav-link-height - $o-theme-navbar-logo-height) / 2; &, &.logo { padding-top: $-logo-padding-y; padding-bottom: $-logo-padding-y; } } } .o_footer { @include o-apply-colors('footer'); @include o-apply-colors('footer-custom'); @include o-add-gradient('footer-gradient'); .o_footer_copyright { $-footer-color: o-color('footer-custom') or o-color('footer'); @include o-apply-colors('copyright', $background: $-footer-color); @include o-apply-colors('copyright-custom', $background: $-footer-color); @include o-add-gradient('copyright-gradient'); } } h2 { color: map-get($colors, 'o-cc1-h2'); } h3 { color: map-get($colors, 'o-cc1-h3'); } h4 { color: map-get($colors, 'o-cc1-h4'); } h5 { color: map-get($colors, 'o-cc1-h5'); } h6 { color: map-get($colors, 'o-cc1-h6'); } $heading-font-families: () !default; $heading-font-families: map-merge(( "h2": $h2-font-family, "h3": $h3-font-family, "h4": $h4-font-family, "h5": $h5-font-family, "h6": $h6-font-family, "display-1": $display-1-font-family, "display-2": $display-2-font-family, "display-3": $display-3-font-family, "display-4": $display-4-font-family, ), $heading-font-families); $heading-line-heights: () !default; $heading-line-heights: map-merge(( "h2": $h2-line-height, "h3": $h3-line-height, "h4": $h4-line-height, "h5": $h5-line-height, "h6": $h6-line-height, "display-1": $display-1-line-height, "display-2": $display-2-line-height, "display-3": $display-3-line-height, "display-4": $display-4-line-height, ), $heading-line-heights); $heading-margin-tops: () !default; $heading-margin-tops: map-merge(( "h2": $h2-margin-top, "h3": $h3-margin-top, "h4": $h4-margin-top, "h5": $h5-margin-top, "h6": $h6-margin-top, "display-1": $display-1-margin-top, "display-2": $display-2-margin-top, "display-3": $display-3-margin-top, "display-4": $display-4-margin-top, ), $heading-margin-tops); $heading-margin-bottoms: () !default; $heading-margin-bottoms: map-merge(( "h2": $h2-margin-bottom, "h3": $h3-margin-bottom, "h4": $h4-margin-bottom, "h5": $h5-margin-bottom, "h6": $h6-margin-bottom, "display-1": $display-1-margin-bottom, "display-2": $display-2-margin-bottom, "display-3": $display-3-margin-bottom, "display-4": $display-4-margin-bottom, ), $heading-margin-bottoms); h1, h2, h3, h4, h5, h6 { line-height: $headings-line-height; margin-top: $headings-margin-top; margin-bottom: $headings-margin-bottom; } @each $selector, $map-key in ("h2" "h2", "h3" "h3", "h4" "h4", "h5" "h5", "h6" "h6", ".display-1" "display-1", ".display-2" "display-2", ".display-3" "display-3", ".display-4" "display-4") { #{$selector} { @if ($headings-font-family != map-get($heading-font-families, $map-key)) { font-family: map-get($heading-font-families, $map-key); } @if ($headings-line-height != map-get($heading-line-heights, $map-key)) { line-height: map-get($heading-line-heights, $map-key); } @if ($headings-margin-top != map-get($heading-margin-tops, $map-key)) { margin-top: map-get($heading-margin-tops, $map-key); } @if ($headings-margin-bottom != map-get($heading-margin-bottoms, $map-key)) { margin-bottom: map-get($heading-margin-bottoms, $map-key); } } } .btn { @if ($o-theme-buttons-font != $o-theme-font) { font-family: $o-theme-buttons-font; } } // Texts p { margin-top: $paragraph-margin-top; } font[style*='background']:not(.text-gradient), font[class*='bg-'] { padding: 2px 6px 4px; } // Icons .fa { $-size: map-get($spacers, 5); font-family: "FontAwesome" !important; &.rounded-circle, &.rounded, &.rounded-0, &.rounded-leaf, &.img-thumbnail, &.shadow { display: inline-block; vertical-align: middle; text-align: center; // fa-1x is not ouput width: $-size; height: $-size; line-height: $-size; @for $i from 2 through 5 { &.fa-#{$i}x { width: $-size + $i; height: $-size + $i; line-height: $-size + $i; } } // Default, if no background-color already selected background-color: $gray-100; } &.img-thumbnail { padding: 0; } &.rounded-leaf { border-top-left-radius: $-size; border-bottom-right-radius: $-size; } &.rounded-empty-circle { @extend .rounded-circle; border-width: ceil(1.4 * $border-width); border-style: solid; background: transparent; } } // Smaller container .o_container_small { @extend .container; @include media-breakpoint-up(lg) { max-width: map-get($container-max-widths, md); } } // Buttons .btn { &.flat { border: 0; letter-spacing: 0.05em; text-transform: uppercase; @include button-size(0.75rem, 1.5rem, ($font-size-base * .75), 0); &.btn-lg { @include button-size(1rem, 2rem, ($font-size-lg * .75), 0); } &.btn-sm { @include button-size(.5rem, 1rem, ($font-size-sm * .75), 0); } &.btn-xs { @include button-size(.25rem, .5rem, ($font-size-base * .5), 0); } } &.rounded-circle { border-radius: 100px !important; @include button-size(0.45rem, 1.35rem, $font-size-base, 30px); &.btn-lg { @include button-size(.6rem, 1.8rem, $font-size-lg, 30px); } &.btn-sm { @include button-size(.3rem, .9rem, $font-size-sm, 30px); } &.btn-xs { @include button-size(.15rem, .45rem, ($font-size-base * .75), 30px); } } } // Background Images .oe_img_bg { background-size: cover; background-repeat: no-repeat; &.o_bg_img_opt_repeat { background-size: auto; background-repeat: repeat; } &.o_bg_img_center { background-position: center; } // Compatibility <= 13.0, TODO remove? // ----------------------------------- &.o_bg_img_opt_contain { background-size: contain; background-position: center center; } &.o_bg_img_opt_custom { background-size: auto; } &.o_bg_img_opt_repeat_x { background-repeat: repeat-x; } &.o_bg_img_opt_repeat_y { background-repeat: repeat-y; } } // Background videos .o_bg_video_container { @extend %o-we-background-layer; } .o_bg_video_iframe { position: relative; pointer-events: none !important; } .o_bg_video_loading { @include o-position-absolute(0, 0 ,0 ,0); } .o_background_video, .parallax { @extend %o-we-background-layer-parent; } // Probably outdated // Disable fixed height @include media-breakpoint-down(md) { section, .parallax, .row, .hr, .blockquote { height: auto !important; } } // Probably outdated // Table .table_desc { margin: 0 0 20px 0; width: 100%; word-break: break-all; border: 1px solid #dddddd; } .table_heading { background-color: #f5f5f5; border: 1px solid #dddddd; color: #666666; @include font-size(14px); padding: 4px; } table.table_desc tr td { text-align: left; padding: 5px; @include font-size(13px); &:first-child { width: 25%; font-weight: bold; border-bottom: 1px solid #c9c9c9; border-right: 1px solid #c9c9c9; border-left: none; } &:last-child { border-bottom: 1px solid #c9c9c9; } } // Jumbotron .jumbotron { border-radius: 0; } .o_full_screen_height { display: flex; flex-direction: column; justify-content: space-around; min-height: 100vh !important; } .o_half_screen_height { @extend .o_full_screen_height; min-height: 55vh !important; } // TODO remove cover_full and cover_mid classes (kept for compatibility for now) .cover_full { @extend .o_full_screen_height; } .cover_mid { @extend .o_half_screen_height; } // Allows custom border radius without contents overflowing. .card { overflow: hidden; } // // Snippets // // Carousel -> TODO: should be versioned in 000.scss file but how ? .s_carousel, .s_quotes_carousel { // Controls .carousel-control-prev, .carousel-control-next { position: absolute; cursor: pointer; width: 8%; opacity: 1; } @include media-breakpoint-down(md) { .carousel-control-prev, .carousel-control-next { display: none; // remove arrows on mobile } } .carousel-control-prev { justify-content: flex-start; } .carousel-control-next { justify-content: flex-end; } .carousel-control-prev-icon, .carousel-control-next-icon { width: auto; height: auto; background-image: none; color: $body-color; &:before { font-family: "FontAwesome"; display: inline-block; background-color: #fff; } } // Content .carousel-inner { // Create a new stacking context to ensure that elements like indicators // and arrows will always appear on top of the carousel content. isolation: isolate; overflow: hidden; height: 100%; .carousel-item { height: 100%; } } // Indicators .carousel-indicators { position: absolute; li:hover:not(.active) { background-color: rgba(255,255,255,.8); } } // Default &.s_carousel_default { // Controls - chevron .carousel-control-prev-icon:before { content: "\f053" #{"/*rtl:'\f054'*/"}; margin-left: 1.5rem; } .carousel-control-next-icon:before { content: "\f054" #{"/*rtl:'\f053'*/"}; margin-right: 1.5rem; } .carousel-control-prev-icon:before, .carousel-control-next-icon:before { background-color: rgba(0,0,0,0); @include font-size(2rem); color: #fff; text-shadow: $box-shadow-sm; } // Indicators .carousel-indicators li { height: .6rem; margin-bottom: .5rem; border: 0; border-radius: $border-radius-sm; box-shadow: $box-shadow-sm; } } // Border &.s_carousel_bordered { border: 2rem solid rgba(0,0,0,0); @include media-breakpoint-down(md) { border: 0.5rem solid rgba(0,0,0,0); } // Controls - caret .carousel-control-prev-icon:before { content: "\f0d9"; } .carousel-control-next-icon:before { content: "\f0da"; } .carousel-control-prev-icon:before, .carousel-control-next-icon:before { width: 2rem; height: 6rem; line-height: 6rem; @include font-size(1.5rem); } // Indicators .carousel-indicators li { width: 3rem; height: 1rem; } } // Circle &.s_carousel_rounded { // Container // .carousel-inner { // border-top-left-radius: 10rem; // border-bottom-right-radius: 10rem; // } // Controls - arrow .carousel-control-prev { margin-left: 1.5rem; } .carousel-control-next { margin-right: 1.5rem; } .carousel-control-prev-icon:before { content: "\f060"; } .carousel-control-next-icon:before { content: "\f061"; } .carousel-control-prev-icon:before, .carousel-control-next-icon:before { width: 4rem; height: 4rem; line-height: 4rem; border-radius: 50%; @include font-size(1.25rem); } // Indicators .carousel-indicators li { width: 1rem; height: 1rem; border-radius: 50%; } } // Boxed &.s_carousel_boxed { @include make-container(); @include make-container-max-widths(); .carousel-item { padding: 0 1rem; } // Controls - angle .carousel-control-prev, .carousel-control-next { align-items: flex-end; margin-bottom: 1.25rem; } .carousel-control-prev { margin-left: 3rem; } .carousel-control-next { margin-right: 3rem; } .carousel-control-prev-icon:before { content: "\f104"; } .carousel-control-next-icon:before { content: "\f105"; } .carousel-control-prev-icon:before, .carousel-control-next-icon:before { width: 2rem; height: 2rem; line-height: 2rem; @include font-size(1.25rem); } // Indicators .carousel-indicators li { width: 1rem; height: 1rem; &:hover:not(.active) { background-color: rgba(255,255,255,.8); } } } } .carousel .container { .carousel-img img { max-height: 95%; padding: 10px; } > .carousel-caption { @include o-position-absolute($right: 50%, $left: 50%); bottom: 20px; > div { position: absolute; text-align: left; padding: 20px; background: rgba(0, 0, 0, 0.4); bottom: 20px; } } > .carousel-image { @include o-position-absolute($top: 5%, $bottom: 5%); max-height: 90%; margin: 0 auto; } .carousel-item.text_image .container { > .carousel-caption { left: 10%; > div { right: 50%; margin-right: -20%; max-width: 550px; } } > .carousel-image { right: 10%; left: 50%; } } .carousel-item.image_text .container { > .carousel-caption { right: 10%; > div { left: 50%; margin-left: -20%; max-width: 550px; } } > .carousel-image { right: 50%; left: 10%; } } .carousel-item.text_only .container { > .carousel-caption { left: 10%; right: 10%; top: 10%; bottom: auto; > div { text-align: center; background: transparent; bottom: auto; width: 100%; } } > .carousel-image { display: none !important; } } } // Parallax .parallax { // TODO this introduces a limitation: no dropdown will be able to // overflow. Maybe there is a better way to find. &:not(.s_parallax_no_overflow_hidden) { overflow: hidden; } > .s_parallax_bg { @extend %o-we-background-layer; } @include media-breakpoint-up(xl) { // Fixed backgrounds are disabled when using a mobile/tablet device, // which is not a big deal but, on some of them (iOS...), defining the // background as fixed breaks the background-size/position props. // So we enable this only for >= XL devices. &.s_parallax_is_fixed > .s_parallax_bg { background-attachment: fixed; } } } // Keeps parallax snippet element selectable when Height = auto. .s_parallax { min-height: 10px; } // // Layout // $-transition-duration: 200ms; // Affixed Header .o_header_affixed { display: block; @include o-position-absolute(0, 0, auto, 0); position: fixed; &:not(.o_header_no_transition) { transition: transform $-transition-duration; } &.o_header_is_scrolled { .navbar-brand { @include font-size($o-theme-navbar-fixed-logo-height / $line-height-base); img { height: $o-theme-navbar-fixed-logo-height; } } } &.o_header_standard.o_header_is_scrolled { @if index(('menu_logo_below', 'logo_menu_below'), o-website-value('header-template')) != null { .navbar-brand { &, img { transition: none; } } } } .o_header_hide_on_scroll.hidden { max-height: 0; padding-block: 0 !important; overflow: hidden; } } // Navbar .navbar .o_extra_menu_items > .show { > li { + li { border-top: 1px solid map-get($grays, '200'); } > a.dropdown-toggle { background-color: map-get($grays, '200'); color: inherit; // Useful when the toggle is active pointer-events: none; // hack to prevent clicking on it because dropdown always opened } > ul, > .o_mega_menu { // remove dropdown-menu default style as it is nested in another one position: static; float: none; display: block; max-height: none; margin-top: 0; padding: 0; border: none; box-shadow: none; } > .o_mega_menu .row > div { // remove mega menu col-lg-* style width: 100%; flex: auto; } } } $zindex-website-header: $zindex-fixed !default; header { &#top { // We need this z-index for the shadow option of the header but also // to create a stacking context so that header dropdowns appear below // and above the same elements as the header. z-index: $zindex-website-header; } &:not(.o_header_no_transition) { // TODO in master: remove the `#o_main_nav` selector. #o_main_nav, .o_main_nav { transition: all $-transition-duration, color 0ms; } .navbar-brand { transition: margin $-transition-duration, font-size $-transition-duration, opacity $-transition-duration ease-out; img { transition: height $-transition-duration; } } } // Dropdown menus // In mobile there is no need to limit the height... @include media-breakpoint-up(lg) { .navbar .dropdown-menu { max-height: 60vh; overflow-y: auto; overflow-x: hidden; // Needed because of container in container having 0px padding... TODO improve } } // ... but we limit the navbar-collapse height .navbar-collapse.show { max-height: 80vh; overflow-y: auto; overflow-x: hidden; // Needed because of container in container having 0px padding... TODO improve @include media-breakpoint-down(lg) { .nav-link, .dropdown-item { white-space: normal; } } } &:not(.o_header_is_scrolled) { $-is-hamburger: o-website-value('header-template') == 'hamburger'; @include media-breakpoint-up(md) { @if $-is-hamburger { // TODO in master: remove the `#o_main_nav` selector. #o_main_nav, .o_main_nav { padding-top: $spacer * 0.5; padding-bottom: $spacer * 0.5; } } } } // TODO in master: remove the `#o_main_nav` selector. #o_main_nav, .o_main_nav { flex-direction: inherit; } nav.navbar { @if o-website-value('menu-border-width') { border: o-website-value('menu-border-style') o-color('menu-border-color') !important; border-width: 0 0 o-website-value('menu-border-width') 0 !important; &.o_border_right_only { border-width: 0 o-website-value('menu-border-width') 0 0 !important; } &.o_full_border { border-width: o-website-value('menu-border-width') !important; } } border-radius: o-website-value('menu-border-radius') !important; box-shadow: o-website-value('menu-box-shadow') !important; &.o_header_force_no_radius { border-radius: 0 !important; } } // Prevent the color of the header to impact the color of the nav. &.o_header_is_scrolled, &.o_transitioning.o_header_affixed { background-color: transparent !important; } } @if o-website-value('header-template') == 'sidebar' { @include media-breakpoint-up(lg) { #wrapwrap { // Two different website options might add padding: // - The sidebar header template // - The website layout template when different than 'full' // We need to combine both using `calc`. The `border` solution does // not work on Safari. $padding-size: o-website-value('sidebar-width'); @if o-website-value('layout') != 'full' { $padding-size: calc(#{$grid-gutter-width} * 2 + #{$padding-size}); } padding-left: $padding-size; > header { inset: 0 auto 0 0; position: fixed; z-index: $zindex-fixed; display: flex; width: o-website-value('sidebar-width'); transform: none !important; .navbar { width: 100%; align-items: start; padding: $spacer; .navbar-brand { max-width: 100%; padding: 0 0 $spacer 0; } // TODO in master: remove the `#o_main_nav` selector. #o_main_nav, .o_main_nav { flex-direction: column; align-items: start; padding: 0; } .navbar-nav { flex-direction: column; } .nav-link, .dropdown-item { white-space: initial; } .dropdown-menu { position: static; } } } } } } @else if o-website-value('header-template') == 'stretch' { #wrapwrap > header input::placeholder { color: #{var(--NavStretch-placeholder-color, $input-placeholder-color)}; } #wrapwrap > header .o_extra_menu_items { height: 100%; border-left: $border-width solid var(--NavLinkWithBackground-bg-color--hover, rgba($navbar-light-active-color, .1)); > .nav-link { display: flex; align-items: center; height: 100%; } } } @else if o-website-value('header-template') == 'sales_one' { #wrapwrap .o_header_sales_one_bot { @include o-apply-colors('header-sales_one'); @include o-apply-colors('header-sales_one-custom'); @include o-add-gradient('menu-secondary-gradient'); } header#top > nav:not(.o_header_mobile) { // TODO in master: remove the `#o_main_nav` selector. #o_main_nav,.o_main_nav { > .container { // TODO: remove in master and add "align-items-center" in the XML. align-items: center; } } } } @else if o-website-value('header-template') == 'sales_two' { #wrapwrap .o_header_sales_two_top { @include o-apply-colors('header-sales_two'); @include o-apply-colors('header-sales_two-custom'); @include o-add-gradient('menu-secondary-gradient'); } header#top > nav:not(.o_header_mobile) { // TODO in master: remove the `#o_main_nav` and `#top_menu` selectors. #o_main_nav, .o_main_nav { #top_menu, .top_menu { // TODO: remove in master and add "align-items-center" in the XML. align-items: center; } } } } @else if o-website-value('header-template') == 'sales_three' { #wrapwrap .o_header_sales_three_top { @include o-apply-colors('header-sales_three'); @include o-apply-colors('header-sales_three-custom'); @include o-add-gradient('menu-secondary-gradient'); } } @else if o-website-value('header-template') == 'sales_four' { #wrapwrap .o_header_sales_four_bot { @include o-apply-colors('header-sales_four'); @include o-apply-colors('header-sales_four-custom'); @include o-add-gradient('menu-secondary-gradient'); } header#top > nav:not(.o_header_mobile) { // TODO in master: remove the `#o_main_nav` selector. #o_main_nav, .o_main_nav { .navbar-nav { // TODO: remove in master and add "align-items-center" in the XML. align-items: center; } } } } .o_grid_header_3_cols { grid-template-columns: 1fr auto 1fr; } .o_grid_header_3_cols_fixed { grid-template-columns: 1fr 33% 1fr; } .o_header_separator > :not(:last-child)::before { content: ''; position: absolute; inset: 0 0 0 100%; width: $border-width * 2; height: 50%; margin: auto (map-get($spacers, 2) * -1) auto auto; background: var(--HeaderSeparator-bg-color, rgba($navbar-light-active-color, .1)); } // Default border color didn't match with background custom colors. // This allows to use the same contrast system than the text but for borders. .o_border_contrast { border-color: var(--NavLinkWithBackground-bg-color--hover, rgba($navbar-light-active-color, .1)) !important; } // Mega menu .o_mega_menu { width: 100%; padding: 0; margin-top: 0 !important; border-radius: 0; background-clip: unset; // Remove the 1px gap introduced by BS4 background-color: transparent; // In order to allow the mega menu to be transparent border: 1px solid $gray-200; // Prevent to see the color of the block behind. .container, .container-fluid { // Need to reforce those because they are removed since its a container // inside another container (the one in the navbar) padding-left: $grid-gutter-width / 2; padding-right: $grid-gutter-width / 2; } } .dropdown-menu.o_mega_menu_container_size { $-header-template: o-website-value('header-template'); @if not index(('sidebar', 'hamburger'), $-header-template) { $bp: if($-header-template == 'minimalist', md, lg); @include media-breakpoint-up($bp) { left: 50%; transform: translateX(-50%); } } $-mm-max-widths: (); @each $k, $v in $container-max-widths { $-mm-max-widths: map-merge($-mm-max-widths, ( #{$k}: $v - $grid-gutter-width, )); } @include make-container-max-widths($-mm-max-widths); } // The design of some of the new mega menu templates required a column with // an overlay that would overflow until the end of the container. For // technical reasons, this overlay has to be hardcoded here. %s_mega_menu_gray_area { z-index: 1; &:before { content: ''; display: block; width: 100vw; height: 100%; position: absolute; left: 0; top: 0; z-index: -1; pointer-events: none; background: rgba(0, 0, 0, .05); } } #wrapwrap.o_header_overlay { > header:not(.o_header_affixed):not(.o_top_menu_collapse_shown):not(.o_header_sidebar) { @include o-position-absolute(0, 0, auto, 0); z-index: 1000; > .navbar { @include o-apply-colors(1); // Reset to default colored components // Prevent the nav color/gradient to impact the header color. background-color: transparent !important; background-image: none !important; border-color: transparent; color: inherit; .nav-item { > .nav-link { &, &:hover { background-color: transparent; color: inherit; } &.active { font-weight: bolder; } } } } } } // Navbar Links Styles @if index(('block', 'border-bottom'), o-website-value('header-links-style')) { @include media-breakpoint-up(md) { .navbar, .navbar-nav { padding-top: 0; padding-bottom: 0; } } } .navbar-nav { .nav-link:not(.o_nav-link_secondary) { @if o-website-value('header-links-style') == 'outline' { // Need to force the padding in this case so that it stays in mobile padding-right: $navbar-nav-link-padding-x; padding-left: $navbar-nav-link-padding-x; border: $border-width solid transparent; @include border-radius($nav-pills-border-radius); } @else if o-website-value('header-links-style') == 'block' { // There is no way to control navbar links vertical padding in BS4 // independently from nav ones, just double them here instead padding-top: $nav-link-padding-y * 2; padding-bottom: $nav-link-padding-y * 2; @include border-radius(0); } @else if o-website-value('header-links-style') == 'border-bottom' { // There is no way to control navbar links vertical padding in BS4 // independently from nav ones, just double them here instead padding-top: ($nav-link-padding-y * 2); padding-bottom: ($nav-link-padding-y * 2); border-bottom: $nav-link-padding-y solid transparent; // Replace horizontal paddings by margins (do this with an extra // class to override .navbar-expand-* paddings priority). .navbar & { padding-left: 0; padding-right: 0; margin: 0 $navbar-nav-link-padding-x; } } } @if index(('outline', 'border-bottom'), o-website-value('header-links-style')) { .nav-link.active, .show > .nav-link { border-color: currentColor; } } } @if index(('slideout_slide_hover', 'slideout_shadow'), o-website-value('footer-effect')) { @include media-breakpoint-up(lg) { #wrapwrap.o_footer_effect_enable { > main { @if o-website-value('layout') == 'full' { // Ensure a transparent snippet at the end of the content // still appears with the same background when hovering the // footer during the scroll effect. @if o-website-value('body-image') { @include body-image-bg-style(); } @else { background-color: $body-bg; } } @if o-website-value('footer-effect') == 'slideout_shadow' { box-shadow: $box-shadow; } } > footer { @include o-position-sticky(auto, 0, 0, 0); z-index: -1; } } } } // Step wizard used in /shop, /event, appointment .o_wizard { $o_wizard_circle_progress_size: 64px; .o_wizard_step_active { @include media-breakpoint-up(md) { color: $body-color; } } .o_wizard_circle_progress { &, &:before { width: $o_wizard_circle_progress_size; height: $o_wizard_circle_progress_size; line-height: $o_wizard_circle_progress_size; } &:before { position: absolute; border-radius: 50%; box-shadow: inset 0 0 0 map-get($border-widths, 5) currentColor; opacity: .2; content: ""; } } .o_wizard_circle_progress_left .progress-bar { border-radius: 0 ($o_wizard_circle_progress_size * .5) ($o_wizard_circle_progress_size * .5) 0; transform-origin: center left; transform: rotate(var(--leftProgress)); } .o_wizard_circle_progress_right .progress-bar { border-radius: ($o_wizard_circle_progress_size * .5) 0 0 ($o_wizard_circle_progress_size * .5); transform-origin: center right; transform: rotate(var(--rightProgress)); } } // Language selector .js_language_selector { .dropdown-menu { min-width: 0; } a.list-inline-item { padding: 3px 0; } } .o_lang_flag { width: 1em; height: 1em; margin-right: 0.2em; border-radius: $border-radius-pill; object-fit: cover; box-shadow: rgba(0, 0, 0, 0.429) 1px 1px 1px; } span.list-inline-item.o_add_language:last-child { display: none !important; // Hide the separator if it is the last list item } // Footer scrolltop button @if o-website-value('footer-scrolltop') { #o_footer_scrolltop_wrapper { position: relative; z-index: 1; } #o_footer_scrolltop { $-footer-color: o-color('footer-custom') or o-color('footer') or rgba(0, 0, 0, 0); $-footer-color: mix(rgba($-footer-color, 1.0), $body-bg, percentage(alpha($-footer-color))); $-copyright-color: o-color('copyright-custom') or o-color('copyright') or rgba(0, 0, 0, 0); $-copyright-color: mix(rgba($-copyright-color, 1.0), $-footer-color, percentage(alpha($-copyright-color))); box-sizing: content-box; width: 3rem; height: 3rem; border: 0; padding: 0; @include o-apply-colors($-footer-color, $with-extras: false, $background: $-footer-color); text-decoration: none; @if $-footer-color == $-copyright-color { color: rgba(color-contrast($-footer-color), 0.5); } &:hover, &:focus { @include o-apply-colors($-copyright-color, $with-extras: false, $background: $-footer-color); text-decoration: none; } } } // Figure with special style .o_figure_relative_layout { position: relative; .figure-img { margin-bottom: 0; } .figure-caption { @include o-position-absolute(auto, 0, 0, 0); @include o-bg-color(rgba(map-get($theme-colors, 'dark'), $o-theme-figcaption-opacity)); padding: $tooltip-padding-y $tooltip-padding-x; font-weight: $font-weight-bold; a { color: inherit; } } } @each $color, $value in $theme-colors { .bg-#{$color}-light { background-color: rgba($value, 0.1); } } @each $media, $color in $o-social-colors { @include text-emphasis-variant(".text-#{$media}", $color); } // TODO: Will be handled properly in master/saas-12.2, temp fix for website_event.registration_attendee_details .modal-footer > .float-start { margin-right: auto; } // CoverProperties .o_record_cover_container { position: relative; .o_record_cover_component { @include o-position-absolute(0, 0, 0, 0); background-size: cover; background-position: center; background-repeat: no-repeat; } } // Scroll down button .o_scroll_button { @include o-position-absolute(auto, 0, 0, 0); display: flex; width: 50px; height: 50px; animation: o-anim-heartbeat 2.6s ease-in-out 1s infinite; &, &:hover { text-decoration: none; } &:focus { outline: none; } &:hover { animation-iteration-count: 1; } } // Attention keeper for the "scroll down" top-banner button @keyframes o-anim-heartbeat { 0%, 14%, 35% { transform: scale(1); } 7%, 21% { transform: scale(1.3); background-color: rgba(map-get($theme-colors, 'primary'), 0.8); } } // Ribbons $ribbon-padding: 100px; .o_ribbon { margin: 0; @include font-size(1rem); font-weight: bold; white-space: nowrap; text-align: center; pointer-events: none; } .o_ribbon_right { @include o-ribbon-right(); } .o_ribbon_left { @include o-ribbon-left(); } .o_tag_right { @include o-tag-right(); } .o_tag_left { @include o-tag-left(); } // Conditional visibility .o_conditional_hidden { display: none !important; } // Cookies Bar #website_cookies_bar { min-height: 0px; height: 0px; } // Search results .o_search_result_item_detail { flex: 1; } .o_website_btn_loading { opacity: $btn-disabled-opacity; .fa:not(.fa-spin) { display: none; } } ul.o_checklist > li.o_checked::after { left: - ($o-checklist-margin-left - $o-checklist-checkmark-width) - 1; top: 0; } // Bottom fixed element (e.g. livechat button) .modal-open .o_bottom_fixed_element, .o_bottom_fixed_element_hidden { // Prevent bottom fixed elements from hidding buttons and // hide them if a modal is open. display: none !important; } // On translation editor, inputs & textareas with translatable "placeholder" and // "value" will get HTML content as translation value for the attributes. // The goal here is to hide these values until the editor's code sets the right // ones on elements. The `o_text_content_invisible` class is mainly used on JS // to have the same behaviour for textareas, since it's not possible to target // them on CSS using the "value" attribute unlike inputs. .o_text_content_invisible { color: transparent !important; } [placeholder*="data-oe-translation-initial-sha"] { &::-webkit-input-placeholder{ /* WebKit */ color: transparent; opacity: 0; } &::-moz-placeholder { /* Firefox */ color: transparent; opacity: 0; } } input[value*="data-oe-translation-initial-sha"] { @extend .o_text_content_invisible; } [data-oe-translation-initial-sha] { > .o_translation_select { border: $input-border-width solid $input-border-color; @include border-radius($input-border-radius, 0); // Hide translatable `