NextERP/documentation
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

mobile hamburger icon update with animation<

Browse Source
This commit is contained in:
Elisabeth Dickinson 2021-04-21 09:24:25 +02:00
parent 4d9e484f61
commit 51f87bb0d9
2 changed files with 46 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
extensions/odoo_theme/layout.html
View File

@ -67,7 +67,9 @@
<header class="o_main_header border-bottom navbar navbar-light navbar-expand-lg"> <header class="o_main_header border-bottom navbar navbar-light navbar-expand-lg">
{% include "layout_templates/header.html" %} {% include "layout_templates/header.html" %}
<button class="navbar-toggler pe-3 border-0" type="button" data-bs-toggle="collapse" data-bs-target="#o_main_toctree" aria-label="Toggle navigation"> <button class="navbar-toggler pe-3 border-0" type="button" data-bs-toggle="collapse" data-bs-target="#o_main_toctree" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button> </button>
</header> </header>
{% endblock %} {% endblock %}

43
extensions/odoo_theme/static/style.scss
View File

@ -82,6 +82,49 @@ header.o_main_header{
@include font-size($font-size-secondary); @include font-size($font-size-secondary);
} }
} }
.navbar-toggler {
border: none;
&[aria-expanded="true"] {
.icon-bar {
&:nth-of-type(1) {
@include o-transform(rotate(45deg));;
@include o-transform-origin(10%, 10%)
}
&:nth-of-type(2) {
opacity: 0;
filter: alpha(opacity=0);
}
&:nth-of-type(3) {
@include o-transform(rotate(-45deg));
@include o-transform-origin(10%, 90%)
}
}
}
.icon-bar {
display: block;
width: 22px;
height: 2px;
background-color: $gray-dark;
@include o-transition(all, .2s);
&+ .icon-bar {
margin-top: 4px;
}
&:nth-of-type(1) {
@include o-transform(rotate(0));
}
&:nth-of-type(2) {
opacity: 1;
filter: alpha(opacity=100);
}
&:nth-of-type(3) {
@include o-transform(rotate(0));
}
}
&:focus {
box-shadow: none;
outline:none;
}
}
} }
.o_logo img { .o_logo img {