[IMP] web,*: improve darkmode

This commit introduces some adjustments to the dark mode color scheme
and the use of bootstrap classes in Community.

- Mini calendar contrast -

The colors were not using variables, making them non dynamic
and breaking the contrast in dark mode.

- Avoid !important rules spreadsheet -

Prior to this commit, spreadsheet top bar was using a `bg-white` class,
making it pure black in dark mode.

Since spreadsheet is designed with light colors and we don't provide a
dark mode for it, we remove that class and set a `background-color`
property using CSS in Enterprise.

- Input color -

This commit fixes the focus behavior on the searchbar in the control
panel, the `command_palette_search`, and the `start a conversation` in
discuss.

- Copy clipboard field border color -

Make use of the `text-primary` color for the copy to clipboard field
We use the o-theme-color function to avoid an undefined since primary
doesn't exist in the o-theme-text-color map in white mode.

- Web_editor toolbar variables -

The toolbar was using the `o-brand-primary` variable
which was set to a darker shade. This caused issue when activating an
option due to how vibrant the color is.

- Improve the controls on border-color -

Introducing a custom property on the border-color to allow
further control on individual components (such as the popover).

- Improve setting tabs colors use -

Prior to this commit, the colors of the settings tabs menu were kinda
inverted. The menu was light in dark mode and dark in light mode.

We fix this by changing the values associated to the CSS variables in
use.

- Make model field selector dark mode proof -

Fixing the design of the model field selector popover in both
light and dark mode. Since the popover was using custom style with
arbitrary values, it was not designed for the dark mode and had a lack
of consistency.

To improve the design, we use variables rather than custom style, and
make sure the desired render is as close as before.

- Sign colors use -

This commit aims to improve the sign module in both light and dark mode.
There were some readability issue with some `btn-light` having poor
contrasts in both light and dark mode, and the use of some classes was a
bit unexpected (e.g `card-header` to set a grey background with some
padding).

- Improve buttons design inside listview -

Prior to this commit, this button was using custom CSS to make it look
like a primary button, while it was using classes related to secondary
buttons.

We remove the custom CSS used to style it correctly and keep our button
design consistent.

- Messaging menu layout in mail -

This commit aims to improve the design of the notifications displayed
in the messaging menu. Prior to this commit, the notifications dropdown
was using custom CSS variables overriding the regular behavior
of our dropdowns.

In fact, the layout was generating some friction:

1) Marking a notification as read would turn its background into a
darker color

2) Effects like `:hover` were all based on the custom CSS variables
resulting in an inconsistent layout.

- Multi company selector adaptations -

In darkmode the multi company selection was using the btn-light which
creates a weird effect and overrides the dropdown default hover behavior

This commit uses the btn-link to display an hover effect on the
company switch and on the checkbox while blending with the background
and the default dropdown hover effect.

- Adapts default badge design -

Improve the design of the default badges in dark mode.

If you open the light mode, these badges are dark grey with a white
text. If you switch to dark mode, they are dark grey but with a dark
text, which makes them look either muted or off.

We make use of SCSS variables to handle the color of the component,
providing a good styling in both modes.

- Fix kanban cards borders inside dropdown -

Fixes the issue with the divider inside the kanban dropdown menu not
showing in dark mode.

To ensure it is visible, we assign it the `$dropdown-divider-bg`, which
is the color it should use, as the horizontal divider above uses.

- Fix tour pointer design for dark mode -

This commit aims to insert the tour pointer and its content inside the
styling we applied to our tooltip.

To do so, we make sure it uses CSS variables, allowing more control and
consistency, plus we replicate the overall look of our tooltips.

- Fix `text-primary` on action background contrast -

This commit improves the readability of our `text-primary` classes when
it's used on a `$o-component-active-bg` background.

Prior to this commit, the `text-primary` was not meeting the contrast
standard, mainly when you were using the `CMD+K` shortcut on the
app switcher.

To prevent that, we changed the background to a `$o-component-active-bg`
background with an opacity ensuring our text provides a good contrast.

- Fix input states -

Prior to this commit, the `--o-input-border-color` CSS variable was
using the `$o-form-lightsecondary` variable to define the standard color
of the `border-bottom` property of our inputs.

This was conflicting since `$o-form-light-secondary` is also used to
define the `background-color` of our table on focus.

With this commit, we separate these two element with different variables
to make sure they don't affect each others.

- Fix kanban ghost background -

Before this commit, if you created a project without any stage or element
in it, the ghost cards that act like placeholders would be pure `#000` in
dark mode, due to the `bg-white` class.

This commit replaces that class with a `bg-light`, providing a better
visual result in both light and dark mode.

- Fix new message design -

Improve the design of the new message element while
inside Discuss, using our danger color, ensuring a good visual result in
both modes.

task-3201038

closes odoo/odoo#139966

Related: odoo/enterprise#49666
Signed-off-by: Pierre Paridans (app) <app@odoo.com>
Co-authored-by: chgo-odoo <chgo@odoo.com>
Co-authored-by: stefanorigano <sri@odoo.com>
This commit is contained in:
mano-odoo
2023-10-28 10:07:53 +00:00
committed by Pierre Paridans
co-authored by chgo-odoo stefanorigano
parent 05f434c222
commit c0b683e2f4
73 changed files with 120 additions and 186 deletions
@@ -79,7 +79,7 @@
on
<field name="example_date" class="fw-bold oe_inline"/>
</div>
<div colspan="2">
<div colspan="2" class="py-1 bg-view">
<field name="note" placeholder="e.g. Payment terms: 30 days after invoice date"/>
<field name="example_preview_discount" class="ps-2"
invisible="not early_discount or not display_on_invoice"/>
+2 -2
View File
@@ -311,10 +311,10 @@
<field name="contract_count"/>
Contract(s)
<span t-if="record.contract_renewal_due_soon.raw_value and !record.contract_renewal_overdue.raw_value"
class="fa fa-exclamation-triangle" t-att-style="'color:orange'" role="img" aria-label="Warning: renewal due soon" title="Warning: renewal due soon">
class="fa fa-exclamation-triangle text-warning" role="img" aria-label="Warning: renewal due soon" title="Warning: renewal due soon">
</span>
<span t-if="record.contract_renewal_overdue.raw_value"
class="fa fa-exclamation-triangle" t-att-style="'color:red;'" role="img" aria-label="Attention: renewal overdue" title="Attention: renewal overdue">
class="fa fa-exclamation-triangle text-danger" role="img" aria-label="Attention: renewal overdue" title="Attention: renewal overdue">
</span>
</a>
<field name="activity_ids" widget="kanban_activity"/>
@@ -175,7 +175,7 @@
<t t-if="record.definition_display.raw_value == 'boolean'">
<div class="o_goal_state">
<t t-if="record.state.raw_value=='reached'"><i role="img" class="text-success fa fa-check fa-3x" title="Goal Reached" aria-label="Goal Reached"/></t>
<t t-if="record.state.raw_value=='inprogress'"><i role="img" class="fa fa-clock-o fa-3x" title="Goal in Progress" aria-label="Goal in Progress"/></t>
<t t-if="record.state.raw_value=='inprogress'"><i role="img" class="text-700 fa fa-clock-o fa-3x" title="Goal in Progress" aria-label="Goal in Progress"/></t>
<t t-if="record.state.raw_value=='failed'"><i role="img" class="text-danger fa fa-times fa-3x" title="Goal Failed" aria-label="Goal Failed"/></t>
</div>
</t>
@@ -35,7 +35,7 @@
<span class="department_name ms-2">
<t t-esc="dept.name"/>
</span>
<a class="badge rounded-pill bg-white border" role="button"
<a class="badge rounded-pill bg-300 border px-2" role="button"
title="Show employees"
t-on-click.prevent="() => this.openDepartmentEmployees(dept.id)">
<t t-esc="dept.employees"/>
@@ -7,7 +7,7 @@
<t t-set="data" t-value="expense[1]"/>
<div t-attf-class="o_expense_card o_arrow_button flex-grow-1 d-flex flex-column p-3 border-bottom text-center"
t-att-data-tooltip="data['tooltip']">
<span t-out="renderMonetaryField(data['amount'], data['currency'])" class="h2 m-0 text-odoo"/>
<span t-out="renderMonetaryField(data['amount'], data['currency'])" class="h2 m-0 text-primary"/>
<b class="mx-2" t-out="data['description']"/>
</div>
<div t-if="name !== 'approved'" t-attf-class="o_expense_card o_arrow_button flex-grow-1 d-flex flex-column p-3 border-bottom text-center">
@@ -1,6 +1,6 @@
<?xml version="1.0" encoding="UTF-8" ?>
<templates xml:space="preserve">
<div t-name="hr_holidays.TimeOffCard" class="o_timeoff_card py-3 text-odoo">
<div t-name="hr_holidays.TimeOffCard" class="o_timeoff_card py-3 text-primary">
<t t-set="data" t-value="props.data"/>
<t t-set="duration" t-value="props.requires_allocation ? data.virtual_remaining_leaves : data.virtual_leaves_taken"/>
<t t-set="parsed_duration" t-value="formatNumber(this.lang, duration)"/>
@@ -28,7 +28,7 @@
invisible="requires_allocation == 'no' or not id"
help="Count of allocations for this time off type (approved or waiting for approbation) with a validity period starting this year.">
<div class="o_stat_info">
<field name="allocation_count"/>
<field name="allocation_count" class="o_stat_value"/>
<span class="o_stat_text">Allocations</span>
</div>
</button>
@@ -39,7 +39,7 @@
invisible="not id"
help="Count of time off requests for this time off type (approved or waiting for approbation) with a start date in the current year.">
<div class="o_stat_info">
<field name="group_days_leave"/>
<field name="group_days_leave" class="o_stat_value"/>
<span class="o_stat_text">Time Off</span>
</div>
</button>
@@ -50,7 +50,7 @@
invisible="not id or accrual_count == 0"
help="Count of plans linked to this time off type.">
<div class="o_stat_info">
<field name="accrual_count"/>
<field name="accrual_count" class="o_stat_value"/>
<span class="o_stat_text">Accruals</span>
</div>
</button>
@@ -55,7 +55,7 @@
data-bs-toggle="popover"
t-on-click="(event) => this._onOpenPopover(event, employee)">
<a href="#"
t-attf-class="badge rounded-pill bg-white border {{employee.indirect_sub_count &lt; 10 ? 'px-2' : 'px-1' }}"
t-attf-class="badge rounded-pill bg-300 border {{employee.indirect_sub_count &lt; 10 ? 'px-2' : 'px-1' }}"
t-esc="employee.indirect_sub_count"
/>
</button>
@@ -24,11 +24,6 @@
.o_job_activities {
list-style-type: none;
.to-recruit {
color: $o-enterprise-color;
font-weight: bold;
}
}
.o_kanban_card_header_title {
+2 -2
View File
@@ -99,10 +99,10 @@
</div>
<ul class="col-5 o_job_activities">
<li>
<a name="edit_job" type="edit" t-attf-class="{{ record.no_of_recruitment.raw_value > 0 ? 'to-recruit' : 'text-secondary' }}" groups="hr_recruitment.group_hr_recruitment_user">
<a name="edit_job" type="edit" t-attf-class="{{ record.no_of_recruitment.raw_value > 0 ? 'text-primary fw-bolder' : 'text-secondary' }}" groups="hr_recruitment.group_hr_recruitment_user">
<field name="no_of_recruitment"/> To Recruit
</a>
<span t-attf-class="{{ record.no_of_recruitment.raw_value > 0 ? 'to-recruit' : 'text-secondary' }}" groups="!hr_recruitment.group_hr_recruitment_user">
<span t-attf-class="{{ record.no_of_recruitment.raw_value > 0 ? 'text-primary fw-bolder' : 'text-secondary' }}" groups="!hr_recruitment.group_hr_recruitment_user">
<field name="no_of_recruitment"/> To Recruit
</span>
</li>
+1 -1
View File
@@ -124,7 +124,7 @@
<field class="pe-1" name="is_favorite" widget="boolean_favorite" nolabel="1"/>
<strong><span t-esc="record.name.value"/></strong>
</div>
<div class="text-odoo">
<div class="text-primary">
<div t-if="record.is_new.raw_value" class="o_lunch_new_product me-1 py-1 fs-6 badge rounded-pill text-bg-success">
New
</div>
@@ -1,11 +1,9 @@
.o-mail-AutoresizeInput:not([disabled]):focus {
border-color: map-get($theme-colors, "dark") !important;
background-color: $white;
}
.o-mail-AutoresizeInput {
--o-input-border-color: transparent;
.o-mail-AutoresizeInput:not([disabled]):hover {
background-color: $white;
&:not(:focus) {
border: $border-width solid $border-color !important;
&:not([disabled]) {
&:hover, &:focus {
--o-input-border-color: #{$border-color};
}
}
}
@@ -3,7 +3,7 @@
<t t-name="mail.AutoresizeInput">
<input
class="o-mail-AutoresizeInput text-truncate px-1 border-1 border-transparent"
class="o-mail-AutoresizeInput o_input px-1 border-1 text-truncate"
t-attf-class="{{ props.className }}"
t-attf-placeholder="{{ props.placeholder }}"
t-att-disabled="!props.enabled"
@@ -1,5 +1,8 @@
.o-discuss-badge {
--o-discuss-badge-bg: #{$primary}; // sync with --o-navbar-badge-bg
--o-discuss-badge-bg: #{map-get($o-theme-text-colors, 'primary')}; // sync with --o-navbar-badge-bg
&.o-muted {
--o-discuss-badge-bg: #{$gray-300};
}
}
a.o_mail_redirect, a.o_channel_redirect {
+1 -1
View File
@@ -8,7 +8,7 @@
.o-discuss-badge {
--o-discuss-badge-bg: #{$o-success}; // sync with --o-navbar-badge-bg
color: $white !important;
color: white !important;
background-color: var(--o-discuss-badge-bg) !important;
&.o-muted {
@@ -22,7 +22,7 @@
<ImStatus t-if="thread and thread.type === 'chat' and thread.chatPartner" className="'me-1'" persona="thread.chatPartner" thread="thread" />
<div class="d-flex flex-grow-1 align-self-center align-items-center h-100 py-2">
<AutoresizeInput
className="'o-mail-Discuss-threadName lead fw-bold flex-shrink-1 text-dark bg-view py-0'"
className="'o-mail-Discuss-threadName lead fw-bold flex-shrink-1 text-dark py-0'"
enabled="thread.is_editable or thread.type === 'chat'"
onValidate.bind="renameThread"
value="thread.displayName"
@@ -31,7 +31,7 @@
<div class="flex-shrink-0 mx-2 py-2 border-start"/>
<t t-set="autogrowDescriptionPlaceholder">Add a description</t>
<AutoresizeInput
className="'o-mail-Discuss-threadDescription flex-shrink-1 py-1 bg-view'"
className="'o-mail-Discuss-threadDescription flex-shrink-1 py-1'"
enabled="thread.is_editable"
onValidate.bind="updateThreadDescription"
placeholder="thread.is_editable ? autogrowDescriptionPlaceholder : ''"
@@ -19,7 +19,7 @@
<img class="o-mail-Message-avatar w-100 h-100 rounded" t-att-src="authorAvatarUrl" t-att-class="authorAvatarAttClass"/>
</div>
<t t-elif="!message.isTransient">
<small t-if="isActive and props.showDates" class="o-mail-Message-date text-muted opacity-50 ms-2">
<small t-if="isActive and props.showDates" class="o-mail-Message-date text-muted opacity-75 ms-2">
<t t-esc="messageService.dateSimple(message)"/>
</small>
<div t-else="" class="ms-2">
@@ -36,7 +36,7 @@
<strong class="me-1 text-truncate"><t t-if="message.author" t-esc="message.author.name"/><t t-else="" t-esc="message.email_from"/></strong>
</span>
<t t-if="!isAlignedRight" t-call="mail.Message.notification"/>
<small t-if="!message.is_transient" class="o-mail-Message-date text-muted opacity-50" t-att-class="{ 'me-2': !isAlignedRight }" t-att-title="message.datetimeShort">
<small t-if="!message.is_transient" class="o-mail-Message-date text-muted opacity-75" t-att-class="{ 'me-2': !isAlignedRight }" t-att-title="message.datetimeShort">
<t t-if="shouldDisplayAuthorName">- </t>
<RelativeTime datetime="message.datetime"/>
</small>
@@ -2,7 +2,7 @@
<templates xml:space="preserve">
<t t-name="mail.NavigableList">
<div class="o-mail-NavigableList bg-white m-0 p-0" t-ref="root" t-att-class="props.class">
<div class="o-mail-NavigableList bg-view m-0 p-0" t-ref="root" t-att-class="props.class">
<div t-if="show" class="o-open border" t-on-mousedown.prevent="">
<div t-if="props.isLoading" class="o-mail-NavigableList-item">
<a href="#" class="d-flex align-items-center w-100 py-2 px-4 gap-1">
@@ -4,14 +4,6 @@
.o-mail-Thread-newMessage {
transition: opacity 0.5s;
hr {
border-color: lighten($o-brand-odoo, 15%) !important;
}
hr, span {
color: lighten($o-brand-odoo, 15%);
}
span {
font-size: 0.8rem;
}
@@ -24,7 +24,7 @@
</t>
<Transition t-if="props.thread.model === 'discuss.channel'" visible="props.thread.seen_message_id === (prevMsg?.id ?? false)" name="'o-fade'" t-slot-scope="transition">
<div class="o-mail-Thread-newMessage d-flex align-items-center fw-bolder" t-att-class="{ 'opacity-0': transition.className.includes('o-fade-leave') }">
<hr class="ms-2 flex-grow-1 border opacity-50"/><span class="px-2">New messages</span><hr class="me-2 flex-grow-1 border opacity-50"/>
<hr class="ms-2 flex-grow-1 border border-danger opacity-50"/><span class="px-2 text-danger">New messages</span><hr class="me-2 flex-grow-1 border border-danger opacity-50"/>
</div>
</Transition>
<t t-if="msg.isNotification">
@@ -1,5 +1,5 @@
.o-mail-DiscussSidebar-item {
&:hover, &.o-active {
background-color: $o-gray-100 !important;
background-color: $o-gray-300;
}
}
@@ -8,6 +8,6 @@
.o-mail-DiscussSidebar-item {
&:hover, &.o-active {
background-color: $o-gray-200 !important;
background-color: $o-gray-200;
}
}
@@ -1,29 +1,3 @@
$o-mail-NotificationItem-background-color: $o-view-background-color !default;
$o-mail-NotificationItem-hover-background-color: darken(
$o-mail-NotificationItem-background-color,
7%
) !default;
$o-mail-NotificationItem-muted-background-color: $gray-100 !default;
$o-mail-NotificationItem-muted-hover-background-color:
darken($o-mail-NotificationItem-muted-background-color, 7%) !default;
.o-mail-NotificationItem {
background-color: $o-mail-NotificationItem-background-color;
&:hover {
background-color: $o-mail-NotificationItem-hover-background-color;
}
&.o-muted {
background-color: $o-mail-NotificationItem-muted-background-color;
&:hover {
background-color: $o-mail-NotificationItem-muted-hover-background-color;
}
}
}
.o-mail-NotificationItem-badge {
padding: 3px 6px !important;
}
@@ -3,7 +3,7 @@
<t t-name="mail.NotificationItem">
<ActionSwiper onLeftSwipe="props.onSwipeLeft ? props.onSwipeLeft : undefined" onRightSwipe="props.onSwipeRight ? props.onSwipeRight : undefined">
<button class="o-mail-NotificationItem list-group-item list-group-item-action d-flex cursor-pointer align-items-center p-1" t-att-class="{ 'o-muted': !props.hasMarkAsReadButton, 'opacity-50': props.muted }" t-on-click="onClick" t-ref="root">
<button class="o-mail-NotificationItem list-group-item list-group-item-action d-flex cursor-pointer align-items-center p-1" t-att-class="{ 'text-muted': !props.hasMarkAsReadButton, 'opacity-50': props.muted }" t-on-click="onClick" t-ref="root">
<div class="position-relative o-bg-inherit m-1 flex-shrink-0" style="width:40px;height:40px;">
<img class="o_avatar w-100 h-100 rounded" alt="Notification Item Image" t-att-src="props.iconSrc"/>
<t t-slot="icon"/>
@@ -2,7 +2,7 @@
<templates xml:space="preserve">
<t t-name="discuss.ChannelSelector">
<div class="o-discuss-ChannelSelector d-flex flex-wrap form-control rounded bg-white p-1" t-att-class="props.class" t-ref="root">
<div class="o-discuss-ChannelSelector d-flex flex-wrap form-control rounded p-1" t-att-class="props.class" t-ref="root">
<TagsList t-if="props.multiple" tags="tagsList"/>
<input
class="text-truncate form-control flex-grow-1 border-0 px-2 py-0"
@@ -443,7 +443,7 @@ QUnit.test("mark unread channel as read", async (assert) => {
await triggerEvents(".o-mail-NotificationItem", ["mouseenter"]);
await click(".o-mail-NotificationItem [title='Mark As Read']");
assert.verifySteps(["set_last_seen_message"]);
await contains(".o-mail-NotificationItem.o-muted");
await contains(".o-mail-NotificationItem.text-muted");
await triggerEvents(".o-mail-NotificationItem", ["mouseenter"]);
await contains(".o-mail-NotificationItem [title='Mark As Read']", { count: 0 });
await contains(".o-mail-ChatWindow", { count: 0 });
@@ -16,7 +16,7 @@
Add to favorite filters
</div>
<div class="d-inline-flex">
<input t-ref="autofocus" type="text" class="o_mass_mailing_filter_name w-auto ms-2"
<input t-ref="autofocus" type="text" class="o_mass_mailing_filter_name o_input w-auto ms-2"
placeholder='e.g. "VIP Customers"' t-on-keydown="onFilterNameInputKeydown"/>
<button class="btn btn-sm btn-primary o_mass_mailing_btn_save_filter mx-2" t-on-click="onSaveFilter">
Add
@@ -2,5 +2,5 @@
// ============================================================================
// No CSS hacks, variables overrides only
$o-onboarding-color-blue: #516db3 !default;
$o-onboarding-color-blue: #7188c1 !default;
$o-onboarding-color-orange: #c67c7a !default;
+3 -3
View File
@@ -11,10 +11,10 @@ from odoo.tools import formatLang
STATUS_COLOR = {
'on_track': 20, # green / success
'at_risk': 2, # orange
'at_risk': 22, # orange
'off_track': 23, # red / danger
'on_hold': 4, # light blue
'done': 5, # purple
'on_hold': 21, # light blue
'done': 24, # purple
False: 0, # default grey -- for studio
# Only used in project.task
'to_define': 0,
@@ -51,10 +51,6 @@
}
}
.o_column_progress .bg-purple {
background-color: purple;
}
@include media-breakpoint-down(md) {
.o_view_nocontent {
top: 15%;
@@ -20,6 +20,9 @@
&.o_color_bubble_23 {
background-color: $o-danger;
}
&.o_color_bubble_24 {
background-color: $primary;
}
}
.o_status_with_color {
@@ -4,11 +4,11 @@
* List of colors according to the selection value, see `project_update.py`
*/
export const STATUS_COLORS = {
'on_track': 10,
'at_risk': 2,
'off_track': 1,
'on_hold': 4,
'done': 5,
'on_track': 20,
'at_risk': 22,
'off_track': 23,
'on_hold': 21,
'done': 24,
};
export const STATUS_COLOR_PREFIX = 'o_status_bubble mx-0 o_color_bubble_';
@@ -68,7 +68,7 @@ registry.category("web_tour.tours").add('personal_stage_tour', {
trigger: '.o-kanban-button-new',
}, {
content: "Create a new personal task",
trigger: 'input.o_input',
trigger: 'input.o_input:not(.o_searchview_input)',
run: 'text New Test Task',
}, {
content: "Confirm create",
@@ -2,19 +2,11 @@
width: 100%;
text-overflow: clip;
overflow: hidden;
border: none;
padding: 0px 5px 0px 2px;
color: $o-gray-700;
border-bottom: $input-border-width solid transparent;
transition: border-color 0.3s;
&:hover {
border-bottom-color: $o-brand-primary;
}
&:focus {
outline: 1px solid #ccc;
outline-offset: -1px;
color: $dark;
}
@@ -30,4 +22,3 @@
background-color: inherit;
}
}
@@ -1,7 +1,7 @@
<?xml version="1.0" encoding="UTF-8"?>
<templates>
<t t-name="purchase.PurchaseDashboard">
<div class="o_purchase_dashboard container-fluid py-4 border-bottom bg-white">
<div class="o_purchase_dashboard container-fluid py-4 border-bottom bg-view">
<div class="row justify-content-between gap-3 gap-lg-0">
<div class="col-12 col-lg-5 col-xl-5 col-xxl-4 flex-grow-1 flex-lg-grow-0 flex-shrink-0">
<div class="grid gap-4">
@@ -56,7 +56,7 @@
<div class="g-col-12 g-col-sm-4 g-col-lg-6 d-flex align-items-center justify-content-center text-center justify-content-md-end text-md-end mt-4 mt-md-0">
Avg Order Value
</div>
<div class="g-col-12 g-col-sm-8 g-col-lg-5 d-flex align-items-center justify-content-center py-2 bg-light">
<div class="g-col-12 g-col-sm-8 g-col-lg-5 d-flex align-items-center justify-content-center py-2 bg-view">
<span><t t-out="purchaseData['all_avg_order_value']"/></span>
</div>
</div>
@@ -64,7 +64,7 @@
<div class="g-col-12 g-col-sm-4 g-col-lg-6 d-flex align-items-center py-2 justify-content-center text-center justify-content-md-end text-md-end mt-4 mt-md-0">
Purchased Last 7 Days
</div>
<div class="g-col-12 g-col-sm-8 g-col-lg-6 d-flex align-items-center justify-content-center py-2 bg-light">
<div class="g-col-12 g-col-sm-8 g-col-lg-6 d-flex align-items-center justify-content-center py-2 bg-view">
<span><t t-out="purchaseData['all_total_last_7_days']"/></span>
</div>
</div>
@@ -74,7 +74,7 @@
<div class="g-col-12 g-col-sm-4 g-col-lg-6 d-flex align-items-center justify-content-center text-center justify-content-md-end text-md-end mt-4 mt-md-0">
Lead Time to Purchase
</div>
<div class="g-col-12 g-col-sm-8 g-col-lg-5 d-flex align-items-center justify-content-center py-2 bg-light">
<div class="g-col-12 g-col-sm-8 g-col-lg-5 d-flex align-items-center justify-content-center py-2 bg-view">
<span><t t-out="purchaseData['all_avg_days_to_purchase']"/> &#160;Days</span>
</div>
</div>
@@ -82,7 +82,7 @@
<div class="g-col-12 g-col-md-4 g-col-sm-4 g-col-lg-6 d-flex align-items-center justify-content-center text-center justify-content-md-end text-md-end mt-4 mt-md-0">
RFQs Sent Last 7 Days
</div>
<div class="g-col-12 g-col-sm-8 g-col-lg-6 d-flex align-items-center justify-content-center py-2 bg-light">
<div class="g-col-12 g-col-sm-8 g-col-lg-6 d-flex align-items-center justify-content-center py-2 bg-view">
<span><t t-out="purchaseData['all_sent_rfqs']"/></span>
</div>
</div>
@@ -1,11 +1,10 @@
.o_survey_question_view_form .o_form_renderer {
.o_preview_questions {
border: 3px solid $o-gray-500;
border: 3px solid $gray-400;
width: auto;
padding: 10px 20px 10px;
margin-top: 15px;
color: $o-gray-500;
}
.o_preview_questions .o_datetime {
@@ -35,7 +35,7 @@
<field name="question_type" widget="radio" required="not is_page" />
</group>
<group>
<div class="mx-lg-auto w-lg-50 d-none d-sm-block o_preview_questions" colspan="2">
<div class="mx-lg-auto w-lg-50 d-none d-sm-block o_preview_questions bg-light" colspan="2">
<!-- Multiple choice: only one answer -->
<div invisible="question_type != 'simple_choice'" role="img" aria-label="Multiple choice with one answer"
title="Multiple choice with one answer">
@@ -10,7 +10,7 @@
.o_command {
&.focused {
background: rgba($o-action, 0.25);
background: rgba($o-component-active-bg, .65);
}
&_hotkey {
@@ -58,7 +58,7 @@
</svg>
<div class="o_reward_msg mx-4">
<div class="o_reward_msg_card">
<div class="o_reward_msg_content text-muted px-3 py-4 bg-white d-inline-block border border-light border-top-0">
<div class="o_reward_msg_content text-muted px-3 py-4 bg-view d-inline-block border border-light border-top-0">
<t t-if="!props.Component">
<t t-out="props.message"/>
</t>
@@ -1,9 +1,9 @@
.o_popover_field_selector {
&.o-popover-top > .popover-arrow::after {
border-top-color: map-get($theme-colors, 'primary');
border-top-color: #{$o-gray-300};
}
&.o-popover-bottom > .popover-arrow::after {
border-bottom-color: map-get($theme-colors, 'primary');
border-bottom-color: #{$o-gray-300};
}
}
@@ -18,7 +18,7 @@
.o_model_field_selector_popover_header, .o_model_field_selector_popover_footer {
color: color-contrast(map-get($theme-colors, 'primary'));
background: map-get($theme-colors, 'primary');
background: #{$o-gray-300};
font-weight: bold;
padding: 5px 0.4em;
@@ -28,12 +28,6 @@
padding: 0px 35px;
text-align: center;
}
.o_model_field_selector_popover_search > .o_input, > input {
color: $o-main-text-color;
font-size: 115%;
border: none;
padding: 5px 0.4rem;
}
.o_model_field_selector_popover_option {
@include o-position-absolute($top: 0);
padding: 8px;
@@ -25,7 +25,7 @@
<div class="o_model_field_selector_popover_search mt-2">
<input type="text"
placeholder='Search...'
class="o_input"
class="o_input p-1 border rounded-1 bg-view"
t-att-value="state.page.query"
t-on-input="(ev) => this.debouncedSearchFields(ev.target.value)" />
</div>
@@ -35,14 +35,14 @@
<ul class="o_model_field_selector_popover_page">
<t t-foreach="state.page.fieldNames" t-as="fieldName" t-key="fieldName">
<t t-set="fieldDef" t-value="state.page.fieldDefs[fieldName]" />
<li class="o_model_field_selector_popover_item d-flex" t-att-class="{ 'active': fieldName === state.page.focusedFieldName }" t-att-data-name="fieldName">
<button class="o_model_field_selector_popover_item_name btn flex-fill text-start" t-on-click="() => this.selectField(fieldDef)">
<li class="o_model_field_selector_popover_item d-flex border-bottom" t-att-class="{ 'active': fieldName === state.page.focusedFieldName }" t-att-data-name="fieldName">
<button class="o_model_field_selector_popover_item_name btn btn-light flex-fill rounded-0 text-start" t-on-click="() => this.selectField(fieldDef)">
<t t-esc="fieldDef.string" />
<t t-if="fieldDef.record_name"> (<t t-esc="fieldDef.record_name" />)</t>
<div t-if="props.isDebugMode" class="text-muted o_model_field_selector_popover_item_title"><t t-esc="fieldName"/> (<t t-esc="fieldDef.type"/>)</div>
</button>
<t t-if="(!fieldDef.is_property and fieldDef.relation and props.followRelations) or fieldDef.type === 'properties'">
<button class="o_model_field_selector_popover_item_relation btn btn-link" t-on-click.stop="() => this.followRelation(fieldDef)">
<button class="o_model_field_selector_popover_item_relation btn btn-light border-0 border-start rounded-0" t-on-click.stop="() => this.followRelation(fieldDef)">
<i class="oi oi-chevron-right o_model_field_selector_popover_relation_icon" role="img" aria-label="Relation to follow" title="Relation to follow" />
</button>
</t>
@@ -2,7 +2,7 @@
<templates xml:space="preserve">
<t t-name="web.NotificationWowl">
<div t-on-mouseenter="this.props.freeze" t-on-mouseleave="this.props.refresh" t-attf-class="o_notification {{props.className}} border border-{{props.type}} bg-white mb-2 position-relative"
<div t-on-mouseenter="this.props.freeze" t-on-mouseleave="this.props.refresh" t-attf-class="o_notification {{props.className}} border border-{{props.type}} bg-view mb-2 position-relative"
role="alert" aria-live="assertive" aria-atomic="true">
<strong t-if="props.title" t-attf-class="o_notification_title d-block text-{{props.type}} py-2 ps-3 pe-5" t-out="props.title"/>
<button type="button" class="o_notification_close btn" aria-label="Close" t-on-click="props.close">
@@ -3,10 +3,6 @@
position: relative;
}
.o_web_sign_signature_group {
background: #ffffff;
}
.o_signature_stroke {
position: absolute;
border-top: #D1D0CE solid 2px;
@@ -49,8 +49,8 @@
border, but we remove the padding from the body, so the canvas
will overflow on the corners without this rule.
-->
<div t-if="state.showSignatureArea" class="o_web_sign_signature_group bg-white card mt-3" style="overflow: hidden;">
<div class="card-header">
<div t-if="state.showSignatureArea" class="o_web_sign_signature_group bg-100 card mt-3" style="overflow: hidden;">
<div class="card-header bg-transparent">
<div class="row g-0">
<div t-if="!props.noInputName or defaultName" class="col-auto">
<a role="button" href="#" t-on-click.prevent="onClickSignAuto" t-attf-class="o_web_sign_auto_button me-2 btn btn-light {{ state.signMode === 'auto' ? 'active': '' }}">
+1 -1
View File
@@ -73,7 +73,7 @@ $body-color: $o-main-text-color !default;
$link-color: $o-main-link-color !default;
$link-decoration: none !default;
$link-hover-decoration: none !default;
$link-shade-percentage: 15% !default;
$link-shade-percentage: 30% !default;
// Muted
//
@@ -27,7 +27,7 @@
a#{$-parent}, button#{$-parent} {
&:hover, &:focus, &:active, &.active {
@include o-print-color(darken($-color, $link-shade-percentage), color, text-opacity);
@include o-print-color(shift-color($-color, $link-shade-percentage), color, text-opacity);
}
}
}
@@ -152,7 +152,7 @@ $o-btn-custom: (
// Components (BS)
$o-border-color: $o-gray-300 !default;
$o-border-color: var(--border-color, #{$o-gray-300}) !default;
// Forms
@@ -10,4 +10,4 @@
}
animation: animate .25s ease-out;
}
}
@@ -12,7 +12,7 @@
>
<!-- :hover overlay -->
<div class="position-absolute start-0 top-0 bottom-0 end-0 bg-white border rounded-2 shadow opacity-0 opacity-100-hover"/>
<div class="position-absolute start-0 top-0 bottom-0 end-0 bg-view border rounded-2 shadow opacity-0 opacity-100-hover"/>
<div class="o_searchview_facet_label position-relative rounded-start-2 px-1"
t-on-click="(ev) => this.onFacetLabelClick(ev.target, facet)"
@@ -53,7 +53,7 @@
<t t-name="web.SearchBar.Input">
<input type="text"
class="o_searchview_input d-print-none flex-grow-1 w-auto border-0"
class="o_searchview_input o_input d-print-none flex-grow-1 w-auto border-0"
accesskey="Q"
placeholder="Search..."
role="searchbox"
@@ -24,7 +24,7 @@
t-attf-class="o_search_panel_section o_search_panel_{{ section.type }}"
>
<header class="o_search_panel_section_header pt-4 pb-2 text-uppercase cursor-default">
<i t-attf-class="fa {{ section.icon }} o_search_panel_section_icon {{!section.color &amp;&amp; section.type == 'filter' ? 'text-warning' : !section.color ? 'text-odoo': ''}} me-2"
<i t-attf-class="fa {{ section.icon }} o_search_panel_section_icon {{!section.color &amp;&amp; section.type == 'filter' ? 'text-warning' : !section.color ? 'text-primary': ''}} me-2"
t-att-style="section.color and ('color: ' + section.color)"
/>
<b t-esc="section.description"/>
@@ -1,9 +1,10 @@
.o_searchview {
background-color: $input-focus-bg;
--SearchBar-background-color: $input-focus-bg;
background-color: var(--SearchBar-background-color);
border: $input-border-width solid $border-color;
&:focus-within {
background-color: $input-focus-bg;
border-color: $input-focus-border-color;
color: $input-focus-color;
@@ -16,8 +17,6 @@
.o_searchview_input {
appearance: none;
color: inherit;
background: inherit;
}
.o_searchview_autocomplete {
@@ -1,5 +1,5 @@
// Variables
$o-cw-color-today-accent: #714B67;
$o-cw-color-today-accent: $o-danger;
$o-cw-filter-avatar-size: 20px;
// Animations
@@ -1,6 +1,6 @@
.o_calendar_renderer {
--o-circle-padding: calc(#{map-get($spacers, 1 )} / 2);
--o-cw-border-color: #{lighten($border-color, 5%)};
--o-cw-border-color: #{$border-color};
background-color: $o-view-background-color;
grid-area: cal;
@@ -98,7 +98,7 @@
</label>
<t t-if="filter.canRemove">
<button
class="o_remove btn position-absolute top-50 end-0 bg-white py-0 px-2 text-700 transition-base"
class="o_remove btn position-absolute top-50 end-0 py-0 px-2 bg-view text-700 transition-base"
role="img"
title="Remove this favorite from the list"
aria-label="Remove this favorite from the list"
@@ -3,11 +3,11 @@
border: 0;
font-size: 12px;
user-select: none;
background-color: rgba(lightgray, 0.5);
background-color: $o-gray-300;
font-weight: 500;
@include o-text-overflow;
transition: none; // remove transition to prevent badges from flickering at reload
color: #444B5A;
color: $o-black;
&.o_field_empty {
display: none !important;
}
@@ -3,7 +3,7 @@
grid-template-columns: auto min-content;
border: 1px solid $primary;
font-size: $font-size-sm;
color: $o-brand-primary;
color: o-text-color('primary');
font-weight: $badge-font-weight;
.o_input {
@@ -47,7 +47,7 @@
</div>
<div class="o_attachment_uploaded"><i class="text-success fa fa-check" role="img" aria-label="Uploaded" title="Uploaded"/></div>
<div t-if="editable" class="o_attachment_delete" t-on-click.stop="() => this.onFileRemove(file.id)"><span class="text-white" role="img" aria-label="Delete" title="Delete">×</span></div>
<div t-if="editable" class="o_attachment_delete" t-on-click.stop="() => this.onFileRemove(file.id)"><span role="img" aria-label="Delete" title="Delete">×</span></div>
</div>
</div>
</t>
@@ -32,9 +32,9 @@
.dropdown:focus-within ~ .o_dropdown_button,
.o_input:focus ~ .o_datepicker_button,
.o_dropdown_button:focus {
@include print-variable(o-input-border-color, $o-brand-primary);
@include print-variable(o-input-border-color, $o-action);
* {
@include print-variable(o-input-border-color, $o-brand-primary);
@include print-variable(o-input-border-color, $o-action);
}
}
}
@@ -27,7 +27,7 @@
%-stat-button-value {
order: 2;
font-weight: $font-weight-bold;
color: $o-brand-primary;
color: var(--o-stat-text-color, #{$o-brand-primary});
font-size: $o-font-size-base-smaller;
}
@@ -50,7 +50,7 @@
.o_button_icon {
font-size: $-stat-button-icon-size;
color: $primary;
color: var(--o-stat-button-color, #{$primary});
&:before {
margin-right: $-stat-button-icon-margin-end;
@@ -164,7 +164,7 @@
padding-top: $o-kanban-dashboard-dropdown-complex-gap*3;
&:not(:first-child) {
border-top: 1px solid map-get($grays, '300');
border-top: 1px solid $dropdown-divider-bg;
}
.oe_kanban_colorpicker {
@@ -173,7 +173,7 @@
}
div[class*="col-"] + div[class*="col-"] {
border-left: 1px solid map-get($grays, '300');
border-left: 1px solid $dropdown-divider-bg;
}
> div:last-child {
@include o-kanban-dashboard-dropdown-link($link-padding-gap: $o-kanban-dashboard-dropdown-complex-gap);
@@ -20,7 +20,7 @@
Edit
</button>
<span class="flex-grow-1"></span>
<button class="btn btn-secondary o_kanban_cancel text-600" t-on-click="() => this.cancel(true)">
<button class="btn btn-secondary o_kanban_cancel" t-on-click="() => this.cancel(true)">
<i class="fa fa-trash" />
</button>
</div>
@@ -96,7 +96,7 @@
<div class="o_kanban_examples d-flex p-2">
<div t-foreach="ghostColumns" t-as="column" t-key="column.name" class="o_kanban_examples_group flex-grow-1 m-3">
<h6><b t-esc="column.name"/></h6>
<div t-foreach="column.cards" t-as="card" t-key="card_index" class="o_kanban_examples_ghost d-flex flex-wrap justify-content-between mb-3 p-2 border bg-white">
<div t-foreach="column.cards" t-as="card" t-key="card_index" class="o_kanban_examples_ghost d-flex flex-wrap justify-content-between mb-3 p-2 border bg-light">
<div class="o_ghost_content w-100 pb-3 bg-300"/>
<div class="o_ghost_content o_ghost_tag d-inline-block w-50 mt-3 pb-3 bg-300"/>
<span class="mt-2 rounded-circle bg-300">
@@ -211,9 +211,6 @@
margin-left: 10px;
> button {
@include o-hover-text-color($o-brand-primary, darken($o-brand-primary, 20%));
background-color: transparent;
border: none;
padding-top: 0;
padding-bottom: 0;
}
@@ -2,7 +2,7 @@
<templates id="template" xml:space="preserve">
<t t-name="web.MobileSwitchCompanyMenu">
<div class="o_burger_menu_companies p-3 bg-100">
<div class="o_burger_menu_companies p-3">
<div class="o_burger_menu_user_title h6 mb-3">Companies</div>
<t t-foreach="Object.values(companyService.allowedCompaniesWithAncestors)
.filter((c) => !c.parent_id)
@@ -3,7 +3,7 @@
<t t-name="web.SettingsPage">
<div class="o_setting_container">
<div class="position-sticky top-0 flex-grow-0 z-index-1">
<div class="settings_tab h-100" t-if="!env.isSmall or state.search.value.length === 0">
<div class="settings_tab h-100 border-end" t-if="!env.isSmall or state.search.value.length === 0">
<t t-foreach="props.modules" t-as="module" t-key="module.key">
<div class="tab" t-if="!module.isVisible"
t-att-class="{
@@ -35,9 +35,9 @@
// BASE SETTINGS LAYOUT
.o_base_settings_view .o_form_renderer {
--settings__tab-bg: #{map-get($grays, '900')};
--settings__tab-bg--active: #{map-get($grays, '800')};
--settings__tab-color: #{map-get($grays, '400')};
--settings__tab-bg: #{map-get($grays, '100')};
--settings__tab-bg--active: #{$o-component-active-bg};
--settings__tab-color: #{map-get($grays, '700')};
--settings__title-bg: #{map-get($grays, '200')};
height: 100%;
@@ -71,8 +71,8 @@
overflow: auto;
.selected {
background-color: var(--settings__tab-bg--active);
box-shadow: inset 2px 0 0 $o-brand-primary;
background-color: var(--settings__tab-bg--active, #{$o-component-active-bg});
box-shadow: inset 2px 0 0 $o-component-active-border;
}
.tab {
@@ -92,7 +92,7 @@
}
&:hover, &.selected {
color: white;
color: $o-gray-900;
}
}
}
@@ -106,7 +106,7 @@
> .app_settings_block {
h2 {
margin: 0 0 !important;
@include o-base-settings-horizontal-padding(.4rem);
@include o-base-settings-horizontal-padding(.7rem);
background-color: var(--settings__title-bg);
font-size: 15px;
@@ -117,7 +117,7 @@
h3 {
margin: 0 0 !important;
@include o-base-settings-horizontal-padding(.4rem);
@include o-base-settings-horizontal-padding(.7rem);
font-weight: 400;
font-size: 13px;
}
@@ -10,7 +10,7 @@
<div class="o_searchview form-control d-flex align-items-center py-1" role="search" aria-autocomplete="list">
<i class="o_searchview_icon oi oi-search me-2" role="img" aria-label="Search..." title="Search..." />
<div class="o_searchview_input_container d-flex flex-grow-1 flex-wrap gap-1">
<input type="text" class="o_searchview_input flex-grow-1 w-auto border-0" accesskey="Q" placeholder="Search..." role="searchbox" t-model="searchState.value" t-ref="autofocus"/>
<input type="text" class="o_searchview_input o_input flex-grow-1 w-auto border-0" accesskey="Q" placeholder="Search..." role="searchbox" t-model="searchState.value" t-ref="autofocus"/>
</div>
</div>
</div>
@@ -18,7 +18,7 @@
<t t-name="web.SwitchCompanyItem">
<DropdownItem class="'p-0 bg-white'" parentClosingMode="!isCompanyAllowed ? 'none' : 'all'">
<DropdownItem class="'p-0'" parentClosingMode="!isCompanyAllowed ? 'none' : 'all'">
<div
class="d-flex"
t-att-class="{ 'disabled': !isCompanyAllowed }"
@@ -34,7 +34,7 @@
t-att-class="{ 'border-primary': isCurrent, 'disabled': !isCompanyAllowed }"
t-on-click.stop="() => this.toggleCompany()">
<span class="btn border-0 p-2" t-att-class="isCompanyAllowed ? 'btn-light' : 'disabled'">
<span class="btn border-0 p-2" t-att-class="isCompanyAllowed ? 'btn-link text-primary' : 'disabled'">
<i class="fa fa-fw py-2" t-att-class="isCompanySelected ? 'fa-check-square text-primary' : 'fa-square-o'"/>
</span>
</div>
@@ -46,7 +46,7 @@
t-att-title="'Switch to ' + props.company.name "
tabindex="0"
class="d-flex flex-grow-1 align-items-center py-0 log_into ps-2"
t-att-class="isCurrent ? 'alert-primary' : 'btn fw-normal border-0 ' + (isCompanyAllowed ? 'btn-light' : 'disabled')"
t-att-class="isCurrent ? 'alert-primary' : 'btn fw-normal border-0 ' + (isCompanyAllowed ? 'btn-link text-primary' : 'disabled')"
t-on-click="() => this.logIntoCompany()">
<span
@@ -1727,7 +1727,7 @@ QUnit.module("SettingsFormView", (hooks) => {
assert.containsOnce(target, "[name='textField'] input");
assert.verifySteps([
`focusin: <input type="text" class="o_searchview_input flex-grow-1 w-auto border-0" accesskey="Q" placeholder="Search..." role="searchbox">`,
`focusin: <input type="text" class="o_searchview_input o_input flex-grow-1 w-auto border-0" accesskey="Q" placeholder="Search..." role="searchbox">`,
]);
});
@@ -7,7 +7,7 @@
--o-we-toolbar-bg-active: #{$o-gray-400};
--o-we-toolbar-border: #{$o-gray-200};
--o-we-toolbar-color-text: #{$o-gray-800};
--o-we-toolbar-color-accent: #{$o-brand-primary};
--o-we-toolbar-color-accent: #{$o-action};
--o-we-toolbar-color-clickable: #{$o-gray-800};
--o-we-toolbar-color-clickable-active: #{$o-black};
}
@@ -45,7 +45,7 @@ $o-tour-pointer-size-delay-in: $o-tour-pointer-duration-in - $o-tour-pointer-siz
--TourPointer__scale: 1.12;
--TourPointer__color: #{$o-enterprise-color};
--TourPointer__color-accent: #{lighten($o-enterprise-color, 7%)};
--TourPointer__border-width: 3px;
--TourPointer__border-width: 1px;
--TourPointer__border-color-rgb: 255, 255, 255;
--TourPointer__border-color: rgba(var(--TourPointer__border-color-rgb), 1);
--TourPointer__arrow-size: 1rem;
@@ -83,7 +83,7 @@ $o-tour-pointer-size-delay-in: $o-tour-pointer-duration-in - $o-tour-pointer-siz
.o_tour_pointer_tip {
width: var(--TourPointer__width);
height: var(--TourPointer__height);
border: var(--TourPointer__border-width) solid var(--TourPointer__border-color);
border: var(--TourPointer__border-width) solid white;
border-radius: 0 50% 50% 50%;
background-image: radial-gradient(
var(--TourPointer__color-accent),
@@ -93,7 +93,7 @@ $o-tour-pointer-size-delay-in: $o-tour-pointer-duration-in - $o-tour-pointer-siz
}
.o_tour_pointer_content {
background-color: inherit;
background-color: $light;
color: transparent;
transition: color 0s ease var(--TourPointer__expand-duration);
@@ -140,21 +140,21 @@ $o-tour-pointer-size-delay-in: $o-tour-pointer-duration-in - $o-tour-pointer-siz
}
&.o_open {
border-color: var(--TourPointer__color);
background-color: var(--TourPointer__border-color);
border-color: #{$o-gray-400};
background-color: #{$o-gray-300};
animation: var(--TourPointer__reveal-animation);
.o_tour_pointer_tip {
width: var(--TourPointer__arrow-size);
height: var(--TourPointer__arrow-size);
border-color: var(--TourPointer__color);
border-color: #{$o-gray-400};
border-radius: 0;
background: white;
background: $light;
box-shadow: none;
}
.o_tour_pointer_content {
color: var(--TourPointer__text-color);
color: $o-black;
}
&.o_left {
@@ -20,7 +20,7 @@
>
<div class="o_tour_pointer_tip position-absolute" />
<div
class="o_tour_pointer_content overflow-hidden px-3 py-2 w-100 h-100 position-relative"
class="o_tour_pointer_content rounded overflow-hidden px-3 py-2 w-100 h-100 position-relative"
t-att-class="{ invisible: content and !isOpen }"
>
<t t-out="content" />
@@ -8,9 +8,6 @@
margin: 0px;
padding: 0px;
border-top: 0px !important;
&:first-child {
border-bottom: 1px solid #dee2e6 !important;
}
.oe_kanban_details {
display:none !important;
}