[REF] mail: MobileMessagingNavbar, review and simplify scss

Part of the overall v16 SCSS optimization/restyle, task-2704984

task-2837311

closes odoo/odoo#90162

Signed-off-by: Alexandre Kühn (aku) <aku@odoo.com>
This commit is contained in:
Brieuc-brd
2022-05-30 13:23:53 +02:00
parent 4c95e5f753
commit f6afa8d336
2 changed files with 5 additions and 33 deletions
@@ -3,41 +3,13 @@
// ------------------------------------------------------------------
.o_MobileMessagingNavbar {
display: flex;
flex: 0 0 auto;
z-index: 1;
}
.o_MobileMessagingNavbar_tab {
display: flex;
flex-flow: column;
align-items: center;
flex: 1 1 0;
padding: map-get($spacers, 2);
flex-basis: 0;
}
.o_MobileMessagingNavbar_tabIcon {
margin-bottom: 4%;
font-size: 1.3em;
}
.o_MobileMessagingNavbar_tabLabel {
font-size: 0.8em;
}
// ------------------------------------------------------------------
// Style
// ------------------------------------------------------------------
.o_MobileMessagingNavbar {
background-color: $white;
box-shadow: 0 0 8px gray('400');
}
.o_MobileMessagingNavbar_tab {
box-shadow: 1px 0 0 gray('400');
&.o-active {
color: $o-brand-primary;
}
}
@@ -3,13 +3,13 @@
<t t-name="mail.MobileMessagingNavbar" owl="1">
<t t-if="mobileMessagingNavbarView">
<div class="o_MobileMessagingNavbar" t-attf-class="{{ className }}" t-ref="root">
<div class="o_MobileMessagingNavbar d-flex flex-shrink-0 border-top bg-white shadow-lg" t-attf-class="{{ className }}" t-ref="root">
<t t-foreach="mobileMessagingNavbarView.tabs" t-as="tab" t-key="tab.id">
<div class="o_MobileMessagingNavbar_tab" t-att-class="{ 'o-active': mobileMessagingNavbarView.activeTabId === tab.id }" t-on-click="ev => mobileMessagingNavbarView.onClick(tab.id, ev)" t-att-data-tab-id="tab.id">
<div class="o_MobileMessagingNavbar_tab d-flex flex-column align-items-center flex-grow-1 p-2" t-att-class="{ 'o-active text-primary': mobileMessagingNavbarView.activeTabId === tab.id, 'border-left': tab_index !== 0 }" t-on-click="ev => mobileMessagingNavbarView.onClick(tab.id, ev)" t-att-data-tab-id="tab.id">
<t t-if="tab.icon">
<span class="o_MobileMessagingNavbar_tabIcon" t-att-class="tab.icon"/>
<span class="o_MobileMessagingNavbar_tabIcon fs-4" t-att-class="tab.icon"/>
</t>
<span class="o_MobileMessagingNavbar_tabLabel"><t t-esc="tab.label"/></span>
<span class="o_MobileMessagingNavbar_tabLabel small"><t t-esc="tab.label"/></span>
</div>
</t>
</div>