2018-02-12 08:55:56 +01:00
|
|
|
// Based on http://www.flectra.com/openerp_website/static/src/less/header.less
|
2018-01-16 06:58:15 +01:00
|
|
|
// ========================================================================
|
|
|
|
|
|
|
|
|
|
// ============= 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 {
|
2018-02-12 08:55:56 +01:00
|
|
|
color: @flectra-brand-primary!important;
|
2018-01-16 06:58:15 +01:00
|
|
|
font-weight: @fw_semibold;
|
|
|
|
|
|
|
|
|
|
&::before, &::after {
|
2018-02-12 08:55:56 +01:00
|
|
|
background-color: @flectra-brand-primary!important;
|
|
|
|
|
box-shadow: 0 1px 1px fade(@flectra-brand-primary, 10%);
|
2018-01-16 06:58:15 +01:00
|
|
|
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;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
