[MERGE] forward port branch saas-12.5 up to 197474e5b9a

5 files changed, 312 insertions, 594 deletions

diff --git a/addons/website/static/src/scss/website.edit_mode.scss b/addons/website/static/src/scss/website.edit_mode.scss
index 17c3ee13bb3..5693f6e7526 100644
--- a/addons/website/static/src/scss/website.edit_mode.scss
+++ b/addons/website/static/src/scss/website.edit_mode.scss
@@ -1,223 +1,20 @@
+$-editor-messages-margin-x: 2%;
+%o-editor-messages {
+    width: 100% - $-editor-messages-margin-x * 2; // Need to be forced here to avoid flickering
+    margin: 20px $-editor-messages-margin-x;
+    border: 2px dashed $o-we-color-text-normal;
+    padding: 112px 0px;
+    text-align: center;
+    color: $o-we-color-text-normal;
 
-@each $url in $o-theme-font-urls {
-    @if $url {
-        @import url("https://fonts.googleapis.com/css?family=#{unquote($url)}");
+    &:before {
+        content: attr(data-editor-message);
+        display: block;
+        font-size: 20px;
     }
-}
-
-.modal.o_theme_customize_modal {
-    .modal-dialog {
-        @include o-position-absolute(0, 2%);
-        width: 96%;
-        max-width: 550px;
-    }
-    .modal-header {
-        background-color: $o-brand-odoo;
-        color: white;
-        border-radius: 0;
-
-        * {
-            color: inherit;
-        }
-    }
-
-    .close:hover, .close:focus {
-        color: white;
-    }
-
-    .nav {
-        padding: 0;
-
-        .nav-item {
-            background-color: $o-brand-lightsecondary;
-
-            .nav-link {
-                color: $o-main-text-color;
-
-                &.active {
-                    font-weight: bold;
-                    background-color: white;
-                    border: 1px solid #d9d7d7;
-                    border-left: 1px solid #333333;
-                }
-                &:hover, &:focus {
-                    text-decoration: none;
-                }
-            }
-        }
-    }
-
-    .dropdown-menu {
-        position: static !important;
-        transform: none !important;
-        min-width: 100%;
-    }
-
-    .o_theme_customize_option {
-        position: relative;
-        width: 100%;
-
-        > img {
-            width: 100%;
-
-            + label {
-                @include o-position-absolute(0, 0, 0, 0);
-                width: auto;
-                background: transparent !important;
-            }
-        }
-
-        label {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            width: 100%;
-            min-height: 24px;
-            margin: 0;
-            padding: 8px;
-            text-align: center;
-            font-size: 14px;
-            line-height: 1;
-            cursor: pointer;
-
-            &:hover::after {
-                content: "";
-                pointer-events: none;
-                @include o-position-absolute(0, 0, 0, 0);
-                background-color: rgba(0, 32, 64, 0.03);
-            }
-
-            &.o_switch {
-                justify-content: flex-start;
-            }
-        }
-        &:not(.dropdown-item) label {
-            border: 2px solid transparent;
-            background-color: $o-brand-lightsecondary;
-
-            &.checked {
-                border-color: $o-brand-odoo;
-                color: $o-brand-odoo;
-            }
-        }
-
-        &.o_theme_customize_with_widget {
-            label {
-                justify-content: flex-start;
-                text-align: left;
-
-                &.checked {
-                    border-color: transparent;
-                    color: inherit;
-                }
-            }
-        }
-    }
-
-    .o_theme_customize_color {
-        position: relative;
-        width: 30px;
-        height: 20px;
-        margin-left: auto;
-        border: 1px solid black;
-
-        &::before, &::after {
-            content: "";
-            @include o-position-absolute(0, 0, 0, 0);
-        }
-        &::before {
-            background-image: url('/web_editor/static/src/img/transparent.png');
-        }
-        &::after {
-            background-color: inherit;
-        }
-    }
-
-    .o_theme_customize_input {
-        flex: 1 1 auto;
-        text-align: right;
-
-        .fa-edit {
-            visibility: hidden;
-            color: $o-brand-primary;
-        }
-    }
-    .o_theme_customize_option:hover .o_theme_customize_input .fa-edit {
-        visibility: visible;
-    }
-
-    .o_theme_customize_active_input {
-        @include o-position-absolute(0, 0, 0, 0);
-        width: auto;
-        padding: 3px;
-
-        > * {
-            height: 100% !important;
-
-            &.form-control {
-                background: white !important;
-            }
-
-            &.form-control, .btn {
-                padding: 2px 8px !important;
-                text-align: right !important;
-                font-size: $font-size-sm !important;
-            }
-        }
-    }
-
-    .o_theme_customize_option_input {
-        position: absolute;
-        clip: rect(0, 0, 0, 0);
-        pointer-events: none;
-    }
-
-    .o_theme_customize_option_list {
-        box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.05);
-    }
-
-    .o_theme_customize_dropdown_btn {
-        background-color: $o-brand-lightsecondary;
-    }
-
-    $i: 1;
-    @each $font in $o-theme-fonts {
-        .o_theme_customize_option_font_#{$i} {
-            font-family: if($font, $font, $font-family-base);
-
-            &.o_theme_customize_option > label > span,
-            &.dropdown-toggle {
-                &::before {
-                    content: nth($o-theme-font-names, $i);
-                }
-            }
-        }
-        $i: $i + 1;
-    }
-
-    .o_theme_customize_delete_google_font {
-        @include o-position-absolute(1px, 1px, 1px, auto);
-        padding: 0 8px !important;
-    }
-}
-
-
-.o_homepage_editor_welcome_message {
-    padding-top: 128px;
-    padding-bottom: 128px;
-    font-family: Roboto, $font-family-sans-serif;
-
-    .o_tooltip_container {
-        transition: opacity 1s linear;
-
-        > .o_tooltip {
-            @include o-position-absolute;
-            position: relative;
-            display: inline-block;
-            margin: 0 8px;
-            opacity: 1;
-            z-index: auto;
-        }
+    &:after {
+        content: attr(data-editor-sub-message);
+        display: block;
     }
 }
 
@@ -249,19 +46,12 @@
 
     &.oe_structure.oe_empty, &[data-oe-type=html] {
         &:empty {
-            border: 2px dashed gray('400');
-            margin: 20px;
-            padding: 112px 0px;
-            text-align: center;
-            color: gray('400');
-            &:before {
-                content: attr(data-editor-message);
-                font-size: 20px;
-            }
-            &:after {
-                display: block;
-                content: attr(data-editor-sub-message);
-            }
+            @extend %o-editor-messages;
+        }
+        > .oe_drop_zone.oe_insert:not(.oe_vertical):only-child {
+            @extend %o-editor-messages;
+            height: auto;
+            color: $o-brand-odoo;
         }
         > p:empty:only-child {
             color: #aaa;
diff --git a/addons/website/static/src/scss/website.editor.ui.scss b/addons/website/static/src/scss/website.editor.ui.scss
index 403b7929a92..5071e2f8b90 100644
--- a/addons/website/static/src/scss/website.editor.ui.scss
+++ b/addons/website/static/src/scss/website.editor.ui.scss
@@ -1,3 +1,224 @@
+@each $url in $o-theme-font-urls {
+    @if $url {
+        @import url("https://fonts.googleapis.com/css?family=#{unquote($url)}");
+    }
+}
+
+.modal.o_theme_customize_modal {
+    .modal-dialog {
+        @include o-position-absolute(0, 2%);
+        width: 96%;
+        max-width: 550px;
+    }
+    .modal-header {
+        background-color: $o-brand-odoo;
+        color: white;
+        border-radius: 0;
+
+        * {
+            color: inherit;
+        }
+    }
+
+    .close:hover, .close:focus {
+        color: white;
+    }
+
+    .nav {
+        padding: 0;
+
+        .nav-item {
+            background-color: $o-brand-lightsecondary;
+
+            .nav-link {
+                color: $o-main-text-color;
+
+                &.active {
+                    font-weight: bold;
+                    background-color: white;
+                    border: 1px solid #d9d7d7;
+                    border-left: 1px solid #333333;
+                }
+                &:hover, &:focus {
+                    text-decoration: none;
+                }
+            }
+        }
+    }
+
+    .dropdown-menu {
+        position: static !important;
+        transform: none !important;
+        min-width: 100%;
+    }
+
+    .o_theme_customize_option {
+        position: relative;
+        width: 100%;
+
+        > img {
+            width: 100%;
+
+            + label {
+                @include o-position-absolute(0, 0, 0, 0);
+                width: auto;
+                background: transparent !important;
+            }
+        }
+
+        label {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 100%;
+            min-height: 24px;
+            margin: 0;
+            padding: 8px;
+            text-align: center;
+            font-size: 14px;
+            line-height: 1;
+            cursor: pointer;
+
+            &:hover::after {
+                content: "";
+                pointer-events: none;
+                @include o-position-absolute(0, 0, 0, 0);
+                background-color: rgba(0, 32, 64, 0.03);
+            }
+
+            &.o_switch {
+                justify-content: flex-start;
+            }
+        }
+        &:not(.dropdown-item) label {
+            border: 2px solid transparent;
+            background-color: $o-brand-lightsecondary;
+
+            &.checked {
+                border-color: $o-brand-odoo;
+                color: $o-brand-odoo;
+            }
+        }
+
+        &.o_theme_customize_with_widget {
+            label {
+                justify-content: flex-start;
+                text-align: left;
+
+                &.checked {
+                    border-color: transparent;
+                    color: inherit;
+                }
+            }
+        }
+    }
+
+    .o_theme_customize_color {
+        position: relative;
+        width: 30px;
+        height: 20px;
+        margin-left: auto;
+        border: 1px solid black;
+
+        &::before, &::after {
+            content: "";
+            @include o-position-absolute(0, 0, 0, 0);
+        }
+        &::before {
+            background-image: url('/web_editor/static/src/img/transparent.png');
+        }
+        &::after {
+            background-color: inherit;
+        }
+    }
+
+    .o_theme_customize_input {
+        flex: 1 1 auto;
+        text-align: right;
+
+        .fa-edit {
+            visibility: hidden;
+            color: $o-brand-primary;
+        }
+    }
+    .o_theme_customize_option:hover .o_theme_customize_input .fa-edit {
+        visibility: visible;
+    }
+
+    .o_theme_customize_active_input {
+        @include o-position-absolute(0, 0, 0, 0);
+        width: auto;
+        padding: 3px;
+
+        > * {
+            height: 100% !important;
+
+            &.form-control {
+                background: white !important;
+            }
+
+            &.form-control, .btn {
+                padding: 2px 8px !important;
+                text-align: right !important;
+                font-size: $font-size-sm !important;
+            }
+        }
+    }
+
+    .o_theme_customize_option_input {
+        position: absolute;
+        clip: rect(0, 0, 0, 0);
+        pointer-events: none;
+    }
+
+    .o_theme_customize_option_list {
+        box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.05);
+    }
+
+    .o_theme_customize_dropdown_btn {
+        background-color: $o-brand-lightsecondary;
+    }
+
+    $i: 1;
+    @each $font in $o-theme-fonts {
+        .o_theme_customize_option_font_#{$i} {
+            font-family: if($font, $font, $font-family-base);
+
+            &.o_theme_customize_option > label > span,
+            &.dropdown-toggle {
+                &::before {
+                    content: nth($o-theme-font-names, $i);
+                }
+            }
+        }
+        $i: $i + 1;
+    }
+
+    .o_theme_customize_delete_google_font {
+        @include o-position-absolute(1px, 1px, 1px, auto);
+        padding: 0 8px !important;
+    }
+}
+
+.o_homepage_editor_welcome_message {
+    padding-top: 128px;
+    padding-bottom: 128px;
+    font-family: Roboto, $font-family-sans-serif;
+
+    .o_tooltip_container {
+        transition: opacity 1s linear;
+
+        > .o_tooltip {
+            @include o-position-absolute;
+            position: relative;
+            display: inline-block;
+            margin: 0 8px;
+            opacity: 1;
+            z-index: auto;
+        }
+    }
+}
+
 // INPUTS
 .o_switch {
     display: flex;
@@ -8,7 +229,7 @@
     >input {
         display: none;
 
-        +span {
+        + span {
             background-color: $o-we-switch-inactive-color;
             box-shadow: inset 0 0 0px 1px darken($o-we-switch-inactive-color, 10%);
             border-radius: 100rem;
@@ -20,7 +241,7 @@
 
             &:after {
                 content: "";
-                background: $o-we-color-paper;
+                background: $o-we-bg-color;
                 display: block;
                 width: $o-we-switch-size - 0.2;
                 height: $o-we-switch-size - 0.2;
diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss
index cb919db80d4..b5ce0126afb 100644
--- a/addons/website/static/src/scss/website.scss
+++ b/addons/website/static/src/scss/website.scss
@@ -840,10 +840,15 @@ table.table_desc tr td {
     &.o_slideshow {
         .carousel {
             height: 100%;
+
             .carousel-inner {
                 height: 100%;
             }
-            .carousel-item {
+            .carousel-item.active,
+            .carousel-item-next,
+            .carousel-item-prev {
+                display: flex;
+                align-items: center;
                 height: 100%;
                 padding-bottom: 64px;
             }
@@ -909,8 +914,14 @@ table.table_desc tr td {
             background-color: inherit;
         }
     }
-    &.s_parallax_is_fixed > .s_parallax_bg {
-        background-attachment: fixed;
+    @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;
+        }
     }
 }
 
@@ -1089,6 +1100,34 @@ table.table_desc tr td {
     }
 }
 
+// Mega menu
+.o_mega_menu {
+    width: 100%;
+    padding: 0;
+    margin-top: 0;
+
+    .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;
diff --git a/addons/website/static/src/scss/website.ui.scss b/addons/website/static/src/scss/website.ui.scss
index 0acd4c36cd0..e2f4cf7f3b6 100644
--- a/addons/website/static/src/scss/website.ui.scss
+++ b/addons/website/static/src/scss/website.ui.scss
@@ -284,6 +284,10 @@ body .modal {
                 }
             }
         }
+
+        td.o_seo_keyword_suggestion span.o_seo_suggestion.badge {
+            cursor: pointer;
+        }
     }
 }
 
diff --git a/addons/website/static/src/scss/website.wysiwyg.scss b/addons/website/static/src/scss/website.wysiwyg.scss
index 1f5151f5da8..3206e4b027a 100644
--- a/addons/website/static/src/scss/website.wysiwyg.scss
+++ b/addons/website/static/src/scss/website.wysiwyg.scss
@@ -1,48 +1,27 @@
-//------------------------------------------------------------------------------
-// Modifications applied on normal website DOM while being in the editor.
-//------------------------------------------------------------------------------
-
-//------------------------------------------------------------------------------
-// Editor components style.
-//------------------------------------------------------------------------------
-
-body.editor_enable {
-    padding-top: $o-navbar-height !important;
+// Override css variables to influence the default style of the editor without
+// duplicating the css.
+:root {
+    --o-we-toolbar-height: #{$o-navbar-height};
+    --o-we-bg-color: #{$o-we-color-dark};
+    --o-we-bg-color-dark: #{$o-we-color-darker};
+    --o-we-color: #{$o-we-color-text-normal};
+    --o-we-color-accent: #{$o-we-color-text-light};
+
+    --o-we-dropdown-bg-color: #{$o-we-color-darker};
+    --o-we-dropdown-color: #{$o-we-color-text-normal};
+
+    --o-we-snippets-bg-color: #{$o-we-color-normal};
+    --o-we-snippets-color: #{$o-we-color-text-light};
 }
 
-#wrapwrap {
-    height: calc(100vh - #{$o-navbar-height});
-}
-
-// TOP BAR (EDIT)
+// EDITOR TOP BAR AND POPOVER
 #web_editor-top-edit {
-    height: $o-navbar-height;
-    background-color: $o-we-color-dark;
-    border: 0;
-    z-index: $zindex-modal - 9;
-
-    .note-popover .popover {
-        width: 100%;
-        height: $o-navbar-height;
-        text-align: left;
-
-        .popover-body {
-            height: $o-navbar-height;
-
-            .btn {
-                height: $o-navbar-height;
-            }
-        }
-    }
-
     form.navbar-form {
+        @include o-position-absolute(0, 0, 0, auto);
+        z-index: $zindex-popover + 5;
         height: $o-navbar-height;
-        z-index: 1060;
         margin: 0;
         padding: 0;
-        position: absolute;
-        top: -1px;
-        right: -1px;
         transition: right 0.4s $o-we-md-ease 0s;
         border-left: 1px solid $o-we-color-divider;
 
@@ -96,19 +75,11 @@ body.editor_enable {
     }
 }
 
-body:not(.editor_enable) form.navbar-form {
+.note-statusbar {
     display: none;
 }
 
-// SNIPPETS
-#oe_snippets {
-    border: 0;
-    #snippets_menu {
-        height: $o-navbar-height;
-    }
-}
-
-// Translations
+// TRANSLATIONS
 .oe_translate_examples li {
     margin: 10px;
     padding: 4px;
@@ -126,60 +97,10 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
     }
 }
 
-// NOTE EDITOR
-
-// SNIPPET PANEL
-#oe_snippets {
-    @include o-w-preserve-btn;
-    position: fixed;
-    width: $o-we-sidebar-width;
-    z-index: 1042;
-
-    border-top: 0;
-    border-right: 1px solid $o-we-color-divider;
-    transition: left 400ms $o-we-md-ease 0s;
-    background-image: linear-gradient(45deg, $o-we-color-normal, darken($o-we-color-normal, 10%));
-
-    #snippets_menu {
-        color: #999999;
-        background: $o-we-color-dark;
-        font-family: $o-we-font-family;
-        height: $o-navbar-height;
-        line-height: $o-navbar-height;
-    }
-
-    #o_scroll {
-        .o_panel_header {
-            color: #999999;
-        }
-    }
-}
-
-.oe_snippet {
-    background-color: $o-we-color-normal;
-
-    .oe_snippet_thumbnail {
-        .oe_snippet_thumbnail_img {
-            border: 1px solid $o-we-color-normal;
-        }
-
-        img.oe_snippet_thumbnail_img {}
-
-        .oe_snippet_thumbnail_title {
-            border: 1px solid $o-we-color-dark;
-            color: $o-we-color-text-light;
-        }
-
-        &:hover .oe_snippet_thumbnail_title {
-            color: $o-we-color-text-lighter;
-        }
-    }
-}
-
 // SNIPPET OPTIONS
 .colorpicker {
     .o_colorpicker_sections {
-        .note-color-palette>div {
+        .note-color-palette > div {
             color: $o-we-color-text-light;
         }
     }
@@ -191,7 +112,7 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
             clear: both;
         }
 
-        >button {
+        > button {
 
             &:hover,
             &.selected {
@@ -223,173 +144,22 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
     }
 }
 
-// DROPZONES
-#wrapwrap .oe_drop_zone {
-    &.oe_insert {
-        height: $o-we-dropzone-size;
-        margin: (-$o-we-dropzone-size/2) 0;
-
-        &:after {
-            border-bottom: $o-we-dropzone-border;
-        }
-
-        &.oe_vertical {
-            width: $o-we-dropzone-size;
-            margin: 0 (-$o-we-dropzone-size/2);
-
-            &:after {
-                border-right: $o-we-dropzone-border;
-            }
-        }
-    }
-}
-
-// MANIPULATORS
-#oe_manipulators {
-
-    // SNIPPET MANIPULATORS
-    .oe_overlay {
-
-        // OVERLAY OPTIONS
-        >.oe_overlay_options {
-            font-family: $o-we-font-family;
-
-            >.btn-group {
-                .btn {
-                    height: $o-we-overlay-option-size;
-                    border: 1px solid $o-we-color-dark;
-                    line-height: #{$o-we-overlay-option-size - 2px};
-
-                    color: $o-we-color-text-light;
-                    background-color: $o-we-color-light;
-
-                    &:hover {
-                        background-color: lighten($o-we-color-dark, 10%);
-                    }
-
-                    &.oe_snippet_remove {
-                        background-color: $o-we-color-danger;
-                        border-color: darken($o-we-color-danger, 20%);
-
-                        &:hover {
-                            background-color: darken($o-we-color-danger, 20%);
-                        }
-                    }
-
-                    >.fa {
-                        color: $o-we-color-text-light;
-                    }
-                }
-
-                // CUSTOMIZE MENU BUTTON
-                >.oe_options {
-                    .btn {
-                        background-color: $o-we-color-dark;
-                        color: $o-we-color-text-light;
-
-                        &:hover,
-                        &:active,
-                        &:focus {
-                            background-color: lighten($o-we-color-dark, 5%);
-                            border-color: lighten($o-we-color-dark, 10%);
-                        }
-
-                        &:before,
-                        &:after {
-                            background-color: $o-we-color-text-light;
-                        }
-                    }
-
-                    // Open menu
-                    &.show .btn {
-                        // background-color: $o-we-color-light;
-                    }
-
-                    // CUSTOMIZE MENU
-                    .dropdown-menu {
-                        border: 1px solid $o-we-color-dark;
-                        background-color: $o-we-color-light;
-
-                        .dropdown-item {
-                            color: $o-we-color-text-light;
-
-                            &:hover {
-                                background-color: fade-out($o-we-color-dark, 0.5);
-                            }
-
-                            &.active {
-                                background-color: fade-out($o-we-color-dark, 0.5);
-                            }
-                        }
-
-                        .dropdown-header {
-                            color: wheat;
-
-                            &.o_parent_editor_header {
-                                color: wheat;
-                            }
-                        }
-
-                        .dropdown-submenu {
-                            &::before {
-                                border-left-color: $o-we-color-text-light;
-                            }
-                        }
-                    }
-                }
-            }
-        }
-
-        &.o_top_cover>.oe_overlay_options {
-            top: $o-we-handle-border-width;
-            right: $o-we-handle-border-width;
-        }
-
-    }
-}
-
-// Animations
-@keyframes fadeInDownSmall {
-    0% {
-        opacity: 0;
-        transform: translate(0, -5px);
-    }
-
-    100% {
-        opacity: 1;
-        transform: translate(0, 0);
-    }
-}
-
+// ANIMATIONS
 @keyframes fadeInOut {
     0% {
         opacity: 0;
     }
-
     25% {
         opacity: 1;
     }
-
     75% {
         opacity: 1;
     }
-
     100% {
         opacity: 0;
     }
 }
 
-@keyframes inputHighlighter {
-    from {
-        background: $o-brand-primary;
-    }
-
-    to {
-        width: 0;
-        background: transparent;
-    }
-}
-
 // MODALS
 body .modal {
 
@@ -547,109 +317,3 @@ body .modal {
         }
     }
 }
-
-.note-editor {
-    &>.note-toolbar-wrapper .note-toolbar {
-        height: $o-navbar-height;
-
-        .btn {
-            height: $o-navbar-height !important; // force this because of themes
-        }
-    }
-
-    &>.note-statusbar {
-        display: none;
-    }
-
-    &>.note-editing-area {
-        overflow: visible;
-    }
-}
-
-#web_editor-toolbars .popover,
-.note-popover,
-.note-editor>.note-toolbar-wrapper .note-toolbar {
-    // force this because of themes
-    background-color: $o-we-color-dark !important;
-
-    .btn {
-        background-color: $o-we-color-dark !important;
-        color: $o-we-color-text-normal !important;
-        border: none !important;
-        padding: 0.0625rem 0.3125rem !important;
-
-        >.fa {
-            color: $o-we-color-text-normal !important;
-        }
-
-        &:hover {
-            color: $o-we-color-text-light !important;
-
-            >.fa {
-                color: $o-we-color-text-light !important;
-            }
-        }
-
-        &.active {
-            background-color: $o-we-color-dark !important;
-            color: $o-we-color-text-light !important;
-
-            >.fa {
-                color: $o-we-color-text-light !important;
-            }
-        }
-    }
-
-    >.btn-group {
-        margin-top: 0 !important;
-
-        &.show,
-        .btn-group.show {
-            .dropdown-toggle {
-                border-top: 2px solid white !important;
-                background-color: $o-we-color-darker !important;
-                color: white !important;
-                box-shadow: none !important;
-
-                >.fa,
-                >span {
-                    color: white !important;
-                }
-            }
-        }
-    }
-
-    .dropdown-menu {
-        margin: 0 !important;
-        border-radius: 0 !important;
-        background-color: $o-we-color-darker !important;
-        color: $o-we-color-text-normal !important;
-        white-space: normal !important;
-
-        .dropdown-item {
-            width: 100% !important;
-            color: $o-we-color-text-light !important;
-
-            >.fa {
-                color: $o-we-color-text-light !important;
-            }
-
-            &:hover {
-                background-color: $o-we-tab-active-bg !important;
-                color: white !important;
-
-                >.fa {
-                    color: white !important;
-                }
-            }
-        }
-    }
-
-    .note-para .dropdown-menu {
-        min-width: 147px !important;
-    }
-
-    .note-style .dropdown-item * {
-        color: $o-we-color-text-light !important;
-    }
-}