[REF] mail: MessageReactionGroup, review and simplify scss

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

task-2835543

closes odoo/odoo#89980

Signed-off-by: Alexandre Kühn (aku) <aku@odoo.com>
This commit is contained in:
Brieuc-brd
2022-04-29 11:01:33 +02:00
parent 0c83ada7de
commit 542f0c76a4
2 changed files with 5 additions and 35 deletions
@@ -1,37 +1,7 @@
// ------------------------------------------------------------------
// Layout
// ------------------------------------------------------------------
.o_MessageReactionGroup {
border-radius: $o-mail-rounded-rectangle-border-radius-sm;
cursor: pointer;
}
// ------------------------------------------------------------------
// Style
// ------------------------------------------------------------------
.o_MessageReactionGroup {
background: $white;
border-color: gray('200');
border-style: solid;
border-width: $border-width;
&.o-hasUserReacted, &.o-hasUserReacted:hover {
border-color: $o-brand-primary;
background-color: rgba($o-brand-primary, .1);
}
&:hover {
border-color: gray('400');
background-color: gray('200');
}
}
.o_MessageReactionGroup_count {
&.o-hasUserReacted {
color: $o-brand-primary;
font-weight: bold;
}
.o_MessageReactionGroup.o-hasUserReacted {
background-color: rgba($o-brand-primary, .1);
}
@@ -3,14 +3,14 @@
<t t-name="mail.MessageReactionGroup" owl="1">
<t t-if="messageReactionGroup">
<div class="o_MessageReactionGroup d-flex" t-att-class="{'o-hasUserReacted': messageReactionGroup.hasUserReacted}" t-attf-class="{{ className }}" t-att-title="messageReactionGroup.summary" t-on-click="messageReactionGroup.onClick" t-ref="root">
<button class="o_MessageReactionGroup btn d-flex p-0 border rounded-sm" t-att-class="{'o-hasUserReacted border-primary': messageReactionGroup.hasUserReacted, 'bg-white': !messageReactionGroup.hasUserReacted}" t-attf-class="{{ className }}" t-att-title="messageReactionGroup.summary" t-on-click="messageReactionGroup.onClick" t-ref="root">
<span class="o_MessageReactionGroup_content mx-1">
<t t-esc="messageReactionGroup.content"/>
</span>
<span class="o_MessageReactionGroup_count mx-1" t-att-class="{'o-hasUserReacted': messageReactionGroup.hasUserReacted}">
<span class="o_MessageReactionGroup_count mx-1" t-att-class="{'o-hasUserReacted text-primary font-weight-bolder': messageReactionGroup.hasUserReacted}">
<t t-esc="messageReactionGroup.count"/>
</span>
</div>
</button>
</t>
</t>