flectra/doc/_extensions/flectra_ext/static/header.less

835 lines
28 KiB
Plaintext
Raw Normal View History

2018-02-12 08:55:56 +01:00
// Based on http://www.flectra.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 {
2018-02-12 08:55:56 +01:00
color: @flectra-brand-primary!important;
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%);
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;
}
}
}
}
}
}
}
}