summaryrefslogtreecommitdiff
path: root/doc/_extensions/odoo_ext/static/header.less
diff options
context:
space:
mode:
Diffstat (limited to 'doc/_extensions/odoo_ext/static/header.less')
-rw-r--r--doc/_extensions/odoo_ext/static/header.less834
1 files changed, 834 insertions, 0 deletions
diff --git a/doc/_extensions/odoo_ext/static/header.less b/doc/_extensions/odoo_ext/static/header.less
new file mode 100644
index 00000000000..dcd5ae0fb81
--- /dev/null
+++ b/doc/_extensions/odoo_ext/static/header.less
@@ -0,0 +1,834 @@
+// Based on http://www.odoo.com/openerp_website/static/src/less/header.less
+// ========================================================================
+
+// ============= MIXINS
+.o-top-menu-links() {
+ &:not(.btn) {
+ display: inline-block;
+ padding: 0 20px;
+ font-weight: @fw_semibold;
+ text-transform: uppercase;
+
+ @media screen and (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
+ font-size: 11px;
+
+ &:not(.dropdown-toggle) {
+ padding: 0 10px;
+ }
+ }
+ }
+}
+
+.o-white-header() {
+ background-color: @w-header-white;
+ color: @header-link-normal;
+ .deep-1();
+
+ .o_logo {
+ background-position: 0 0;
+ }
+
+ > .o_main_header_main > .o_primary_nav > li.dropdown > a {
+ &::before, &::after {
+ background-color: @header-link-normal;
+ box-shadow: 0 1px 1px fade(@header-link-normal,10%);
+ }
+ }
+}
+
+// ============= MAIN HEADER
+#oe_main_menu_navbar ~ #wrapwrap .o_main_header {
+ &.o_has_sub_nav.o_scrolled {
+ top: 34px - (@w-header-height + 1);
+ }
+}
+
+.o_main_header {
+ @secondary-menu-animation-duration-opening: 500ms;
+ @secondary-menu-animation-duration-closing: @secondary-menu-animation-duration-opening * 2/3;
+
+ position: fixed;
+ width: 100%;
+ height: @w-header-height;
+ z-index: 2;
+ background-color: fade(white, 60%);
+ color: @header-link-normal;
+ font-family: @headings-font-family;
+ font-size: 12px;
+ .transition(all .2s ease);
+ .transition-property(~'background, box-shadow' );
+ .translate3d(auto, auto, 0);
+
+ a:focus, a:active, a:focus:active {
+ outline: none;
+ }
+
+ .btn-primary {
+ color: white!important;
+ font-size: inherit!important;
+ font-weight: @fw_bold;
+ text-transform: uppercase;
+ }
+
+ > .o_main_header_main {
+ .container(); // FIXME Remove this once the web_editor "container container" rule is fixed.
+ height: 100%;
+
+ a {
+ color: inherit;
+ &:hover, &:focus {
+ color: saturate(@header-link-normal, 10%);
+ }
+ }
+
+ .o_logo {
+ margin: 15px 0;
+ .size(63px, 20px);
+ background-size: cover;
+ }
+
+ > .o_primary_nav {
+ @w-header-arrow-length: 10px;
+
+ @media (min-width: @screen-sm-min) {
+ height: 100%;
+ &:before {
+ content: "";
+ background: transparent;
+ z-index: -1;
+ visibility: hidden;
+ box-shadow: 0 1px 0 transparent;
+ .size( 100%, @w-header-height);
+ .o-position-absolute(0,0);
+ .transition(~'background @{secondary-menu-animation-duration-opening} @{o-ease} 0ms, visibility 0ms linear @{secondary-menu-animation-duration-opening}, box-shadow @{secondary-menu-animation-duration-opening} linear 0ms' );
+ }
+
+ &.o_sub_opened:before {
+ visibility: visible;
+ background: @w-header-white;
+ box-shadow: 0 1px 0 @gray-lighter;
+ .transition(~'background @{secondary-menu-animation-duration-opening} @{o-ease} 0ms, visibility 0ms linear 0s, box-shadow @{secondary-menu-animation-duration-opening} linear 0ms');
+
+ }
+ }
+
+ margin: 0 auto;
+ padding: 0;
+ text-align: center;
+ white-space: nowrap;
+
+ .dropdown {
+ position: static;
+
+ > a {
+ position: relative;
+ .backface-visibility(hidden);
+
+ &::before, &::after {
+ content: "";
+ display: block;
+ .o-position-absolute(50%, 0);
+ .o-transform-origin(50%, 50%);
+ .o-transition(all, 300ms);
+ width: @w-header-arrow-length;
+ height: 1px;
+ background-color: @headings-color;
+ box-shadow: 0 1px 1px fade(@headings-color, 10%);
+ }
+ &::before {
+ .rotate(45deg);
+ right: @w-header-arrow-length / sqrt(2) - 1;
+ }
+ &::after {
+ .rotate(-45deg);
+ }
+ }
+ &.open > a {
+ color: @odoo-brand-primary!important;
+ font-weight: @fw_semibold;
+
+ &::before, &::after {
+ background-color: @odoo-brand-primary!important;
+ box-shadow: 0 1px 1px fade(@odoo-brand-primary, 10%);
+ right: @w-header-arrow-length / sqrt(2) / 2;
+ }
+ &::before {
+ .rotate(-45deg);
+ }
+ &::after {
+ .rotate(45deg);
+ }
+ }
+ > .dropdown-menu {
+ border: none;
+ border-radius: 0;
+ margin: 0;
+ }
+ }
+
+ > li {
+ display: inline-block;
+
+ > a {
+ height: 100%;
+ line-height: @w-header-height;
+ .o-top-menu-links();
+ }
+ &.dropdown > a {
+ margin-right: @w-header-arrow-length * 2;
+ }
+
+ // Secondary nav animation
+ @media (min-width: @screen-sm-min) {
+ &.open > .o_secondary_nav {
+ visibility: visible;
+ background-color: white;
+ .translate(0, 0);
+ .transition(~'transform @{secondary-menu-animation-duration-opening} @{o-ease} 0ms, visibility 0ms linear 0ms, background-color 0ms linear @{secondary-menu-animation-duration-opening}');
+
+ .container > .row > div {
+ opacity: 1;
+ .translate(0, 0);
+
+ &:nth-child(1) {
+ .transition-delay(@secondary-menu-animation-duration-opening * 1/5);
+ }
+ &:nth-child(2) {
+ .transition-delay(@secondary-menu-animation-duration-opening * 2/5);
+ }
+ &:nth-child(3) {
+ .transition-delay(@secondary-menu-animation-duration-opening * 3/5);
+ }
+ &:nth-child(4) {
+ .transition-delay(@secondary-menu-animation-duration-opening * 4/5);
+ }
+ }
+ .o_store_link {
+ max-height: @w-header-height;
+ .o-transition(max-height, @secondary-menu-animation-duration-opening, @o-ease, @secondary-menu-animation-duration-opening * 3/5);
+ }
+
+ &::before {
+ opacity: 0.5;
+ }
+ }
+ }
+ }
+
+ .o_secondary_nav {
+ @w-li-link-height: 30px;
+ @w-li-link-animation-time: 300ms;
+ @w-menu-gutter-increase: 60px;
+
+ width: 100%;
+ padding: 15px 0 (@w-header-height + 15);
+ box-shadow: 0 3px 6px fade(black, 5%);
+
+ @media (min-width: @screen-md-min) { // Change gutter width for that case
+ > .container > .row {
+ margin-left: (@grid-gutter-width + @w-menu-gutter-increase) / -2;
+ margin-right: (@grid-gutter-width + @w-menu-gutter-increase) / -2;
+
+ > div {
+ padding-left: (@grid-gutter-width + @w-menu-gutter-increase) / 2;
+ padding-right: (@grid-gutter-width + @w-menu-gutter-increase) / 2;
+ }
+ }
+ }
+
+ > .container > .row > div {
+ font-size: 16px;
+ overflow: hidden;
+
+ @media (min-width: @screen-sm-min) {
+ height: 340px;
+ padding-top: 10px;
+
+ + div {
+ border-left: 1px solid @gray-lighter;
+ }
+ }
+
+ ul {
+ position: relative;
+ list-style: none;
+ padding: 0;
+
+ > li {
+ height: @w-li-link-height;
+ .o-transition(all, @w-li-link-animation-time, @o-ease, @w-li-link-animation-time/3);
+ .transition-property(~'height, opacity');
+
+ > a {
+ display: block;
+ height: 100%;
+ line-height: @w-li-link-height;
+ font-weight: @fw_medium;
+ font-size: 1.4rem;
+ }
+
+ &.dropdown {
+ &:not(.open) > a {
+ &::before, &::after {
+ .o-transform-origin((@w-header-arrow-length * 0.8), 50%);
+ width: @w-header-arrow-length * 0.8;
+ right: 0;
+ }
+ }
+
+ > ul {
+ .o-position-absolute(@w-li-link-height, 0, 0, 0);
+ .translate(100%, 0);
+ .opacity(0);
+ .o-transition(all, @w-li-link-animation-time, @o-ease, 0);
+ }
+ &.open > ul {
+ .translate(0, 0);
+ .opacity(1);
+ .o-transition(all, @w-li-link-animation-time, @o-ease, @w-li-link-animation-time/3);
+ }
+ }
+ }
+ &.o_sub_opened > li:not(.open) {
+ opacity: 0;
+ height: 0 !important;
+ overflow: hidden;
+ .o-transition(all, @w-li-link-animation-time, @o-ease, 0);
+ }
+ }
+
+ .o_nav_app_family {
+ text-align: center;
+ font-weight: @fw_medium;
+ line-height: 2;
+ .o-no-select();
+
+ > span {
+ .o-retina-bg("apps_families_s.png", 0px, 50%);
+ display: none;
+ }
+
+ @media (min-width: @screen-sm-min) {
+ > span {
+ display: block;
+ margin: 0 auto;
+ background-size: auto 100%;
+ width: 51px;
+ height: 50px;
+ }
+ > div {
+ font-size: 0.7em;
+ font-weight: @fw_medium;
+ line-height: 1.5;
+ color: @text-color;
+ margin-bottom: 1.3em;
+ }
+ }
+ }
+
+ @media (min-width: @screen-sm-min) {
+ &.o_website_apps {
+ a:hover, a:focus, .o_nav_app_family {
+ color: @color-beta;
+ }
+ }
+ &.o_sale_apps {
+ a:hover, a:focus, .o_nav_app_family {
+ color: @color-gamma;
+ }
+ .o_nav_app_family > span {
+ background-position: -60px 50%;
+ }
+ }
+ &.o_operation_apps {
+ a:hover, a:focus, .o_nav_app_family {
+ color: @color-delta;
+ }
+ .o_nav_app_family > span {
+ background-position: -120px 50%;
+ }
+ }
+ &.o_productivity_apps {
+ a:hover, a:focus, .o_nav_app_family {
+ color: @color-epsilon;
+ }
+ .o_nav_app_family > span {
+ background-position: -181px 50%;
+ }
+ }
+ }
+ }
+
+ > .o_store_link {
+ .o-position-absolute(auto, 0, 0, 0);
+ overflow: hidden;
+ display: block;
+ height: @w-header-height;
+ line-height: @w-header-height;
+ border-top: 1px solid @gray-lighter;
+ text-align: center;
+ font-size: 12px;
+ font-weight: @fw_semibold;
+ }
+
+ @media (min-width: @screen-sm-min) {
+ // Animation
+ display: block;
+ background-color: @w-header-white;
+ visibility: hidden;
+ z-index: -2;
+ .translate(0, -115%);
+ .transition(~'transform @{secondary-menu-animation-duration-closing} @{o-ease} 0ms, visibility 0ms linear @{secondary-menu-animation-duration-closing}, background-color 0ms linear 0ms');
+
+ .container > .row > div {
+ opacity: 0;
+ .translate(0, -30%);
+ .o-transition(all, @secondary-menu-animation-duration-opening, @o-ease, 0ms);
+ }
+ .o_store_link {
+ max-height: 0;
+ .o-transition(max-height, @secondary-menu-animation-duration-opening/2, @o-ease, 0s);
+ }
+
+ // Overlay
+ &::before {
+ content: "";
+ .o-position-absolute(100%, 0, -1000px, 0);
+ display: block;
+ background-color: #000;
+ opacity: 0;
+ .o-transition(opacity, @secondary-menu-animation-duration-opening, @o-ease);
+ }
+ }
+ }
+ }
+
+ .o_header_buttons {
+ height: 100%;
+ line-height: @w-header-height;
+ float: right;
+
+ > * {
+ display: inline-block;
+ float: left;
+ }
+
+ a {
+ .o-top-menu-links();
+
+ &.dropdown-toggle {
+ padding: 0 10px;
+ }
+
+ &.o_my_cart {
+ padding: 0;
+
+ .my_cart_quantity {
+ font-family: sans-serif;
+ border-radius: 100%;
+ font-weight: bold;
+ font-size: 90%;
+ padding: 4px 0;
+ min-width: 19px;
+ text-align: center;
+ display: inline-block;
+ }
+ }
+ }
+
+ .btn-primary {
+ margin-top: 9px;
+ }
+
+ > .dropdown {
+ margin: 0 5px;
+
+ @media screen and (min-width: @screen-md-min) {
+ margin: 0 15px;
+ }
+
+ &, .dropdown-toggle {
+ height: 100%;
+ }
+
+ > .dropdown-menu {
+ left: auto;
+ right: 0;
+ li a {
+ padding-top: 5px;
+ padding-bottom: 5px;
+ color: @text-color;
+ }
+ }
+ }
+ }
+ }
+
+ > .o_sub_nav {
+ min-height: @w-sub-nav-height;
+ border: 1px solid fade(black, 5%);
+ border-width: 1px 0;
+ background-color: fade(white, 80%);
+
+ > .container {
+
+ .navbar-header {
+ height: @w-sub-nav-height - 2;
+ line-height: @w-sub-nav-height - 2;
+ font-weight: @fw_semibold;
+ color: @text-color;
+ overflow: hidden;
+
+ .o_app_name_logo,
+ .o_app_name_title {
+ .translate(-61px, 0);
+ .o-transition(transform, 400ms);
+ }
+
+ &:hover {
+ color: @headings-color;
+ }
+
+ .o_app_name_logo {
+ .o_logo();
+ .o_logo_15();
+ vertical-align: middle;
+ margin: auto 5px 3px 0;
+ }
+ .o_app_name_title {
+ color: inherit;
+ vertical-align: middle;
+ display: inline-block;
+
+ span{
+ margin-right: 5px;
+ }
+ }
+ }
+
+ .nav {
+ margin-right: -15px; // gutter's right compensation
+ }
+
+ .nav > li {
+ margin-left: 20px;
+ height: @w-sub-nav-height - 2;
+ line-height: @w-sub-nav-height - 2;
+
+ > a {
+ height: 100%;
+ line-height: @w-sub-nav-height - 2;
+ padding: 0;
+ font-size: 12px;
+ font-weight: @fw_medium;
+ color: @text-color;
+
+ &:hover, &:focus {
+ color: @headings-color;
+ background-color: transparent;
+ }
+ }
+ &.active > a {
+ color: @headings-color;
+ font-weight: @fw_semibold;
+ }
+ }
+
+ .call-to-action {
+ line-height: @w-sub-nav-height - 4;
+ overflow: hidden;
+ width: 100%;
+ max-width: 0px;
+ transform-origin: 0 0;
+ .transition(max-width 0.3s ease 0ms);
+
+
+ > a {
+ margin-left: 35px;
+ font-weight: @fw_semibold;
+ padding: (@padding-base-vertical - 2px) @padding-base-horizontal;
+ line-height: 1.4em;
+ font-size: 12px!important;
+ }
+ }
+ }
+ }
+ &.o_inverted:not(.o_scrolled) > .o_sub_nav {
+ .transition( 0.3s background-color);
+ background-color: fade(white, 5%);
+ border-color: fade(white, 10%);
+
+ .nav > li > a,
+ .o_app_name_title {
+ color: fade(white, 90%);
+
+ &:hover, &:focus {
+ color: white;
+ }
+ }
+ }
+
+ @media (min-width: @screen-sm-min) {
+ // Top menu styles
+ // --------------------------------
+ &.o_has_sub_nav {
+ position: absolute;
+ &.o_scrolled {
+ position: fixed;
+ top: -(@w-header-height + 1);
+ }
+ }
+
+ &.o_inverted {
+ background-color: transparent;
+ color: white;
+ a:hover, a:focus {
+ color: inherit;
+ }
+
+ .o_logo {
+ .o_logo_inverse;
+ }
+
+ .o_main_header_main > .o_primary_nav > li.dropdown > a {
+ &::before, &::after {
+ background-color: white;
+ box-shadow: 0 1px 1px fade(white, 10%);
+ }
+ }
+ }
+ > .o_main_header_main > .o_header_buttons {
+ .dropdown.open {
+ background-color: @w-header-white;
+ color: @header-link-normal;
+
+ .dropdown-menu {
+ background-color: @w-header-white;
+ margin-top: 0;
+ border: none;
+ border-radius: 0;
+ .deep-1();
+ text-align: left;
+ min-width: 100%;
+ padding-bottom: @w-header-height/4;
+
+ > li > a {
+ display: block;
+ color: @header-link-normal;
+ float: none;
+ text-transform: none;
+ font-weight: normal;
+ }
+ }
+ }
+ }
+ }
+
+ &.o_scrolled:not(.o_transparent_blocked), &.o_sub_opened {
+ .o-white-header();
+ }
+
+ &.o_scrolled .o_sub_nav {
+ background: @w-header-white;
+
+ > .container {
+ .navbar-header > span{
+ .translate(0, 0);
+ }
+ .call-to-action {
+ max-width: 133px;
+ }
+ }
+ }
+
+ &.o_sub_opened .o_sub_nav {
+ display: none;
+ }
+}
+
+@media (max-width: @screen-xs-max) {
+ .o_main_header {
+ @mobile-dark: #25252D;
+ @mobile-light: #33343D;
+
+ position: relative;
+ height: auto;
+ min-height: @w-header-height;
+ .o-white-header();
+
+ > .o_main_header_main {
+ position: relative;
+
+ > .o_primary_nav, .o_header_buttons {
+ display: none;
+ }
+
+ > .o_mobile_menu_toggle {
+ .o-position-absolute(0, 0);
+ width: @w-header-height;
+ line-height: @w-header-height;
+ font-size: @w-header-height/3;
+ text-align: center;
+ }
+ }
+
+ > .o_sub_nav {
+ display: none;
+ }
+
+ &.o_mobile_menu_opened {
+ > .o_main_header_main {
+ margin: 0;
+
+ > .o_header_buttons {
+ float: none;
+ background-color: @mobile-dark;
+ padding: 0 (@grid-gutter-width/2);
+ box-sizing: content-box;
+ margin: @w-header-height (-@grid-gutter-width/2) 0;
+ display: block;
+ text-align: center;
+ .size(100%, auto);
+
+ > * {
+ overflow: visible!important;
+ color: @w-header-white;
+ float: none;
+ display: inline;
+
+ > a:not(.btn) {
+ display: initial!important;
+ }
+
+ .dropdown-toggle {
+ color: @w-header-white!important;
+ }
+
+ .dropdown-menu {
+ position: relative;
+ line-height: 2;
+ background: fade(white, 5%);
+ width: 100%;
+ margin: 0 (-@grid-gutter-width/2) 0;
+ box-sizing: content-box;
+ padding: 5px (@grid-gutter-width/2);
+
+ > li > a {
+ float: none;
+ display: block;
+ margin-bottom: 5px;
+ padding: 10px;
+ color: @w-header-white!important;
+ font-size: 0.8em;
+
+ &:hover {
+ background: fade(white, 5%);
+ }
+ }
+ }
+ }
+ }
+
+
+ > .o_primary_nav {
+ display: block;
+ background-color: @mobile-dark;
+ color: white;
+ margin: 0 (-@grid-gutter-width/2) 0;
+ padding: 0;
+ float: none;
+ white-space: normal;
+
+ a:hover, a:focus, a:active {
+ color: white;
+ }
+
+ li {
+ border: 0 solid @mobile-light;
+ border-width: 1px 5px 0;
+ }
+
+ > li {
+ width: 100%;
+ padding: 0 @grid-gutter-width/2;
+
+ &.dropdown {
+ padding: 0;
+
+ > a {
+ display: none;
+ }
+ > .dropdown-menu {
+ position: static;
+ display: block;
+ background-color: transparent;
+ box-shadow: none;
+ }
+
+ > .o_secondary_nav {
+ padding: 0;
+
+ > .container > .row > div {
+ padding: 0;
+
+ ul {
+ list-style-type: none;
+
+ > li {
+ height: @w-header-height;
+ padding: 0 @grid-gutter-width/2;
+ border-width: 1px 0 0;
+
+ > a {
+ line-height: @w-header-height;
+ }
+
+ &.dropdown.open {
+ height: auto;
+ border: none;
+ > ul {
+ position: static;
+ }
+ }
+ }
+ }
+ > .o_nav_app_family {
+ height: @w-header-height;
+ line-height: @w-header-height;
+ background-color: @mobile-light;
+
+ > * {
+ display: none;
+ }
+
+ &::after {
+ content: "(Apps)";
+ }
+ }
+ }
+
+ > .o_store_link {
+ position: relative;
+ border: 0 solid @mobile-light;
+ border-width: 14px 0 0;
+ padding-top: 14px;
+ line-height: 1.5;
+ height: 60px;
+ }
+ }
+
+ &::after {
+ content: "";
+ display: inline-block;
+ width: 100%;
+ height: 20px;
+ margin-bottom: -5px; // FIXME don't know why
+ background-color: @mobile-light;
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+}
generated by cgit v1.2.3 (git 2.25.1) at 2026-10-23 21:53:13 +0000