[IMP] web, *: odoo-brand color classes
Prior to this commit branded UI components were styled exclusively in raw SCSS using the '$o-brand-odoo' variable. This leaded to unnecessary code repetitions since, to achieve the same visual result, each module defined its own classes. Visual inconsistencies were frequent too since each module defined its own variations for interactive states (eg :hover). This commit injects '$o-brand-odoo' into bootstrap's default '$theme-color' map, allowing the framework to automatically generate odoo utility/contextual classes. These classes can be used to handle text, backgrounds, borders and buttons wherever needed. Part of the overall v16 SCSS optimization/restyle, task-2704984. task-2800721 closes odoo/odoo#87448 Related: odoo/enterprise#25700 Signed-off-by: Pierre Paridans (app) <app@odoo.com>
This commit is contained in:
stefanorigano (SRI)
@@ -2,7 +2,6 @@
|
||||
.progress-bar {
|
||||
font-size: 1.08333333rem;
|
||||
height: 14px;
|
||||
background-color: $o-enterprise-color;
|
||||
span {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
@@ -12,7 +12,6 @@
|
||||
display: none;
|
||||
}
|
||||
span {
|
||||
background-color: $o-brand-odoo;
|
||||
padding: 5px;
|
||||
font-size: small;
|
||||
z-index: 0;
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
<div class="oe_structure"/>
|
||||
<div class="o_event_foldable_badge_ticket_wrapper p-2">
|
||||
<div class="o_event_foldable_badge_ticket_wrapper_top page">
|
||||
<h5 class="o_event_foldable_badge_event_name font-weight-bold text-center" t-field="event.name"/>
|
||||
<h5 class="o_event_foldable_badge_event_name text-odoo font-weight-bold text-center" t-field="event.name"/>
|
||||
<div class="text-center o_event_foldable_badge_font_small">
|
||||
<span itemprop="startDate" t-out="event.date_begin.date()"
|
||||
class="font-weight-bold"/>
|
||||
@@ -117,7 +117,7 @@
|
||||
<div class="o_event_full_page_ticket_font_faded">
|
||||
Event Ticket For
|
||||
</div>
|
||||
<h5 class="o_event_full_page_ticket_event_name font-weight-bold py-0 my-0" t-field="event.name"/>
|
||||
<h5 class="o_event_full_page_ticket_event_name text-odoo font-weight-bold py-0 my-0" t-field="event.name"/>
|
||||
<span itemprop="startDate" t-out="event.date_begin.date()"
|
||||
class="font-weight-bold"/>
|
||||
<span itemprop="startDateTime" t-out="event.date_begin"
|
||||
@@ -177,7 +177,7 @@
|
||||
</div>
|
||||
|
||||
<div class="row footer o_event_full_page_ticket_footer d-block">
|
||||
<div class="o_event_full_page_ticket_powered_by text-white text-center p-2 w-100">
|
||||
<div class="o_event_full_page_ticket_powered_by bg-odoo text-white text-center p-2 w-100">
|
||||
<t t-if="event.organizer_id">
|
||||
<span class="font-weight-bold" t-field="event.organizer_id.name"></span>
|
||||
<span t-if="event.organizer_id.phone" class="pl-3 fa fa-phone"/>
|
||||
|
||||
@@ -44,10 +44,6 @@
|
||||
min-height: 80mm;
|
||||
}
|
||||
|
||||
.o_event_foldable_badge_event_name {
|
||||
color: $o-brand-odoo;
|
||||
}
|
||||
|
||||
.o_event_foldable_badge_font_faded {
|
||||
color: #939393;
|
||||
}
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
.o_event_full_page_ticket_footer {
|
||||
.o_event_full_page_ticket_powered_by {
|
||||
background-color: $o-brand-odoo;
|
||||
font-size: .8rem;
|
||||
line-height: 1rem;
|
||||
}
|
||||
@@ -36,10 +35,6 @@
|
||||
padding: 10px 3px;
|
||||
box-shadow: -3px 3px 9px 0px rgba(0,0,0,0.51);
|
||||
|
||||
.o_event_full_page_ticket_event_name {
|
||||
color: $o-brand-odoo;
|
||||
}
|
||||
|
||||
.o_event_full_page_ticket_event_logo {
|
||||
max-height: 50px;
|
||||
}
|
||||
|
||||
@@ -20,10 +20,6 @@
|
||||
.o_expense_card_last {
|
||||
border-right: 0px;
|
||||
}
|
||||
|
||||
.o_expense_purple {
|
||||
color: $o-enterprise-color;
|
||||
}
|
||||
}
|
||||
.hr_expense {
|
||||
&.o_list_view, &.o_kanban_view {
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
<div t-attf-class="o_expense_card o_arrow_button flex-grow-1 d-flex flex-column border-right-0">
|
||||
<div class="content_center">
|
||||
<div>
|
||||
<span t-esc="render_monetary_field(expenses[expense]['amount'], expenses[expense]['currency'])" class="h2 o_expense_purple"/>
|
||||
<span t-esc="render_monetary_field(expenses[expense]['amount'], expenses[expense]['currency'])" class="h2 text-odoo"/>
|
||||
</div>
|
||||
<b class="m-2"><span t-esc="expenses[expense]['description']"/></b>
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
.o_timeoff_card {
|
||||
color: $o-enterprise-color;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
@@ -44,10 +43,6 @@
|
||||
}
|
||||
|
||||
.o_timeoff_card_mobile {
|
||||
.o_timeoff_purple {
|
||||
color: $o-enterprise-color;
|
||||
}
|
||||
|
||||
.o_timeoff_green {
|
||||
color: $o-enterprise-primary-color;
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<?xml version="1.0" encoding="UTF-8" ?>
|
||||
<templates xml:space="preserve">
|
||||
<div t-name="hr_holidays.TimeOffCard" owl="1" class="o_timeoff_card py-3">
|
||||
<div t-name="hr_holidays.TimeOffCard" owl="1" class="o_timeoff_card py-3 text-odoo">
|
||||
<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="show_popover" t-value="true"/>
|
||||
@@ -49,7 +49,7 @@
|
||||
<strong t-esc="duration" class="o_timeoff_green"/> / <span t-esc="data.max_leaves"/> <t t-if="data.request_unit == 'hour'">Hours</t><t t-else="">Days</t> <span class="o_timeoff_green">Available</span>
|
||||
</t>
|
||||
<t t-else="">
|
||||
<strong t-esc="duration"/> <t t-if="data.request_unit == 'hour'">Hours</t><t t-else="">Days</t> <span class="o_timeoff_purple">Taken</span>
|
||||
<strong t-esc="duration"/> <t t-if="data.request_unit == 'hour'">Hours</t><t t-else="">Days</t> <span class="text-odoo">Taken</span>
|
||||
</t>
|
||||
</span>
|
||||
</t>
|
||||
|
||||
@@ -13,7 +13,6 @@
|
||||
}
|
||||
|
||||
span {
|
||||
background-color: $o-brand-odoo;
|
||||
padding: 5px;
|
||||
font-size: small;
|
||||
z-index: unset;
|
||||
@@ -127,7 +126,6 @@
|
||||
}
|
||||
|
||||
span {
|
||||
background-color: $o-brand-odoo;
|
||||
padding: 5px;
|
||||
font-size: x-small;
|
||||
z-index: unset;
|
||||
|
||||
@@ -11,10 +11,6 @@
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.o_lunch_purple {
|
||||
color: $o-brand-odoo;
|
||||
}
|
||||
|
||||
.o_flex_basis_0 {
|
||||
flex-basis: 0;
|
||||
}
|
||||
|
||||
@@ -120,7 +120,7 @@
|
||||
<strong class="o_kanban_record_title">
|
||||
<div>
|
||||
<span class="pr-1"><field name="is_favorite" widget="boolean_favorite" nolabel="1"/></span>
|
||||
<div class="float-right o_lunch_purple">
|
||||
<div class="float-right text-odoo">
|
||||
<field name="price" widget="monetary"/>
|
||||
</div>
|
||||
<div t-if="record.is_new.raw_value" class="float-right o_lunch_new_product mr-1 badge-pill badge-success">
|
||||
|
||||
@@ -25,7 +25,6 @@ $o-kanban-medium-record-width: 350px;
|
||||
}
|
||||
|
||||
span {
|
||||
background-color: $o-brand-odoo;
|
||||
padding: 5px;
|
||||
font-size: small;
|
||||
height: auto;
|
||||
|
||||
@@ -56,7 +56,7 @@
|
||||
<t t-name="kanban-box">
|
||||
<div class="oe_kanban_card oe_kanban_global_click">
|
||||
<div class="ribbon ribbon-top-right" attrs="{'invisible': [('active', '=', True)]}">
|
||||
<span class="bg-error">Archived</span>
|
||||
<span class="bg-odoo">Archived</span>
|
||||
</div>
|
||||
<div class="o_kanban_card_content d-flex">
|
||||
<div>
|
||||
|
||||
@@ -30,6 +30,14 @@ $info: $o-info !default;
|
||||
$warning: $o-warning !default;
|
||||
$danger: $o-danger !default;
|
||||
|
||||
$theme-colors: () !default;
|
||||
$theme-colors: map-merge(
|
||||
(
|
||||
"odoo": $o-brand-odoo,
|
||||
),
|
||||
$theme-colors
|
||||
);
|
||||
|
||||
// Options
|
||||
//
|
||||
// Quickly modify global styling by enabling or disabling optional features.
|
||||
|
||||
@@ -341,9 +341,9 @@
|
||||
role="img"
|
||||
aria-label="search"
|
||||
t-on-keydown="(ev) => this._onFacetKeydown(facet, facet_index, ev)">
|
||||
<span t-if="facet.icon" t-attf-class="o_searchview_facet_label {{ facet.icon }}"/>
|
||||
<span t-else="" class="o_searchview_facet_label" t-esc="facet.title"/>
|
||||
<div class="o_facet_values">
|
||||
<span t-if="facet.icon" t-attf-class="o_searchview_facet_label bg-odoo {{ facet.icon }}"/>
|
||||
<span t-else="" class="o_searchview_facet_label bg-odoo" t-esc="facet.title"/>
|
||||
<div class="o_facet_values border border-odoo border-left-0">
|
||||
<t t-foreach="facet.values" t-as="facetValue" t-key="facetValue_index">
|
||||
<span t-if="!facetValue_first" class="o_facet_values_sep" t-esc="facet.separator"/>
|
||||
<span class="o_facet_value" t-esc="facetValue"/>
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
t-attf-class="o_search_panel_section o_search_panel_{{ section.type }}"
|
||||
>
|
||||
<header class="o_search_panel_section_header text-uppercase o_cursor_default">
|
||||
<i t-attf-class="fa {{ section.icon }} o_search_panel_section_icon mr-2"
|
||||
<i t-attf-class="fa {{ section.icon }} o_search_panel_section_icon {{section.type === 'category' && !section.color ? 'text-odoo' : ''}} mr-2"
|
||||
t-att-style="section.color and ('color: ' + section.color)"
|
||||
/>
|
||||
<b t-esc="section.description"/>
|
||||
|
||||
@@ -10,12 +10,12 @@
|
||||
t-on-keydown="ev => this.onFacetKeydown(facet, facet_index, ev)"
|
||||
>
|
||||
<t t-if="facet.icon">
|
||||
<span t-attf-class="o_searchview_facet_label {{ facet.icon }}"/>
|
||||
<span t-attf-class="o_searchview_facet_label bg-odoo {{ facet.icon }}"/>
|
||||
</t>
|
||||
<t t-else="">
|
||||
<span class="o_searchview_facet_label" t-esc="facet.title"/>
|
||||
<span class="o_searchview_facet_label bg-odoo" t-esc="facet.title"/>
|
||||
</t>
|
||||
<div class="o_facet_values">
|
||||
<div class="o_facet_values border border-odoo border-left-0">
|
||||
<t t-foreach="facet.values" t-as="facetValue" t-key="facetValue_index">
|
||||
<t t-if="!facetValue_first">
|
||||
<span class="o_facet_values_sep" t-esc="facet.separator"/>
|
||||
|
||||
@@ -29,10 +29,6 @@ $o-searchpanel-filter-default-color: #D59244;
|
||||
border-right: 1px solid $gray-300;
|
||||
background-color: white;
|
||||
|
||||
.o_search_panel_category .o_search_panel_section_icon {
|
||||
color: $o-brand-odoo;
|
||||
}
|
||||
|
||||
.o_search_panel_filter .o_search_panel_section_icon {
|
||||
color: $o-searchpanel-filter-default-color;
|
||||
}
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
t-attf-class="o_search_panel_section o_search_panel_{{ section.type }}"
|
||||
>
|
||||
<header class="o_search_panel_section_header text-uppercase o_cursor_default">
|
||||
<i t-attf-class="fa {{ section.icon }} o_search_panel_section_icon mr-2"
|
||||
<i t-attf-class="fa {{ section.icon }} o_search_panel_section_icon {{section.type === 'category' && !section.color ? 'text-odoo' : ''}} mr-2"
|
||||
t-att-style="section.color and ('color: ' + section.color)"
|
||||
/>
|
||||
<b t-esc="section.description"/>
|
||||
|
||||
@@ -18,7 +18,6 @@
|
||||
|
||||
.o_searchview_facet_label {
|
||||
align-items: center;
|
||||
color: white;
|
||||
flex: 0 0 auto;
|
||||
padding: 0 3px;
|
||||
@include o-text-overflow($display: flex);
|
||||
|
||||
@@ -5,13 +5,8 @@
|
||||
padding: 1px 25px 3px 5px;
|
||||
|
||||
.o_searchview_facet {
|
||||
border: 1px solid gray('600');
|
||||
background: $o-brand-lightsecondary;
|
||||
|
||||
.o_searchview_facet_label {
|
||||
background-color: $o-brand-odoo;
|
||||
}
|
||||
|
||||
.o_facet_remove {
|
||||
color: gray('600');
|
||||
&:hover {
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
<xpath expr="//div[hasclass('o_kanban_card_header')]" position="before">
|
||||
<field name="website_published" invisible="1"/>
|
||||
<div class="ribbon ribbon-top-right" attrs="{'invisible': [('website_published', '=', False)]}">
|
||||
<span class="o_recruitment_purple">Published</span>
|
||||
<span class="bg-odoo">Published</span>
|
||||
</div>
|
||||
</xpath>
|
||||
<xpath expr="//div[@name='kanban_boxes']" position="inside">
|
||||
|
||||
Reference in New Issue
Block a user