From 2ee438896d83c9c47ccc73ecec69b18c4888de73 Mon Sep 17 00:00:00 2001
From: qsm-odoo <qsm@odoo.com>
Date: Wed, 18 Dec 2019 02:37:59 +0100
Subject: [REF] move history of xml/scss to s_company_team files

---
 addons/website/static/src/scss/website.scss        | 897 ---------------------
 .../static/src/snippets/s_company_team/000.scss    | 897 +++++++++++++++++++++
 2 files changed, 897 insertions(+), 897 deletions(-)
 delete mode 100644 addons/website/static/src/scss/website.scss
 create mode 100644 addons/website/static/src/snippets/s_company_team/000.scss

(limited to 'addons/website/static/src')

diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss
deleted file mode 100644
index f973c7adbfc..00000000000
--- a/addons/website/static/src/scss/website.scss
+++ /dev/null
@@ -1,897 +0,0 @@
-///
-/// This file regroups the website design rules.
-///
-
-$-seen: ();
-$-font-numbers: (
-    o-website-value('font-number'),
-    o-website-value('headings-font-number'),
-    o-website-value('navbar-font-number'),
-    o-website-value('buttons-font-number'),
-);
-@each $-number in $-font-numbers {
-    @if index($-seen, $-number) == null {
-        $-seen: append($-seen, $-number);
-        $-theme-font: nth($o-theme-font-urls, $-number);
-        @if $-theme-font {
-            @import url("https://fonts.googleapis.com/css?family=#{unquote($-theme-font)}&display=swap");
-        }
-    }
-}
-
-:root {
-    // 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.
-
-    // 1) Handle default values
-    --header-font-size: #{$font-size-base};
-
-    // 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.
-
-    // 4) The Odoo values map, $o-website-values, must be printed.
-    @each $key, $value in $o-website-values {
-        --#{$key}: #{$value};
-    }
-
-    // 5) Use final value used by the theme
-    $-h1-color: if($headings-color == inherit or not $headings-color, $body-color, $headings-color);
-    $-h2-color: if(color('h2'), color('h2'), $-h1-color);
-    $-h3-color: if(color('h3'), color('h3'), $-h2-color);
-    $-h4-color: if(color('h4'), color('h4'), $-h3-color);
-    $-h5-color: if(color('h5'), color('h5'), $-h4-color);
-    $-h6-color: if(color('h6'), color('h6'), $-h5-color);
-
-    --body: #{$body-bg};
-    --text: #{$body-color};
-    --h1: #{$-h1-color};
-    --h2: #{$-h2-color};
-    --h3: #{$-h3-color};
-    --h4: #{$-h4-color};
-    --h5: #{$-h5-color};
-    --h6: #{$-h6-color};
-
-    --logo-height: #{$o-theme-navbar-logo-height};
-    --number-of-fonts: #{length($o-theme-fonts)};
-}
-
-#wrapwrap {
-    background-size: cover;
-    background-repeat: no-repeat;
-    background-position: center;
-    background-attachment: fixed;
-
-    @if ($o-theme-layout == 'boxed') {
-        @include media-breakpoint-up(md) {
-            padding: 0 7.5%;
-        }
-
-        #wrap {
-            background-color: $white;
-        }
-    }
-}
-
-.navbar {
-    @if ($o-theme-navbar-font != $o-theme-font) {
-        font-family: $o-theme-navbar-font;
-    }
-
-    .nav-item {
-        transition: opacity 1000ms ease 0s;
-    }
-    .o_menu_loading .nav-item {
-        height: 0 !important;
-        overflow: hidden !important;
-        opacity: 0 !important;
-    }
-}
-
-.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.
-    @if color('menu') {
-        background-color: color('menu') !important;
-        @if (color-yiq(color('menu')) != $yiq-text-dark) {
-            @extend .navbar-dark;
-        }
-    }
-}
-
-$-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 {
-            font-size: inherit;
-        }
-    }
-}
-@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 {
-    @if color('footer') {
-        @include o-bg-color(color('footer'));
-    }
-
-    > #footer {
-        // FIXME needed to prevent the dropzone at the bottom of the #wrap element
-        // to be at the same place of the dropzone at the top of the #footer element
-        border-top: 1px solid transparent;
-    }
-}
-h2, h3, h4, h5, h6 {
-    color: color('h2');
-}
-h3, h4, h5, h6 {
-    color: color('h3');
-}
-h4, h5, h6 {
-    color: color('h4');
-}
-h5, h6 {
-    color: color('h5');
-}
-h6 {
-    color: color('h6');
-}
-.btn {
-    @if ($o-theme-buttons-font != $o-theme-font) {
-        font-family: $o-theme-buttons-font;
-    }
-}
-
-// Texts
-font[style*='background'],
-font[class*='bg-'] {
-    padding: 2px 6px 4px;
-}
-
-// Icons
-.fa {
-    font-family: "FontAwesome" !important;
-    $size: 3rem;
-
-    &.rounded-circle,
-    &.rounded,
-    &.rounded-0,
-    &.rounded-leaf,
-    &.img-thumbnail,
-    &.shadow {
-        display: inline-block;
-        vertical-align: middle;
-        text-align: center;
-        // fa-1x is not ouput
-        @include size($size);
-        line-height: $size;
-        @for $i from 2 through 5 {
-            &.fa-#{$i}x {
-                @include size($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;
-    }
-}
-
-// Buttons
-.btn {
-    &.flat {
-        border: 0;
-        letter-spacing: 0.05em;
-        text-transform: uppercase;
-        @include button-size(0.75rem, 1.5rem, ($font-size-base * .75), $btn-line-height, 0);
-        &.btn-lg { @include button-size(1rem, 2rem, ($font-size-lg * .75), $btn-line-height-lg, 0); }
-        &.btn-sm { @include button-size(.5rem, 1rem, ($font-size-sm * .75), $btn-line-height-sm, 0); }
-        &.btn-xs { @include button-size(.25rem, .5rem, ($font-size-base * .5), $btn-line-height-sm, 0); }
-    }
-    &.rounded-circle {
-        border-radius: 100px !important;
-        @include button-size(0.45rem, 1.35rem, $font-size-base, $btn-line-height, 30px);
-        &.btn-lg { @include button-size(.6rem, 1.8rem, $font-size-lg, $btn-line-height-lg, 30px); }
-        &.btn-sm { @include button-size(.3rem, .9rem, $font-size-sm, $btn-line-height-sm, 30px); }
-        &.btn-xs { @include button-size(.15rem, .45rem, ($font-size-base * .75), $btn-line-height-sm, 30px); }
-    }
-}
-
-// Blockquotes
-.blockquote {
-    font-size: 1rem;
-    footer {
-        background-color: inherit;
-    }
-}
-
-// Background Images
-.oe_img_bg {
-    background-size: cover;
-    background-repeat: no-repeat;
-
-    &.o_bg_img_opt_repeat {
-        background-size: auto;
-        background-repeat: repeat;
-    }
-
-    // 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_background_video {
-    position: relative;
-
-    > * {
-        position: relative;
-    }
-}
-.o_bg_video_container {
-    @include o-position-absolute(0, 0 ,0 ,0);
-    overflow: hidden;
-}
-.o_bg_video_iframe {
-    position: relative;
-    pointer-events: none !important;
-}
-.o_bg_video_loading {
-    @include o-position-absolute(0, 0 ,0 ,0);
-}
-
-// Probably outdated
-// Lists
-.o_ul_toggle {
-    display: none;
-}
-
-.o_ul_folded {
-    .o_close {
-        display: none!important;
-    }
-    .o_ul_toggle_self,
-    .o_ul_toggle_next {
-        display: inline-block;
-        line-height: inherit;
-        float: left;
-        position: relative;
-        margin-left: -1em;
-        top: -0.15em;
-        left: 0.2em;
-        font-size: 1.4em;
-        text-decoration: none;
-        &.o_open:before {
-            content: "";
-        }
-        &:before {
-            content: "";
-        }
-    }
-}
-
-// Probably outdated
-// Disable fixed height
-@media (max-width: 400px) {
-    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;
-    font-size: 14px;
-    padding: 4px;
-}
-table.table_desc tr td {
-    text-align: left;
-    padding: 5px;
-    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;
-}
-
-//
-// Snippets
-//
-
-// Title
-.s_title {
-    .s_title_boxed {
-        > * {
-            display: inline-block;
-            padding: $grid-gutter-width;
-            border: 1px solid;
-        }
-    }
-    .s_title_lines {
-        overflow: hidden;
-        &:before,
-        &:after {
-            content: "";
-            display: inline-block;
-            vertical-align: middle;
-            width: 100%;
-            border-top: 1px solid;
-            border-top-color: inherit;
-        }
-        &:before { margin: 0 $grid-gutter-width/2 0 -100%; }
-        &:after  { margin: 0 -100% 0 $grid-gutter-width/2; }
-    }
-    .s_title_underlined {
-        @extend %o-page-header;
-    }
-    .s_title_small_caps {
-        font-variant: small-caps;
-    }
-    .s_title_transparent {
-        opacity: .5;
-    }
-    .s_title_thin {
-        font-weight: 300;
-    }
-}
-
-
-// Features Grid
-.s_features_grid {
-    &_content {
-        overflow: hidden;
-        p {
-            margin-bottom: 0;
-        }
-    }
-    &_icon {
-        float: left;
-        margin-right: $grid-gutter-width/2;
-    }
-}
-
-// FAQ
-.s_faq_collapse {
-    .accordion .card {
-        .card-header {
-            cursor: pointer;
-            display: inline-block;
-            width: 100%;
-            padding: .5em 0;
-            border-radius: 0;
-            outline: none;
-            &:before {
-                content:'\f056';
-                font-family: 'FontAwesome';
-                display: inline-block;
-                margin: 0 .5em 0 .75em;
-                color: $gray-600;
-            }
-            &.collapsed:before {
-                content:'\f055';
-                font-family: 'FontAwesome';
-            }
-            &:hover,
-            &:focus {
-                text-decoration: none;
-            }
-        }
-        .card-body {
-            padding: 1em 2.25em;
-        }
-    }
-    .card-body p:last-child,
-    .card-body ul:last-child {
-        margin-bottom: 0;
-    }
-}
-
-
-// References
-.s_references .img-thumbnail {
-    border: none;
-}
-
-// Carousel -> TODO: should be versioned in 000.scss file but how ?
-.s_carousel,
-.s_quotes_carousel {
-
-    // Controls
-    .carousel-control-prev,
-    .carousel-control-next {
-        cursor: pointer;
-        width: 8%;
-        opacity: 1;
-    }
-    .carousel-control-prev { justify-content: flex-start; }
-    .carousel-control-next { justify-content: flex-end; }
-    .carousel-control-prev-icon,
-    .carousel-control-next-icon {
-        @include size(auto);
-        background-image: none;
-        color: $body-color;
-        &:before {
-            font-family: "FontAwesome";
-            display: inline-block;
-            background-color: #fff;
-        }
-    }
-    // Content
-    .carousel-inner {
-        overflow: hidden;
-        height: 100%;
-        .carousel-item {
-            height: 100%;
-        }
-    }
-    // Indicators
-    .carousel-indicators 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);
-            font-size: 2rem;
-            color: #fff;
-            text-shadow: $box-shadow-sm;
-        }
-        // Indicators
-        .carousel-indicators li {
-            height: .5rem;
-            box-shadow: $box-shadow-sm;
-            border-radius: 2px;
-        }
-    }
-
-    // Border
-    &.s_carousel_bordered {
-        border: 2rem 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 {
-            @include size(2rem, 6rem);
-            line-height: 6rem;
-            font-size: 1.5rem;
-        }
-        // Indicators
-        .carousel-indicators li {
-            @include size(3rem, 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 {
-            @include size(4rem);
-            line-height: 4rem;
-            border-radius: 50%;
-            font-size: 1.25rem;
-        }
-        // Indicators
-        .carousel-indicators li {
-            @include size(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 {
-            @include size(2rem);
-            line-height: 2rem;
-            font-size: 1.25rem;
-        }
-        // Indicators
-        .carousel-indicators li {
-            @include size(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;
-        }
-    }
-}
-
-
-// Quotes Slider
-.s_quotes_carousel {
-    blockquote {
-        padding: $grid-gutter-width;
-        margin-bottom: 0;
-        .s_quotes_carousel_icon {
-            position: absolute;
-            top: 0;
-            left: -3rem;
-        }
-        img {
-            max-width: 40px;
-            margin-right: 5px;
-            border-radius: 50%;
-        }
-        footer {
-            background-color: transparent;
-            &:before {
-                content:"";
-            }
-        }
-    }
-}
-
-// Company Team
-.s_company_team {
-    @include media-breakpoint-down(md) {
-        img {
-            max-width: 50%;
-        }
-    }
-}
-
-// Parallax
-.parallax {
-    position: relative;
-
-    // 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;
-    }
-
-    > * {
-        position: relative;
-    }
-    > .s_parallax_bg {
-        @include o-position-absolute(0, 0, 0, 0);
-        display: block;
-        background-color: inherit;
-        background-size: cover;
-        background-attachment: scroll;
-        pointer-events: none;
-
-        &::after {
-            content: "";
-            @include o-position-absolute(0, 0, 0, 0);
-            display: block;
-            background-color: inherit;
-        }
-    }
-    @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;
-        }
-    }
-}
-
-
-//
-// Layout
-//
-
-// Header
-.o_header_affix {
-    display: block;
-    @include o-position-absolute(0, 0, auto, 0);
-    position: fixed;
-    z-index: $zindex-modal - 20;
-    background: $light;
-    margin-top: -999px;
-    transition: margin-top 500ms ease 0s;
-    @include media-breakpoint-down(sm) {
-        .navbar-collapse {
-            max-height: 70vh;
-            overflow-y: auto;
-        }
-    }
-    &.affixed {
-        margin-top: 0px !important; // the default margin-top is adapted in JS
-    }
-}
-#oe_main_menu_navbar + #wrapwrap .o_header_affix {
-    top: $o-navbar-height;
-}
-
-// Navbar
-.navbar .o_extra_menu_items.show > ul {
-    > li {
-        + li {
-            border-top: 1px solid gray('200');
-        }
-        > a.dropdown-toggle {
-            background-color: gray('200');
-            color: inherit; // Useful when the toggle is active
-            pointer-events: none; // hack to prevent clicking on it because dropdown always opened
-        }
-        > ul { // 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;
-        }
-    }
-}
-
-// Mega menu
-.o_mega_menu {
-    width: 100%;
-    padding: 0;
-    margin-top: 0;
-    border-radius: 0;
-    background-clip: unset; // Remove the 1px gap introduced by BS4
-
-    .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;
-    }
-}
-.o_mega_menu_container_size {
-    @include media-breakpoint-up(md) {
-        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);
-}
-
-// Copyright
-.o_footer_copyright {
-    padding: 8px;
-    .js_language_selector {
-        display: inline-block;
-    }
-    @include media-breakpoint-up(md) {
-        .row {
-            display: flex;
-            > div {
-                margin: auto 0;
-            }
-        }
-    }
-}
-
-#wrapwrap.o_header_overlay {
-    > header:not(.o_header_affix) {
-        @include o-position-absolute(0, 0, auto, 0);
-        z-index: 1000;
-
-        > .navbar {
-            background-color: transparent !important;
-            border-color: transparent;
-
-            .nav-item {
-                > .nav-link {
-                    background-color: transparent;
-                    color: inherit;
-                }
-                &.show, &.active {
-                    > .nav-link {
-                        background-color: white;
-                        color: black;
-                    }
-                }
-            }
-        }
-    }
-}
-// 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(theme-color('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-left {
-    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;
-    }
-}
diff --git a/addons/website/static/src/snippets/s_company_team/000.scss b/addons/website/static/src/snippets/s_company_team/000.scss
new file mode 100644
index 00000000000..f973c7adbfc
--- /dev/null
+++ b/addons/website/static/src/snippets/s_company_team/000.scss
@@ -0,0 +1,897 @@
+///
+/// This file regroups the website design rules.
+///
+
+$-seen: ();
+$-font-numbers: (
+    o-website-value('font-number'),
+    o-website-value('headings-font-number'),
+    o-website-value('navbar-font-number'),
+    o-website-value('buttons-font-number'),
+);
+@each $-number in $-font-numbers {
+    @if index($-seen, $-number) == null {
+        $-seen: append($-seen, $-number);
+        $-theme-font: nth($o-theme-font-urls, $-number);
+        @if $-theme-font {
+            @import url("https://fonts.googleapis.com/css?family=#{unquote($-theme-font)}&display=swap");
+        }
+    }
+}
+
+:root {
+    // 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.
+
+    // 1) Handle default values
+    --header-font-size: #{$font-size-base};
+
+    // 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.
+
+    // 4) The Odoo values map, $o-website-values, must be printed.
+    @each $key, $value in $o-website-values {
+        --#{$key}: #{$value};
+    }
+
+    // 5) Use final value used by the theme
+    $-h1-color: if($headings-color == inherit or not $headings-color, $body-color, $headings-color);
+    $-h2-color: if(color('h2'), color('h2'), $-h1-color);
+    $-h3-color: if(color('h3'), color('h3'), $-h2-color);
+    $-h4-color: if(color('h4'), color('h4'), $-h3-color);
+    $-h5-color: if(color('h5'), color('h5'), $-h4-color);
+    $-h6-color: if(color('h6'), color('h6'), $-h5-color);
+
+    --body: #{$body-bg};
+    --text: #{$body-color};
+    --h1: #{$-h1-color};
+    --h2: #{$-h2-color};
+    --h3: #{$-h3-color};
+    --h4: #{$-h4-color};
+    --h5: #{$-h5-color};
+    --h6: #{$-h6-color};
+
+    --logo-height: #{$o-theme-navbar-logo-height};
+    --number-of-fonts: #{length($o-theme-fonts)};
+}
+
+#wrapwrap {
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-attachment: fixed;
+
+    @if ($o-theme-layout == 'boxed') {
+        @include media-breakpoint-up(md) {
+            padding: 0 7.5%;
+        }
+
+        #wrap {
+            background-color: $white;
+        }
+    }
+}
+
+.navbar {
+    @if ($o-theme-navbar-font != $o-theme-font) {
+        font-family: $o-theme-navbar-font;
+    }
+
+    .nav-item {
+        transition: opacity 1000ms ease 0s;
+    }
+    .o_menu_loading .nav-item {
+        height: 0 !important;
+        overflow: hidden !important;
+        opacity: 0 !important;
+    }
+}
+
+.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.
+    @if color('menu') {
+        background-color: color('menu') !important;
+        @if (color-yiq(color('menu')) != $yiq-text-dark) {
+            @extend .navbar-dark;
+        }
+    }
+}
+
+$-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 {
+            font-size: inherit;
+        }
+    }
+}
+@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 {
+    @if color('footer') {
+        @include o-bg-color(color('footer'));
+    }
+
+    > #footer {
+        // FIXME needed to prevent the dropzone at the bottom of the #wrap element
+        // to be at the same place of the dropzone at the top of the #footer element
+        border-top: 1px solid transparent;
+    }
+}
+h2, h3, h4, h5, h6 {
+    color: color('h2');
+}
+h3, h4, h5, h6 {
+    color: color('h3');
+}
+h4, h5, h6 {
+    color: color('h4');
+}
+h5, h6 {
+    color: color('h5');
+}
+h6 {
+    color: color('h6');
+}
+.btn {
+    @if ($o-theme-buttons-font != $o-theme-font) {
+        font-family: $o-theme-buttons-font;
+    }
+}
+
+// Texts
+font[style*='background'],
+font[class*='bg-'] {
+    padding: 2px 6px 4px;
+}
+
+// Icons
+.fa {
+    font-family: "FontAwesome" !important;
+    $size: 3rem;
+
+    &.rounded-circle,
+    &.rounded,
+    &.rounded-0,
+    &.rounded-leaf,
+    &.img-thumbnail,
+    &.shadow {
+        display: inline-block;
+        vertical-align: middle;
+        text-align: center;
+        // fa-1x is not ouput
+        @include size($size);
+        line-height: $size;
+        @for $i from 2 through 5 {
+            &.fa-#{$i}x {
+                @include size($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;
+    }
+}
+
+// Buttons
+.btn {
+    &.flat {
+        border: 0;
+        letter-spacing: 0.05em;
+        text-transform: uppercase;
+        @include button-size(0.75rem, 1.5rem, ($font-size-base * .75), $btn-line-height, 0);
+        &.btn-lg { @include button-size(1rem, 2rem, ($font-size-lg * .75), $btn-line-height-lg, 0); }
+        &.btn-sm { @include button-size(.5rem, 1rem, ($font-size-sm * .75), $btn-line-height-sm, 0); }
+        &.btn-xs { @include button-size(.25rem, .5rem, ($font-size-base * .5), $btn-line-height-sm, 0); }
+    }
+    &.rounded-circle {
+        border-radius: 100px !important;
+        @include button-size(0.45rem, 1.35rem, $font-size-base, $btn-line-height, 30px);
+        &.btn-lg { @include button-size(.6rem, 1.8rem, $font-size-lg, $btn-line-height-lg, 30px); }
+        &.btn-sm { @include button-size(.3rem, .9rem, $font-size-sm, $btn-line-height-sm, 30px); }
+        &.btn-xs { @include button-size(.15rem, .45rem, ($font-size-base * .75), $btn-line-height-sm, 30px); }
+    }
+}
+
+// Blockquotes
+.blockquote {
+    font-size: 1rem;
+    footer {
+        background-color: inherit;
+    }
+}
+
+// Background Images
+.oe_img_bg {
+    background-size: cover;
+    background-repeat: no-repeat;
+
+    &.o_bg_img_opt_repeat {
+        background-size: auto;
+        background-repeat: repeat;
+    }
+
+    // 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_background_video {
+    position: relative;
+
+    > * {
+        position: relative;
+    }
+}
+.o_bg_video_container {
+    @include o-position-absolute(0, 0 ,0 ,0);
+    overflow: hidden;
+}
+.o_bg_video_iframe {
+    position: relative;
+    pointer-events: none !important;
+}
+.o_bg_video_loading {
+    @include o-position-absolute(0, 0 ,0 ,0);
+}
+
+// Probably outdated
+// Lists
+.o_ul_toggle {
+    display: none;
+}
+
+.o_ul_folded {
+    .o_close {
+        display: none!important;
+    }
+    .o_ul_toggle_self,
+    .o_ul_toggle_next {
+        display: inline-block;
+        line-height: inherit;
+        float: left;
+        position: relative;
+        margin-left: -1em;
+        top: -0.15em;
+        left: 0.2em;
+        font-size: 1.4em;
+        text-decoration: none;
+        &.o_open:before {
+            content: "";
+        }
+        &:before {
+            content: "";
+        }
+    }
+}
+
+// Probably outdated
+// Disable fixed height
+@media (max-width: 400px) {
+    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;
+    font-size: 14px;
+    padding: 4px;
+}
+table.table_desc tr td {
+    text-align: left;
+    padding: 5px;
+    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;
+}
+
+//
+// Snippets
+//
+
+// Title
+.s_title {
+    .s_title_boxed {
+        > * {
+            display: inline-block;
+            padding: $grid-gutter-width;
+            border: 1px solid;
+        }
+    }
+    .s_title_lines {
+        overflow: hidden;
+        &:before,
+        &:after {
+            content: "";
+            display: inline-block;
+            vertical-align: middle;
+            width: 100%;
+            border-top: 1px solid;
+            border-top-color: inherit;
+        }
+        &:before { margin: 0 $grid-gutter-width/2 0 -100%; }
+        &:after  { margin: 0 -100% 0 $grid-gutter-width/2; }
+    }
+    .s_title_underlined {
+        @extend %o-page-header;
+    }
+    .s_title_small_caps {
+        font-variant: small-caps;
+    }
+    .s_title_transparent {
+        opacity: .5;
+    }
+    .s_title_thin {
+        font-weight: 300;
+    }
+}
+
+
+// Features Grid
+.s_features_grid {
+    &_content {
+        overflow: hidden;
+        p {
+            margin-bottom: 0;
+        }
+    }
+    &_icon {
+        float: left;
+        margin-right: $grid-gutter-width/2;
+    }
+}
+
+// FAQ
+.s_faq_collapse {
+    .accordion .card {
+        .card-header {
+            cursor: pointer;
+            display: inline-block;
+            width: 100%;
+            padding: .5em 0;
+            border-radius: 0;
+            outline: none;
+            &:before {
+                content:'\f056';
+                font-family: 'FontAwesome';
+                display: inline-block;
+                margin: 0 .5em 0 .75em;
+                color: $gray-600;
+            }
+            &.collapsed:before {
+                content:'\f055';
+                font-family: 'FontAwesome';
+            }
+            &:hover,
+            &:focus {
+                text-decoration: none;
+            }
+        }
+        .card-body {
+            padding: 1em 2.25em;
+        }
+    }
+    .card-body p:last-child,
+    .card-body ul:last-child {
+        margin-bottom: 0;
+    }
+}
+
+
+// References
+.s_references .img-thumbnail {
+    border: none;
+}
+
+// Carousel -> TODO: should be versioned in 000.scss file but how ?
+.s_carousel,
+.s_quotes_carousel {
+
+    // Controls
+    .carousel-control-prev,
+    .carousel-control-next {
+        cursor: pointer;
+        width: 8%;
+        opacity: 1;
+    }
+    .carousel-control-prev { justify-content: flex-start; }
+    .carousel-control-next { justify-content: flex-end; }
+    .carousel-control-prev-icon,
+    .carousel-control-next-icon {
+        @include size(auto);
+        background-image: none;
+        color: $body-color;
+        &:before {
+            font-family: "FontAwesome";
+            display: inline-block;
+            background-color: #fff;
+        }
+    }
+    // Content
+    .carousel-inner {
+        overflow: hidden;
+        height: 100%;
+        .carousel-item {
+            height: 100%;
+        }
+    }
+    // Indicators
+    .carousel-indicators 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);
+            font-size: 2rem;
+            color: #fff;
+            text-shadow: $box-shadow-sm;
+        }
+        // Indicators
+        .carousel-indicators li {
+            height: .5rem;
+            box-shadow: $box-shadow-sm;
+            border-radius: 2px;
+        }
+    }
+
+    // Border
+    &.s_carousel_bordered {
+        border: 2rem 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 {
+            @include size(2rem, 6rem);
+            line-height: 6rem;
+            font-size: 1.5rem;
+        }
+        // Indicators
+        .carousel-indicators li {
+            @include size(3rem, 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 {
+            @include size(4rem);
+            line-height: 4rem;
+            border-radius: 50%;
+            font-size: 1.25rem;
+        }
+        // Indicators
+        .carousel-indicators li {
+            @include size(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 {
+            @include size(2rem);
+            line-height: 2rem;
+            font-size: 1.25rem;
+        }
+        // Indicators
+        .carousel-indicators li {
+            @include size(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;
+        }
+    }
+}
+
+
+// Quotes Slider
+.s_quotes_carousel {
+    blockquote {
+        padding: $grid-gutter-width;
+        margin-bottom: 0;
+        .s_quotes_carousel_icon {
+            position: absolute;
+            top: 0;
+            left: -3rem;
+        }
+        img {
+            max-width: 40px;
+            margin-right: 5px;
+            border-radius: 50%;
+        }
+        footer {
+            background-color: transparent;
+            &:before {
+                content:"";
+            }
+        }
+    }
+}
+
+// Company Team
+.s_company_team {
+    @include media-breakpoint-down(md) {
+        img {
+            max-width: 50%;
+        }
+    }
+}
+
+// Parallax
+.parallax {
+    position: relative;
+
+    // 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;
+    }
+
+    > * {
+        position: relative;
+    }
+    > .s_parallax_bg {
+        @include o-position-absolute(0, 0, 0, 0);
+        display: block;
+        background-color: inherit;
+        background-size: cover;
+        background-attachment: scroll;
+        pointer-events: none;
+
+        &::after {
+            content: "";
+            @include o-position-absolute(0, 0, 0, 0);
+            display: block;
+            background-color: inherit;
+        }
+    }
+    @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;
+        }
+    }
+}
+
+
+//
+// Layout
+//
+
+// Header
+.o_header_affix {
+    display: block;
+    @include o-position-absolute(0, 0, auto, 0);
+    position: fixed;
+    z-index: $zindex-modal - 20;
+    background: $light;
+    margin-top: -999px;
+    transition: margin-top 500ms ease 0s;
+    @include media-breakpoint-down(sm) {
+        .navbar-collapse {
+            max-height: 70vh;
+            overflow-y: auto;
+        }
+    }
+    &.affixed {
+        margin-top: 0px !important; // the default margin-top is adapted in JS
+    }
+}
+#oe_main_menu_navbar + #wrapwrap .o_header_affix {
+    top: $o-navbar-height;
+}
+
+// Navbar
+.navbar .o_extra_menu_items.show > ul {
+    > li {
+        + li {
+            border-top: 1px solid gray('200');
+        }
+        > a.dropdown-toggle {
+            background-color: gray('200');
+            color: inherit; // Useful when the toggle is active
+            pointer-events: none; // hack to prevent clicking on it because dropdown always opened
+        }
+        > ul { // 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;
+        }
+    }
+}
+
+// Mega menu
+.o_mega_menu {
+    width: 100%;
+    padding: 0;
+    margin-top: 0;
+    border-radius: 0;
+    background-clip: unset; // Remove the 1px gap introduced by BS4
+
+    .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;
+    }
+}
+.o_mega_menu_container_size {
+    @include media-breakpoint-up(md) {
+        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);
+}
+
+// Copyright
+.o_footer_copyright {
+    padding: 8px;
+    .js_language_selector {
+        display: inline-block;
+    }
+    @include media-breakpoint-up(md) {
+        .row {
+            display: flex;
+            > div {
+                margin: auto 0;
+            }
+        }
+    }
+}
+
+#wrapwrap.o_header_overlay {
+    > header:not(.o_header_affix) {
+        @include o-position-absolute(0, 0, auto, 0);
+        z-index: 1000;
+
+        > .navbar {
+            background-color: transparent !important;
+            border-color: transparent;
+
+            .nav-item {
+                > .nav-link {
+                    background-color: transparent;
+                    color: inherit;
+                }
+                &.show, &.active {
+                    > .nav-link {
+                        background-color: white;
+                        color: black;
+                    }
+                }
+            }
+        }
+    }
+}
+// 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(theme-color('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-left {
+    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;
+    }
+}
-- 
cgit v1.2.3