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, 0 insertions, 834 deletions
diff --git a/doc/_extensions/odoo_ext/static/header.less b/doc/_extensions/odoo_ext/static/header.less
deleted file mode 100644
index ab5afd13b00..00000000000
--- a/doc/_extensions/odoo_ext/static/header.less
+++ /dev/null
@@ -1,834 +0,0 @@
-// 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: "Work Sans", sans-serif;
- 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 15:25:20 +0000