From 97aa0a8dec384ad75eb66045f43384b6e54f1d6e Mon Sep 17 00:00:00 2001 From: qsm-odoo Date: Mon, 12 Mar 2018 16:25:32 +0100 Subject: [PATCH] [REF] *: convert less content to scss content MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Convert content so that the assets compile on app installation. The style is still broken after this as the variables/mixins/... are not defined in the right order (as it did not matter in LESS but does in SCSS). This commit basically changes: - Variables: @​var_hello -> $var-hello - Mixins: .mixin_world() {} -> @​mixin mixin-world {} - Classes used as mixin: .my_class() -> @​extend .my_class - Here there were no other solution than to convert the use of a mixin call by the use of an extend as a first approximation - LESS functions -> SCSS functions (e.g. fade -> rgba) - Move first variable definition before the variable is used - Still need to make sure last variable definition is at the right place --- .../static/src/scss/account_dashboard.scss | 32 +- .../src/scss/account_journal_dashboard.scss | 22 +- .../src/scss/account_reconciliation.scss | 62 +- .../static/src/scss/account_asset.scss | 6 +- .../static/src/scss/base_import.scss | 24 +- addons/board/static/src/scss/dashboard.scss | 2 +- addons/calendar/static/src/scss/calendar.scss | 16 +- addons/event/static/src/scss/event.scss | 8 +- .../static/src/scss/google_calendar.scss | 2 +- .../static/src/scss/hr_attendance.scss | 40 +- .../static/src/scss/hr_org_chart.scss | 149 +++-- .../static/src/scss/hr_job.scss | 20 +- .../static/src/scss/copy_clipboard.scss | 8 +- .../static/src/scss/im_livechat.scss | 2 +- .../src/scss/im_livechat_bootstrap.scss | 20 +- .../views/im_livechat_channel_templates.xml | 1 + addons/lunch/static/src/scss/lunch.scss | 2 +- addons/mail/static/src/scss/chat_window.scss | 62 +- addons/mail/static/src/scss/chatter.scss | 22 +- addons/mail/static/src/scss/composer.scss | 254 ++++---- addons/mail/static/src/scss/discuss.scss | 198 +++--- .../static/src/scss/extended_chat_window.scss | 24 +- addons/mail/static/src/scss/followers.scss | 22 +- .../mail/static/src/scss/mail_activity.scss | 32 +- addons/mail/static/src/scss/systray.scss | 46 +- addons/mail/static/src/scss/thread.scss | 53 +- addons/mail/static/src/scss/variables.scss | 5 + addons/mail/views/mail_templates.xml | 1 + .../static/src/scss/mass_mailing.ui.scss | 58 +- .../static/src/scss/themes/theme_default.scss | 92 ++- .../mrp/static/src/scss/mrp_bom_report.scss | 2 +- addons/note/static/src/scss/note.scss | 14 +- .../static/src/scss/payment_acquirer.scss | 2 +- .../payment/static/src/scss/payment_form.scss | 2 +- .../src/scss/customer_facing_display.scss | 228 +++---- .../static/src/scss/bootstrap.extend.scss | 8 +- addons/portal/static/src/scss/portal.scss | 28 +- .../static/src/scss/project_dashboard.scss | 10 +- .../static/src/scss/sale_timesheet.scss | 8 +- .../static/src/scss/sales_team_dashboard.scss | 6 +- .../src/scss/stock_traceability_report.scss | 28 +- .../theme_default/static/src/scss/colors.scss | 148 ++--- .../src/scss/option_color_amethyst.scss | 52 +- .../static/src/scss/option_color_cobalt.scss | 52 +- .../static/src/scss/option_color_emerald.scss | 50 +- .../static/src/scss/option_color_gold.scss | 50 +- .../static/src/scss/option_color_ruby.scss | 52 +- .../static/src/scss/option_color_stone.scss | 50 +- .../static/src/scss/option_font.scss | 4 +- .../static/src/scss/option_layout_boxed.scss | 2 +- addons/web/static/src/scss/animation.scss | 14 +- addons/web/static/src/scss/base_settings.scss | 124 ++-- .../static/src/scss/bootstrap_overridden.scss | 150 ++--- addons/web/static/src/scss/control_panel.scss | 42 +- addons/web/static/src/scss/data_export.scss | 50 +- addons/web/static/src/scss/datepicker.scss | 22 +- .../web/static/src/scss/domain_selector.scss | 74 +-- addons/web/static/src/scss/dropdown.scss | 34 +- .../web/static/src/scss/dropdown_extra.scss | 12 +- addons/web/static/src/scss/fields.scss | 132 ++-- addons/web/static/src/scss/fields_extra.scss | 18 +- addons/web/static/src/scss/fonts.scss | 46 +- addons/web/static/src/scss/form_view.scss | 204 +++--- .../web/static/src/scss/form_view_extra.scss | 24 +- addons/web/static/src/scss/graph_view.scss | 4 +- .../src/scss/kanban_column_progressbar.scss | 68 +- .../web/static/src/scss/kanban_dashboard.scss | 262 ++++++-- .../src/scss/kanban_examples_dialog.scss | 26 +- addons/web/static/src/scss/kanban_view.scss | 312 +++------ .../static/src/scss/kanban_view_mobile.scss | 16 +- .../static/src/scss/layout_background.scss | 20 +- addons/web/static/src/scss/layout_boxed.scss | 24 +- addons/web/static/src/scss/layout_clean.scss | 22 +- addons/web/static/src/scss/list_view.scss | 36 +- .../web/static/src/scss/list_view_extra.scss | 2 +- addons/web/static/src/scss/mimetypes.scss | 3 +- addons/web/static/src/scss/modal.scss | 24 +- .../static/src/scss/model_field_selector.scss | 54 +- addons/web/static/src/scss/navbar.scss | 68 +- addons/web/static/src/scss/pivot_view.scss | 28 +- addons/web/static/src/scss/progress_bar.scss | 6 +- addons/web/static/src/scss/rainbow.scss | 110 ++-- addons/web/static/src/scss/search_view.scss | 102 +-- .../static/src/scss/search_view_extra.scss | 18 +- addons/web/static/src/scss/tooltip.scss | 18 +- addons/web/static/src/scss/ui.scss | 4 +- addons/web/static/src/scss/utils.scss | 253 ++++---- addons/web/static/src/scss/variables.scss | 114 ++-- addons/web/static/src/scss/views.scss | 36 +- addons/web/static/src/scss/web_calendar.scss | 73 +-- addons/web/static/src/scss/webclient.scss | 36 +- .../web/static/src/scss/webclient_extra.scss | 8 +- .../web/static/src/scss/webclient_layout.scss | 48 +- .../static/src/scss/diagram_view.scss | 2 +- .../static/src/scss/web_editor.common.scss | 186 +++--- .../static/src/scss/web_editor.ui.scss | 613 +++++++++--------- .../static/src/scss/web_editor.variables.scss | 118 ++-- .../static/src/scss/dashboard.scss | 14 +- .../web_tour/static/src/scss/keyframes.scss | 24 +- addons/web_tour/static/src/scss/tip.scss | 176 ++--- .../static/src/scss/website.backend.scss | 68 +- .../static/src/scss/website.edit_mode.scss | 18 +- addons/website/static/src/scss/website.scss | 36 +- .../website/static/src/scss/website.ui.scss | 138 ++-- .../static/src/scss/website_blog.scss | 10 +- .../static/src/scss/website_form.scss | 4 +- .../static/src/scss/s_hr_rating.scss | 48 +- .../views/website_livechat.xml | 1 + .../static/src/scss/website_quotation.scss | 2 +- .../static/src/scss/website_rating.scss | 10 +- .../static/src/scss/website_sale.scss | 4 +- .../static/src/scss/website_sale_backend.scss | 46 +- .../src/scss/website_sale_dashboard.scss | 20 +- .../src/scss/website_sale_frontend.scss | 93 +-- .../src/scss/website_sale_comparison.scss | 4 +- .../static/src/scss/website_sale.scss | 2 +- .../src/scss/website_sale_wishlist.scss | 2 +- .../static/src/scss/website_slides.scss | 56 +- .../src/scss/website_theme_install.scss | 64 +- 119 files changed, 3282 insertions(+), 3299 deletions(-) create mode 100644 addons/mail/static/src/scss/variables.scss diff --git a/addons/account/static/src/scss/account_dashboard.scss b/addons/account/static/src/scss/account_dashboard.scss index 3465a1f3f81..de562759e11 100644 --- a/addons/account/static/src/scss/account_dashboard.scss +++ b/addons/account/static/src/scss/account_dashboard.scss @@ -1,24 +1,24 @@ .o_kanban_view.o_kanban_dashboard.o_account_kanban { &.o_kanban_ungrouped .o_account_dashboard_header { - margin: (0 - @o-kanban-record-margin) (@o-kanban-record-margin - @odoo-horizontal-padding) @o-kanban-record-margin; + margin: (0 - $o-kanban-record-margin) ($o-kanban-record-margin - $odoo-horizontal-padding) $o-kanban-record-margin; } .o_account_dashboard_header { - .o-flex(1, 0, 100%); - .o-flex-flow(column, nowrap); - .o-align-self(flex-start); + @include o-flex(1, 0, 100%); + @include o-flex-flow(column, nowrap); + @include o-align-self(flex-start); width: 100%; height: auto; // cancel o_form_view height 100%, which hides the help tip message at the bottom of the screen min-height: 0%; // cancel o_form_view min-height 100%, which hides the help tip message at the bottom of the screen - background-color: @odoo-view-background-color; + background-color: $odoo-view-background-color; .o_form_statusbar { - padding-right: @odoo-horizontal-padding; + padding-right: $odoo-horizontal-padding; } h4 { - font-size: @font-size-base; + font-size: $font-size-base; font-weight: 500; } @@ -30,31 +30,31 @@ } .o_arrow_button.btn-default { - color: @text-muted; + color: $text-muted; text-transform: none; font-weight: 500; .o_account_dashboard_index { - color: @gray-dark; + color: $gray-dark; } &.o_action_done { - color: @gray-dark; - background-color: @gray-lighter; + color: $gray-dark; + background-color: $gray-lighter; &:after { - border-left-color: @gray-lighter; + border-left-color: $gray-lighter; } .fa-check { - color: @brand-success; + color: $brand-success; } } &:last-of-type { - margin-left: @odoo-horizontal-padding; - padding-left: @odoo-horizontal-padding*.5; - border-left: 1px solid @gray-lighter-dark; + margin-left: $odoo-horizontal-padding; + padding-left: $odoo-horizontal-padding*.5; + border-left: 1px solid $gray-lighter-dark; } } } diff --git a/addons/account/static/src/scss/account_journal_dashboard.scss b/addons/account/static/src/scss/account_journal_dashboard.scss index b0d0bcde045..e068040784d 100644 --- a/addons/account/static/src/scss/account_journal_dashboard.scss +++ b/addons/account/static/src/scss/account_journal_dashboard.scss @@ -6,17 +6,17 @@ } .o_kanban_card_settings { - padding-top: @odoo-horizontal-padding/2; - padding-bottom: @odoo-horizontal-padding/2; + padding-top: $odoo-horizontal-padding/2; + padding-bottom: $odoo-horizontal-padding/2; border-top: 1px solid; - border-color: @odoo-brand-lightsecondary; + border-color: $odoo-brand-lightsecondary; } .o_dashboard_star { font-size: 12px; &.fa-star-o { - color: @odoo-main-color-muted; + color: $odoo-main-color-muted; &:hover { color: gold; } @@ -27,7 +27,7 @@ } .o_dashboard_graph { - margin-bottom: -@odoo-horizontal-padding/2; + margin-bottom: -$odoo-horizontal-padding/2; } } @@ -58,7 +58,7 @@ } g.tick.major { // Don't know why, but leads to strange bold text - // stroke: @odoo-brand-primary; + // stroke: $odoo-brand-primary; line { display: none; @@ -72,13 +72,13 @@ g.nv-linesWrap { g.nv-group.nv-series-0 { fill-opacity: 0.3 !important; - fill: @odoo-brand-primary !important; - stroke: @odoo-brand-primary !important; + fill: $odoo-brand-primary !important; + stroke: $odoo-brand-primary !important; .nv-point { visibility: hidden; r: 3; - stroke: @odoo-brand-primary !important; + stroke: $odoo-brand-primary !important; fill: white; stroke-width: 2; } @@ -99,11 +99,11 @@ g.nv-group.nv-series-0 { g.past { opacity: 0.5; - fill: @odoo-brand-primary !important; + fill: $odoo-brand-primary !important; } g.future { opacity: 0.5; - fill: @odoo-brand-optional !important; + fill: $odoo-brand-optional !important; } } } diff --git a/addons/account/static/src/scss/account_reconciliation.scss b/addons/account/static/src/scss/account_reconciliation.scss index 80183536f2c..5d3e8ec3810 100644 --- a/addons/account/static/src/scss/account_reconciliation.scss +++ b/addons/account/static/src/scss/account_reconciliation.scss @@ -1,9 +1,9 @@ -@actionColWidth: 15px; -@mainTableBordersPadding: 3px; -@lightBorder: 1px solid #bbb; -@accountingBorder: 1px solid #000; -@initialLineBackground: #f0f0f0; -@infoColor: #44c; +$actionColWidth: 15px; +$mainTableBordersPadding: 3px; +$lightBorder: 1px solid #bbb; +$accountingBorder: 1px solid #000; +$initialLineBackground: #f0f0f0; +$infoColor: #44c; .o_reconciliation { @@ -16,9 +16,9 @@ height: 1.5em; line-height: 1.5em; &.statement_name { - .o-text-overflow(); + @include o-text-overflow; &.editable:hover { - outline: 1px dashed @odoo-brand-optional; + outline: 1px dashed $odoo-brand-optional; outline-offset: -1px; cursor: pointer; } @@ -51,7 +51,7 @@ .o_view_noreconciliation { max-width: none; padding: 0 10%; - color: @odoo-main-color-muted; + color: $odoo-main-color-muted; font-size: 125%; } @@ -110,16 +110,16 @@ cursor: pointer; } tr.already_reconciled { - color: @infoColor; + color: $infoColor; } tr.invalid { text-decoration: line-through; } thead td { - border-top: @lightBorder; + border-top: $lightBorder; padding-top: 4px; padding-bottom: 5px; - background-color: @initialLineBackground; + background-color: $initialLineBackground; } tfoot td { color: #bbb; @@ -129,7 +129,7 @@ .cell_action { width: 15px; - color: @gray; + color: $gray; background: #fff; border: 0; .fa-add-remove:before { @@ -182,29 +182,19 @@ td { padding-top: 10px; text-align: center; - color: @infoColor; + color: $infoColor; } } /* Icons */ .toggle_match, .toggle_create { - .o-transform(rotate(0deg)); - .o-transition(transform, 300ms); + @include o-transform(rotate(0deg)); + @include o-transition(transform, 300ms); } - .visible_toggle { + .visible_toggle, &[data-mode="match"] .toggle_match, &[data-mode="create"] .toggle_create { visibility: visible !important; - .o-transform(rotate(90deg)); - } - &[data-mode="match"] { - .toggle_match { - .visible_toggle; - } - } - &[data-mode="create"] { - .toggle_create { - .visible_toggle; - } + @include o-transform(rotate(90deg)); } /* Match view & Create view */ @@ -214,18 +204,18 @@ overflow: hidden; margin-top: 5px; margin-bottom: 5px; - .o-transition(max-height, 250ms); + @include o-transition(max-height, 250ms); } &[data-mode="match"] > .match { max-height: none; - .o-transition(max-height, 400ms); + @include o-transition(max-height, 400ms); } &[data-mode="create"] > .create { max-height: 210px; - .o-transition(max-height, 400ms); + @include o-transition(max-height, 400ms); } } - + /* Match view */ .match { @@ -241,7 +231,7 @@ content: "\f067"; } .match_controls { - padding: 0 0 5px (@actionColWidth+@mainTableBordersPadding); + padding: 0 0 5px ($actionColWidth+$mainTableBordersPadding); .filter { width: 240px; @@ -264,7 +254,7 @@ } .show_more { display: inline-block; - margin-left: (@actionColWidth+@mainTableBordersPadding); + margin-left: ($actionColWidth+$mainTableBordersPadding); margin-top: 5px; } } @@ -272,7 +262,7 @@ /* Create view */ .create { > div { - margin: 0 @actionColWidth; + margin: 0 $actionColWidth; padding: 10px; overflow: auto; border: 1px solid #ddd; @@ -304,7 +294,7 @@ .add_line_container { text-align: center; clear: both; - color: @infoColor; + color: $infoColor; cursor: pointer; } } diff --git a/addons/account_asset/static/src/scss/account_asset.scss b/addons/account_asset/static/src/scss/account_asset.scss index b2e2fb43315..f80cb658718 100644 --- a/addons/account_asset/static/src/scss/account_asset.scss +++ b/addons/account_asset/static/src/scss/account_asset.scss @@ -1,9 +1,9 @@ .o_web_client .o_deprec_lines_toggler { - color: @brand-danger; + color: $brand-danger; &.o_is_posted { - color: @brand-success; + color: $brand-success; } &.o_unposted { - color: @brand-warning; + color: $brand-warning; } } diff --git a/addons/base_import/static/src/scss/base_import.scss b/addons/base_import/static/src/scss/base_import.scss index 4af6f00f069..72fe2651331 100644 --- a/addons/base_import/static/src/scss/base_import.scss +++ b/addons/base_import/static/src/scss/base_import.scss @@ -1,5 +1,5 @@ .oe_import { - .o-webclient-padding(@top: 8px); + @include o-webclient-padding($top: 8px); background-color: white; overflow: auto; position: absolute; // Needed for chrome @@ -7,7 +7,7 @@ right: 0; bottom: 0; left: 0; - @media (max-width: @screen-xs-max) { + @media (max-width: $screen-xs-max) { position: static; } @@ -29,7 +29,7 @@ .oe_import_box { padding: 16px; background: #F0EEEE; - border-radius: @border-radius-base; + border-radius: $border-radius-base; border: solid 1px #dddddd; label { font-weight: normal; @@ -85,7 +85,7 @@ } .oe_import_noheaders { - .text-muted(); + @extend .text-muted; // FIXME was a mixin before scss convertion } /* ------------- ERRORS AND WARNINGS REPORT ------------ */ @@ -97,19 +97,19 @@ padding: 4px; margin: 2px 0; list-style: none; - border-radius: @border-radius-base; + border-radius: $border-radius-base; } .oe_import_report_error { - .bg-danger(); - .text-danger(); + @extend .bg-danger; // FIXME was a mixin before scss convertion + @extend .text-danger; // FIXME was a mixin before scss convertion } .oe_import_report_warning { - .bg-warning(); - .text-warning(); + @extend .bg-warning; // FIXME was a mixin before scss convertion + @extend .text-warning; // FIXME was a mixin before scss convertion } .oe_import_report_info { - .bg-info(); - .text-info(); + @extend .bg-info; // FIXME was a mixin before scss convertion + @extend .text-info; // FIXME was a mixin before scss convertion } } @@ -136,7 +136,7 @@ /* Field dropdown */ .oe_import_selector { - font-size: @font-size-small; + font-size: $font-size-small; ul, li { margin: 0; padding: 0; } diff --git a/addons/board/static/src/scss/dashboard.scss b/addons/board/static/src/scss/dashboard.scss index 51f773a49a4..67f3d818b76 100644 --- a/addons/board/static/src/scss/dashboard.scss +++ b/addons/board/static/src/scss/dashboard.scss @@ -148,5 +148,5 @@ // Favorites menu in control panel .o_add_to_dashboard { display: none; // hidden by default - .o-search-options-dropdown-custom-li; + @include o-search-options-dropdown-custom-li; } diff --git a/addons/calendar/static/src/scss/calendar.scss b/addons/calendar/static/src/scss/calendar.scss index 364584122e9..defbd1efbd6 100644 --- a/addons/calendar/static/src/scss/calendar.scss +++ b/addons/calendar/static/src/scss/calendar.scss @@ -5,15 +5,15 @@ border-radius: 5px; &.accepted { - background-color: @brand-success; + background-color: $brand-success; } &.needsAction { - background-color: @odoo-brand-secondary; + background-color: $odoo-brand-secondary; } &.declined { - background-color: @brand-danger; + background-color: $brand-danger; } } @@ -42,11 +42,11 @@ } .o_calendar_invitation_page { - .o-flex(0, 0, auto); + @include o-flex(0, 0, auto); width: 50%; margin: 30px auto 0; - .o-webclient-padding(@top: 10px, @bottom: 10px); - background-color: @odoo-view-background-color; + @include o-webclient-padding($top: 10px, $bottom: 10px); + background-color: $odoo-view-background-color; .o_logo { width: 15%; @@ -71,9 +71,9 @@ } .o_accepted { - color: @brand-success; + color: $brand-success; } .o_declined { - color: @brand-danger; + color: $brand-danger; } } diff --git a/addons/event/static/src/scss/event.scss b/addons/event/static/src/scss/event.scss index 4f4d8c2bb86..df173a9ab70 100644 --- a/addons/event/static/src/scss/event.scss +++ b/addons/event/static/src/scss/event.scss @@ -4,13 +4,13 @@ position: relative; padding: 0; - .o-flex-display(); + @include o-flex-display; .o_event_left { - .o-flex(1, 1, 25%); + @include o-flex(1, 1, 25%); text-align: center; color: white; - background-color: @odoo-brand-optional; + background-color: $odoo-brand-optional; padding: 8px; .o_day { @@ -19,7 +19,7 @@ } .o_event_right { - .o-flex(1, 1, 75%); + @include o-flex(1, 1, 75%); padding: 8px; margin-left: 8px; } diff --git a/addons/google_calendar/static/src/scss/google_calendar.scss b/addons/google_calendar/static/src/scss/google_calendar.scss index bb1de8cde0b..2f7346ec29c 100644 --- a/addons/google_calendar/static/src/scss/google_calendar.scss +++ b/addons/google_calendar/static/src/scss/google_calendar.scss @@ -8,5 +8,5 @@ img.calendar_img_tuto { margin: 0 0 10px 50px; - border: 2px solid @odoo-brand-secondary; + border: 2px solid $odoo-brand-secondary; } diff --git a/addons/hr_attendance/static/src/scss/hr_attendance.scss b/addons/hr_attendance/static/src/scss/hr_attendance.scss index d5fe332dd49..8473920ea65 100644 --- a/addons/hr_attendance/static/src/scss/hr_attendance.scss +++ b/addons/hr_attendance/static/src/scss/hr_attendance.scss @@ -14,12 +14,12 @@ } #oe_hr_attendance_status { - color: @odoo-brand-secondary; + color: $odoo-brand-secondary; &.oe_hr_attendance_status_green { - color: @brand-success; + color: $brand-success; } &.oe_hr_attendance_status_red { - color: @brand-danger; + color: $brand-danger; } } @@ -35,7 +35,7 @@ top: 0px; bottom: auto; - @media (min-width: @screen-sm-min) { + @media (min-width: $screen-sm-min) { transform: translate(50%, -50%); } } @@ -60,18 +60,18 @@ } .o_hr_attendance_kiosk_mode_container { - .o-flex-display(); - .o-flex-flow(column, nowrap); - .o-justify-content(center); - .o-align-items(center); + @include o-flex-display; + @include o-flex-flow(column, nowrap); + @include o-justify-content(center); + @include o-align-items(center); - @media (min-width: @screen-sm-min) { - .o-position-absolute(0, 0, 0, 0); + @media (min-width: $screen-sm-min) { + @include o-position-absolute(0, 0, 0, 0); } } .o_hr_attendance_warning_message { - color: @brand-warning; + color: $brand-warning; } .o_hr_attendance_random_message { font-style: italic; @@ -113,7 +113,7 @@ margin-bottom: 0; } - @media (min-width: @screen-sm-min) { + @media (min-width: $screen-sm-min) { flex: 0 0 auto; width: 550px; border-radius: 10px; @@ -131,7 +131,7 @@ top: 20px; right: 20px; - @media (min-width: @screen-sm-min) { + @media (min-width: $screen-sm-min) { flex: 0 0 auto; border-radius: 3px; background-color: rgba(255,255,255,0.5); @@ -140,13 +140,13 @@ } .o_hr_attendance_message_container { - .o-flex-display(); - .o-flex-flow(column, nowrap); - .o-justify-content(center); - .o-align-items(center); + @include o-flex-display; + @include o-flex-flow(column, nowrap); + @include o-justify-content(center); + @include o-align-items(center); - @media (min-width: @screen-sm-min) { - .o-position-absolute(0, 0, 0, 0); + @media (min-width: $screen-sm-min) { + @include o-position-absolute(0, 0, 0, 0); } } @@ -186,7 +186,7 @@ margin-bottom: 0; } - @media (min-width: @screen-sm-min) { + @media (min-width: $screen-sm-min) { flex: 0 0 auto; width: 550px; border-radius: 10px; diff --git a/addons/hr_org_chart/static/src/scss/hr_org_chart.scss b/addons/hr_org_chart/static/src/scss/hr_org_chart.scss index 896616d1bcf..c1b2f4b7d51 100644 --- a/addons/hr_org_chart/static/src/scss/hr_org_chart.scss +++ b/addons/hr_org_chart/static/src/scss/hr_org_chart.scss @@ -1,67 +1,67 @@ -@o-org-chart-bg: white; -@o-org-chart-border-color: @odoo-brand-secondary; +$o-org-chart-bg: white; +$o-org-chart-border-color: $odoo-brand-secondary; -@o-org-chart-entry-v-gap: 6px; -@o-org-chart-entry-pic-size: 46px; -@o-org-chart-entry-line-w: 1px; -@o-org-chart-entry-border-color: darken(@o-org-chart-bg, 25%); +$o-org-chart-entry-v-gap: 6px; +$o-org-chart-entry-pic-size: 46px; +$o-org-chart-entry-line-w: 1px; +$o-org-chart-entry-border-color: darken($o-org-chart-bg, 25%); // MIXINS -.o-org-chart-line() { +@mixin o-org-chart-line { content: ''; - background-color: @o-org-chart-bg; - border: 0px solid @o-org-chart-entry-border-color; + background-color: $o-org-chart-bg; + border: 0px solid $o-org-chart-entry-border-color; } // MOBILE LAYOUT CUSTOMIZATIONS -@media screen and (max-width: @screen-xs-max) { +@media screen and (max-width: $screen-xs-max) { #o_employee_right { .o_org_chart_title { font-size: 20px; padding: 5px 0; - border-bottom: 1px solid @o-org-chart-border-color; + border-bottom: 1px solid $o-org-chart-border-color; } } } // SMALL DESKTOP LAYOUT -@media screen and (min-width: @screen-sm-min) { +@media screen and (min-width: $screen-sm-min) { #o_employee_container { - .o-flex-display(); + @include o-flex-display; width: 100%; } #o_employee_main { - .o-flex(1, 1, 60%); + @include o-flex(1, 1, 60%); } #o_employee_right { - .o-flex(0, 1, 35%); + @include o-flex(0, 1, 35%); margin-left: 2%; padding-left: 2%; - border-left: 1px solid @o-org-chart-border-color; + border-left: 1px solid $o-org-chart-border-color; .o_org_chart_title { - color: @gray-light + color: $gray-light } } } // MEDIUM DESKTOP LAYOUT -@media screen and (min-width: @screen-md-min){ +@media screen and (min-width: $screen-md-min){ #o_employee_right { - .o-flex(0, 1, 33%); + @include o-flex(0, 1, 33%); } } // LARGE DESKTOP LAYOUT -@media screen and (min-width: @screen-lg-min){ +@media screen and (min-width: $screen-lg-min){ #o_employee_right { - .o-flex(0, 1, 30%); + @include o-flex(0, 1, 30%); } } #o_employee_right { - @tmp-gap-base: @o-org-chart-entry-pic-size*0.7; + $tmp-gap-base: $o-org-chart-entry-pic-size*0.7; // ORGANIGRAM LINES .o_field_widget, .o_org_chart_group_up, .o_org_chart_group_down { @@ -70,56 +70,56 @@ .o_org_chart_group_up { &:before { - .o-org-chart-line(); - border-left-width: @o-org-chart-entry-line-w; - height: calc(100% ~'+' @o-org-chart-entry-pic-size*0.5) ; - .o-position-absolute( - @top: @o-org-chart-entry-pic-size*0.1 + 5px, - @left: @o-org-chart-entry-pic-size*0.5 - @o-org-chart-entry-line-w*0.5 + @include o-org-chart-line; + border-left-width: $o-org-chart-entry-line-w; + height: calc(100% + #{$o-org-chart-entry-pic-size*0.5}) ; + @include o-position-absolute( + $top: $o-org-chart-entry-pic-size*0.1 + 5px, + $left: $o-org-chart-entry-pic-size*0.5 - $o-org-chart-entry-line-w*0.5 ); } .o_org_chart_entry:last-of-type { &:before { - .o-org-chart-line(); - border-width: 0 0 @o-org-chart-entry-line-w @o-org-chart-entry-line-w; - .size((@o-org-chart-entry-pic-size*0.5) - (@o-org-chart-entry-v-gap*2), @o-org-chart-entry-pic-size*0.5 + @o-org-chart-entry-v-gap*2 ); - .o-position-absolute( - @left: @o-org-chart-entry-pic-size*0.5 - @o-org-chart-entry-line-w*0.5, - @top: 100% + @include o-org-chart-line; + border-width: 0 0 $o-org-chart-entry-line-w $o-org-chart-entry-line-w; + @include size(($o-org-chart-entry-pic-size*0.5) - ($o-org-chart-entry-v-gap*2), $o-org-chart-entry-pic-size*0.5 + $o-org-chart-entry-v-gap*2 ); + @include o-position-absolute( + $left: $o-org-chart-entry-pic-size*0.5 - $o-org-chart-entry-line-w*0.5, + $top: 100% ); } } } .o_org_chart_group_up + .o_org_chart_entry_self { - margin-left: @tmp-gap-base; + margin-left: $tmp-gap-base; & + .o_org_chart_group_down { - margin-left: @tmp-gap-base*2; + margin-left: $tmp-gap-base*2; } } .o_org_chart_group_down { - margin-left: @tmp-gap-base; + margin-left: $tmp-gap-base; &:before { - .o-org-chart-line(); - border-left-width: @o-org-chart-entry-line-w; + @include o-org-chart-line; + border-left-width: $o-org-chart-entry-line-w; height: 100%; - .o-position-absolute( - @top: @o-org-chart-entry-v-gap*-1, - @left: @tmp-gap-base*-0.5 + @o-org-chart-entry-pic-size*0.1 + @o-org-chart-entry-line-w*0.5 + @include o-position-absolute( + $top: $o-org-chart-entry-v-gap*-1, + $left: $tmp-gap-base*-0.5 + $o-org-chart-entry-pic-size*0.1 + $o-org-chart-entry-line-w*0.5 ); } .o_org_chart_entry { &:before { - .o-org-chart-line(); - border-top-width: @o-org-chart-entry-line-w; - .size(@tmp-gap-base, 0); - .o-position-absolute( - @left: @tmp-gap-base*-0.5 + @o-org-chart-entry-pic-size*0.1 + @o-org-chart-entry-line-w*0.5, - @top: @o-org-chart-entry-pic-size*0.5 + @include o-org-chart-line; + border-top-width: $o-org-chart-entry-line-w; + @include size($tmp-gap-base, 0); + @include o-position-absolute( + $left: $tmp-gap-base*-0.5 + $o-org-chart-entry-pic-size*0.1 + $o-org-chart-entry-line-w*0.5, + $top: $o-org-chart-entry-pic-size*0.5 ); } @@ -131,7 +131,7 @@ } &.o_org_chart_more { - margin-top: @o-org-chart-entry-v-gap; + margin-top: $o-org-chart-entry-v-gap; &:before { top: 15px; @@ -142,7 +142,7 @@ // ORGANIGRAM DESIGN .o_org_chart_entry { - margin-bottom: @o-org-chart-entry-v-gap; + margin-bottom: $o-org-chart-entry-v-gap; overflow: visible; margin-top: 0; @@ -157,12 +157,12 @@ float: right; cursor: pointer; margin-right: 5px; - color: @gray-light; - background: @o-org-chart-bg; - border: 1px solid @gray-light; + color: $gray-light; + background: $o-org-chart-bg; + border: 1px solid $gray-light; &:hover { - color: @odoo-brand-optional; - border-color: @odoo-brand-optional; + color: $odoo-brand-optional; + border-color: $odoo-brand-optional; } &:focus { outline: none; @@ -173,14 +173,14 @@ display: block; line-height: 1.2; font-size: 11px; - color: lighten(@gray-light, 15%); + color: lighten($gray-light, 15%); } } .media-object { - .square(@o-org-chart-entry-pic-size*0.8); - margin: @o-org-chart-entry-pic-size*0.1; - box-shadow: 0 0 0 @o-org-chart-entry-line-w darken(@o-org-chart-bg, 20%); + @include square($o-org-chart-entry-pic-size*0.8); + margin: $o-org-chart-entry-pic-size*0.1; + box-shadow: 0 0 0 $o-org-chart-entry-line-w darken($o-org-chart-bg, 20%); background-size: cover; background-position: center center; @@ -190,15 +190,15 @@ border-color: transparent; padding: 0; position: relative; - color: @text-color; + color: $text-color; .o_org_chart_show_more { line-height: 13px; } &:hover { - border-color: @o-org-chart-entry-border-color; - color:@odoo-brand-optional; + border-color: $o-org-chart-entry-border-color; + color:$odoo-brand-optional; } } } @@ -209,25 +209,25 @@ } .media-body > a { padding-left: 10px; - max-width: calc(100% ~'-' 40px); + max-width: calc(100% - 40px); display: block; .media-heading { - color: lighten(@gray-light, 5%); + color: lighten($gray-light, 5%); font-size: 13px; } } &:hover { .media-object { - box-shadow: 0 0 0 @o-org-chart-entry-line-w*2 fade(@odoo-brand-optional, 60%); + box-shadow: 0 0 0 $o-org-chart-entry-line-w*2 rgba($odoo-brand-optional, 0.6); } .media-body > a { .media-heading { - color: @odoo-brand-optional; + color: $odoo-brand-optional; } strong { - color: lighten(@gray-light, 5%); + color: lighten($gray-light, 5%); } } } @@ -235,18 +235,18 @@ &.o_org_chart_entry_self { &:not(:first-child) { - margin-top: @o-org-chart-entry-v-gap*1.5; + margin-top: $o-org-chart-entry-v-gap*1.5; } strong { - color: @text-muted; + color: $text-muted; } .media-object { - .square(@o-org-chart-entry-pic-size); + @include square($o-org-chart-entry-pic-size); margin: 0; - border: @o-org-chart-entry-line-w*2 solid @odoo-brand-optional; - box-shadow: inset 0 0 0 @o-org-chart-entry-line-w*2 white; + border: $o-org-chart-entry-line-w*2 solid $odoo-brand-optional; + box-shadow: inset 0 0 0 $o-org-chart-entry-line-w*2 white; } .media-body { @@ -266,11 +266,11 @@ padding-right: 50px; > a { - .o-position-absolute(@right: 14px); + @include o-position-absolute($right: 14px); } span { - .size(30px, 30px); + @include size(30px, 30px); margin-right: 10px; border-radius: 100%; background-position: center; @@ -283,4 +283,3 @@ margin-bottom: 0; } } - diff --git a/addons/hr_recruitment/static/src/scss/hr_job.scss b/addons/hr_recruitment/static/src/scss/hr_job.scss index 66b1be84a63..852a06d10c2 100644 --- a/addons/hr_recruitment/static/src/scss/hr_job.scss +++ b/addons/hr_recruitment/static/src/scss/hr_job.scss @@ -1,5 +1,5 @@ .o_kanban_view.o_kanban_ungrouped { - .o-flex-display(); + @include o-flex-display; .o_kanban_record { width: 350px; } @@ -7,24 +7,24 @@ .o_kanban_view.o_kanban_dashboard { .o_recruitment_kanban_boxes { - .o-flex-display(); - .o-flex-flow(row, nowrap); + @include o-flex-display; + @include o-flex-flow(row, nowrap); .o_recruitment_kanban_box { position: relative; text-align: center; padding: 0 0 0 0; - .o-flex(1, 1, auto); - .o-flex-display(); - .o-flex-flow(row, nowrap); - .o-justify-content(center); + @include o-flex(1, 1, auto); + @include o-flex-display; + @include o-flex-flow(row, nowrap); + @include o-justify-content(center); &:first-child { - .o-justify-content(flex-start); + @include o-justify-content(flex-start); padding-left: 16px; } &:last-child { - .o-justify-content(flex-end); + @include o-justify-content(flex-end); padding-right: 16px; } @@ -39,7 +39,7 @@ font-size: small; font-weight: 400; margin-left: 4px; - .o-hover-opacity(0.5, 1); + @include o-hover-opacity(0.5, 1); &:before { content: "/ "; diff --git a/addons/im_livechat/static/src/scss/copy_clipboard.scss b/addons/im_livechat/static/src/scss/copy_clipboard.scss index 1d56022f28e..db206941685 100644 --- a/addons/im_livechat/static/src/scss/copy_clipboard.scss +++ b/addons/im_livechat/static/src/scss/copy_clipboard.scss @@ -2,10 +2,10 @@ .o_field_copy { position: relative; border-radius: 5px; - border: 1px solid @btn-primary-border; - font-size: @font-size-small; - color: @odoo-brand-optional; - font-weight: @badge-font-weight; + border: 1px solid $btn-primary-border; + font-size: $font-size-small; + color: $odoo-brand-optional; + font-weight: $badge-font-weight; text-align: center; .o_clipboard_button { &.o_btn_text_copy { diff --git a/addons/im_livechat/static/src/scss/im_livechat.scss b/addons/im_livechat/static/src/scss/im_livechat.scss index c52fc7d2b9e..1620182fcd9 100644 --- a/addons/im_livechat/static/src/scss/im_livechat.scss +++ b/addons/im_livechat/static/src/scss/im_livechat.scss @@ -27,7 +27,7 @@ .o_livechat_rating { /* Livechat Rating : feedback smiley */ - .o-flex(1, 1, auto); + @include o-flex(1, 1, auto); overflow: auto; padding: 15px; diff --git a/addons/im_livechat/static/src/scss/im_livechat_bootstrap.scss b/addons/im_livechat/static/src/scss/im_livechat_bootstrap.scss index 8df74c9796d..b9d31dc05b8 100644 --- a/addons/im_livechat/static/src/scss/im_livechat_bootstrap.scss +++ b/addons/im_livechat/static/src/scss/im_livechat_bootstrap.scss @@ -1,20 +1,20 @@ // bootstrap variables and vendor prefixes needed to embed im_livechat in external pages -@gray-light: lighten(#000, 46.7%); // #777 -@gray-lighter: lighten(#000, 93.5%); // #eee -@screen-xs-max: 767px; -@navbar-height: 44px; +$gray-light: lighten(#000, 46.7%); // #777 +$gray-lighter: lighten(#000, 93.5%); // #eee +$screen-xs-max: 767px; +$navbar-height: 44px; .text-muted { - color: @gray-light; + color: $gray-light; } -.box-sizing(@boxmodel) { - -webkit-box-sizing: @boxmodel; - -moz-box-sizing: @boxmodel; - box-sizing: @boxmodel; +@mixin box-sizing($boxmodel) { + -webkit-box-sizing: $boxmodel; + -moz-box-sizing: $boxmodel; + box-sizing: $boxmodel; } .o_chat_window { &,* { - .box-sizing(border-box); + @include box-sizing(border-box); } .o_chat_header { height: 28px; diff --git a/addons/im_livechat/views/im_livechat_channel_templates.xml b/addons/im_livechat/views/im_livechat_channel_templates.xml index e85293c943a..54c7c7319f2 100644 --- a/addons/im_livechat/views/im_livechat_channel_templates.xml +++ b/addons/im_livechat/views/im_livechat_channel_templates.xml @@ -149,6 +149,7 @@ + diff --git a/addons/lunch/static/src/scss/lunch.scss b/addons/lunch/static/src/scss/lunch.scss index dd19b9d0d95..2e4fc9b22a5 100644 --- a/addons/lunch/static/src/scss/lunch.scss +++ b/addons/lunch/static/src/scss/lunch.scss @@ -7,7 +7,7 @@ padding: 5px 0; + .o_lunch_vignette { - border-top: 1px solid @odoo-brand-lightsecondary; + border-top: 1px solid $odoo-brand-lightsecondary; } } } diff --git a/addons/mail/static/src/scss/chat_window.scss b/addons/mail/static/src/scss/chat_window.scss index cf21202863b..8d43b2b9013 100644 --- a/addons/mail/static/src/scss/chat_window.scss +++ b/addons/mail/static/src/scss/chat_window.scss @@ -1,25 +1,25 @@ -@o-chat-window-bg: #FAFAFA; -@o-chat-window-width: 325px; -@o-mail-chatter-gap: 10px; // has to be defined here as this file is both in +$o-chat-window-bg: #FAFAFA; +$o-chat-window-width: 325px; +$o-mail-chatter-gap: 10px; // has to be defined here as this file is both in // backend and other assets (livechat) -@o-chat-header-height: 46px; -@o-chat-window-zindex: @zindex-modal + 1; +$o-chat-header-height: 46px; +$o-chat-window-zindex: $zindex-modal + 1; .o_chat_window { - .o-flex-display(); - .o-flex-flow(column, nowrap); + @include o-flex-display; + @include o-flex-flow(column, nowrap); position: fixed; - width: @o-chat-window-width; + width: $o-chat-window-width; max-width: 100%; height: 400px; max-height: 100%; font-size: 12px; - background-color: @o-chat-window-bg; + background-color: $o-chat-window-bg; border-radius: 6px 6px 0 0; - z-index: @o-chat-window-zindex; - box-shadow: -5px -5px 10px fade(black, 18%); + z-index: $o-chat-window-zindex; + box-shadow: -5px -5px 10px rgba(black, 0.18); - @media (max-width: @screen-xs-max) { + @media (max-width: $screen-xs-max) { width: 100%; height: 100%!important; box-shadow: none; @@ -33,17 +33,17 @@ } .o_chat_header { - .o-flex-display(); - .o-flex(0, 0, auto); + @include o-flex-display; + @include o-flex(0, 0, auto); color: white; - padding: @o-mail-chatter-gap*0.5 @o-mail-chatter-gap; + padding: $o-mail-chatter-gap*0.5 $o-mail-chatter-gap; border-radius: 3px 3px 0 0; - border-bottom: 1px solid @gray-lighter-dark; - background-color: @odoo-brand-primary; + border-bottom: 1px solid $gray-lighter-dark; + background-color: $odoo-brand-primary; padding: 8px; - @media (max-width: @screen-xs-max) { - height: @o-chat-header-height; + @media (max-width: $screen-xs-max) { + height: $o-chat-header-height; padding-top: 12px; border-radius: 0px; .o_chat_title { @@ -59,30 +59,30 @@ .o_chat_title { cursor: pointer; - .o-flex(1, 1, auto); - .o-text-overflow(); + @include o-flex(1, 1, auto); + @include o-text-overflow; } .o_chat_window_buttons { - .o-flex(0, 0, auto); + @include o-flex(0, 0, auto); .o_chat_window_close, .o_chat_window_expand { color: white; padding: 3px; margin-left: 5px; - .o-hover-opacity(0.7, 1); + @include o-hover-opacity(0.7, 1); } } } .o_mail_thread { - .o-flex(1, 1, auto); + @include o-flex(1, 1, auto); overflow: auto; -webkit-overflow-scrolling: touch; // smooth scrolling in iOS app (Safari) .o_thread_date_separator { margin: 0px 0px 15px 0px; .o_thread_date { - background-color: @o-chat-window-bg; + background-color: $o-chat-window-bg; } } .o_thread_message { @@ -102,11 +102,11 @@ width: auto; height: 28px; color: white; - background-color: @gray-dark; + background-color: $gray-dark; cursor: pointer; box-shadow: none; - @media (max-width: @screen-xs-max) { + @media (max-width: $screen-xs-max) { display: none; } @@ -118,8 +118,8 @@ padding: 5px; .o_total_unread_counter { - .o-position-absolute(-10px, 0, auto, auto); - background-color: @odoo-brand-optional; + @include o-position-absolute(-10px, 0, auto, auto); + background-color: $odoo-brand-optional; padding: 0 2px; font-size: smaller; } @@ -129,7 +129,7 @@ } > ul { - max-width: @o-chat-window-width; + max-width: $o-chat-window-width; padding: 0; > li.o_chat_header { @@ -139,7 +139,7 @@ border-top: 1px solid white; } &:hover { - background-color: darken(@odoo-brand-primary, 10%); + background-color: darken($odoo-brand-primary, 10%); } } } diff --git a/addons/mail/static/src/scss/chatter.scss b/addons/mail/static/src/scss/chatter.scss index 4618cbc73cf..ba863a5c664 100644 --- a/addons/mail/static/src/scss/chatter.scss +++ b/addons/mail/static/src/scss/chatter.scss @@ -10,34 +10,34 @@ } .o_chatter_topbar { - height: @odoo-statusbar-height; + height: $odoo-statusbar-height; position: relative; - margin: @grid-gutter-width*0.5 0 0; + margin: $grid-gutter-width*0.5 0 0; padding: 0; - .o-flex-display(); + @include o-flex-display; > .btn { - height: @odoo-statusbar-height + 1; + height: $odoo-statusbar-height + 1; border: 1px solid transparent; } > .o_followers { - height: @odoo-statusbar-height + 1; + height: $odoo-statusbar-height + 1; border-bottom: 1px solid transparent; - .o-flex(1,1,auto); + @include o-flex(1,1,auto); } } &.o_chatter_composer_active .o_chatter_topbar { > .btn, > .o_followers{ - border-radius: @border-radius-small @border-radius-small 0 0; + border-radius: $border-radius-small $border-radius-small 0 0; border-width: 0 0 1px; - border-bottom-color: @gray-lighter-dark; + border-bottom-color: $gray-lighter-dark; &.o_active { - color: @odoo-brand-primary; - background-color: @gray-lighter; - border-color: @gray-lighter-dark; + color: $odoo-brand-primary; + background-color: $gray-lighter; + border-color: $gray-lighter-dark; border-width: 1px 1px 0; } } diff --git a/addons/mail/static/src/scss/composer.scss b/addons/mail/static/src/scss/composer.scss index 861ddc1d7fa..b19cde9fb2c 100644 --- a/addons/mail/static/src/scss/composer.scss +++ b/addons/mail/static/src/scss/composer.scss @@ -1,7 +1,7 @@ @font-face { font-family: 'emojifont'; - src: local('Segoe UI'), - local('Apple Color Emoji'), + src: local('Segoe UI'), + local('Apple Color Emoji'), local('Android Emoji'), local('Noto Color Emoji'), local('Twitter Color Emoji'), @@ -14,11 +14,11 @@ .o_chat_composer { position: relative; - .o-flex(0, 0, auto); - .o-flex-display(); + @include o-flex(0, 0, auto); + @include o-flex-display; margin: 1px 0; border-top: none; - background: @gray-lighter; + background: $gray-lighter; .o_composer, .o_composer_subject { position: relative; @@ -30,11 +30,11 @@ } .o_composer_subject { - .o-flex-display(); + @include o-flex-display; padding-bottom: 5px; > input { - .o-flex(1, 1, auto); + @include o-flex(1, 1, auto); padding: 5px; margin-right: 30px; } @@ -52,7 +52,7 @@ word-break: break-all; } .o_composer_mention_dropdown .o_mention_proposition > a { - .o-text-overflow(); + @include o-text-overflow; width: 100%; padding: 3px 15px; .o_mention_name { @@ -67,26 +67,26 @@ resize: none; } .btn-icon { - .o-hover-opacity(@default-opacity: 0.8, @hover-opacity: 1); + @include o-hover-opacity($default-opacity: 0.8, $hover-opacity: 1); border: none; } .o_composer_button_full_composer { - .o-position-absolute(auto, 0); + @include o-position-absolute(auto, 0); } - @media (max-width: @screen-xs-max) { + @media (max-width: $screen-xs-max) { .o_composer_button_send { - color: @odoo-brand-optional; + color: $odoo-brand-optional; } } } .o_mail_emoji_container { - padding: 0 @o-mail-chatter-gap @o-mail-chatter-gap 0; - border: 1px solid @gray-lighter-dark; - background-color: @gray-lighter; + padding: 0 $o-mail-chatter-gap $o-mail-chatter-gap 0; + border: 1px solid $gray-lighter-dark; + background-color: $gray-lighter; .o_mail_emoji { - margin: @o-mail-chatter-gap 0 0 @o-mail-chatter-gap; + margin: $o-mail-chatter-gap 0 0 $o-mail-chatter-gap; cursor: pointer; // only in the popover min-width: 20px; min-height: 20px; @@ -95,18 +95,18 @@ // Both inline and not-inline design. Mini-composer disabled. &:not(.o_chat_mini_composer) { - padding: @mail-thread-avatar-size*0.5; - padding-left: @grid-gutter-width*0.5 + @mail-thread-avatar-size + @o-mail-chatter-gap; - border: 1px solid @gray-lighter-dark; + padding: $mail-thread-avatar-size*0.5; + padding-left: $grid-gutter-width*0.5 + $mail-thread-avatar-size + $o-mail-chatter-gap; + border: 1px solid $gray-lighter-dark; border-top: none; .o_chatter_avatar { - .o-position-absolute(0, @left: -@mail-thread-avatar-size - @o-mail-chatter-gap); + @include o-position-absolute(0, $left: -$mail-thread-avatar-size - $o-mail-chatter-gap); } .o_chatter_composer_info, .o_composer_suggested_partners { - .o-flex(0, 0, 100%); - margin-bottom: @o-mail-chatter-gap*0.5; + @include o-flex(0, 0, 100%); + margin-bottom: $o-mail-chatter-gap*0.5; } .o_composer_container { @@ -119,10 +119,10 @@ } .o_composer, .o_composer_subject { - border: 1px solid @gray-lighter-dark; + border: 1px solid $gray-lighter-dark; input { - padding: 0 0 @o-mail-chatter-gap; + padding: 0 0 $o-mail-chatter-gap; border: none; } } @@ -132,34 +132,34 @@ } .o_chatter_composer_tools { - border-top: 1px solid @gray-lighter-dark; - @media (max-width: @screen-xs-max) { + border-top: 1px solid $gray-lighter-dark; + @media (max-width: $screen-xs-max) { margin-top: 10px; } } &:not(.o_chat_inline_composer) { - .o-flex-flow(row, wrap); + @include o-flex-flow(row, wrap); .o_composer_container, .o_composer_button_send { - .o-flex(1, 0, 100%); + @include o-flex(1, 0, 100%); } .o_composer, .o_composer_subject { - padding: @o-mail-chatter-gap @o-mail-chatter-gap 0; + padding: $o-mail-chatter-gap $o-mail-chatter-gap 0; } .o_composer_send { - margin-top: @o-mail-chatter-gap; + margin-top: $o-mail-chatter-gap; } } &.o_chat_inline_composer { .o_composer_container { - .o-flex(1, 1, auto); + @include o-flex(1, 1, auto); } .o_composer { display: flex; min-height: 40px; - padding: @o-mail-chatter-gap @o-mail-chatter-gap 0 @o-mail-chatter-gap; + padding: $o-mail-chatter-gap $o-mail-chatter-gap 0 $o-mail-chatter-gap; border-radius: 2px 0 0 2px; border-right-width: 0; } @@ -168,32 +168,32 @@ border-width: 1px; } .o_composer_input { - .o-flex-flow(row, wrap); + @include o-flex-flow(row, wrap); } .o_composer_text_field { - .o-flex(1, 1, 50%); + @include o-flex(1, 1, 50%); margin: -4px 7px 5px 0px; padding: 2.5px 0px 0px 5px; } .o_chatter_composer_tools { - .o-flex(0, 1, auto); + @include o-flex(0, 1, auto); } .o_composer_attachments_list { - .o-flex(1, 0, 100%); + @include o-flex(1, 0, 100%); } .o_chatter_composer_tools { border: none; - border-left: 1px solid @gray-lighter-dark; - padding-left: @o-mail-chatter-gap*0.5; - .o-transform(translateY(-@o-mail-chatter-gap*0.5)); + border-left: 1px solid $gray-lighter-dark; + padding-left: $o-mail-chatter-gap*0.5; + @include o-transform(translateY(-$o-mail-chatter-gap*0.5)); } .o_composer_button_send { border-radius: 0 3px 3px 0; // Make the button appear as the same size as the subject input - padding: 10px @padding-base-horizontal; - border: 1px solid darken(@odoo-brand-optional, 5%); + padding: 10px $padding-base-horizontal; + border: 1px solid darken($odoo-brand-optional, 5%); border-left-width: 0; } } @@ -202,24 +202,24 @@ // Mini-composer enabled &.o_chat_mini_composer { .o_composer_container { - border-top: 1px solid @gray-lighter-dark; + border-top: 1px solid $gray-lighter-dark; width: 100%; } .o_mail_emoji_container { - .o-position-absolute(auto, 0, 100%, 0); + @include o-position-absolute(auto, 0, 100%, 0); border-bottom-width: 1px; } .o_composer_input { - .o-flex-flow(row, nowrap); + @include o-flex-flow(row, nowrap); .o_chatter_composer_tools { - .o-flex(0, 0, auto); + @include o-flex(0, 0, auto); } } .o_composer_button_send, .o_chatter_avatar { display: none; } - @media (max-width: @screen-xs-max) { + @media (max-width: $screen-xs-max) { .o_composer_button_send { display: inline-block; } @@ -228,7 +228,7 @@ } .o_composer_attachments_list:not(:empty) { - margin-top: @o-mail-chatter-gap; + margin-top: $o-mail-chatter-gap; text-align: justify; } @@ -245,34 +245,34 @@ // Attachment Icons (common for chat thread and chat composer) // ------------------------------------------------------------------ -@o-mail-attachment-image-size: 38px; -@o-mail-attachment-margin: 5px; +$o-mail-attachment-image-size: 38px; +$o-mail-attachment-margin: 5px; .o_attachments_list, .o_attachments_previews { - margin: 0 -@o-mail-attachment-margin 0; - .o-flex-display(); - .o-flex-flow(row, wrap); + margin: 0 -$o-mail-attachment-margin 0; + @include o-flex-display; + @include o-flex-flow(row, wrap); } .o_attachment { position: relative; width: 100%; - padding: @o-mail-attachment-margin; + padding: $o-mail-attachment-margin; - @media (min-width: @screen-sm-min) { + @media (min-width: $screen-sm-min) { width: 50%; } - @media (min-width: @screen-md-min) { - width: percentage(1/4); + @media (min-width: $screen-md-min) { + width: 25%; } .o_attachment_wrap { overflow: hidden; position: relative; - border-bottom: 1px solid fade(black, 10%); + border-bottom: 1px solid rgba(black, 0.1); border-radius: 2px; padding: 4px 6px 0 4px; - background-color: fade(black, 5%); + background-color: rgba(black, 0.05); } &.o_attachment_editable .o_attachment_wrap { @@ -280,10 +280,11 @@ } .o_image { - .square(@o-mail-attachment-image-size); + width: $o-mail-attachment-image-size; + height: $o-mail-attachment-image-size; image-orientation: from-image; // Only supported in Firefox &.o_hover { - .o-hover-opacity(@default-opacity: 1, @hover-opacity: 0.7); + @include o-hover-opacity($default-opacity: 1, $hover-opacity: 0.7); } } @@ -292,10 +293,10 @@ } .caption { - .o-text-overflow(block); + @include o-text-overflow(block); a { - .o-hover-text-color(@default-color: @odoo-main-text-color, @hover-color: @headings-color); + @include o-hover-text-color($default-color: $odoo-main-text-color, $hover-color: $headings-color); } } @@ -304,23 +305,23 @@ } .o_attachment_uploaded, .o_attachment_delete { - .o-position-absolute(0,0,0, @left: auto); - .o-flex-display(); - .o-align-items(center); - .o-justify-content(center); + @include o-position-absolute(0, 0, 0, $left: auto); + @include o-flex-display(); + @include o-align-items(center); + @include o-justify-content(center); width: 45px; } .o_attachment_delete { - background: desaturate(@brand-primary, 50%); + background: desaturate($brand-primary, 50%); color: white; cursor: pointer; font-size: 20px; - .o-transform(translateX(100%)); - .o-transition(all, 0.3s); + @include o-transform(translateX(100%)); + @include o-transition(all, 0.3s); &:hover { - background: @brand-primary; + background: $brand-primary; } } @@ -343,8 +344,8 @@ } &:hover .o_attachment_delete { - .o-transition(all, 0.1s); - .o-transform(translateX(0)); + @include o-transition(all, 0.1s); + @include o-transform(translateX(0)); } } @@ -352,20 +353,20 @@ > .o_attachment { width: 50%; - @media (min-width: @screen-sm-min) { + @media (min-width: $screen-sm-min) { width: percentage(1/3); } - @media (min-width: @screen-md-min) { + @media (min-width: $screen-md-min) { width: percentage(1/4); } - @media (min-width: @screen-lg-min) { + @media (min-width: $screen-lg-min) { width: percentage(1/6); } .o_attachment_wrap { padding: 0; border-radius: 2px; - border: 1px solid @gray-lighter-darker; + border: 1px solid $gray-lighter-darker; } .o_image_box { @@ -373,94 +374,98 @@ padding-top: 75%; .o_attachment_image { - .o-position-absolute(0,0,0,0); + @include o-position-absolute(0, 0, 0, 0); background-size: cover; background-position: center; - .o-transform(scale(1.05)); - .o-transition(all, 0.3s); + @include o-transform(scale(1.05)); + @include o-transition(all, 0.3s); } &:hover .o_attachment_image { - .o-transform(scale(1)); + @include o-transform(scale(1)); } } .o_image_overlay { - .o-position-absolute(@top: 0, @left: 0, @right:0, @bottom:0); - .o-hover-opacity(@default-opacity: 0, @hover-opacity: 1); - .o-linear-gradient(180deg, fade(black, 20%), fade(black, 90%)); - .o-transition(all, 0.3s); + @include o-position-absolute($top: 0, $left: 0, $right:0, $bottom:0); + @include o-hover-opacity($default-opacity: 0, $hover-opacity: 1); + @include o-linear-gradient(180deg, rgba(black, 0.2), rgba(black, 0.9)); + @include o-transition(all, 0.3s); padding: 10px; .o_attachment_title { - .o-position-absolute(@bottom: 7px); + @include o-position-absolute($bottom: 7px); width: 80%; - .o-text-overflow(inline-block); - font-size: @font-size-small; + @include o-text-overflow(inline-block); + font-size: $font-size-small; } .o_attachment_download { - .o-position-absolute(@right: 7px, @bottom:7px); + @include o-position-absolute($right: 7px, $bottom:7px); } } } } -.o_modal_fullscreen { - z-index: @o-chat-window-zindex + 1; - .o-viewer-black-btn () { - background-color: fade(black, 40%); - color: fade(@gray-lighter, 70%); - &:hover { - background-color: fade(black,60%); - color: white; - } +@mixin o-viewer-black-btn { + background-color: rgba(black, 0.4); + color: rgba($gray-lighter, 0.7); - &.disabled { - color: @gray-light; - background: none; - } + &:hover { + background-color: rgba(black, 0.6); + color: white; } + &.disabled { + color: $gray-light; + background: none; + } +} +.o_modal_fullscreen { + z-index: $o-chat-window-zindex + 1; + .o_viewer_content { - .square(100%); position: relative; + width: 100%; + height: 100%; .o_viewer-header { - .o-position-absolute(0, 0, @left: 0); + @include o-position-absolute(0, 0, $left: 0); height: 45px; - padding: @grid-gutter-width*0.5; - background-color: fade(black, 80%); + padding: $grid-gutter-width*0.5; + background-color: rgba(black, 0.8); z-index: 1; color: #FFFFFF; a { - .o-hover-text-color(fade(@gray-lighter,60%), white); + @include o-hover-text-color(rgba($gray-lighter, 0.6), white); } .o_close_btn { - .o-position-absolute(-1px, @grid-gutter-width*0.5); - font-size: @font-size-h1; + @include o-position-absolute(-1px, $grid-gutter-width*0.5); + font-size: $font-size-h1; font-weight: 300; } } .o_loading_img { - .o-position-absolute(@top: 45%, @right: 0, @left: 0); + @include o-position-absolute($top: 45%, $right: 0, $left: 0); } .o_viewer_img_wrapper { cursor: pointer; - .square(100%); position: fixed; - background-color: fade(black, 70%); + width: 100%; + height: 100%; + background-color: rgba(black, 0.7); .o_viewer_zoomer { - .square(100%); - .o-flex-display(); - .o-justify-content(center); - .o-align-items(center); + width: 100%; + height: 100%; + @include o-flex-display; + @include o-justify-content(center); + @include o-align-items(center); padding: 45px 0; img { @@ -476,7 +481,8 @@ } .o_viewer_pdf { - .size(80%, 100%); + width: 80%; + height: 100%; border: 0px; box-shadow: 1px 1px 20px 1px #000; } @@ -488,29 +494,29 @@ } .o_viewer_toolbar { - .o-position-absolute(@left: 50%, @bottom: @grid-gutter-width*0.5); - .o-transform(translate(-50%, -50%)); + @include o-position-absolute($left: 50%, $bottom: $grid-gutter-width*0.5); + @include o-transform(translate(-50%, -50%)); overflow: hidden; border-radius: 4px; - background-color: fade(black, 40%); + background-color: rgba(black, 0.4); .o_viewer_toolbar_btn { - .o-viewer-black-btn(); - padding-left: 8px; + @include o-viewer-black-btn; + padding-left: 8px; padding-right: 8px; } } } .arrow { - .o-position-absolute(50%, @grid-gutter-width*0.5); + @include o-position-absolute(50%, $grid-gutter-width*0.5); border-radius: 100%; padding: 12px 16px 11px 18px; - .o-viewer-black-btn(); + @include o-viewer-black-btn; } .arrow-left { - left: @grid-gutter-width*0.5; + left: $grid-gutter-width*0.5; right: auto; padding: 12px 18px 11px 16px; } diff --git a/addons/mail/static/src/scss/discuss.scss b/addons/mail/static/src/scss/discuss.scss index 4e0ae26dccc..58473d6ad40 100644 --- a/addons/mail/static/src/scss/discuss.scss +++ b/addons/mail/static/src/scss/discuss.scss @@ -1,10 +1,10 @@ // ------------------------------------------------------------------ // Layout // ------------------------------------------------------------------ -@mail-chat-sidebar-width: 250px; +$mail-chat-sidebar-width: 250px; .o_mail_chat { - .o-position-absolute(0, 0, 0, 0); + @include o-position-absolute(0, 0, 0, 0); height: 100%; overflow: hidden; @@ -13,13 +13,13 @@ background-color: #DFA941; color: white; text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25); - .o-flex-display(); - border-bottom: 1px solid @odoo-main-color-muted; + @include o-flex-display; + border-bottom: 1px solid $odoo-main-color-muted; .o_mail_request_permission { - .o-flex-display(); + @include o-flex-display; justify-content: center; - .o-flex(1,1, auto); + @include o-flex(1,1, auto); } > span { font-size: 16px; @@ -38,19 +38,19 @@ } .o_mail_chat_sidebar { - width: @mail-chat-sidebar-width; + width: $mail-chat-sidebar-width; height: 100%; float: left; overflow: auto; - padding: @odoo-horizontal-padding 0; + padding: $odoo-horizontal-padding 0; - @media (min-width: @screen-lg-min) { - width: @mail-chat-sidebar-width + 50px; + @media (min-width: $screen-lg-min) { + width: $mail-chat-sidebar-width + 50px; } .o_mail_sidebar_title { - .o-flex-display(); - padding: 6px @odoo-horizontal-padding 0 @odoo-horizontal-padding; + @include o-flex-display; + padding: 6px $odoo-horizontal-padding 0 $odoo-horizontal-padding; align-items: center; justify-content: space-between; h4 { @@ -65,16 +65,16 @@ } } .o_mail_chat_channel_item { - .o-flex-display(); + @include o-flex-display; width: 100%; - padding: 2px @odoo-horizontal-padding 2px (@odoo-horizontal-padding + 12px); // compensate icon + padding: 2px $odoo-horizontal-padding 2px ($odoo-horizontal-padding + 12px); // compensate icon .o_channel_name { - .o-flex(1, 1, auto); - .o-text-overflow(); + @include o-flex(1, 1, auto); + @include o-text-overflow; } .o_mail_sidebar_needaction, .o_mail_partner_unpin, .o_mail_channel_settings { - .o-flex(0, 0, auto); + @include o-flex(0, 0, auto); } .o_mail_sidebar_needaction { margin: 0 0 0 5px; @@ -87,18 +87,18 @@ } &.o_mail_chat_title_main { - padding: @padding-base-vertical @odoo-horizontal-padding; + padding: $padding-base-vertical $odoo-horizontal-padding; margin-bottom: 2px; } } .o_mail_chat_channel_item + .o_mail_sidebar_title { - margin-top: @padding-base-vertical; + margin-top: $padding-base-vertical; } .o_mail_add_channel { width: 100%; - padding: 5px (@odoo-horizontal-padding + 23px); // compensate icon + padding: 5px ($odoo-horizontal-padding + 23px); // compensate icon position: relative; > input { @@ -106,27 +106,27 @@ padding: 2px 5px; } > span { - .o-position-absolute(7px, @left: 27px); + @include o-position-absolute(7px, $left: 27px); } } } .o_mail_chat_content { - .o-flex-display(); - .o-flex-flow(column, nowrap); + @include o-flex-display; + @include o-flex-flow(column, nowrap); height: 100%; - margin-left: @mail-chat-sidebar-width; + margin-left: $mail-chat-sidebar-width; position: relative; - @media (min-width: @screen-sm-min) { + @media (min-width: $screen-sm-min) { overflow: auto; } - @media (min-width: @screen-lg-min) { - margin-left: @mail-chat-sidebar-width + 50px; + @media (min-width: $screen-lg-min) { + margin-left: $mail-chat-sidebar-width + 50px; } .o_mail_thread { - .o-flex(1, 0, 0); + @include o-flex(1, 0, 0); overflow: auto; padding: 0 0 15px 0; -webkit-overflow-scrolling: touch; // smooth scrolling in iOS app (Safari) @@ -138,11 +138,11 @@ } .o_mail_snackbar { - .o-position-absolute(15px, 15px); + @include o-position-absolute(15px, 15px); padding-top: 10px; padding-bottom: 10px; cursor: pointer; - background-color: darken(@gray, 8%); + background-color: darken($gray, 8%); color: white; } } @@ -151,27 +151,27 @@ // ------------------------------------------------------------------ // Style // ------------------------------------------------------------------ -@sidebar-icon-opacity: 0.7; +$sidebar-icon-opacity: 0.7; .o_mail_chat { .o_mail_chat_sidebar { - background-color: @gray-dark; - color: @gray-lighter-dark; + background-color: $gray-dark; + color: $gray-lighter-dark; .o_mail_chat_channel_item { cursor: pointer; &:hover { - background-color: darken(@gray-dark,2%); + background-color: darken($gray-dark,2%); .o_mail_partner_unpin, .o_mail_channel_settings { - opacity: @sidebar-icon-opacity; + opacity: $sidebar-icon-opacity; } } &.o_active { - background-color: @gray-darker; - box-shadow: inset 3px 0 0 @odoo-brand-optional; + background-color: $gray-darker; + box-shadow: inset 3px 0 0 $odoo-brand-optional; } .o_mail_hash { @@ -179,7 +179,7 @@ } .o_mail_partner_unpin, .o_mail_channel_settings { - .o-hover-opacity(@default-opacity: 0, @hover-opacity: 1); + @include o-hover-opacity($default-opacity: 0, $hover-opacity: 1); } &.o_unread_message { color: white; @@ -188,24 +188,24 @@ > .badge { color: white; - background-color: @odoo-brand-optional; + background-color: $odoo-brand-optional; font-size: 10px; line-height: 16px; height: 18px; } &.o_mail_chat_title_main { - font-size: @font-size-base; + font-size: $font-size-base; &.o_mail_chat_title_starred > .badge { - background-color: @gray-light; - border-color: @gray-light; + background-color: $gray-light; + border-color: $gray-light; } } } > hr { - border-color: @gray; + border-color: $gray; } .o_mail_add_channel { @@ -221,17 +221,17 @@ .o_mail_sidebar_title { h4 { margin: 0; - font-size: @font-size-small; + font-size: $font-size-small; text-transform: uppercase; - color: @gray-light; + color: $gray-light; &.o_mail_open_channels:hover { color: white; } } .o_add { cursor: pointer; - .o-hover-opacity(@sidebar-icon-opacity, 1); - .o-hover-text-color(@gray-light, white); + @include o-hover-opacity($sidebar-icon-opacity, 1); + @include o-hover-text-color($gray-light, white); } } } @@ -244,7 +244,7 @@ .o_thread_message { opacity: 0.5; &.o_thread_selected_message { - padding: 4px @odoo-horizontal-padding; + padding: 4px $odoo-horizontal-padding; opacity: 1; background-color: lightgray; } @@ -256,10 +256,10 @@ font-size: 1em; position: relative; &.o_user_online { - color: @odoo-brand-optional; + color: $odoo-brand-optional; } &.o_user_idle { - color: @brand-warning; + color: $brand-warning; } } @@ -267,14 +267,14 @@ // ------------------------------------------------------------------ // Mobile // ------------------------------------------------------------------ -@media (max-width: @screen-xs-max) { +@media (max-width: $screen-xs-max) { .o_mail_chat { - .o-flex-display(); - .o-flex-flow(column, nowrap); + @include o-flex-display; + @include o-flex-flow(column, nowrap); background: white; .o_mail_chat_mobile_control_panel { - .o-flex(0, 0, auto); + @include o-flex(0, 0, auto); padding: 5px; min-height: 44px; border-bottom: 1px solid #ebebeb; @@ -292,7 +292,7 @@ } .o_enable_searchview, .o_enable_searchview:focus, .o_enable_searchview:hover, .o_enable_searchview:active { - .o-position-absolute(@right: 5px, @top: 5px); + @include o-position-absolute($right: 5px, $top: 5px); color: gray; background: none; font-size: 15px; @@ -303,24 +303,24 @@ } .o_mail_chat_mobile_inbox_buttons { - .o-flex-display(); - .o-flex(0, 0, auto); + @include o-flex-display; + @include o-flex(0, 0, auto); z-index: 2; - box-shadow: 0 2px 4px @gray-lighter-darker; + box-shadow: 0 2px 4px $gray-lighter-darker; .o_channel_inbox_item { - .o-flex(1, 1, auto); + @include o-flex(1, 1, auto); width: 50%; padding: 2%; &.btn-default { - border-bottom: 1px solid @gray-lighter-darker + border-bottom: 1px solid $gray-lighter-darker } } } .o_mail_chat_content { - .o-flex(1, 0, 0); + @include o-flex(1, 0, 0); margin-left: 10px; margin-right: 10px; background-color: transparent; @@ -336,7 +336,7 @@ border: 1px solid #afafaf; border-radius: 4px; > span { - .o-position-absolute(@top: 10px, @left: 10px); + @include o-position-absolute($top: 10px, $left: 10px); } > input { border: none; @@ -346,7 +346,7 @@ } } .o_mail_mobile_tabs { - .o-flex(0, 0, auto); + @include o-flex(0, 0, auto); } } } @@ -356,64 +356,64 @@ // ------------------------------------------------------------------ .o_mail_channel_preview { - .o-flex-display(); - background-color: @gray-lighter; - color: @odoo-main-text-color; + @include o-flex-display; + background-color: $gray-lighter; + color: $odoo-main-text-color; cursor: pointer; overflow: hidden; position: relative; &:hover { - background-color: @gray-lighter-dark; + background-color: $gray-lighter-dark; .o_channel_name { - color: @headings-color; + color: $headings-color; } } &:not(:last-child) { - border-bottom: 1px solid @gray-lighter-darker; + border-bottom: 1px solid $gray-lighter-darker; } .o_mail_channel_image { - .o-flex(0, 0, auto); + @include o-flex(0, 0, auto); position: relative; > img { - .square(100%); + @include square(100%); border-radius: 50%; } &.o_mail_channel_app > img { border-radius: 2px; } .o_mail_user_status { - .o-position-absolute(@bottom: 0px, @right: 0px); + @include o-position-absolute($bottom: 0px, $right: 0px); } } .o_channel_info { - .o-flex(1, 1, 100%); + @include o-flex(1, 1, 100%); overflow: hidden; .o_channel_title { - .o-flex-display(); + @include o-flex-display; .o_channel_name { - .o-flex(0, 1, auto); - .o-text-overflow(); + @include o-flex(0, 1, auto); + @include o-text-overflow; } .o_channel_counter { - .o-flex(1, 1, auto); + @include o-flex(1, 1, auto); } .o_last_message_date { - .o-flex(0, 0, auto); - color: @odoo-main-color-muted; + @include o-flex(0, 0, auto); + color: $odoo-main-color-muted; font-weight: 500; } } .o_last_message_preview { width: 100%; max-height: 20px; - color: @odoo-main-color-muted; - .o-text-overflow(); + color: $odoo-main-color-muted; + @include o-text-overflow; } } &.o_channel_unread { background-color: transparent; &:hover { - background-color: @gray-lighter; + background-color: $gray-lighter; } .o_channel_info { .o_channel_title { @@ -421,29 +421,29 @@ font-weight: 700; } .o_last_message_date { - color: @odoo-brand-optional; + color: $odoo-brand-optional; } } } } } -@media (max-width: @screen-xs-max) { - @o-mail-chatter-mobile-gap: 2%; +@media (max-width: $screen-xs-max) { + $o-mail-chatter-mobile-gap: 2%; .o_main_navbar > ul.o_menu_systray > li.open .dropdown-menu { border: none; } .o_mail_channel_preview { - padding: @o-mail-chatter-mobile-gap; + padding: $o-mail-chatter-mobile-gap; .o_mail_channel_image:not(img) { - width: @o-mail-chatter-mobile-gap*6; + width: $o-mail-chatter-mobile-gap*6; } .o_channel_info, .o_last_message_date { - margin-left: @o-mail-chatter-mobile-gap; + margin-left: $o-mail-chatter-mobile-gap; } .o_channel_name { @@ -455,22 +455,22 @@ } .o_last_message_preview { - margin-top: @o-mail-chatter-mobile-gap*0.5; + margin-top: $o-mail-chatter-mobile-gap*0.5; } } .o_mail_mobile_tabs { - .o-flex-display(); - box-shadow: 0 0 8px @gray-lighter-darker; + @include o-flex-display; + box-shadow: 0 0 8px $gray-lighter-darker; .o_mail_mobile_tab { - .o-flex-display(); - .o-flex(1, 1, auto); + @include o-flex-display; + @include o-flex(1, 1, auto); width: 20%; - .o-flex-flow(column, nowrap); - .o-justify-content(space-between); - padding: @o-mail-chatter-mobile-gap @o-mail-chatter-mobile-gap*2; - box-shadow: 1px 0 0 @gray-lighter-darker; + @include o-flex-flow(column, nowrap); + @include o-justify-content(space-between); + padding: $o-mail-chatter-mobile-gap $o-mail-chatter-mobile-gap*2; + box-shadow: 1px 0 0 $gray-lighter-darker; text-align: center; > span { @@ -479,13 +479,13 @@ font-size: 10px; &.fa { - padding-bottom: @o-mail-chatter-mobile-gap*2; + padding-bottom: $o-mail-chatter-mobile-gap*2; font-size: 1.3em; } } &.active > span { - color: @odoo-brand-optional; + color: $odoo-brand-optional; } } } diff --git a/addons/mail/static/src/scss/extended_chat_window.scss b/addons/mail/static/src/scss/extended_chat_window.scss index fcf92cf052a..9e0174654b1 100644 --- a/addons/mail/static/src/scss/extended_chat_window.scss +++ b/addons/mail/static/src/scss/extended_chat_window.scss @@ -1,23 +1,23 @@ .o_chat_window { &.o_thread_less { .o_chat_search_input { - .o-flex-display(); - .o-align-items(baseline); - padding: @o-mail-chatter-gap*0.5 @o-mail-chatter-gap; + @include o-flex-display; + @include o-align-items(baseline); + padding: $o-mail-chatter-gap*0.5 $o-mail-chatter-gap; > span { - .o-flex(0, 0, auto); + @include o-flex(0, 0, auto); } > input { margin-left: 5px; - padding: @o-mail-chatter-gap*0.5; - .o-flex(1, 1, 100%); + padding: $o-mail-chatter-gap*0.5; + @include o-flex(1, 1, 100%); } } .o_mail_thread { - background-color: @odoo-webclient-background-color; + background-color: $odoo-webclient-background-color; } .o_chat_composer { @@ -33,7 +33,7 @@ padding: 10px; font-size: 13px; } - @media (max-width: @screen-xs-max) { + @media (max-width: $screen-xs-max) { width: 70%; > textarea { padding: 15px 10px; @@ -41,14 +41,14 @@ } } .o_chatter_composer_tools { - .o-position-absolute(@right: 0px, @top: 0px); + @include o-position-absolute($right: 0px, $top: 0px); - @media (max-width: @screen-xs-max) { - .o-position-absolute(@right: 6px, @top: 0px); + @media (max-width: $screen-xs-max) { + @include o-position-absolute($right: 6px, $top: 0px); } button { padding: 8px; - @media (max-width: @screen-xs-max) { + @media (max-width: $screen-xs-max) { padding: 7px 6px 0px 6px; } &.btn-icon { diff --git a/addons/mail/static/src/scss/followers.scss b/addons/mail/static/src/scss/followers.scss index 4057450c2f7..5b7ff2b886f 100644 --- a/addons/mail/static/src/scss/followers.scss +++ b/addons/mail/static/src/scss/followers.scss @@ -1,6 +1,6 @@ .o_followers { float: right; - @media (max-width: @screen-xs-max) { + @media (max-width: $screen-xs-max) { display: none !important; // Hide the followers in mobile } @@ -38,7 +38,7 @@ .o_followers_follow_button { width: 85px; padding-right: 0; - color: @text-color; + color: $text-color; font-weight: bold; .o_follow, .o_followers_unfollow, .o_followers_following { @@ -62,10 +62,10 @@ .fa { &.fa-times { - color: @brand-warning; + color: $brand-warning; } &.fa-check { - color: @brand-success; + color: $brand-success; } } } @@ -91,26 +91,26 @@ font-size: small; .o_partner { - @partner_avatar_size: 24px; + $partner-avatar-size: 24px; position: relative; // required for old design compatibility > a { max-width: 160px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; - height: @partner_avatar_size; - padding: 3px @partner_avatar_size + 8px; + height: $partner-avatar-size; + padding: 3px $partner-avatar-size + 8px; } > img { - .o-position-absolute(); - width: @partner_avatar_size; + @include o-position-absolute; + width: $partner-avatar-size; } .o_remove_follower { - .o-position-absolute(6px, 5px); + @include o-position-absolute(6px, 5px); cursor: pointer; } .o_edit_subtype { - .o-position-absolute(6px, 18px); + @include o-position-absolute(6px, 18px); cursor: pointer; } } diff --git a/addons/mail/static/src/scss/mail_activity.scss b/addons/mail/static/src/scss/mail_activity.scss index 5f1320ce402..58f00c1f4e5 100644 --- a/addons/mail/static/src/scss/mail_activity.scss +++ b/addons/mail/static/src/scss/mail_activity.scss @@ -16,7 +16,7 @@ &.collapsed { margin-bottom: 0; - .o-transition(margin, 0.8s); + @include o-transition(margin, 0.8s); .o_chatter_planned_activities_summary { display: inline-block; @@ -44,12 +44,12 @@ margin-bottom: 8px; img { - .square(31px); + @include square(31px); } .o_avatar_icon { - .o-position-absolute(@right: -5px, @bottom: -5px); - .square(25px); + @include o-position-absolute($right: -5px, $bottom: -5px); + @include square(25px); padding: 6px 5px; text-align: center; line-height: 1.2; @@ -64,12 +64,12 @@ .o_activity_info { vertical-align: baseline; padding: 4px 6px; - background: @gray-lighter; + background: $gray-lighter; border-radius: 2px 2px 0 0; - .o-hover-opacity(1, 1); + @include o-hover-opacity(1, 1); &.collapsed { - .o-hover-opacity(0.5, 1); + @include o-hover-opacity(0.5, 1); background: transparent; } } @@ -93,7 +93,7 @@ .o_thread_message_tools { .o_activity_link { - padding: 0 @padding-base-horizontal; + padding: 0 $padding-base-horizontal; } .o_activity_done { padding-left: 0; @@ -107,13 +107,13 @@ } .o_activity_color_planned { - color: @brand-success; + color: $brand-success; } .o_activity_color_overdue { - color: @brand-danger; + color: $brand-danger; } .o_activity_color_today { - color: @brand-warning; + color: $brand-warning; } } @@ -150,14 +150,14 @@ padding: 0px 0px; & > li:last-child { - background-color: @odoo-brand-lightsecondary; - color: @gray-dark; + background-color: $odoo-brand-lightsecondary; + color: $gray-dark; line-height: 3em; } li > ul.o_activity_log { max-height: 300px; overflow-y: auto; - color: @text-color; + color: $text-color; li { width: 100%; @@ -166,14 +166,14 @@ &.o_activity_label { line-height: 2.5em; padding: 0px 5px; - background-color: @odoo-brand-lightsecondary; + background-color: $odoo-brand-lightsecondary; } &.o_schedule_activity { padding: 8px 10px 8px 0px; vertical-align: middle; &:hover { - background-color: @gray-lighter; + background-color: $gray-lighter; .o_activity_link_kanban { visibility: visible; } diff --git a/addons/mail/static/src/scss/systray.scss b/addons/mail/static/src/scss/systray.scss index 3f123ff70d6..958e1ff2c08 100644 --- a/addons/mail/static/src/scss/systray.scss +++ b/addons/mail/static/src/scss/systray.scss @@ -9,19 +9,19 @@ &.o_no_notification > a { opacity: 0.5; > i { - .o-transform(translateY(0px)); + @include o-transform(translateY(0px)); } .o_notification_counter { display: none; } } &.open .o_mail_navbar_dropdown { - .o-flex-display(); - .o-flex-flow(column, nowrap); + @include o-flex-display; + @include o-flex-flow(column, nowrap); } .o_notification_counter { - .o-position-absolute(@top: 20%, @right: 1px); - background: @odoo-brand-optional; + @include o-position-absolute($top: 20%, $right: 1px); + background: $odoo-brand-optional; color: white; padding: 0em 0.3em; font-size: 0.7em; @@ -31,27 +31,27 @@ padding: 0; .o_spinner { - .o-flex-display(); - .o-align-items(center); - .o-justify-content(center); - color: @odoo-main-text-color; + @include o-flex-display; + @include o-align-items(center); + @include o-justify-content(center); + color: $odoo-main-text-color; height: 50px; } .o_mail_navbar_dropdown_top { - .o-flex-display(); - .o-flex(0, 0, auto); + @include o-flex-display; + @include o-flex(0, 0, auto); justify-content: space-between; - border-bottom: 1px solid @gray-lighter-darker; - box-shadow: 0 0 2px @gray-lighter-darker; + border-bottom: 1px solid $gray-lighter-darker; + box-shadow: 0 0 2px $gray-lighter-darker; .o_filter_button, .o_new_message { - .btn-link; + @extend .btn-link; // FIXME was a mixin before scss convertion padding: 5px; } .o_filter_button { - color: @odoo-main-color-muted; + color: $odoo-main-color-muted; &:hover, &.active { - color: @odoo-brand-optional; + color: $odoo-brand-optional; } &.active { cursor: default; @@ -61,12 +61,12 @@ } .o_mail_navbar_dropdown_channels { - .o-flex(0, 1, auto); + @include o-flex(0, 1, auto); max-height: 400px; min-height: 50px; overflow-y: auto; - @media (min-width: @screen-sm-min) { + @media (min-width: $screen-sm-min) { .o_mail_channel_preview { height: 50px; padding: 5px; @@ -87,12 +87,12 @@ } } .o_activity_filter_button { - .btn-link; + @extend .btn-link; // FIXME was a mixin before scss convertion padding: 2px; } .o_no_activity { cursor: initial; - .o-align-items(center); + @include o-align-items(center); color: grey; opacity: 0.5; padding: 3px; @@ -106,7 +106,7 @@ // Mobile rules // Goal: mock the design of Discuss in mobile -@media (max-width: @screen-xs-max) { +@media (max-width: $screen-xs-max) { .o_mail_navbar_item { .o_notification_counter { top: 10%; @@ -120,7 +120,7 @@ padding: 5px; height: 44px; border-bottom: 1px solid #ebebeb; - box-shadow: 0 0 2px @gray-lighter-darker; + box-shadow: 0 0 2px $gray-lighter-darker; } .o_mail_navbar_dropdown_channels { max-height: none; @@ -132,7 +132,7 @@ left: 0px; right: 0px; background-color: white; - color: @odoo-main-text-color; + color: $odoo-main-text-color; } } } diff --git a/addons/mail/static/src/scss/thread.scss b/addons/mail/static/src/scss/thread.scss index eca57213a8a..9f9ace65de9 100644 --- a/addons/mail/static/src/scss/thread.scss +++ b/addons/mail/static/src/scss/thread.scss @@ -1,8 +1,3 @@ -@mail-thread-avatar-size: 36px; -@mail-thread-icon-opacity: 0.6; -@mail-thread-side-date-opacity: 0.6; -@mail-thread-note: fade(@gray-lighter-dark, 50%); - .o_mail_thread, .o_mail_activity { .o_thread_show_more { text-align: center; @@ -11,11 +6,11 @@ .o_thread_date_separator { margin-top: 15px; margin-bottom: 30px; - @media (max-width: @screen-xs-max) { + @media (max-width: $screen-xs-max) { margin-top: 0px; margin-bottom: 15px; } - border-bottom: 1px solid @gray-lighter-darker; + border-bottom: 1px solid $gray-lighter-darker; text-align: center; .o_thread_date { @@ -30,42 +25,42 @@ .o_thread_new_messages_separator { margin-bottom: 15px; - border-bottom: solid lighten(@odoo-brand-primary, 15%) 1px; + border-bottom: solid lighten($odoo-brand-primary, 15%) 1px; text-align: right; .o_thread_separator_label { position: relative; top: 8px; padding: 0 10px; background: white; - color: lighten(@odoo-brand-primary, 15%); + color: lighten($odoo-brand-primary, 15%); font-size: smaller; } } .o_thread_message { - .o-flex-display(); - padding: 4px @odoo-horizontal-padding; + @include o-flex-display; + padding: 4px $odoo-horizontal-padding; margin-bottom: 0px; &.o_mail_not_discussion { - background-color: @mail-thread-note; - border-bottom: 1px solid @gray-lighter-darker; + background-color: $mail-thread-note; + border-bottom: 1px solid $gray-lighter-darker; } .o_thread_message_sidebar { - .o-flex(0, 0, @mail-thread-avatar-size); + @include o-flex(0, 0, $mail-thread-avatar-size); margin-right: 10px; margin-top: 2px; text-align: center; font-size: smaller; - @media (max-width: @screen-xs-max) { + @media (max-width: $screen-xs-max) { margin-top: 4px; font-size: x-small; } .o_thread_message_avatar { - max-width: @mail-thread-avatar-size; + max-width: $mail-thread-avatar-size; } .o_thread_message_side_date { margin-left: -5px; @@ -82,17 +77,17 @@ cursor: pointer; opacity: 0; &.fa-star { - opacity: @mail-thread-icon-opacity; + opacity: $mail-thread-icon-opacity; color: gold; } } &:hover, &.o_thread_selected_message { .o_thread_message_side_date { - opacity: @mail-thread-side-date-opacity; + opacity: $mail-thread-side-date-opacity; } .o_thread_icon { - opacity: @mail-thread-icon-opacity; + opacity: $mail-thread-icon-opacity; &:hover { opacity: 1; } @@ -104,7 +99,7 @@ } .o_thread_message_core { - .o-flex(1, 1, auto); + @include o-flex(1, 1, auto); min-width: 0; max-width: 100%; word-wrap: break-word; @@ -114,7 +109,7 @@ text-align: justify; } - + .o_mail_subject { font-style: italic; @@ -149,13 +144,13 @@ .o_mail_info { margin-bottom: 2px; - .text-muted(); + @extend .text-muted; // FIXME was a mixin before scss convertion .o_mail_mailto, .o_mail_mailto:hover { - .text-muted(); + @extend .text-muted; // FIXME was a mixin before scss convertion } strong { - color: @headings-color; + color: $headings-color; } } @@ -179,7 +174,7 @@ .o_attachments_list, .o_attachments_previews { &:last-child { - margin-bottom: @grid-gutter-width; + margin-bottom: $grid-gutter-width; } } @@ -189,9 +184,9 @@ .o_thread_tooltip_content { top: 10px; - background: @gray-lighter; + background: $gray-lighter; padding: 4px; - border: solid @gray-lighter 1px; + border: solid $gray-lighter 1px; border-radius: 5px; color: gray; width: 300px; @@ -219,7 +214,7 @@ } .o_mail_no_content { - .o-position-absolute(30%, 0, 0, 0); + @include o-position-absolute(30%, 0, 0, 0); text-align: center; font-size: 115%; } @@ -231,6 +226,6 @@ .o_web_client.o_touch_device { .o_mail_thread .o_thread_icon { - opacity: @mail-thread-icon-opacity; + opacity: $mail-thread-icon-opacity; } } diff --git a/addons/mail/static/src/scss/variables.scss b/addons/mail/static/src/scss/variables.scss new file mode 100644 index 00000000000..ce498f2d03e --- /dev/null +++ b/addons/mail/static/src/scss/variables.scss @@ -0,0 +1,5 @@ +// FIXME moved here since scss convertion +$mail-thread-avatar-size: 36px; +$mail-thread-icon-opacity: 0.6; +$mail-thread-side-date-opacity: 0.6; +$mail-thread-note: rgba($gray-lighter-dark, 0.5); diff --git a/addons/mail/views/mail_templates.xml b/addons/mail/views/mail_templates.xml index b8e930e4028..9c1cb7cddf5 100644 --- a/addons/mail/views/mail_templates.xml +++ b/addons/mail/views/mail_templates.xml @@ -27,6 +27,7 @@ + diff --git a/addons/mass_mailing/static/src/scss/mass_mailing.ui.scss b/addons/mass_mailing/static/src/scss/mass_mailing.ui.scss index 1c6d5b1557a..0854637a003 100644 --- a/addons/mass_mailing/static/src/scss/mass_mailing.ui.scss +++ b/addons/mass_mailing/static/src/scss/mass_mailing.ui.scss @@ -1,25 +1,25 @@ .o_form_view .o_form_sheet .o_notebook .tab-content .tab-pane .o_mail_body { // cancel padding of form_sheet - margin-top: -@odoo-sheet-cancel-tpadding; - margin-left: -@odoo-sheet-cancel-hpadding; - margin-right: -@odoo-sheet-cancel-hpadding; - margin-bottom: -@odoo-sheet-cancel-bpadding; + margin-top: -$odoo-sheet-cancel-tpadding; + margin-left: -$odoo-sheet-cancel-hpadding; + margin-right: -$odoo-sheet-cancel-hpadding; + margin-bottom: -$odoo-sheet-cancel-bpadding; } .o_mail_theme_selector { > a { - .o-position-absolute(0, 0, auto, 0); - height: @odoo-navbar-height; + @include o-position-absolute(0, 0, auto, 0); + height: $odoo-navbar-height; line-height: 31px; border-radius: 0; - background-color: @o-we-color-darker; - color: @o-we-color-text-normal; - .o-flex-display(); - .o-justify-content(center); - .o-align-items(center); + background-color: $o-we-color-darker; + color: $o-we-color-text-normal; + @include o-flex-display; + @include o-justify-content(center); + @include o-align-items(center); &:hover, &:focus, &:active { - color: @o-we-color-text-light; + color: $o-we-color-text-light; } i { @@ -29,15 +29,15 @@ &.open > a { color: white; - background-color: @o-we-color-dark; + background-color: $o-we-color-dark; } .dropdown-menu { - .o-position-absolute(@odoo-navbar-height - 1, -1px, -1px, -1px); + @include o-position-absolute($odoo-navbar-height - 1, -1px, -1px, -1px); margin: 0; border-radius: 0; overflow: auto; - background-color: @o-we-color-dark; + background-color: $o-we-color-dark; > li { margin: 0; @@ -49,8 +49,8 @@ display: none; background-size: cover; padding-top: 50%; - border: 1px solid @o-we-color-light; - border-top: 1px solid @o-we-color-text-normal; + border: 1px solid $o-we-color-light; + border-top: 1px solid $o-we-color-text-normal; &.logo { display: block; @@ -59,7 +59,7 @@ } &:hover > a { - background-color: @o-we-color-darker; + background-color: $o-we-color-darker; .o_thumb { border: 1px solid white; @@ -67,8 +67,8 @@ } &.selected > a .o_thumb { - border: 2px solid @odoo-brand-primary; - background-color: @o-we-color-dark; + border: 2px solid $odoo-brand-primary; + background-color: $o-we-color-dark; } } } @@ -93,17 +93,17 @@ body.o_force_mail_theme_choice { max-width: 25%; > a { - .o-transition(all, 0.3s, ease); + @include o-transition(all, 0.3s, ease); .o_thumb { display: none; padding-top: 107%; - border: 1px solid @o-we-color-light; - border-top: 1px solid @o-we-color-text-normal; - box-shadow: 0 5px 10px fade(black, 80%); + border: 1px solid $o-we-color-light; + border-top: 1px solid $o-we-color-text-normal; + box-shadow: 0 5px 10px rgba(black, 0.8); will-change: transform; - .backface-visibility(hidden); - .o-transition(all, 0.3s); + @include backface-visibility(hidden); + @include o-transition(all, 0.3s); &.small { display: block; @@ -121,10 +121,10 @@ body.o_force_mail_theme_choice { } &:hover > a { - background-color: @o-we-color-dark; + background-color: $o-we-color-dark; .o_thumb { - box-shadow: 0 5px 30px 1px fade(black, 60%); + box-shadow: 0 5px 30px 1px rgba(black, 0.6); } } @@ -135,7 +135,7 @@ body.o_force_mail_theme_choice { opacity: 0.2; > .fa { - .o-position-absolute(0, 0, 0, 0); + @include o-position-absolute(0, 0, 0, 0); text-align: center; font-size: 50px; color: white; diff --git a/addons/mass_mailing/static/src/scss/themes/theme_default.scss b/addons/mass_mailing/static/src/scss/themes/theme_default.scss index aba67dbeb64..704ea7656d7 100644 --- a/addons/mass_mailing/static/src/scss/themes/theme_default.scss +++ b/addons/mass_mailing/static/src/scss/themes/theme_default.scss @@ -1,42 +1,40 @@ -// lessc@1.4.2 - // ============================ // Mass Mailing "Theme Default" // ============================ // ===== Default Theme palette ===== -@o_mm_def_color_alpha: #f5f5f5; -@o_mm_def_color_beta: #ffffff; -@o_mm_def_color_gamma: #706482; -@o_mm_def_color_delta: #464646; -@o_mm_def_color_epsilon: darken(@o_mm_def_color_gamma, 5%); -@o_mm_def_color_zeta: #706482; -@o_mm_def_color_eta: #87a6b5; +$o-mm-def-color-alpha: #f5f5f5; +$o-mm-def-color-beta: #ffffff; +$o-mm-def-color-gamma: #706482; +$o-mm-def-color-delta: #464646; +$o-mm-def-color-epsilon: darken($o-mm-def-color-gamma, 5%); +$o-mm-def-color-zeta: #706482; +$o-mm-def-color-eta: #87a6b5; // ===== Default Theme variables ===== -@o_mm_def_body_width : 600px; -@o_mm_def_body_bobile : 480px; -@o_mm_def_b_radius : 2px; +$o-mm-def-body-width : 600px; +$o-mm-def-body-bobile : 480px; +$o-mm-def-b-radius : 2px; -@o_mm_def_font : -apple-system, "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; -@o_mm_def_text_color : @o_mm_def_color_delta; +$o-mm-def-font : -apple-system, "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; +$o-mm-def-text-color : $o-mm-def-color-delta; -@o_mm_def_btn_bg : @o_mm_def_color_gamma; -@o_mm_def_btn_text : @o_mm_def_color_beta; +$o-mm-def-btn-bg : $o-mm-def-color-gamma; +$o-mm-def-btn-text : $o-mm-def-color-beta; // ===== Colors ===== .bg-beta { - background-color: @o_mm_def_color_zeta; - color: @o_mm_def_color_beta; + background-color: $o-mm-def-color-zeta; + color: $o-mm-def-color-beta; } .text-beta { - color: @o_mm_def_color_zeta; + color: $o-mm-def-color-zeta; } .bg-delta { - background-color: @o_mm_def_color_eta; + background-color: $o-mm-def-color-eta; } .bg-gray-lighter { - background-color: @o_mm_def_color_alpha; + background-color: $o-mm-def-color-alpha; } td { @@ -51,7 +49,7 @@ td { box-sizing: content-box; width: 94%; min-height: 100%; - background-color: @o_mm_def_color_alpha; + background-color: $o-mm-def-color-alpha; padding: 0 3%; // Forces on

and elements as several mail clients does not @@ -60,8 +58,8 @@ td { font-size: 14px; // force bootstrap default } &, p, h1, h2, h3, h4, h5, h6 { - font-family: @o_mm_def_font; - color: lighten(@o_mm_def_text_color, 20%); + font-family: $o-mm-def-font; + color: lighten($o-mm-def-text-color, 20%); } > .o_mail_wrapper { @@ -71,9 +69,9 @@ td { // same width .o_mail_wrapper_td { - width: @o_mm_def_body_width; - border: 1px solid darken(@o_mm_def_color_alpha, 2%); - background-color: @o_mm_def_color_beta; + width: $o-mm-def-body-width; + border: 1px solid darken($o-mm-def-color-alpha, 2%); + background-color: $o-mm-def-color-beta; } } } @@ -81,27 +79,27 @@ td { // ===== Snippets (general) ===== .o_mail_snippet_general { width: 100%; - max-width: @o_mm_def_body_width; // should not be necessary thanks to mail wrapper + max-width: $o-mm-def-body-width; // should not be necessary thanks to mail wrapper margin: 0 auto; h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { - color: @o_mm_def_text_color; + color: $o-mm-def-text-color; } .btn.btn-primary { -webkit-user-select: none; - color: @o_mm_def_btn_text; + color: $o-mm-def-btn-text; border: none; text-decoration: none; font-weight: normal; - font-family: @o_mm_def_font; + font-family: $o-mm-def-font; cursor: pointer; - border-radius: @o_mm_def_b_radius; - background-color: @o_mm_def_btn_bg; + border-radius: $o-mm-def-b-radius; + background-color: $o-mm-def-btn-bg; } a, .btn.btn-link { - color: @o_mm_def_color_epsilon; + color: $o-mm-def-color-epsilon; font-weight: bold; text-decoration: none !important; @@ -118,20 +116,20 @@ td { .separator { height: 2px; - background-color: @o_mm_def_color_alpha; + background-color: $o-mm-def-color-alpha; } .bg-beta { h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { - color: @o_mm_def_color_beta; + color: $o-mm-def-color-beta; } .btn.btn-primary { - background-color: @o_mm_def_color_eta; + background-color: $o-mm-def-color-eta; } a, .btn.btn-link { - color: @o_mm_def_color_eta; + color: $o-mm-def-color-eta; } } @@ -165,7 +163,7 @@ td { } .o_mail_block_steps { - background-color: @o_mm_def_color_alpha; + background-color: $o-mm-def-color-alpha; } .o_mail_block_two_cols, .o_mail_block_three_cols { @@ -196,7 +194,7 @@ td { margin-left: 20px; margin-right: 20px; .o_mail_snippet_general{ - background: darken(@o_mm_def_color_alpha, 2%); + background: darken($o-mm-def-color-alpha, 2%); } } @@ -208,7 +206,7 @@ td { .o_mail_block_comparison_table { .separator { height: 1px; - background-color: darken(@o_mm_def_color_alpha, 15%); + background-color: darken($o-mm-def-color-alpha, 15%); } table table { td, th { @@ -227,7 +225,7 @@ td { .o_mail_block_discount2 { .o_code { padding: 5px 10px; - background: @o_mm_def_color_alpha; + background: $o-mm-def-color-alpha; border-radius: 3px; font-family: monospace; } @@ -235,7 +233,7 @@ td { .o_mail_block_footer_social { .o_mail_table_styles { - border-top: 2px solid @o_mm_def_color_alpha; + border-top: 2px solid $o-mm-def-color-alpha; padding-top: 20px; padding-bottom: 20px; } @@ -253,7 +251,7 @@ td { .o_mail_footer_copy { font-size: 9px; font-weight: bold; - color: lighten(@o_mm_def_text_color, 30%); + color: lighten($o-mm-def-text-color, 30%); } &.o_mail_footer_social_center { @@ -309,15 +307,15 @@ td { } // ===== Mobile ===== -@media screen and (max-width: @o_mm_def_body_bobile) { +@media screen and (max-width: $o-mm-def-body-bobile) { .o_mail_col_mv { display: block!important; - max-width: @o_mm_def_body_bobile!important; + max-width: $o-mm-def-body-bobile!important; width: 100%!important; } .o_mail_table_styles { - max-width: @o_mm_def_body_bobile!important; + max-width: $o-mm-def-body-bobile!important; width: 100%!important; } } diff --git a/addons/mrp/static/src/scss/mrp_bom_report.scss b/addons/mrp/static/src/scss/mrp_bom_report.scss index 423e6f4f065..b72e7697a89 100644 --- a/addons/mrp/static/src/scss/mrp_bom_report.scss +++ b/addons/mrp/static/src/scss/mrp_bom_report.scss @@ -1,5 +1,5 @@ .o_mrp_bom_report_page { - background-color: @odoo-view-background-color; + background-color: $odoo-view-background-color; margin: 16px auto; padding: 24px 16px; .o_mrp_bom_action { diff --git a/addons/note/static/src/scss/note.scss b/addons/note/static/src/scss/note.scss index 926e7ddb913..428c58ec28e 100644 --- a/addons/note/static/src/scss/note.scss +++ b/addons/note/static/src/scss/note.scss @@ -8,7 +8,7 @@ margin-bottom: 0; } .oe_form_field.oe_memo { - margin: 0 (@padding-large-horizontal * -1); + margin: 0 ($padding-large-horizontal * -1); padding: 0; min-height: 200px; @@ -18,8 +18,8 @@ } &.o_form_readonly { .oe_memo { - padding: @padding-large-horizontal; - border-bottom: 1px solid @legend-border-color; + padding: $padding-large-horizontal; + border-bottom: 1px solid $legend-border-color; } } } @@ -30,13 +30,13 @@ .o_channel_info { .o_channel_title { .o_channel_name { - .o-flex(1, 1, 100%); + @include o-flex(1, 1, 100%); } } .o_note_input_box { - .o-flex-display(); + @include o-flex-display; p { - .o-flex(1, 1, auto); + @include o-flex(1, 1, auto); } } .o_note_save { @@ -60,4 +60,4 @@ } } } -} \ No newline at end of file +} diff --git a/addons/payment/static/src/scss/payment_acquirer.scss b/addons/payment/static/src/scss/payment_acquirer.scss index 43c7f23511a..5f71663533e 100644 --- a/addons/payment/static/src/scss/payment_acquirer.scss +++ b/addons/payment/static/src/scss/payment_acquirer.scss @@ -8,7 +8,7 @@ + div { padding-left: 0; - padding-right: @o-kanban-image-width + @o-kanban-inside-hgutter; + padding-right: $o-kanban-image-width + $o-kanban-inside-hgutter; } } diff --git a/addons/payment/static/src/scss/payment_form.scss b/addons/payment/static/src/scss/payment_form.scss index 5e3bb794160..2069fc93f8c 100644 --- a/addons/payment/static/src/scss/payment_form.scss +++ b/addons/payment/static/src/scss/payment_form.scss @@ -43,7 +43,7 @@ } .more_option { - .o-position-absolute(@right: 0px, @bottom: -10px); + @include o-position-absolute($right: 0px, $bottom: -10px); font-size:10px; } diff --git a/addons/point_of_sale/static/src/scss/customer_facing_display.scss b/addons/point_of_sale/static/src/scss/customer_facing_display.scss index 143509ed2a2..7872220bc23 100644 --- a/addons/point_of_sale/static/src/scss/customer_facing_display.scss +++ b/addons/point_of_sale/static/src/scss/customer_facing_display.scss @@ -1,8 +1,8 @@ // out: ../css/customer_facing_display.css, sourcemap: false, compress: false // =========== Variables =========== -@color_gray_lighter: #f6f6f6; -@color_gray_dark: #3E3E3E; +$color-gray-lighter: #f6f6f6; +$color-gray-dark: #3E3E3E; // =========== Animations =========== @keyframes item_in { @@ -17,7 +17,7 @@ } // =========== MIXINS =========== -.pos-bg() { +@mixin pos-bg { background-position: center top; background-size: contain; background-repeat: no-repeat; @@ -31,53 +31,53 @@ } // =========== VENDOR PREFIX =========== -.flex-display() { +@mixin flex-display { -webkit-display: flex; -moz-display: flex; -ms-display: flex; -o-display: flex; display: flex; } -.flex-direction(@direction){ - -webkit-flex-direction: @direction; - -moz-flex-direction: @direction; - -ms-flex-direction: @direction; - -o-flex-direction: @direction; - flex-direction: @direction; +@mixin flex-direction($direction) { + -webkit-flex-direction: $direction; + -moz-flex-direction: $direction; + -ms-flex-direction: $direction; + -o-flex-direction: $direction; + flex-direction: $direction; }; -.flex-grow(@grow) { - -webkit-box-flex: @grow; - -webkit-flex-grow: @grow; - -moz-box-flex: @grow; - -ms-flex-positive: @grow; - flex-grow: @grow; +@mixin flex-grow($grow) { + -webkit-box-flex: $grow; + -webkit-flex-grow: $grow; + -moz-box-flex: $grow; + -ms-flex-positive: $grow; + flex-grow: $grow; } -.flex(@flex) { - -webkit-box-flex: @flex; - -webkit-flex: @flex; - -moz-box-flex: @flex; - -ms-flex: @flex; - flex: @flex; +@mixin flex($flex) { + -webkit-box-flex: $flex; + -webkit-flex: $flex; + -moz-box-flex: $flex; + -ms-flex: $flex; + flex: $flex; } -.align-items(@align){ - -webkit-box-align: @align; - -webkit-align-items: @align; - -moz-box-align: @align; - -ms-flex-align: @align; - -ms-grid-row-align: @align; - align-items: @align; +@mixin align-items($align) { + -webkit-box-align: $align; + -webkit-align-items: $align; + -moz-box-align: $align; + -ms-flex-align: $align; + -ms-grid-row-align: $align; + align-items: $align; }; -.justify-content(@justify){ - -webkit-box-pack: @justify; - -webkit-justify-content: @justify; - -moz-box-pack: @justify; - -ms-flex-pack: @justify; - justify-content: @justify; +@mixin justify-content($justify) { + -webkit-box-pack: $justify; + -webkit-justify-content: $justify; + -moz-box-pack: $justify; + -ms-flex-pack: $justify; + justify-content: $justify; } -.flex-wrap(@wrap){ - -webkit-flex-wrap: @wrap; - -ms-flex-wrap: @wrap; - flex-wrap: @wrap; +@mixin flex-wrap($wrap) { + -webkit-flex-wrap: $wrap; + -ms-flex-wrap: $wrap; + flex-wrap: $wrap; } @@ -89,28 +89,28 @@ body { font-smooth: always; .pos-customer_facing_display { - background-color: @color_gray_lighter; + background-color: $color-gray-lighter; font-size: 2vw; font-family: Futura, HelveticaNeue, Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 300; width: 100%; height: 100%; - .flex-display(); - .flex-direction(row); + @include flex-display; + @include flex-direction(row); .pos-customer_products, .pos-payment_info { height: 100%; padding: 2%; - .flex-display(); - .flex-direction(column); - .flex-grow(1); + @include flex-display; + @include flex-direction(column); + @include flex-grow(1); } .pos_orderlines { width: 100%; height: 100%; - .flex-display(); - .flex-direction(column); + @include flex-display; + @include flex-direction(column); .pos_orderlines_list { overflow-y: scroll; @@ -124,10 +124,10 @@ body { padding: 1%; border-radius: 0.3vw; height: auto; - .flex(0 1 auto); - .flex-display(); - .flex-direction(row); - .align-items(center); + @include flex(0 1 auto); + @include flex-display; + @include flex-direction(row); + @include align-items(center); &:last-of-type { animation: item_in 1s ease; @@ -155,11 +155,11 @@ body { text-align: left; margin-right: 4%; font-size: 80%; - .flex-grow(1); + @include flex-grow(1); &:first-child { margin-right: 2%; - .flex(1 1 1%); + @include flex(1 1 1%); } &:nth-child(2) { @@ -190,36 +190,36 @@ body { .pos-payment_info { max-width: 30%; padding: 2% 2% 1% 2%; - .flex-direction(column); - .justify-content(space-between); + @include flex-direction(column); + @include justify-content(space-between); .pos-adv, .pos-company_logo { - .pos-bg(); + @include pos-bg; } .pos-company_logo { background-image: url(/logo); margin-bottom: 10%; - .flex(0 0 20%); + @include flex(0 0 20%); } .pos-adv { margin-bottom: 5%; border-bottom: 10px solid transparent; - box-shadow: 0 1px fade(@color_gray_lighter, 20%); - .flex(1 1 60%); + box-shadow: 0 1px rgba($color-gray-lighter, 0.2); + @include flex(1 1 60%); } .pos-payment_info_details{ .pos-total, .pos-paymentlines { - .flex-direction(row); - .flex-display(); - .flex-wrap(wrap); - .justify-content(space-between); - .align-items(baseline); + @include flex-direction(row); + @include flex-display; + @include flex-wrap(wrap); + @include justify-content(space-between); + @include align-items(baseline); > div { - .flex(1 0 48%); + @include flex(1 0 48%); &:nth-child(even) { font-weight: bold; font-size: 120%; @@ -241,7 +241,7 @@ body { .pos-odoo_logo_container { text-align: right; margin-top: 10%; - .flex(0 1 auto); + @include flex(0 1 auto); img { max-width: 40px; @@ -256,7 +256,7 @@ body { .pos-customer_facing_display { font-size: 2vh; height: 100%; - .flex-direction(column); + @include flex-direction(column); &:before { content: ""; @@ -276,7 +276,7 @@ body { width: 99vw; margin:0.5vh; border-width: 0; - .flex-display(); + @include flex-display; } &.pos-js_no_ADV { @@ -294,7 +294,7 @@ body { overflow: hidden; .pos_orderlines { - .flex(1 0 auto); + @include flex(1 0 auto); .pos_orderlines_item { > div:nth-child(2) { @@ -309,7 +309,7 @@ body { padding-right: 1.5vh; height: auto; .pos_orderlines_item { - box-shadow: 0 .1vh .1vh darken(@color_gray_lighter, 10%); + box-shadow: 0 .1vh .1vh darken($color-gray-lighter, 10%); margin-bottom: 1vh; > div { font-size: 100%; @@ -324,10 +324,10 @@ body { overflow: hidden; padding-top: 0; min-height: 120px; - .flex(0 1 23vw); - .flex-direction(row); - .align-items(center); - .justify-content(space-between); + @include flex(0 1 23vw); + @include flex-direction(row); + @include align-items(center); + @include justify-content(space-between); .pos-company_logo { margin: 0; @@ -335,12 +335,12 @@ body { margin-right: 5%; height: 100%; padding: 0; - .flex(1 1 20%); + @include flex(1 1 20%); } .pos-payment_info_details { - .flex(0 1 50%); - .flex-direction(column); + @include flex(0 1 50%); + @include flex-direction(column); min-width: 170px; .pos-total { @@ -387,7 +387,7 @@ body { display: none!important; } .pos-payment_info_details { - .flex(1 0 100%); + @include flex(1 0 100%); .pos-total { font-size: 6vw; @@ -417,10 +417,10 @@ body { opacity: 0.1; background: repeating-linear-gradient( 45deg, - @color_gray_lighter, - @color_gray_lighter 5px, - @color_gray_dark 5px, - @color_gray_dark 10px + $color-gray-lighter, + $color-gray-lighter 5px, + $color-gray-dark 5px, + $color-gray-dark 10px )!important; } @@ -469,42 +469,42 @@ body { // =========== PALETTE GENERATOR =========== .palette_variant ( - @bg-info: @color_gray_dark, - @text-info: @color_gray_lighter, - @bg-products: @color_gray_lighter, - @text-products: lighten(@color_gray_dark, 10%), - @card-bg: white, - @card-text: @color_gray_dark, - @card-shadow: darken(@bg-products, 30%)) { + $bg-info: $color-gray-dark, + $text-info: $color-gray-lighter, + $bg-products: $color-gray-lighter, + $text-products: lighten($color-gray-dark, 10%), + $card-bg: white, + $card-text: $color-gray-dark, + $card-shadow: darken($bg-products, 30%)) { .pos-payment_info { - background: @bg-info; - color: @text-info; + background: $bg-info; + color: $text-info; } .pos-customer_products { - background: @bg-products; - color: @text-products; + background: $bg-products; + color: $text-products; .pos_orderlines_list .pos_orderlines_item { - background-color: @card-bg; - color: @card-text; - box-shadow: 0 .1vh .1vh @card-shadow; + background-color: $card-bg; + color: $card-text; + box-shadow: 0 .1vh .1vh $card-shadow; div:nth-child(2) { - border-color: fade(@card-text, 30%); + border-color: rgba($card-text, 0.3); } } } @media all and (orientation: portrait) { &:before { - background: @bg-info; + background: $bg-info; } } // Editor dropdown buttons #oe_manipulators .oe_overlay > .oe_overlay_options .snippet-option-pos_palette > ul > li > & { - background: @bg-products!important; + background: $bg-products!important; &:after { content: ""; @@ -513,28 +513,28 @@ body { right: 0; bottom:0; left: 50px; - background: @bg-info; + background: $bg-info; } &:before { - text-shadow: 0 0 1px (#fff - @bg-products); + text-shadow: 0 0 1px (#fff - $bg-products); } } }; // =========== PALETTE =========== -.pos-palette_01 { .palette_variant(); } -.pos-palette_02 { .palette_variant( #364152, #e6e7e8, #ecf2f6, #364152, white, @color_gray_dark, #364152 ); } -.pos-palette_03 { .palette_variant( #1BA39C, @color_gray_lighter, #ececec ); } -.pos-palette_04 { .palette_variant( #0b7b6c, @color_gray_lighter, #efeeec); } -.pos-palette_05 { .palette_variant( #E26868, @color_gray_lighter, #ececec ); } -.pos-palette_06 { .palette_variant( #9E373B, @color_gray_lighter); } -.pos-palette_07 { .palette_variant( #ce9934, white, #ececec ); } -.pos-palette_08 { .palette_variant( #a48c77, @color_gray_lighter, #ececec ); } +.pos-palette_01 { @include palette-variant; } +.pos-palette_02 { @include palette-variant(#364152, #e6e7e8, #ecf2f6, #364152, white, $color-gray-dark, #364152 ); } +.pos-palette_03 { @include palette-variant(#1BA39C, $color-gray-lighter, #ececec ); } +.pos-palette_04 { @include palette-variant(#0b7b6c, $color-gray-lighter, #efeeec); } +.pos-palette_05 { @include palette-variant(#E26868, $color-gray-lighter, #ececec ); } +.pos-palette_06 { @include palette-variant(#9E373B, $color-gray-lighter); } +.pos-palette_07 { @include palette-variant(#ce9934, white, #ececec ); } +.pos-palette_08 { @include palette-variant(#a48c77, $color-gray-lighter, #ececec ); } -.pos-palette_09 { .palette_variant( linear-gradient(30deg, #014d43, #127e71), @color_gray_lighter, #ececec ); } -.pos-palette_10 { .palette_variant( linear-gradient(30deg, #e2316c, #ea4c89), white, #ececec ); } -.pos-palette_11 { .palette_variant( linear-gradient(30deg, #362b3d, #5b4a63), white, #ececec ); } +.pos-palette_09 { @include palette-variant(linear-gradient(30deg, #014d43, #127e71), $color-gray-lighter, #ececec ); } +.pos-palette_10 { @include palette-variant(linear-gradient(30deg, #e2316c, #ea4c89), white, #ececec ); } +.pos-palette_11 { @include palette-variant(linear-gradient(30deg, #362b3d, #5b4a63), white, #ececec ); } -.pos-palette_12 { .palette_variant( #434343, #e6e6e6, #5b5b5b, #bdb9b9, #f5f5f5); } -.pos-palette_13 { .palette_variant( linear-gradient(30deg, #1a1b1f, #3d3f45), white, #a2a2ab, @color_gray_lighter, @color_gray_lighter); } +.pos-palette_12 { @include palette-variant(#434343, #e6e6e6, #5b5b5b, #bdb9b9, #f5f5f5); } +.pos-palette_13 { @include palette-variant(linear-gradient(30deg, #1a1b1f, #3d3f45), white, #a2a2ab, $color-gray-lighter, $color-gray-lighter); } diff --git a/addons/portal/static/src/scss/bootstrap.extend.scss b/addons/portal/static/src/scss/bootstrap.extend.scss index 942f34ed31e..55bbb15410d 100644 --- a/addons/portal/static/src/scss/bootstrap.extend.scss +++ b/addons/portal/static/src/scss/bootstrap.extend.scss @@ -11,7 +11,7 @@ text-align: justify; } -@media (max-width: @screen-xs-max) { +@media (max-width: $screen-xs-max) { .text-left-not-xs, .text-center-not-xs, .text-right-not-xs, .text-justify-not-xs { text-align: inherit; } @@ -28,7 +28,7 @@ text-align: justify; } } -@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { +@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) { .text-left-not-sm, .text-center-not-sm, .text-right-not-sm, .text-justify-not-sm { text-align: inherit; } @@ -45,7 +45,7 @@ text-align: justify; } } -@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { +@media (min-width: $screen-md-min) and (max-width: $screen-md-max) { .text-left-not-md, .text-center-not-md, .text-right-not-md, .text-justify-not-md { text-align: inherit; } @@ -62,7 +62,7 @@ text-align: justify; } } -@media (min-width: @screen-lg-min) { +@media (min-width: $screen-lg-min) { .text-left-not-lg, .text-center-not-lg, .text-right-not-lg, .text-justify-not-lg { text-align: inherit; } diff --git a/addons/portal/static/src/scss/portal.scss b/addons/portal/static/src/scss/portal.scss index e6344b3d5d9..a34693ef5ac 100644 --- a/addons/portal/static/src/scss/portal.scss +++ b/addons/portal/static/src/scss/portal.scss @@ -3,10 +3,10 @@ /// rules. /// -// Resize and vertically align navbar’s items relative to @navbar-height -.o-w-fill-navbar(@ratio: 0.8) { - height: round(@navbar-height * @ratio); - margin-top: round(@navbar-height * (1 - @ratio) / 2); +// Resize and vertically align navbar’s items relative to $navbar-height +@mixin o-w-fill-navbar($ratio: 0.8) { + height: round($navbar-height * $ratio); + margin-top: round($navbar-height * (1 - $ratio) / 2); } // Frontend general @@ -30,7 +30,7 @@ header { padding: 0 15px; img { - .o-w-fill-navbar(); + @include o-w-fill-navbar; } } } @@ -38,9 +38,9 @@ header { margin-bottom: 0; ul.nav > li { &.divider { - .o-w-fill-navbar(); - border-right: 1px solid @navbar-default-link-disabled-color; - @media (max-width: @screen-xs-max) { + @include o-w-fill-navbar; + border-right: 1px solid $navbar-default-link-disabled-color; + @media (max-width: $screen-xs-max) { display: none; } } @@ -50,7 +50,7 @@ header { } } .nav.navbar-nav.pull-right { - @media (max-width: @screen-xs-max) { + @media (max-width: $screen-xs-max) { float: none!important; } } @@ -146,15 +146,15 @@ hr { // Images spacing img, .media_iframe_video, .o_image { &.pull-right { - margin-left: @grid-gutter-width / 2; + margin-left: $grid-gutter-width / 2; } &.pull-left { - margin-right: @grid-gutter-width / 2; + margin-right: $grid-gutter-width / 2; } } img { // Make all images responsive by default but with inline-block display - .img-responsive(inline-block); + @include img-responsive(inline-block); } // Others @@ -170,7 +170,7 @@ img { width: 100%; } div { - .o-position-absolute(@left: 0, @bottom: 0); + @include o-position-absolute($left: 0, $bottom: 0); background-color: rgba(0, 0, 0, 0.4); opacity: 0.85; width: 100%; @@ -328,7 +328,7 @@ img { .o_portal_chatter_message_title { p { font-size:85%; - color:@odoo-main-color-muted; + color:$odoo-main-color-muted; margin: 0px; } } diff --git a/addons/project/static/src/scss/project_dashboard.scss b/addons/project/static/src/scss/project_dashboard.scss index e0331ad5790..50cbb7b4ac9 100644 --- a/addons/project/static/src/scss/project_dashboard.scss +++ b/addons/project/static/src/scss/project_dashboard.scss @@ -1,7 +1,7 @@ .o_kanban_view.o_kanban_dashboard.o_project_kanban { .o_project_kanban_boxes { - .o-flex-display(); - .o-flex-flow(row, nowrap); + @include o-flex-display; + @include o-flex-flow(row, nowrap); .o_project_kanban_box { position: relative; @@ -32,7 +32,7 @@ font-size: small; font-weight: 400; margin-left: 4px; - .o-hover-opacity(0.5, 1); + @include o-hover-opacity(0.5, 1); &:before { content: "/ "; @@ -66,10 +66,10 @@ outline: 2px solid transparent; box-shadow: 0px 0px 1px 1px #ccc; &.o_selected { - outline-color: @odoo-brand-optional; + outline-color: $odoo-brand-optional; } > img { - .o-position-absolute(@top: 0; @left: 0; @right: 0; @bottom: 0); + @include o-position-absolute($top: 0, $left: 0, $right: 0, $bottom: 0); margin: auto; max-height: 100%; max-width: 100%; diff --git a/addons/sale_timesheet/static/src/scss/sale_timesheet.scss b/addons/sale_timesheet/static/src/scss/sale_timesheet.scss index 6a0662f3b83..0e2caa12f72 100644 --- a/addons/sale_timesheet/static/src/scss/sale_timesheet.scss +++ b/addons/sale_timesheet/static/src/scss/sale_timesheet.scss @@ -2,7 +2,7 @@ .o_timesheet_plan_sale_timesheet { [type='action'] { - color: @odoo-brand-optional; + color: $odoo-brand-optional; cursor: pointer; } @@ -47,7 +47,7 @@ cursor: pointer; } .o_progress_non_billable_project { - background-color: @brand-primary; + background-color: $brand-primary; color: white; cursor: pointer; } @@ -82,14 +82,14 @@ text-align: center; } th.o_right_bordered, td.o_right_bordered { - border-right: 2px solid @odoo-brand-optional; + border-right: 2px solid $odoo-brand-optional; text-align: center; } .o_timesheet_forecast_sale_order{ font-weight: bold; & > td:first-child { - color: @odoo-brand-optional; + color: $odoo-brand-optional; } } .o_timesheet_forecast_sale_order_line{ diff --git a/addons/sales_team/static/src/scss/sales_team_dashboard.scss b/addons/sales_team/static/src/scss/sales_team_dashboard.scss index 97156706e5e..ac72624b83a 100644 --- a/addons/sales_team/static/src/scss/sales_team_dashboard.scss +++ b/addons/sales_team/static/src/scss/sales_team_dashboard.scss @@ -1,7 +1,7 @@ -@dashboard-bg-color: white; +$dashboard-bg-color: white; .o_kanban_view.o_kanban_dashboard.o_salesteam_kanban { - @sale-table-spacing: 10px; + $sale-table-spacing: 10px; .o_kanban_record { .o_sales_team_kanban_graph_section { @@ -27,7 +27,7 @@ } g.tick.major { // Don't know why, but leads to strange bold text - // stroke: @odoo-brand-primary; + // stroke: $odoo-brand-primary; line { display: none; diff --git a/addons/stock/static/src/scss/stock_traceability_report.scss b/addons/stock/static/src/scss/stock_traceability_report.scss index 8d4052b9683..0d144dec6dc 100644 --- a/addons/stock/static/src/scss/stock_traceability_report.scss +++ b/addons/stock/static/src/scss/stock_traceability_report.scss @@ -1,16 +1,16 @@ -.o_stock_reports_lines(@border-width: 5px, @font-weight: inherit, @border-top-style: initial, @border-bottom-style: initial) { - border-width: @border-width; +@mixin o-stock-reports-lines($border-width: 5px, $font-weight: inherit, $border-top-style: initial, $border-bottom-style: initial) { + border-width: $border-width; border-left-style: hidden; border-right-style: hidden; - font-weight: @font-weight; - border-top-style: @border-top-style; - border-bottom-style: @border-bottom-style; + font-weight: $font-weight; + border-top-style: $border-top-style; + border-bottom-style: $border-bottom-style; } .o_stock_reports_body_print { background-color: white; color: black; .o_stock_reports_level0 { - .o_stock_reports_lines(@border-width: 1px, @font-weight: bold, @border-top-style: solid, @border-bottom-style: groove); + @include o-stock-reports-lines($border-width: 1px, $font-weight: bold, $border-top-style: solid, $border-bottom-style: groove); } } @@ -20,16 +20,16 @@ } } .o_stock_reports_page { - @media (max-width: @screen-md-min) { + @media (max-width: $screen-md-min) { overflow-x:scroll; } - background-color: @odoo-view-background-color; + background-color: $odoo-view-background-color; &.o_stock_reports_no_print { padding-bottom: 125px; - margin: @odoo-horizontal-padding auto; - .o-webclient-padding(@top: @odoo-sheet-vpadding, @bottom: @odoo-sheet-vpadding); + margin: $odoo-horizontal-padding auto; + @include o-webclient-padding($top: $odoo-sheet-vpadding, $bottom: $odoo-sheet-vpadding); .o_stock_reports_level0 { - .o_stock_reports_lines(@border-width: 1px, @font-weight: normal, @border-top-style: solid, @border-bottom-style: groove); + @include o-stock-reports-lines($border-width: 1px, $font-weight: normal, $border-top-style: solid, $border-bottom-style: groove); } .o_stock_reports_table { white-space: nowrap; @@ -74,16 +74,16 @@ border-bottom: thin groove; } .o_stock_reports_level1 { - .o_stock_reports_lines(@border-width: 2px, @border-top-style: hidden, @border-bottom-style: solid); + @include o-stock-reports-lines($border-width: 2px, $border-top-style: hidden, $border-bottom-style: solid); } .o_stock_reports_level2 { - .o_stock_reports_lines(@border-width: 1px, @border-top-style: solid, @border-bottom-style: solid); + @include o-stock-reports-lines($border-width: 1px, $border-top-style: solid, $border-bottom-style: solid); > td > span:last-child { margin-left: 25px; } } .o_stock_reports_default_style { - .o_stock_reports_lines(@border-width: 0px, @border-top-style: solid, @border-bottom-style: solid); + @include o-stock-reports-lines($border-width: 0px, $border-top-style: solid, $border-bottom-style: solid); > td > span:last-child { margin-left: 50px; } diff --git a/addons/theme_default/static/src/scss/colors.scss b/addons/theme_default/static/src/scss/colors.scss index fbfa3d35269..e893f5de84e 100644 --- a/addons/theme_default/static/src/scss/colors.scss +++ b/addons/theme_default/static/src/scss/colors.scss @@ -1,95 +1,95 @@ /* Clean Colors */ -@color-blue: #3498DB; -@color-turquoise: #1ABC9C; -@color-green: #2ECC71; -@color-yellow: #F1C40F; -@color-orange: #E67E22; -@color-red: #E74C3C; -@color-pink: #f74b94; -@color-purple: #9B59B6; -@color-brown: #7b5844; +$color-blue: #3498DB; +$color-turquoise: #1ABC9C; +$color-green: #2ECC71; +$color-yellow: #F1C40F; +$color-orange: #E67E22; +$color-red: #E74C3C; +$color-pink: #f74b94; +$color-purple: #9B59B6; +$color-brown: #7b5844; -@color-blue-dark: #2980B9; -@color-turquoise-dark: #16A085; -@color-green-dark: #27AE60; -@color-yellow-dark: #f3ac12; -@color-orange-dark: #D35400; -@color-red-dark: #C0392B; -@color-pink-dark: #ea3884; -@color-purple-dark: #8E44AD; -@color-brown-dark: #604434; +$color-blue-dark: #2980B9; +$color-turquoise-dark: #16A085; +$color-green-dark: #27AE60; +$color-yellow-dark: #f3ac12; +$color-orange-dark: #D35400; +$color-red-dark: #C0392B; +$color-pink-dark: #ea3884; +$color-purple-dark: #8E44AD; +$color-brown-dark: #604434; -@color-blue-light: lighten(@color-blue, 20%); -@color-turquoise-light: lighten(@color-turquoise, 20%); -@color-green-light: lighten(@color-green, 20%); -@color-yellow-light: lighten(@color-yellow, 20%); -@color-orange-light: lighten(@color-orange, 20%); -@color-red-light: lighten(@color-red, 20%); -@color-pink-light: lighten(@color-pink, 20%); -@color-purple-light: lighten(@color-purple, 20%); -@color-brown-light: lighten(@color-brown, 20%); +$color-blue-light: lighten($color-blue, 20%); +$color-turquoise-light: lighten($color-turquoise, 20%); +$color-green-light: lighten($color-green, 20%); +$color-yellow-light: lighten($color-yellow, 20%); +$color-orange-light: lighten($color-orange, 20%); +$color-red-light: lighten($color-red, 20%); +$color-pink-light: lighten($color-pink, 20%); +$color-purple-light: lighten($color-purple, 20%); +$color-brown-light: lighten($color-brown, 20%); -@color-clouds: #ECF0F1; -@color-silver: #BDC3C7; -@color-concrete: #95A5A6; -@color-stone: #7F8C8D; -@color-asphalt: #34495E; -@color-midnight: #2C3E50; +$color-clouds: #ECF0F1; +$color-silver: #BDC3C7; +$color-concrete: #95A5A6; +$color-stone: #7F8C8D; +$color-asphalt: #34495E; +$color-midnight: #2C3E50; -@color-concrete-dark: #445b5c; +$color-concrete-dark: #445b5c; /* +++++ NEW COLORS +++++ */ -@color-wind: #f7f7f7; -@color-clay: #e1dcd5; -@color-sand: #c5bcb1; -@color-beach: #f3bf91; -@color-forest: #254c3a; -@color-twilight: #3b2c50; -@color-burgundy: #8e362d; -@color-marine: #212d3a; +$color-wind: #f7f7f7; +$color-clay: #e1dcd5; +$color-sand: #c5bcb1; +$color-beach: #f3bf91; +$color-forest: #254c3a; +$color-twilight: #3b2c50; +$color-burgundy: #8e362d; +$color-marine: #212d3a; /* GRAYS --------------------------------------------------------- */ -@gray-darker: lighten(#000, 20%); -@gray-dark: lighten(#000, 40%); -@gray: lighten(#000, 55%); -@gray-light: lighten(#000, 70%); -@gray-lighter: lighten(#000, 80%); +$gray-darker: lighten(#000, 20%); +$gray-dark: lighten(#000, 40%); +$gray: lighten(#000, 55%); +$gray-light: lighten(#000, 70%); +$gray-lighter: lighten(#000, 80%); /* Backgrounds Colors ------------------------------------------------*/ -@bg-blue: background(@color-blue); -@bg-turquoise: background(@color-turquoise); -@bg-green: background(@color-green); -@bg-yellow: background(@color-yellow); -@bg-orange: background(@color-orange); -@bg-red: background(@color-red); -@bg-pink: background(@color-pink); -@bg-purple: background(@color-purple); -@bg-brown: background(@color-brown); +$bg-blue: background($color-blue); +$bg-turquoise: background($color-turquoise); +$bg-green: background($color-green); +$bg-yellow: background($color-yellow); +$bg-orange: background($color-orange); +$bg-red: background($color-red); +$bg-pink: background($color-pink); +$bg-purple: background($color-purple); +$bg-brown: background($color-brown); /* ---- Default Color HTML Class ---- */ -.bg-blue { background-color: @color-blue;} -.bg-turquoise { background-color: @color-turquoise;} -.bg-green { background-color: @color-green;} -.bg-yellow { background-color: @color-yellow;} -.bg-orange { background-color: @color-orange;} -.bg-red { background-color: @color-red;} -.bg-pink { background-color: @color-pink;} -.bg-purple { background-color: @color-purple;} -.bg-brown { background-color: @color-brown;} +.bg-blue { background-color: $color-blue;} +.bg-turquoise { background-color: $color-turquoise;} +.bg-green { background-color: $color-green;} +.bg-yellow { background-color: $color-yellow;} +.bg-orange { background-color: $color-orange;} +.bg-red { background-color: $color-red;} +.bg-pink { background-color: $color-pink;} +.bg-purple { background-color: $color-purple;} +.bg-brown { background-color: $color-brown;} -.text-blue { color: @color-blue;} -.text-turquoise { color: @color-turquoise;} -.text-green { color: @color-green;} -.text-yellow { color: @color-yellow;} -.text-orange { color: @color-orange;} -.text-red { color: @color-red;} -.text-pink { color: @color-pink;} -.text-purple { color: @color-purple;} -.text-brown { color: @color-brown;} \ No newline at end of file +.text-blue { color: $color-blue;} +.text-turquoise { color: $color-turquoise;} +.text-green { color: $color-green;} +.text-yellow { color: $color-yellow;} +.text-orange { color: $color-orange;} +.text-red { color: $color-red;} +.text-pink { color: $color-pink;} +.text-purple { color: $color-purple;} +.text-brown { color: $color-brown;} \ No newline at end of file diff --git a/addons/theme_default/static/src/scss/option_color_amethyst.scss b/addons/theme_default/static/src/scss/option_color_amethyst.scss index ef509d6325d..ed66abd08ac 100644 --- a/addons/theme_default/static/src/scss/option_color_amethyst.scss +++ b/addons/theme_default/static/src/scss/option_color_amethyst.scss @@ -1,77 +1,77 @@ /* GRAYS --------------------------------------------------------- */ -@gray-darker: lighten(#000, 30%); +$gray-darker: lighten(#000, 30%); /* COLORS --------------------------------------------------------- */ -@color-primary: @color-purple; -@color-success: @color-purple-dark; -@color-info: @color-twilight; -@color-warning: @color-red-dark; -@color-danger: @color-midnight; +$color-primary: $color-purple; +$color-success: $color-purple-dark; +$color-info: $color-twilight; +$color-warning: $color-red-dark; +$color-danger: $color-midnight; /* COLORED BG -------------------------------------------------------- */ .bg-primary { - background-color: @color-clouds; + background-color: $color-clouds; } .bg-success { - background-color: @color-purple; + background-color: $color-purple; } .bg-info { - background-color: @color-twilight; + background-color: $color-twilight; } .bg-warning { - background-color: @color-purple-dark; + background-color: $color-purple-dark; } .bg-danger { - background-color: @color-midnight; + background-color: $color-midnight; } /* TEXTS & LINKS --------------------------------------------------- */ -@text-muted: @color-primary; -@link-color: @color-primary; -@link-hover-color: @color-success; +$text-muted: $color-primary; +$link-color: $color-primary; +$link-hover-color: $color-success; /* BUTTONS --------------------------------------------------------- */ -@btn-primary-bg: @color-silver; -@btn-success-bg: @color-concrete; -@btn-info-bg: @color-purple; -@btn-warning-bg: @color-purple-light; -@btn-danger-bg: @color-red; +$btn-primary-bg: $color-silver; +$btn-success-bg: $color-concrete; +$btn-info-bg: $color-purple; +$btn-warning-bg: $color-purple-light; +$btn-danger-bg: $color-red; .btn .fa { color: white;} .btn-default .fa { - color: @gray-dark;} + color: $gray-dark;} /* TRANSPARENT BG --------------------------------------------------- */ /* Used in snippets Prx Image Color and Prx Image Shade ------------- */ -.bg-transparent-color { background: @color-twilight; opacity: 0.85;} +.bg-transparent-color { background: $color-twilight; opacity: 0.85;} .bg-transparent-shade { background: black; opacity: 0.5;} /* Footer ----------------------------------------------------------- */ #wrapwrap footer { - background-color: @color-concrete-dark; - color: @gray-light; + background-color: $color-concrete-dark; + color: $gray-light; } footer ul li a { - color: @color-clouds; + color: $color-clouds; } footer ul li a:hover { color: white; text-decoration: none; } footer h4 { - color: @gray-lighter; + color: $gray-lighter; padding-bottom: 12px; text-transform: uppercase; } footer .fa { - color: @color-concrete; + color: $color-concrete; } \ No newline at end of file diff --git a/addons/theme_default/static/src/scss/option_color_cobalt.scss b/addons/theme_default/static/src/scss/option_color_cobalt.scss index a7e90b26be1..5c8eae78d53 100644 --- a/addons/theme_default/static/src/scss/option_color_cobalt.scss +++ b/addons/theme_default/static/src/scss/option_color_cobalt.scss @@ -1,74 +1,74 @@ /* COLORS --------------------------------------------------------- */ -@color-primary: @color-blue; -@color-success: @color-turquoise; -@color-info: @color-green; -@color-warning: @color-asphalt; -@color-danger: @color-midnight; +$color-primary: $color-blue; +$color-success: $color-turquoise; +$color-info: $color-green; +$color-warning: $color-asphalt; +$color-danger: $color-midnight; /* COLORED BG -------------------------------------------------------- */ .bg-primary { - background-color: @color-wind; + background-color: $color-wind; } .bg-success { - background-color: @color-silver; + background-color: $color-silver; } .bg-info { - background-color: @color-blue; + background-color: $color-blue; } .bg-warning { - background-color: @color-blue-dark; + background-color: $color-blue-dark; } .bg-danger { - background-color: @color-asphalt; + background-color: $color-asphalt; } /* TEXTS & LINKS --------------------------------------------------- */ -@text-muted: @color-primary; -@link-color: @color-primary; -@link-hover-color: @color-info; +$text-muted: $color-primary; +$link-color: $color-primary; +$link-hover-color: $color-info; /* BUTTONS --------------------------------------------------------- */ -@btn-primary-bg: @color-blue; -@btn-success-bg: @color-turquoise; -@btn-info-bg: @color-green; -@btn-warning-bg: @color-orange; -@btn-danger-bg: @color-red; +$btn-primary-bg: $color-blue; +$btn-success-bg: $color-turquoise; +$btn-info-bg: $color-green; +$btn-warning-bg: $color-orange; +$btn-danger-bg: $color-red; .btn .fa { color: white;} .btn-default .fa { - color: @gray-dark;} + color: $gray-dark;} /* TRANSPARENT BG --------------------------------------------------- */ /* Used in snippets Prx Image Color and Prx Image Shade ------------- */ -.bg-transparent-color { background: @color-blue-dark; opacity: 0.9;} +.bg-transparent-color { background: $color-blue-dark; opacity: 0.9;} .bg-transparent-shade { background: black; opacity: 0.5;} /* Footer ----------------------------------------------------------- */ #wrapwrap footer { - background-color: @color-midnight; - color: @gray; + background-color: $color-midnight; + color: $gray; } footer ul li a { - color: @color-silver; + color: $color-silver; } footer ul li a:hover { - color: @color-clouds; + color: $color-clouds; text-decoration: none; } footer h4 { - color: @color-stone; + color: $color-stone; padding-bottom: 12px; text-transform: uppercase; } footer .fa { - color: @gray-light; + color: $gray-light; } diff --git a/addons/theme_default/static/src/scss/option_color_emerald.scss b/addons/theme_default/static/src/scss/option_color_emerald.scss index 69df3204fcc..ab1dc35b132 100644 --- a/addons/theme_default/static/src/scss/option_color_emerald.scss +++ b/addons/theme_default/static/src/scss/option_color_emerald.scss @@ -1,73 +1,73 @@ /* COLORS --------------------------------------------------------- */ -@color-primary: @color-green; -@color-success: @color-turquoise; -@color-info: @color-turquoise-dark; -@color-warning: @color-asphalt; -@color-danger: @color-midnight; +$color-primary: $color-green; +$color-success: $color-turquoise; +$color-info: $color-turquoise-dark; +$color-warning: $color-asphalt; +$color-danger: $color-midnight; /* COLORED BG -------------------------------------------------------- */ .bg-primary { - background-color: @color-wind; + background-color: $color-wind; } .bg-success { - background-color: @color-silver; + background-color: $color-silver; } .bg-info { - background-color: @color-green-dark; + background-color: $color-green-dark; } .bg-warning { - background-color: @color-green; + background-color: $color-green; } .bg-danger { - background-color: @color-forest; + background-color: $color-forest; } /* TEXTS & LINKS --------------------------------------------------- */ -@text-muted: @color-success; -@link-color: @color-success; -@link-hover-color: @color-primary; +$text-muted: $color-success; +$link-color: $color-success; +$link-hover-color: $color-primary; /* BUTTONS --------------------------------------------------------- */ -@btn-primary-bg: @color-green; -@btn-success-bg: @color-turquoise; -@btn-info-bg: @color-blue; -@btn-warning-bg: @color-orange; -@btn-danger-bg: @color-red; +$btn-primary-bg: $color-green; +$btn-success-bg: $color-turquoise; +$btn-info-bg: $color-blue; +$btn-warning-bg: $color-orange; +$btn-danger-bg: $color-red; .btn .fa { color: white;} .btn-default .fa { - color: @gray-dark;} + color: $gray-dark;} /* TRANSPARENT BG --------------------------------------------------- */ /* Used in snippets Prx Image Color and Prx Image Shade ------------- */ -.bg-transparent-color { background: @color-green-dark; opacity: 0.9;} +.bg-transparent-color { background: $color-green-dark; opacity: 0.9;} .bg-transparent-shade { background: black; opacity: 0.5;} /* Footer ----------------------------------------------------------- */ #wrapwrap footer { - background-color: @color-concrete-dark; - color: @gray; + background-color: $color-concrete-dark; + color: $gray; } footer ul li a { - color: @color-clouds; + color: $color-clouds; } footer ul li a:hover { color: white; text-decoration: none; } footer h4 { - color: @color-silver; + color: $color-silver; padding-bottom: 12px; text-transform: uppercase; } footer .fa { - color: @color-clouds; + color: $color-clouds; } diff --git a/addons/theme_default/static/src/scss/option_color_gold.scss b/addons/theme_default/static/src/scss/option_color_gold.scss index 77fe9a683df..3cc62a3f1a3 100644 --- a/addons/theme_default/static/src/scss/option_color_gold.scss +++ b/addons/theme_default/static/src/scss/option_color_gold.scss @@ -1,75 +1,75 @@ /* COLORS --------------------------------------------------------- */ -@color-primary: @color-orange; -@color-success: @color-red; -@color-info: @color-yellow-dark; -@color-warning: @color-red-dark; -@color-danger: @color-orange-dark; +$color-primary: $color-orange; +$color-success: $color-red; +$color-info: $color-yellow-dark; +$color-warning: $color-red-dark; +$color-danger: $color-orange-dark; /* COLORED BG -------------------------------------------------------- */ .bg-primary { - background-color: @color-sand; + background-color: $color-sand; } .bg-success { - background-color: @color-yellow; + background-color: $color-yellow; } .bg-info { - background-color: @color-orange; + background-color: $color-orange; } .bg-warning { - background-color: @color-yellow-dark; + background-color: $color-yellow-dark; } .bg-danger { - background-color: @color-orange-dark; + background-color: $color-orange-dark; } /* TEXTS & LINKS ------------------------------------------------------- */ -@text-muted: @gray; -@link-color: @color-info; -@link-hover-color: @color-primary; +$text-muted: $gray; +$link-color: $color-info; +$link-hover-color: $color-primary; /* BUTTONS --------------------------------------------------------- */ -@btn-primary-bg: @color-yellow; -@btn-success-bg: @color-orange; -@btn-info-bg: @color-yellow-dark; -@btn-warning-bg: @color-orange-dark; -@btn-danger-bg: @color-red-dark; +$btn-primary-bg: $color-yellow; +$btn-success-bg: $color-orange; +$btn-info-bg: $color-yellow-dark; +$btn-warning-bg: $color-orange-dark; +$btn-danger-bg: $color-red-dark; .btn .fa { color: white;} .btn-default .fa { - color: @gray-dark;} + color: $gray-dark;} /* TRANSPARENT BG --------------------------------------------------- */ /* Used in snippets Prx Image Color and Prx Image Shade ------------- */ -.bg-transparent-color { background: @color-orange-dark; opacity: 0.85;} +.bg-transparent-color { background: $color-orange-dark; opacity: 0.85;} .bg-transparent-shade { background: black; opacity: 0.5;} /* Footer ----------------------------------------------------------- */ #wrapwrap footer { - background-color: @color-orange-dark; + background-color: $color-orange-dark; color: white; } footer ul li a { - color: @color-beach; + color: $color-beach; } footer ul li a:hover { - color: @color-yellow; + color: $color-yellow; text-decoration: none; } footer h4 { - color: @color-beach; + color: $color-beach; padding-bottom: 12px; text-transform: uppercase; } footer .fa { - color: @color-beach; + color: $color-beach; } diff --git a/addons/theme_default/static/src/scss/option_color_ruby.scss b/addons/theme_default/static/src/scss/option_color_ruby.scss index 63bca9ecc92..12fce8ea4e6 100644 --- a/addons/theme_default/static/src/scss/option_color_ruby.scss +++ b/addons/theme_default/static/src/scss/option_color_ruby.scss @@ -1,78 +1,78 @@ /* GRAYS --------------------------------------------------------- */ -@gray: lighten(#000, 50%); +$gray: lighten(#000, 50%); /* COLORS --------------------------------------------------------- */ -@color-primary: @color-red; -@color-success: @color-red-dark; -@color-info: @color-orange; -@color-warning: @color-purple; -@color-danger: @color-orange-dark; +$color-primary: $color-red; +$color-success: $color-red-dark; +$color-info: $color-orange; +$color-warning: $color-purple; +$color-danger: $color-orange-dark; /* COLORED BG -------------------------------------------------------- */ .bg-primary { - background-color: @color-sand; + background-color: $color-sand; } .bg-success { - background-color: @color-red; + background-color: $color-red; } .bg-info { - background-color: @color-red-dark; + background-color: $color-red-dark; } .bg-warning { - background-color: @color-orange; + background-color: $color-orange; } .bg-danger { - background-color: @color-orange-dark; + background-color: $color-orange-dark; } /* TEXT & LINKS -------------------------------------------------------- */ -@text-muted: @gray; -@link-color: @color-primary; -@link-hover-color: @color-success; +$text-muted: $gray; +$link-color: $color-primary; +$link-hover-color: $color-success; /* BUTTONS --------------------------------------------------------- */ -@btn-primary-bg: @color-red; -@btn-success-bg: @color-orange; -@btn-info-bg: @color-yellow-dark; -@btn-warning-bg: @color-orange-dark; -@btn-danger-bg: @color-red-dark; +$btn-primary-bg: $color-red; +$btn-success-bg: $color-orange; +$btn-info-bg: $color-yellow-dark; +$btn-warning-bg: $color-orange-dark; +$btn-danger-bg: $color-red-dark; .btn .fa { color: white;} .btn-default .fa { - color: @gray-dark;} + color: $gray-dark;} /* TRANSPARENT BG --------------------------------------------------- */ /* Used in snippets Prx Image Color and Prx Image Shade ------------- */ -.bg-transparent-color { background: @color-red-dark; opacity: 0.85;} +.bg-transparent-color { background: $color-red-dark; opacity: 0.85;} .bg-transparent-shade { background: black; opacity: 0.5;} /* Footer ----------------------------------------------------------- */ #wrapwrap footer { - background-color: @color-burgundy; - color: @gray-lighter; + background-color: $color-burgundy; + color: $gray-lighter; } footer ul li a { color: white; } footer ul li a:hover { - color: @color-orange; + color: $color-orange; text-decoration: none; } footer h4 { - color: @color-sand; + color: $color-sand; padding-bottom: 12px; text-transform: uppercase; } footer .fa { - color: @color-red; + color: $color-red; } diff --git a/addons/theme_default/static/src/scss/option_color_stone.scss b/addons/theme_default/static/src/scss/option_color_stone.scss index e3a217f14a2..42c9937270d 100644 --- a/addons/theme_default/static/src/scss/option_color_stone.scss +++ b/addons/theme_default/static/src/scss/option_color_stone.scss @@ -1,75 +1,75 @@ /* COLORS --------------------------------------------------------- */ -@color-primary: @color-concrete; -@color-success: @color-turquoise; -@color-info: @color-stone; -@color-warning: @color-concrete-dark; -@color-danger: @color-midnight; +$color-primary: $color-concrete; +$color-success: $color-turquoise; +$color-info: $color-stone; +$color-warning: $color-concrete-dark; +$color-danger: $color-midnight; /* COLORED BG -------------------------------------------------------- */ .bg-primary { - background-color: @color-clouds; + background-color: $color-clouds; } .bg-success { - background-color: @color-silver; + background-color: $color-silver; } .bg-info { - background-color: @color-stone; + background-color: $color-stone; } .bg-warning { - background-color: @color-concrete-dark; + background-color: $color-concrete-dark; } .bg-danger { - background-color: @color-asphalt; + background-color: $color-asphalt; } /* TEXT & LINKS -------------------------------------------------------- */ -@text-muted: @color-primary; -@link-color: @color-primary; -@link-hover-color: @color-info; +$text-muted: $color-primary; +$link-color: $color-primary; +$link-hover-color: $color-info; /* BUTTONS --------------------------------------------------------- */ -@btn-primary-bg: @color-concrete; -@btn-success-bg: @color-blue; -@btn-info-bg: @color-asphalt; -@btn-warning-bg: @color-red; -@btn-danger-bg: @color-red-dark; +$btn-primary-bg: $color-concrete; +$btn-success-bg: $color-blue; +$btn-info-bg: $color-asphalt; +$btn-warning-bg: $color-red; +$btn-danger-bg: $color-red-dark; .btn .fa { color: white;} .btn-default .fa { - color: @gray-dark;} + color: $gray-dark;} /* TRANSPARENT BG --------------------------------------------------- */ /* Used in snippets Prx Image Color and Prx Image Shade ------------- */ -.bg-transparent-color { background: @color-stone; opacity: 0.9;} +.bg-transparent-color { background: $color-stone; opacity: 0.9;} .bg-transparent-shade { background: black; opacity: 0.5;} /* Footer ----------------------------------------------------------- */ #wrapwrap footer { - background-color: @color-concrete-dark; - color: @color-concrete; + background-color: $color-concrete-dark; + color: $color-concrete; } footer ul li a { - color: @color-clouds; + color: $color-clouds; } footer ul li a:hover { color: white; text-decoration: none; } footer h4 { - color: @color-silver; + color: $color-silver; padding-bottom: 12px; text-transform: uppercase; } footer .fa { - color: @color-clouds; + color: $color-clouds; } diff --git a/addons/theme_default/static/src/scss/option_font.scss b/addons/theme_default/static/src/scss/option_font.scss index 2ce3b03e62c..c62716313f5 100644 --- a/addons/theme_default/static/src/scss/option_font.scss +++ b/addons/theme_default/static/src/scss/option_font.scss @@ -1,2 +1,2 @@ -@font-family-sans-serif: Georgia, "Times New Roman", Times, serif; -@font-family-serif: "Helvetica Neue", Helvetica, Arial, sans-serif; +$font-family-sans-serif: Georgia, "Times New Roman", Times, serif; +$font-family-serif: "Helvetica Neue", Helvetica, Arial, sans-serif; diff --git a/addons/theme_default/static/src/scss/option_layout_boxed.scss b/addons/theme_default/static/src/scss/option_layout_boxed.scss index 4e258175923..f6a428752bd 100644 --- a/addons/theme_default/static/src/scss/option_layout_boxed.scss +++ b/addons/theme_default/static/src/scss/option_layout_boxed.scss @@ -1,5 +1,5 @@ #wrapwrap { - @media (min-width: @screen-sm-min){ + @media (min-width: $screen-sm-min){ width: 85%; margin: 0 auto; } diff --git a/addons/web/static/src/scss/animation.scss b/addons/web/static/src/scss/animation.scss index 6da0a1f9d64..92097a23298 100644 --- a/addons/web/static/src/scss/animation.scss +++ b/addons/web/static/src/scss/animation.scss @@ -146,16 +146,16 @@ } /************** MIXINS for ANIMATIONS **************/ -.o-display-marked(@content, @top, @left, @color) { - .o-position-absolute(@top: @top, @left: @left); +@mixin o-display-marked($content, $top, $left, $color) { + @include o-position-absolute($top: $top, $left: $left); font-size: 300px; font-family: "FontAwesome"; - content: @content; - color: @color; - .o-transform-origin(); - .o-animation(markAnim, 1s, ease-in-out, 0s, 1, normal, forwards); + content: $content; + color: $color; + @include o-transform-origin; + @include o-animation(markAnim, 1s, ease-in-out, 0s, 1, normal, forwards); - @media (max-width: @screen-sm-max) { + @media (max-width: $screen-sm-max) { left: 40%; font-size: 30vw; } diff --git a/addons/web/static/src/scss/base_settings.scss b/addons/web/static/src/scss/base_settings.scss index 426d8cb557c..7904e6143e7 100644 --- a/addons/web/static/src/scss/base_settings.scss +++ b/addons/web/static/src/scss/base_settings.scss @@ -1,20 +1,20 @@ // VARIABLES -@o-base-settings-mobile-tabs-height: 40px; -@o-base-settings-mobile-tabs-overflow-gap: 3%; +$o-base-settings-mobile-tabs-height: 40px; +$o-base-settings-mobile-tabs-overflow-gap: 3%; // MIXINS -.o-base-settings-horizontal-padding(@padding-base: @padding-small-vertical) { - padding: @padding-base @odoo-horizontal-padding; +@mixin o-base-settings-horizontal-padding($padding-base: $padding-small-vertical) { + padding: $padding-base $odoo-horizontal-padding; - @media (min-width: @screen-lg-min) { - padding-left: @odoo-horizontal-padding*2;; + @media (min-width: $screen-lg-min) { + padding-left: $odoo-horizontal-padding*2;; } } // Use a very specif selector to overwrite generic form-view rules .o_form_view.o_form_nosheet.o_base_settings { - .o-flex-display(); - .o-flex-flow(column, nowrap); + @include o-flex-display; + @include o-flex-flow(column, nowrap); padding: 0px; } @@ -22,20 +22,20 @@ .o_base_settings { height: 100%; - @media (max-width: @screen-xs-max) { - .o-flex-flow(column, nowrap); + @media (max-width: $screen-xs-max) { + @include o-flex-flow(column, nowrap); } .o_control_panel { .o_panel { - .o-flex-display(); - .o-flex-flow(row, wrap); - margin-bottom: @odoo-sheet-vpadding*0.5; + @include o-flex-display; + @include o-flex-flow(row, wrap); + margin-bottom: $odoo-sheet-vpadding*0.5; width: 100%; .title, .o_setting_search { - .o-flex(1, 0, auto); - width: @screen-xs-min*0.5; + @include o-flex(1, 0, auto); + width: $screen-xs-min*0.5; } .o_setting_search { @@ -45,15 +45,15 @@ height: 28px; padding: 0px; border: 0px; - border-bottom: 1px solid @gray-lighter-darker; - border-color: @gray; + border-bottom: 1px solid $gray-lighter-darker; + border-color: $gray; box-shadow: none; font-weight: 500; } .searchIcon { - .o-position-absolute(4px, 0); - color: @gray; + @include o-position-absolute(4px, 0); + color: $gray; } } } @@ -64,44 +64,44 @@ border: 0; .btn-primary, .btn-link { - padding: @padding-small-vertical @padding-small-horizontal; + padding: $padding-small-vertical $padding-small-horizontal; } .btn-link { - .o-hover-text-color(@link-color, @link-hover-color); + @include o-hover-text-color($link-color, $link-hover-color); } } } .o_setting_container { - .o-flex-display(); - .o-flex(1, 1, auto); + @include o-flex-display; + @include o-flex(1, 1, auto); overflow: auto; - @media (max-width: @screen-xs-max) { - .o-flex-flow(column, nowrap); + @media (max-width: $screen-xs-max) { + @include o-flex-flow(column, nowrap); } .settings_tab { - .o-flex-display(); - .o-flex(0, 0, auto); - .o-flex-flow(column, nowrap); - background: @gray-dark; + @include o-flex-display; + @include o-flex(0, 0, auto); + @include o-flex-flow(column, nowrap); + background: $gray-dark; overflow: auto; - padding-top: @odoo-horizontal-padding*0.5; + padding-top: $odoo-horizontal-padding*0.5; - @media (max-width: @screen-xs-max) { - .o-flex(0, 0, @o-base-settings-mobile-tabs-height); - .o-inline-flex-display(); + @media (max-width: $screen-xs-max) { + @include o-flex(0, 0, $o-base-settings-mobile-tabs-height); + @include o-inline-flex-display; position: relative; overflow: hidden; padding: 0; } .selected { - background-color: @gray-darker; - box-shadow: inset 3px 0 0 @odoo-brand-optional; + background-color: $gray-darker; + box-shadow: inset 3px 0 0 $odoo-brand-optional; .app_name { color: white; @@ -109,10 +109,10 @@ } .tab { - .o-flex-display(); - padding: 0 @odoo-horizontal-padding*2 0 @odoo-horizontal-padding; + @include o-flex-display; + padding: 0 $odoo-horizontal-padding*2 0 $odoo-horizontal-padding; height: 40px; - color: @gray-lighter-darker; + color: $gray-lighter-darker; font-size: 13px; line-height: 40px; cursor: pointer; @@ -123,17 +123,17 @@ } // Mobile Tabs - @media (max-width: @screen-xs-max) { + @media (max-width: $screen-xs-max) { display: block; - .o-position-absolute(@left:100%); - .size(auto, @o-base-settings-mobile-tabs-height); - padding: @o-base-settings-mobile-tabs-height*0.25 @o-base-settings-mobile-tabs-height*0.4; + @include o-position-absolute($left:100%); + @include size(auto, $o-base-settings-mobile-tabs-height); + padding: $o-base-settings-mobile-tabs-height*0.25 $o-base-settings-mobile-tabs-height*0.4; text-align: center; font-size: 14px; font-weight: 500; line-height: inherit; - .o-transition(0.2s, all); - .o-transform(translate3d(0,0,0)); + @include o-transition(0.2s, all); + @include o-transform(translate3d(0,0,0)); .app_name { display: block; @@ -142,15 +142,15 @@ &:after { content: ''; - background: @odoo-brand-optional; + background: $odoo-brand-optional; opacity: 0; - .o-position-absolute(auto, 0, 0, 0); - .size(100%, 3px); - .o-transition(0.2s, all); + @include o-position-absolute(auto, 0, 0, 0); + @include size(100%, 3px); + @include o-transition(0.2s, all); } &.previous, &.before { - left: 0% - @o-base-settings-mobile-tabs-overflow-gap; + left: 0% - $o-base-settings-mobile-tabs-overflow-gap; } &.current { @@ -167,7 +167,7 @@ } &.next, &.after { - left: 100% + @o-base-settings-mobile-tabs-overflow-gap; + left: 100% + $o-base-settings-mobile-tabs-overflow-gap; } } } @@ -175,15 +175,15 @@ .settings { position: relative; - .o-flex(1, 1, 100%); - background-color: @odoo-view-background-color; + @include o-flex(1, 1, 100%); + background-color: $odoo-view-background-color; overflow: auto; > .app_settings_block { h2 { margin-bottom: 0; - .o-base-settings-horizontal-padding(); - background-color: @gray-lighter; + @include o-base-settings-horizontal-padding; + background-color: $gray-lighter; font-size: 15px; font-weight: bold; @@ -194,30 +194,30 @@ } .o_settings_container { - max-width: @screen-md-min; // Provide a maximum container size to ensure readability - .o-base-settings-horizontal-padding(0); + max-width: $screen-md-min; // Provide a maximum container size to ensure readability + @include o-base-settings-horizontal-padding(0); } } .settingSearchHeader { - .o-flex-display(); + @include o-flex-display; margin: 30px 0 10px; - .o-base-settings-horizontal-padding(); - background-color: @gray-lighter; + @include o-base-settings-horizontal-padding; + background-color: $gray-lighter; .icon { - .square(25px); + @include square(25px); margin-right: 10px; } .appName { - color: @headings-color; + color: $headings-color; font-size: 17px; } } .notFound { - color : @text-muted; + color : $text-muted; text-align: center; font-size: 25px; padding-top: 50px; diff --git a/addons/web/static/src/scss/bootstrap_overridden.scss b/addons/web/static/src/scss/bootstrap_overridden.scss index 5bbe61ecdf6..9a364231415 100644 --- a/addons/web/static/src/scss/bootstrap_overridden.scss +++ b/addons/web/static/src/scss/bootstrap_overridden.scss @@ -3,74 +3,74 @@ // ------------------------------------------------------------------ //== Grid -@grid-gutter-width: @odoo-horizontal-padding*2; +$grid-gutter-width: $odoo-horizontal-padding*2; //== Colors -@brand-primary: @odoo-brand-primary; -@gray-lighter: @odoo-color-silver; +$brand-primary: $odoo-brand-primary; +$gray-lighter: $odoo-color-silver; //== Titles -@font-size-h1: @odoo-font-size-base + 13px; -@font-size-h2: @odoo-font-size-base + 7px; -@font-size-h3: @odoo-font-size-base + 3px; -@font-size-h4: @odoo-font-size-base + 2px; -@font-size-h5: @odoo-font-size-base + 1px; -@font-size-h6: @odoo-font-size-base; +$font-size-h1: $odoo-font-size-base + 13px; +$font-size-h2: $odoo-font-size-base + 7px; +$font-size-h3: $odoo-font-size-base + 3px; +$font-size-h4: $odoo-font-size-base + 2px; +$font-size-h5: $odoo-font-size-base + 1px; +$font-size-h6: $odoo-font-size-base; //== Scaffolding -@body-bg: @odoo-brand-secondary; -@text-color: @odoo-main-text-color; -@link-color: @odoo-brand-optional; -@link-hover-decoration: none; +$body-bg: $odoo-brand-secondary; +$text-color: $odoo-main-text-color; +$link-color: $odoo-brand-optional; +$link-hover-decoration: none; //== Typography -@font-family-sans-serif: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif; -@font-size-base: @odoo-font-size-base; -@headings-font-weight: bold; +$font-family-sans-serif: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif; +$font-size-base: $odoo-font-size-base; +$headings-font-weight: bold; //== Components -@component-active-bg: @gray-lighter; -@component-active-color: @odoo-brand-optional; +$component-active-bg: $gray-lighter; +$component-active-color: $odoo-brand-optional; //== Badges -@badge-bg: @odoo-brand-optional; -@badge-color: white; -@badge-line-height: @line-height-base; -@badge-font-weight: normal; +$badge-bg: $odoo-brand-optional; +$badge-color: white; +$badge-line-height: $line-height-base; +$badge-font-weight: normal; //== Breadcrumbs -@breadcrumb-active-color: #777777; -@breadcrumb-bg: @odoo-control-panel-background-color; -@breadcrumb-color: #777777; -@breadcrumb-padding-horizontal: 0; -@breadcrumb-padding-vertical: 0; +$breadcrumb-active-color: #777777; +$breadcrumb-bg: $odoo-control-panel-background-color; +$breadcrumb-color: #777777; +$breadcrumb-padding-horizontal: 0; +$breadcrumb-padding-vertical: 0; //== Buttons -@btn-default-bg: white; -@btn-default-border: #cccccc; -@btn-default-color: @odoo-main-text-color; -@btn-primary-bg: @odoo-brand-optional; -@btn-primary-border: @odoo-brand-optional; -@btn-primary-color: white; +$btn-default-bg: white; +$btn-default-border: #cccccc; +$btn-default-color: $odoo-main-text-color; +$btn-primary-bg: $odoo-brand-optional; +$btn-primary-border: $odoo-brand-optional; +$btn-primary-color: white; //== Dropdowns -@dropdown-bg: white; -@dropdown-border: @gray-lighter-dark; -@dropdown-divider-bg: @gray-lighter-dark; -@dropdown-link-color: @odoo-main-text-color; -@dropdown-link-hover-color: @gray-dark; -@dropdown-link-hover-bg: @gray-lighter; -@dropdown-link-active-color: @component-active-color; -@dropdown-link-active-bg: @component-active-bg; -@dropdown-link-disabled-color: @gray-light; -@dropdown-header-color: @gray-light; +$dropdown-bg: white; +$dropdown-border: $gray-lighter-dark; +$dropdown-divider-bg: $gray-lighter-dark; +$dropdown-link-color: $odoo-main-text-color; +$dropdown-link-hover-color: $gray-dark; +$dropdown-link-hover-bg: $gray-lighter; +$dropdown-link-active-color: $component-active-color; +$dropdown-link-active-bg: $component-active-bg; +$dropdown-link-disabled-color: $gray-light; +$dropdown-header-color: $gray-light; //== Modals -@modal-sm: 300px; -@modal-md: 650px; -@modal-lg: 980px; -@modal-inner-padding: @odoo-horizontal-padding; -@modal-title-padding: @odoo-horizontal-padding; +$modal-sm: 300px; +$modal-md: 650px; +$modal-lg: 980px; +$modal-inner-padding: $odoo-horizontal-padding; +$modal-title-padding: $odoo-horizontal-padding; // Change the z-index of the modal-backdrop elements to be equal to the // modal elements' ones. Bootstrap does not support multi-modals, and without @@ -81,32 +81,32 @@ // cannot happen in odoo though as modals are not hidden but removed from // the DOM and are always put at the end of the body when opened. // -// Note that the variable @zindex-modal-background may be renamed/removed in +// Note that the variable $zindex-modal-background may be renamed/removed in // newer versions of bootstrap. // // TODO the following code was disabled because it is saas-incompatible // -// @zindex-modal-background: @zindex-modal; +// $zindex-modal-background: $zindex-modal; //== Navs -@nav-link-padding: 10px 15px; -@nav-pills-border-radius: 0; -@nav-pills-active-link-hover-color: white; -@nav-pills-active-link-hover-bg: @odoo-brand-optional; -@nav-tabs-active-link-hover-bg: white; +$nav-link-padding: 10px 15px; +$nav-pills-border-radius: 0; +$nav-pills-active-link-hover-color: white; +$nav-pills-active-link-hover-bg: $odoo-brand-optional; +$nav-tabs-active-link-hover-bg: white; //== Navbar -@navbar-height: @odoo-navbar-height - 2; -@navbar-margin-bottom: 0; -@navbar-inverse-bg: #222222; -@navbar-inverse-link-color: #9d9d9d; -@navbar-inverse-link-hover-bg: #222222; -@navbar-inverse-toggle-hover-bg: #222222; -@navbar-border-radius: 0; +$navbar-height: $odoo-navbar-height - 2; +$navbar-margin-bottom: 0; +$navbar-inverse-bg: #222222; +$navbar-inverse-link-color: #9d9d9d; +$navbar-inverse-link-hover-bg: #222222; +$navbar-inverse-toggle-hover-bg: #222222; +$navbar-border-radius: 0; //== Tables -@table-bg-accent: #efeff8; // FIXME: expose -@table-bg-hover: darken(@table-bg-accent,5%); +$table-bg-accent: #efeff8; // FIXME: expose +$table-bg-hover: darken($table-bg-accent,5%); // ------------------------------------------------------------------ // Bootstrap components rules (non exposed features variables) @@ -121,9 +121,9 @@ //== Buttons // Mixin to define variations for btn-links and muted btn-links -.o-btn-link-variant(@color, @color-active) { +@mixin o-btn-link-variant($color, $color-active) { text-transform: none; - .o-hover-text-color(@default-color: @color, @hover-color: @color-active); + @include o-hover-text-color($default-color: $color, $hover-color: $color-active); &, &:hover, &:focus, &:active, &.active { border-color: transparent; @@ -131,30 +131,30 @@ } &.text-muted, .text-muted { - .o-hover-opacity(); - .o-hover-text-color(@default-color: @text-muted, @hover-color: @color-active); + @include o-hover-opacity; + @include o-hover-text-color($default-color: $text-muted, $hover-color: $color-active); } } .btn-icon { - .button-variant(@btn-default-color; @btn-default-bg; @btn-default-border); + @include button-variant($btn-default-color, $btn-default-bg, $btn-default-border); } .btn-link { - font-weight: @btn-font-weight; + font-weight: $btn-font-weight; &.btn-default { - .o-btn-link-variant(@text-color, @headings-color); + @include o-btn-link-variant($text-color, $headings-color); } &.btn-success, &.text-success { - .o-btn-link-variant(@text-color, @brand-success); + @include o-btn-link-variant($text-color, $brand-success); } &.btn-warning, &.text-warning { - .o-btn-link-variant(@text-color, @brand-warning); + @include o-btn-link-variant($text-color, $brand-warning); } &.btn-danger, &.text-danger { - .o-btn-link-variant(@text-color, @brand-danger); + @include o-btn-link-variant($text-color, $brand-danger); } &.btn-info, &.text-info { - .o-btn-link-variant(@text-color, darken(@brand-info, 20%)); + @include o-btn-link-variant($text-color, darken($brand-info, 20%)); } } diff --git a/addons/web/static/src/scss/control_panel.scss b/addons/web/static/src/scss/control_panel.scss index 325ed25b3ac..4174db62c6a 100644 --- a/addons/web/static/src/scss/control_panel.scss +++ b/addons/web/static/src/scss/control_panel.scss @@ -1,11 +1,11 @@ -@breadcrumb-height: 30px; +$breadcrumb-height: 30px; .o_control_panel { - .o-flex-display(); - .o-flex-flow(row, wrap); - border-bottom: 1px solid darken(@odoo-control-panel-background-color, 20%); - .o-webclient-padding(@top: 10px, @bottom: 10px); - background-color: @odoo-control-panel-background-color; + @include o-flex-display; + @include o-flex-flow(row, wrap); + border-bottom: 1px solid darken($odoo-control-panel-background-color, 20%); + @include o-webclient-padding($top: 10px, $bottom: 10px); + background-color: $odoo-control-panel-background-color; > .breadcrumb { width: 50%; @@ -13,7 +13,7 @@ font-size: 18px; > li { - .o-text-overflow(@max-width: 90%); + @include o-text-overflow($max-width: 90%); > a { cursor: pointer; @@ -27,7 +27,7 @@ > .o_cp_searchview { width: 50%; - min-height: @breadcrumb-height; + min-height: $breadcrumb-height; } .btn.o_enable_searchview { @@ -37,8 +37,8 @@ } > .o_cp_left { - .o-flex-display(); - .o-justify-content(space-between); + @include o-flex-display; + @include o-justify-content(space-between); width: 50%; margin-top: 5px; @@ -56,10 +56,10 @@ } .o_form_binary_form span { padding: 3px 25px; - color: @btn-default-color; + color: $btn-default-color; } .o_form_binary_form:hover { - background-color: @table-bg-hover; + background-color: $table-bg-hover; } } .o_sidebar_delete_attachment { @@ -72,7 +72,7 @@ } > .o_cp_right { - .o-flex-display(); + @include o-flex-display; width: 50%; margin-top: 5px; @@ -80,11 +80,11 @@ margin: auto 0 auto auto; padding-left: 5px; text-align: center; - .user-select(none); + @include user-select(none); > div { - .o-flex-display(); - .o-align-items(center); + @include o-flex-display; + @include o-align-items(center); } .o_pager_counter { @@ -93,24 +93,24 @@ } > .o_cp_switch_buttons > .btn:first-child { - margin-left: @odoo-horizontal-padding; + margin-left: $odoo-horizontal-padding; } } } .o_x2m_control_panel { - .o-flex-display(); - .o-flex-flow(row, wrap); + @include o-flex-display; + @include o-flex-flow(row, wrap); .o_cp_buttons { - .o-flex-display(); + @include o-flex-display; margin-right: auto; > div { margin-top: 5px; } } .o_cp_pager { - .o-flex-display(); + @include o-flex-display; margin-left: auto; } } diff --git a/addons/web/static/src/scss/data_export.scss b/addons/web/static/src/scss/data_export.scss index 01a1da80134..3ce97ea1c8b 100644 --- a/addons/web/static/src/scss/data_export.scss +++ b/addons/web/static/src/scss/data_export.scss @@ -1,11 +1,11 @@ .o_web_client .o_export { - .o-flex(1, 1, auto); - .o-flex-display(); - .o-flex-flow(column, nowrap); + @include o-flex(1, 1, auto); + @include o-flex-display; + @include o-flex-flow(column, nowrap); min-height: 0; > p, > .row { - .o-flex(0, 0, auto); + @include o-flex(0, 0, auto); } label { @@ -18,8 +18,8 @@ > div { margin-left: 5px; - .o-inline-flex-display(); - .o-align-items(center); + @include o-inline-flex-display; + @include o-align-items(center); > label, > input { margin: 0 0 0 5px; @@ -28,39 +28,39 @@ } .o_export_panel { - .o-flex(1, 1, auto); + @include o-flex(1, 1, auto); position: relative; min-height: 0; > div { height: 100%; - .o-flex-display(); - .o-flex-flow(column, nowrap); - .o-justify-content(center); + @include o-flex-display; + @include o-flex-flow(column, nowrap); + @include o-justify-content(center); &.o_left_panel { // Needed because of chrome - .o-position-absolute(@top: 0, @bottom: 0, @left: 0, @right: 57%); + @include o-position-absolute($top: 0, $bottom: 0, $left: 0, $right: 57%); } &.o_center_panel { // Needed because of chrome - .o-position-absolute(@top: 0, @bottom: 0, @left: 43%, @right: 43%); + @include o-position-absolute($top: 0, $bottom: 0, $left: 43%, $right: 43%); } &.o_right_panel { // Needed because of chrome - .o-position-absolute(@top: 0, @bottom: 0, @left: 57%, @right: 0); + @include o-position-absolute($top: 0, $bottom: 0, $left: 57%, $right: 0); } > h4, > div { - .o-flex(0, 0, auto); + @include o-flex(0, 0, auto); } > button { - .o-flex(0, 0, auto); + @include o-flex(0, 0, auto); margin-top: 10px; } .o_left_field_panel, .o_fields_list { - border: 1px solid @odoo-brand-lightsecondary; + border: 1px solid $odoo-brand-lightsecondary; overflow: auto; - .o-flex(1, 1, auto); + @include o-flex(1, 1, auto); min-height: 0; } @@ -68,21 +68,21 @@ cursor: pointer; position: relative; padding-left: 20px; - .user-select(none); + @include user-select(none); &.o_selected > .o_tree_column { - background-color: @odoo-brand-primary; + background-color: $odoo-brand-primary; color: white; } .o_expand_parent { - .o-position-absolute(@top: 4px, @left: 5px); + @include o-position-absolute($top: 4px, $left: 5px); } .o_tree_column { display: block; &.o_required { - border-bottom: 2px solid @odoo-main-text-color; + border-bottom: 2px solid $odoo-main-text-color; } } @@ -92,16 +92,16 @@ } .o_save_list, .o_exported_lists { - .o-flex-display(); - .o-align-items(baseline); + @include o-flex-display; + @include o-align-items(baseline); > label, > button { margin: 0 0 5px; - .o-flex(0, 0, auto); + @include o-flex(0, 0, auto); } > input, > select { width: 0; - .o-flex(1, 0, auto); + @include o-flex(1, 0, auto); } } } diff --git a/addons/web/static/src/scss/datepicker.scss b/addons/web/static/src/scss/datepicker.scss index fdf3a585b57..d8650b6b409 100644 --- a/addons/web/static/src/scss/datepicker.scss +++ b/addons/web/static/src/scss/datepicker.scss @@ -1,5 +1,5 @@ -@odoo-datepicker-week-color: #8f8f8f; -@odoo-datepicker-week-bg-color: lighten(@odoo-datepicker-week-color, 30%); +$odoo-datepicker-week-color: #8f8f8f; +$odoo-datepicker-week-bg-color: lighten($odoo-datepicker-week-color, 30%); .sr-only { position: absolute; @@ -21,10 +21,10 @@ } .o_datepicker_button { - .o-position-absolute(2px, 4px); + @include o-position-absolute(2px, 4px); pointer-events: none; // let click events go through the underlying input &:after { - .o-caret-down; + @include o-caret-down; } } } @@ -33,26 +33,26 @@ // The '.dropdown-menu' part is needed to override default bootstrap rule as // this file is unfortunately placed in common assets. .bootstrap-datetimepicker-widget.dropdown-menu { - z-index: @zindex-modal + 1; + z-index: $zindex-modal + 1; } .datepicker { .table-condensed { > thead { color: white; - background-color: @odoo-brand-primary; + background-color: $odoo-brand-primary; > tr { &:first-child { th:hover { color: white; - background-color: darken(@odoo-brand-primary, 10%); + background-color: darken($odoo-brand-primary, 10%); } } &:last-child { - color: @odoo-datepicker-week-color; - background-color: @odoo-datepicker-week-bg-color; + color: $odoo-datepicker-week-color; + background-color: $odoo-datepicker-week-bg-color; } > th { border-radius: 0; @@ -64,12 +64,12 @@ > tr { > td { &.active, .active { - background-color: @odoo-brand-optional; + background-color: $odoo-brand-optional; border-radius: 100px; } &.today:before { - border-bottom-color: @odoo-brand-optional; + border-bottom-color: $odoo-brand-optional; } } } diff --git a/addons/web/static/src/scss/domain_selector.scss b/addons/web/static/src/scss/domain_selector.scss index 70d4c0bd0c8..1fde477164d 100644 --- a/addons/web/static/src/scss/domain_selector.scss +++ b/addons/web/static/src/scss/domain_selector.scss @@ -1,28 +1,28 @@ .o_domain_node { - @o-domain-selector-indent: 32px; - @o-domain-selector-panel-space: 60px; - @o-domain-selector-row-height: 35px; // should be greater than a "normal" row so that "header" parts are the same size of rows - @o-domain-animation-bar-height: 15px; + $o-domain-selector-indent: 32px; + $o-domain-selector-panel-space: 60px; + $o-domain-selector-row-height: 35px; // should be greater than a "normal" row so that "header" parts are the same size of rows + $o-domain-animation-bar-height: 15px; position: relative; // Rows in a domain node (selector) have a minimum height and holds the control panel .o_domain_selector_row { - .o-flex-display(); - .o-align-items(center); - min-height: @o-domain-selector-row-height; + @include o-flex-display; + @include o-align-items(center); + min-height: $o-domain-selector-row-height; > * { - .o-flex(0, 0, auto); + @include o-flex(0, 0, auto); } > .o_domain_node_control_panel { - .o-position-absolute(@top: 0, @bottom: 0, @right: -@o-domain-selector-panel-space); + @include o-position-absolute($top: 0, $bottom: 0, $right: -$o-domain-selector-panel-space); > button { float: left; - width: @o-domain-selector-panel-space/2; + width: $o-domain-selector-panel-space/2; height: 100%; padding: 0; background-color: transparent; @@ -35,7 +35,7 @@ padding-left: 5px; &:hover { - color: @brand-danger; + color: $brand-danger; } } } @@ -48,12 +48,12 @@ position: relative; .o_domain_tree_operator_caret::after { - .o-caret-down(); + @include o-caret-down; } } > .o_domain_node_children_container { - padding-left: @o-domain-selector-indent; + padding-left: $o-domain-selector-indent; } // Rules specific to domain root @@ -67,15 +67,15 @@ } &.o_edit_mode > .o_domain_node_children_container { - padding-right: @o-domain-selector-panel-space; // delete button is over the row + padding-right: $o-domain-selector-panel-space; // delete button is over the row } > .o_domain_debug_container { display: block; margin-top: 16px; padding: 8px 10px 12px; - background: @gray-dark; - color: fade(white, 50%); + background: $gray-dark; + color: rgba(white, 0.5); font-family: monospace; font-weight: normal; @@ -92,13 +92,13 @@ // Rules specific to domain parts which do not contain sub-domain parts &.o_domain_leaf { &.o_read_mode { - .o-inline-flex-display(); + @include o-inline-flex-display; margin-right: 4px; } > .o_domain_leaf_info { - background: @odoo-brand-lightsecondary; - border: 1px solid darken(@odoo-brand-lightsecondary, 10%); + background: $odoo-brand-lightsecondary; + border: 1px solid darken($odoo-brand-lightsecondary, 10%); padding: 2px 4px; > .o_field_selector { @@ -119,21 +119,21 @@ } > .o_domain_leaf_edition { - .o-flex-display(); + @include o-flex-display; width: 100%; - padding: 4px (@o-domain-selector-panel-space/2) 4px 0; + padding: 4px ($o-domain-selector-panel-space/2) 4px 0; > * { - .o-flex(1, 1, 15%); // operator select + @include o-flex(1, 1, 15%); // operator select width: auto; background-color: white; &:first-child { // field selector - .o-flex(0, 1, 55%); + @include o-flex(0, 1, 55%); } &:last-child { // field value - .o-flex(1, 1, 25%); + @include o-flex(1, 1, 25%); } + * { @@ -146,13 +146,13 @@ } .o_domain_leaf_value_tags { - .o-flex-display(); + @include o-flex-display; > * { - .o-flex(0, 0, auto); + @include o-flex(0, 0, auto); } > input { - .o-flex(1, 1, auto); + @include o-flex(1, 1, auto); width: 0; min-width: 50px; } @@ -164,16 +164,16 @@ } // Animation effects - .o-transition(margin-bottom, .05s, ease, .05s); + @include o-transition(margin-bottom, .05s, ease, .05s); &::after { content: ""; - .o-position-absolute(@left: 0, @right: 0, @top: 100%); + @include o-position-absolute($left: 0, $right: 0, $top: 100%); display: block; - height: @o-domain-animation-bar-height; + height: $o-domain-animation-bar-height; max-height: 0; - .o-linear-gradient(45deg, fade(@odoo-brand-optional, 40%), fade(@odoo-brand-optional, 10%)); - .o-transition(max-height, .05s, ease, .05s); + @include o-linear-gradient(45deg, rgba($odoo-brand-optional, 0.4), rgba($odoo-brand-optional, 0.1)); + @include o-transition(max-height, .05s, ease, .05s); } &.o_hover_btns, &.o_hover_add_node { @@ -190,15 +190,15 @@ } &.o_hover_add_node { - margin-bottom: @o-domain-animation-bar-height; - .o-transition(margin, .15s, ease, .5s); + margin-bottom: $o-domain-animation-bar-height; + @include o-transition(margin, .15s, ease, .5s); &::after { - max-height: @o-domain-animation-bar-height; - .o-transition(max-height, .15s, ease, .5s); + max-height: $o-domain-animation-bar-height; + @include o-transition(max-height, .15s, ease, .5s); } &.o_hover_add_inset_node::after { - left: @o-domain-selector-indent; + left: $o-domain-selector-indent; } } } diff --git a/addons/web/static/src/scss/dropdown.scss b/addons/web/static/src/scss/dropdown.scss index 6501b4cc52c..ed979ae3a00 100644 --- a/addons/web/static/src/scss/dropdown.scss +++ b/addons/web/static/src/scss/dropdown.scss @@ -1,12 +1,12 @@ -.li-a-padding { - padding: 3px @odoo-dropdown-hpadding; +%dropdown-li-a-padding { + padding: 3px $odoo-dropdown-hpadding; } .ui-autocomplete { // Copy style of bootstrap dropdown background-image: none; - background-color: @dropdown-bg; - border: 1px solid @dropdown-border; - font-size: @font-size-base; + background-color: $dropdown-bg; + border: 1px solid $dropdown-border; + font-size: $font-size-base; padding: 5px 0px; box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.176); @@ -14,14 +14,14 @@ padding: 0; > a { display: block; - color: @dropdown-link-color; + color: $dropdown-link-color; - .li-a-padding + @extend %dropdown-li-a-padding; } &.ui-state-focus { background-image: none; - background-color: @odoo-brand-primary; + background-color: $odoo-brand-primary; border: none; font-weight: normal; margin: 0; @@ -29,14 +29,14 @@ &.o_m2o_dropdown_option { padding-left: 20px; > a { - color: @odoo-brand-primary; + color: $odoo-brand-primary; } } } } .dropdown-menu { - box-shadow: 0 6px 12px -4px fade(black, 25%); + box-shadow: 0 6px 12px -4px rgba(black, 0.25); .o_inline_dropdown { position: relative; @@ -51,7 +51,7 @@ } } -.dropdown-menu-mixin { +@mixin dropdown-menu-mixin { .open .dropdown-menu > li { position: relative; // to allow absolute positionning inside the li > a { @@ -59,14 +59,14 @@ outline: none; } - .li-a-padding; + @extend %dropdown-li-a-padding; } &.dropdown-header { - .li-a-padding; - color: @odoo-main-text-color; + @extend %dropdown-li-a-padding; + color: $odoo-main-text-color; - @media (max-width: @screen-xs-max) { + @media (max-width: $screen-xs-max) { color: white; text-decoration: underline; } @@ -74,7 +74,7 @@ } } -.dropdown-menu-mixin(); +@include dropdown-menu-mixin; .navbar-nav { - .dropdown-menu-mixin(); + @include dropdown-menu-mixin; } diff --git a/addons/web/static/src/scss/dropdown_extra.scss b/addons/web/static/src/scss/dropdown_extra.scss index ec38e6d5292..f925c4f6190 100644 --- a/addons/web/static/src/scss/dropdown_extra.scss +++ b/addons/web/static/src/scss/dropdown_extra.scss @@ -1,9 +1,9 @@ .ui-autocomplete .ui-menu-item { &.ui-state-focus { - background-color: @odoo-brand-primary; + background-color: $odoo-brand-primary; } &.o_m2o_dropdown_option > a { - color: @odoo-brand-primary; + color: $odoo-brand-primary; } &.ui-state-focus > a, &.ui-state-focus.o_m2o_dropdown_option > a { @@ -11,7 +11,7 @@ } } -@tag-border: #afafb6; +$tag-border: #afafb6; .oe_dropdown, .oe_dropdown_toggle { position: relative; cursor: pointer; @@ -25,7 +25,7 @@ position: absolute; z-index: 3; margin: 0; - border: 1px solid @tag-border; + border: 1px solid $tag-border; background: white; padding: 4px 0; min-width: 140px; @@ -42,7 +42,7 @@ margin: 0; padding: 2px 8px; &:hover { - .o-vertical-gradient(#f0f0fa, #eeeef6); + @include o-vertical-gradient(#f0f0fa, #eeeef6); box-shadow: none; } > a { @@ -59,5 +59,5 @@ // Buttons used as dropdown toggler .o_dropdown_toggler_btn { - .btn-default; + @extend .btn-default; // FIXME was a mixin before scss convertion } diff --git a/addons/web/static/src/scss/fields.scss b/addons/web/static/src/scss/fields.scss index ff6fe9eb20b..f28e3ba349c 100644 --- a/addons/web/static/src/scss/fields.scss +++ b/addons/web/static/src/scss/fields.scss @@ -6,8 +6,8 @@ // Invalid .o_field_invalid { &.o_input, .o_input, &.o_form_label { - color: @brand-danger!important; - border-color: @brand-danger!important; // enterprise o_required_modifier rule overrides this without !important + color: $brand-danger!important; + border-color: $brand-danger!important; // enterprise o_required_modifier rule overrides this without !important } } @@ -39,17 +39,17 @@ // Flex fields (inline) &.o_field_many2one, &.o_field_radio, &.o_field_many2manytags, &.o_field_percent_pie, &.o_field_monetary, &.o_field_binary_file { - @media (min-width: @screen-sm-min) { - .o-inline-flex-display(); + @media (min-width: $screen-sm-min) { + @include o-inline-flex-display; } > span, > button { - .o-flex(0, 0, auto); + @include o-flex(0, 0, auto); } } // Dropdowns input (many2one, ...) .o_input_dropdown { - .o-flex(1, 1, auto); + @include o-flex(1, 1, auto); position: relative; width: 100%; @@ -60,10 +60,10 @@ } .o_dropdown_button { - .o-position-absolute(0, 0); + @include o-position-absolute(0, 0); pointer-events: none; &:after { - .o-caret-down; + @include o-caret-down; } } } @@ -77,51 +77,51 @@ // Monetary &.o_field_monetary { &.o_input { - .o-align-items(baseline); + @include o-align-items(baseline); > input { width: 100px; - .o-flex(1, 0, auto); + @include o-flex(1, 0, auto); } } } // Many2many tags &.o_field_many2manytags { - .o-flex-flow(row, wrap); - .o-align-items(baseline); + @include o-flex-flow(row, wrap); + @include o-align-items(baseline); > .o_field_widget { - .o-flex(1, 0, 100px); + @include o-flex(1, 0, 100px); position: initial; max-width: 100%; } > .badge { - .o-flex(0, 0, auto); + @include o-flex(0, 0, auto); border: 0; font-size: 12px; color: white; cursor: pointer; > .o_badge_text { - .o-text-overflow(inline-block); + @include o-text-overflow(inline-block); max-width: 200px; } // o-kanban-colorpicker without customizing // '&:first-child > a::before' (transparent red-crossed colorpick) - .o-tag-colorpicker() { - @o-tag-colorpicker-padding-right: @odoo-dropdown-hpadding - 2 * @o-kanban-inner-hmargin; + @mixin o-tag-colorpicker { + $o-tag-colorpicker-padding-right: $odoo-dropdown-hpadding - 2 * 5px; // FIXME was $o-kanban-inner-hmargin before scss convertion max-width: 100%; - padding: 3px @o-tag-colorpicker-padding-right 3px @odoo-dropdown-hpadding; + padding: 3px $o-tag-colorpicker-padding-right 3px $odoo-dropdown-hpadding; > li { display: inline-block; - margin: @o-kanban-inner-hmargin @o-kanban-inner-hmargin 0 0; + margin: 5px 5px 0 0; // FIXME was $o-kanban-inner-hmargin before scss convertion border: 1px solid white; - box-shadow: 0 0 0 1px @gray-lighter-dark; + box-shadow: 0 0 0 1px $gray-lighter-dark; > a { display: block; @@ -136,7 +136,7 @@ &:last-of-type { box-shadow: 0 0 0 0px white; // remove grey border on hide in kanban - color: @odoo-main-text-color; + color: $odoo-main-text-color; } } } @@ -147,7 +147,7 @@ } > .o_colorpicker > ul { - .o-tag-colorpicker(); + @include o-tag-colorpicker; white-space: normal; } @@ -156,28 +156,24 @@ } } - .o-tag-color(@size: 0) when (@size = 0) { - .o_tag_color_@{size} { - & { - background-color: white; - color: ~"@{odoo-color-@{size}}"; - box-shadow: inset 0 0 0 2px ~"@{odoo-color-@{size}}"; - } - &::after { - background-color: ~"@{odoo-color-@{size}}"; + @for $size from 1 through $odoo-nb-ui-color { + .o_tag_color_#{$size - 1} { + @if $size == 1 { + & { + background-color: white; + color: nth($odoo-colors, $size); + box-shadow: inset 0 0 0 2px nth($odoo-colors, $size); + } + &::after { + background-color: nth($odoo-colors, $size); + } + } @else { + &, &::after { + background-color: nth($odoo-colors, $size); + } } } - .o-tag-color(@size + 1); } - .o-tag-color(@size: 0) when (@size > 0) and (@size < @odoo-nb-ui-color) { - .o_tag_color_@{size} { - &, &::after { - background-color: ~"@{odoo-color-@{size}}"; - } - } - .o-tag-color(@size + 1); - } - .o-tag-color(); } // Stars @@ -199,7 +195,7 @@ } &.fa-star-o { - color: @odoo-main-color-muted; + color: $odoo-main-color-muted; } &.fa-star { color: gold; @@ -213,7 +209,7 @@ font-size: 16px; } i.fa-star-o { - color: @odoo-main-color-muted; + color: $odoo-main-color-muted; &:hover { color: gold; } @@ -225,7 +221,7 @@ // Specific success color for toggle_button widget .fa.o_toggle_button_success { - color: @brand-success; + color: $brand-success; } // Handle widget @@ -240,13 +236,13 @@ } .o_radio_item { - .o-flex(0, 0, auto); - .o-flex-display(); - .o-align-items(center); + @include o-flex(0, 0, auto); + @include o-flex-display; + @include o-align-items(center); > input { - .o-flex(0, 0, auto); - margin: 0 @odoo-form-spacing-unit 0 0; + @include o-flex(0, 0, auto); + margin: 0 $odoo-form-spacing-unit 0 0; } > label { margin: 0; @@ -255,21 +251,21 @@ &.o_horizontal { .o_radio_item { - margin-right: @odoo-form-spacing-unit * 2; + margin-right: $odoo-form-spacing-unit * 2; } } &.o_vertical { - .o-flex-flow(column, nowrap); + @include o-flex-flow(column, nowrap); .o_radio_item { - margin-bottom: @odoo-form-spacing-unit; + margin-bottom: $odoo-form-spacing-unit; } } } // Percent pie &.o_field_percent_pie { - .o-align-items(center); + @include o-align-items(center); > .o_pie { position: relative; @@ -278,36 +274,36 @@ margin-right: 10px; border-radius: 100%; overflow: hidden; - background-color: @odoo-brand-optional; + background-color: $odoo-brand-optional; &:after { // Outside pie border to go over border-radius irregularities content: " "; - .o-position-absolute(0, 0); + @include o-position-absolute(0, 0); width: 100%; height: 100%; border-radius: 100%; } .o_mask { - .o-position-absolute(0, 0); - .o-transform-origin(0); + @include o-position-absolute(0, 0); + @include o-transform-origin(0); width: 50%; height: 100%; - background-color: @odoo-view-background-color; + background-color: $odoo-view-background-color; &.o_full { background-color: inherit; } } .o_pie_value { - .o-flex-display(); - .o-justify-content(center); - .o-align-items(center); + @include o-flex-display; + @include o-justify-content(center); + @include o-align-items(center); border-radius: 100%; font-weight: 700; - color: @odoo-brand-primary; + color: $odoo-brand-primary; } } } @@ -326,11 +322,11 @@ position: relative; .o_form_image_controls { - .o-position-absolute(0, 0); + @include o-position-absolute(0, 0); width: 100%; color: white; - background-color: @odoo-brand-optional; + background-color: $odoo-brand-optional; opacity: 0; transition: opacity ease 400ms; @@ -339,7 +335,7 @@ cursor: pointer; } } - @media (max-width: @screen-xs-min) { + @media (max-width: $screen-xs-min) { .o_form_image_controls{ position: initial; opacity: 1; @@ -349,10 +345,10 @@ margin: 0px; text-align: center; &.o_select_file_button{ - background: @odoo-brand-optional; + background: $odoo-brand-optional; } &.o_clear_file_button{ - background: @brand-danger; + background: $brand-danger; } } } @@ -377,7 +373,7 @@ position: relative; > .o_field_domain_panel { - .o-position-absolute(0, 0); + @include o-position-absolute(0, 0); margin-top: 0; } } diff --git a/addons/web/static/src/scss/fields_extra.scss b/addons/web/static/src/scss/fields_extra.scss index 577cfacacb4..dd441c07710 100644 --- a/addons/web/static/src/scss/fields_extra.scss +++ b/addons/web/static/src/scss/fields_extra.scss @@ -17,7 +17,7 @@ .o_field_widget { // Dropdowns input carret .o_input_dropdown .o_dropdown_button { - .o-position-absolute(2px, 4px); + @include o-position-absolute(2px, 4px); } // Many2one @@ -34,22 +34,22 @@ // Percent pie field &.o_field_percent_pie { - @pie-dimension: 34px; - @pie-ring-width: 4px; + $pie-dimension: 34px; + $pie-ring-width: 4px; .o_pie { - width: @pie-dimension; - height: @pie-dimension; + width: $pie-dimension; + height: $pie-dimension; margin-left: 5px; &:after { // Outside pie border to go over border-radius irregularities - border: 1px solid @odoo-brand-primary; + border: 1px solid $odoo-brand-primary; } .o_pie_value { - .o-position-absolute(@pie-ring-width, @pie-ring-width); - width: @pie-dimension - 2 * @pie-ring-width; - height: @pie-dimension - 2 * @pie-ring-width; + @include o-position-absolute($pie-ring-width, $pie-ring-width); + width: $pie-dimension - 2 * $pie-ring-width; + height: $pie-dimension - 2 * $pie-ring-width; border: 1px solid white; background-color: white; font-size: 10px; diff --git a/addons/web/static/src/scss/fonts.scss b/addons/web/static/src/scss/fonts.scss index c6b19a2ba2f..bfabf4fe6fc 100644 --- a/addons/web/static/src/scss/fonts.scss +++ b/addons/web/static/src/scss/fonts.scss @@ -1,37 +1,37 @@ // ------------------------------------------------------------------ // Lato // ------------------------------------------------------------------ -@lato-font-path: '../fonts/lato'; +$lato-font-path: '../fonts/lato'; -.lato-font(@type, @weight, @style) { +@mixin lato-font($type, $weight, $style) { @font-face { font-family: 'Lato'; - src: url('@{lato-font-path}/Lato-@{type}-webfont.eot'); - src: url('@{lato-font-path}/Lato-@{type}-webfont.eot?#iefix') format('embedded-opentype'), - url('@{lato-font-path}/Lato-@{type}-webfont.woff') format('woff'), - url('@{lato-font-path}/Lato-@{type}-webfont.ttf') format('truetype'), - url('@{lato-font-path}/Lato-@{type}-webfont.svg#Lato') format('svg'); - font-weight: @weight; - font-style: @style; + src: url('#{$lato-font-path}/Lato-#{$type}-webfont.eot'); + src: url('#{$lato-font-path}/Lato-#{$type}-webfont.eot?#iefix') format('embedded-opentype'), + url('#{$lato-font-path}/Lato-#{$type}-webfont.woff') format('woff'), + url('#{$lato-font-path}/Lato-#{$type}-webfont.ttf') format('truetype'), + url('#{$lato-font-path}/Lato-#{$type}-webfont.svg#Lato') format('svg'); + font-weight: $weight; + font-style: $style; } @font-face { - font-family: 'Lato-@{type}'; - src: url('@{lato-font-path}/Lato-@{type}-webfont.eot'); - src: url('@{lato-font-path}/Lato-@{type}-webfont.eot?#iefix') format('embedded-opentype'), - url('@{lato-font-path}/Lato-@{type}-webfont.woff') format('woff'), - url('@{lato-font-path}/Lato-@{type}-webfont.ttf') format('truetype'), - url('@{lato-font-path}/Lato-@{type}-webfont.svg#Roboto') format('svg'); + font-family: 'Lato-#{$type}'; + src: url('#{$lato-font-path}/Lato-#{$type}-webfont.eot'); + src: url('#{$lato-font-path}/Lato-#{$type}-webfont.eot?#iefix') format('embedded-opentype'), + url('#{$lato-font-path}/Lato-#{$type}-webfont.woff') format('woff'), + url('#{$lato-font-path}/Lato-#{$type}-webfont.ttf') format('truetype'), + url('#{$lato-font-path}/Lato-#{$type}-webfont.svg#Roboto') format('svg'); } } -.lato-font-pair(@type, @weight) { - .lato-font('@{type}', @weight, normal); - .lato-font('@{type}Ita', @weight, italic); +@mixin lato-font-pair($type, $weight) { + @include lato-font('#{$type}', $weight, normal); + @include lato-font('#{$type}Ita', $weight, italic); } -.lato-font-pair('Hai', 100); -.lato-font-pair('Lig', 300); -.lato-font-pair('Reg', 400); -.lato-font-pair('Bol', 700); -.lato-font-pair('Bla', 900); +@include lato-font-pair('Hai', 100); +@include lato-font-pair('Lig', 300); +@include lato-font-pair('Reg', 400); +@include lato-font-pair('Bol', 700); +@include lato-font-pair('Bla', 900); diff --git a/addons/web/static/src/scss/form_view.scss b/addons/web/static/src/scss/form_view.scss index 1e477aac02d..3698ee07e74 100644 --- a/addons/web/static/src/scss/form_view.scss +++ b/addons/web/static/src/scss/form_view.scss @@ -1,10 +1,10 @@ .o_form_view { - background-color: @odoo-view-background-color; + background-color: $odoo-view-background-color; // Utility classes .oe_form_box_info { - .bg-info; - .o-webclient-padding(@top: 5px, @bottom: 5px); + @extend .bg-info; // FIXME was a mixin before scss convertion + @include o-webclient-padding($top: 5px, $bottom: 5px); > p { margin: auto; } @@ -17,37 +17,37 @@ } .oe_inline { width: auto!important; - @media (min-width: @screen-xs-min) { + @media (min-width: $screen-xs-min) { &.o_inner_group { width: 1px!important; } } } .oe_left { - .oe_inline; + @extend .oe_inline; // FIXME was a mixin before scss convertion float: left!important; } .oe_right { - .oe_inline; + @extend .oe_inline; // FIXME was a mixin before scss convertion float: right!important; } - @media (min-width: @screen-xs-min) { + @media (min-width: $screen-xs-min) { .o_row { &, &.o_field_widget { // Some field may want to use o_row as root and these rules must prevalue - .o-flex-display(); + @include o-flex-display; width: auto!important; } - .o-align-items(baseline); + @include o-align-items(baseline); min-width: 50px; - margin: 0 -@odoo-form-spacing-unit/2; + margin: 0 -$odoo-form-spacing-unit/2; > div, > span, > button, > label, > a, > input { // > * did not add a level of priority to the rule - .o-flex(0, 0, auto); + @include o-flex(0, 0, auto); width: auto!important; - margin-right: @odoo-form-spacing-unit/2; - margin-left: @odoo-form-spacing-unit/2; + margin-right: $odoo-form-spacing-unit/2; + margin-left: $odoo-form-spacing-unit/2; } > .o_row { @@ -58,7 +58,7 @@ padding-bottom: 0; } > .o_field_boolean { - .o-align-self(center); + @include o-align-self(center); } } } @@ -82,14 +82,14 @@ .o_form_uri { display: inline-block; - color: @odoo-main-text-color; + color: $odoo-main-text-color; &:first-line { - color: @link-color; + color: $link-color; } &:hover { - color: darken(@odoo-main-text-color, 1%); // hack required on chrome + color: darken($odoo-main-text-color, 1%); // hack required on chrome &:first-line { - color: darken(@link-color, 15%); + color: darken($link-color, 15%); } } } @@ -101,17 +101,17 @@ } .oe_title { - max-width: @container-sm - (2 * @odoo-horizontal-padding); + max-width: $container-sm - (2 * $odoo-horizontal-padding); } - @media (min-width: @screen-xs-min) { + @media (min-width: $screen-xs-min) { .o_row { > .o_field_widget, > div { - .o-flex(1, 1, auto); + @include o-flex(1, 1, auto); width: 0!important; // 3rd flex argument does not work with input (must be auto and real width 0) &.o_field_boolean, &.o_priority { - .o-flex(0, 0, auto); + @include o-flex(0, 0, auto); width: auto!important; } } @@ -122,10 +122,10 @@ // No sheet &.o_form_nosheet { display: block; - .o-webclient-padding(@top: @odoo-sheet-vpadding, @bottom: @odoo-sheet-vpadding); + @include o-webclient-padding($top: $odoo-sheet-vpadding, $bottom: $odoo-sheet-vpadding); .o_form_statusbar { - margin: -@odoo-sheet-vpadding -@odoo-horizontal-padding @odoo-sheet-vpadding -@odoo-horizontal-padding; + margin: -$odoo-sheet-vpadding -$odoo-horizontal-padding $odoo-sheet-vpadding -$odoo-horizontal-padding; } } @@ -134,37 +134,37 @@ position: relative; > .o_form_sheet { - margin: @odoo-sheet-vpadding auto; + margin: $odoo-sheet-vpadding auto; } } // Statusbar .o_form_statusbar { position: relative; // Needed for the "More" dropdown - .o-flex-display(); - .o-justify-content(space-between); - padding-left: @odoo-horizontal-padding; - border-bottom: 1px solid @gray-lighter-darker; - background-color: @odoo-view-background-color; + @include o-flex-display; + @include o-justify-content(space-between); + padding-left: $odoo-horizontal-padding; + border-bottom: 1px solid $gray-lighter-darker; + background-color: $odoo-view-background-color; > .o_statusbar_buttons, > .o_statusbar_status { - .o-flex-display(); - .o-align-items(center); - .o-align-content(space-around); + @include o-flex-display; + @include o-align-items(center); + @include o-align-content(space-around); } > .o_field_widget { - .o-align-self(center); + @include o-align-self(center); margin-bottom: 0px; } > .o_statusbar_buttons { - .o-flex-flow(row, wrap); + @include o-flex-flow(row, wrap); > .btn { - @o-statusbar-buttons-vmargin: 4px; - min-height: @odoo-statusbar-height - 2 * @o-statusbar-buttons-vmargin; - margin: @o-statusbar-buttons-vmargin 3px @o-statusbar-buttons-vmargin 0; + $o-statusbar-buttons-vmargin: 4px; + min-height: $odoo-statusbar-height - 2 * $o-statusbar-buttons-vmargin; + margin: $o-statusbar-buttons-vmargin 3px $o-statusbar-buttons-vmargin 0; padding-top: 2px; padding-bottom: 2px; } @@ -172,28 +172,28 @@ > .o_statusbar_status { margin-left: auto; - .o-flex-flow(row-reverse, wrap-reverse); - .o-align-self(stretch); - .o-align-items(stretch); + @include o-flex-flow(row-reverse, wrap-reverse); + @include o-align-self(stretch); + @include o-align-items(stretch); overflow-x: hidden; // to prevent horizontal scroll due to last arrow > .o_arrow_button { - min-height: @odoo-statusbar-height; + min-height: $odoo-statusbar-height; font-size: 11px; font-weight: bold; position: relative; - padding-left: @odoo-statusbar-arrow-width*2; - color: @gray; + padding-left: $odoo-statusbar-arrow-width*2; + color: $gray; border-width: 0 0 0; border-radius: 0; - .o-transition(all, 0.1s); + @include o-transition(all, 0.1s); &:first-child { - padding-right: @odoo-horizontal-padding; // Compensate container padding + padding-right: $odoo-horizontal-padding; // Compensate container padding } &:last-child { - padding-left: @odoo-horizontal-padding - 1; - border-left: 1px solid @gray-lighter-darker; + padding-left: $odoo-horizontal-padding - 1; + border-left: 1px solid $gray-lighter-darker; } &:active { @@ -202,48 +202,48 @@ &.disabled { opacity: 1.0; - color: @text-muted; + color: $text-muted; pointer-events: none; - border-left: 1px solid @gray-lighter-dark; + border-left: 1px solid $gray-lighter-dark; } &:before, &:after { content: " "; display: block; - .o-position-absolute(0, -@odoo-statusbar-arrow-width + 1); + @include o-position-absolute(0, -$odoo-statusbar-arrow-width + 1); - border-top: floor(@odoo-statusbar-height/2) solid transparent; - border-bottom: ceil(@odoo-statusbar-height/2) solid transparent; + border-top: floor($odoo-statusbar-height/2) solid transparent; + border-bottom: ceil($odoo-statusbar-height/2) solid transparent; border-right: none; - border-left: @odoo-statusbar-arrow-width solid @odoo-view-background-color; - .o-transition(border, 0.2s); + border-left: $odoo-statusbar-arrow-width solid $odoo-view-background-color; + @include o-transition(border, 0.2s); -moz-transform: scale(0.9999); // Smooth the triangle on firefox } &:not(.disabled) { &:hover, &:active, &:focus { - color: @odoo-brand-optional; - background-color: @gray-lighter; + color: $odoo-brand-optional; + background-color: $gray-lighter; &:after { - border-left-color: @gray-lighter; + border-left-color: $gray-lighter; } } } &:before { - right: -@odoo-statusbar-arrow-width; - border-left-color: @gray-lighter-dark; + right: -$odoo-statusbar-arrow-width; + border-left-color: $gray-lighter-dark; } &.btn-primary.disabled { - color: @odoo-brand-primary; + color: $odoo-brand-primary; font-size: 11px; - background-color: @gray-lighter; + background-color: $gray-lighter; cursor: default; &:after { - border-left-color: @gray-lighter; + border-left-color: $gray-lighter; } } @@ -253,7 +253,7 @@ } .o-status-more { - .o-position-absolute(100%, 0); + @include o-position-absolute(100%, 0); min-width: 100px; > li > button { width: 100%; @@ -266,8 +266,8 @@ > .o_statusbar_buttons > .btn-group, > .o_statusbar_status { > .dropdown-toggle { &:after { - .o-caret-down(); - margin-left: @odoo-form-spacing-unit; + @include o-caret-down; + margin-left: $odoo-form-spacing-unit; } } @@ -315,14 +315,12 @@ margin: 10px 0; // o_group contains nested groups - .o-generate-groups(@odoo-form-group-cols); - .o-generate-groups(@n, @i: 1) when (@i =< @n) { - .o_group_col_@{i} { + @for $i from 1 through $odoo-form-group-cols { + .o_group_col_#{$i} { display: inline-block; - width: floor(100% / 12 * @i); + width: floor(100% / 12 * $i); vertical-align: top; } - .o-generate-groups(@n, @i + 1); } &.o_inner_group { @@ -352,7 +350,7 @@ width: 100%; > .btn { - .o-flex(0, 0, auto); + @include o-flex(0, 0, auto); padding: 0 10px; } } @@ -364,7 +362,7 @@ // Makes extra buttons (e.g. m2o external button) overflow on the // right padding of the parent element .o_input_dropdown { - .o-flex(1, 0, auto); + @include o-flex(1, 0, auto); } } @@ -380,17 +378,17 @@ // Separators .o_horizontal_separator { - font-size: @font-size-h2; - margin: @odoo-form-spacing-unit 0; + font-size: $font-size-h2; + margin: $odoo-form-spacing-unit 0; &:empty { - height: @odoo-form-spacing-unit * 2; + height: $odoo-form-spacing-unit * 2; } } // Notebooks .o_notebook { clear: both; // For the notebook not to have alongside floating elements - margin-top: @odoo-form-spacing-unit * 2; + margin-top: $odoo-form-spacing-unit * 2; .nav-tabs > .tab-pane { min-height: 100px; @@ -399,14 +397,14 @@ // Labels .o_form_label { - margin: 0 @odoo-form-spacing-unit 0 0; - font-size: @font-size-base; // The label muse have the same size whatever their position - line-height: @line-height-base; + margin: 0 $odoo-form-spacing-unit 0 0; + font-size: $font-size-base; // The label muse have the same size whatever their position + line-height: $line-height-base; } // Form fields .o_field_widget { - margin-bottom: @odoo-form-spacing-unit; + margin-bottom: $odoo-form-spacing-unit; } .o_field_widget, .btn { .o_field_widget { @@ -428,7 +426,7 @@ // Text field with oe_inline class .o_field_text.oe_inline { width: 100%!important; - @media (min-width: @screen-xs-min) { + @media (min-width: $screen-xs-min) { width: 45%!important; } } @@ -445,7 +443,7 @@ // Specific style classes .o_group.o_inner_group.oe_subtotal_footer { - .oe_right; + @extend .oe_right; // FIXME was a mixin after scss convertion > tbody > tr > td { padding: 0; @@ -466,7 +464,7 @@ .o_field_widget { text-align: right; - .o-justify-content(flex-end); + @include o-justify-content(flex-end); width: 100%; } } @@ -478,7 +476,7 @@ .oe_subtotal_footer_separator { width: 100%; text-align: right; - border-top: 1px solid @gray-lighter-dark; + border-top: 1px solid $gray-lighter-dark; font-weight: bold; font-size: 1.3em; } @@ -487,7 +485,7 @@ .o_address_format { width: 100%; .o_address_street, .o_address_country { - .o-flex-display; + @include o-flex-display; } .o_address_city { @@ -557,12 +555,12 @@ // Boolean .o_field_boolean { - margin: 0 @odoo-form-spacing-unit 0 0; + margin: 0 $odoo-form-spacing-unit 0 0; } // Timezone widget warning .o_tz_warning { - color: @brand-danger; + color: $brand-danger; cursor: help; position: absolute; margin-left: -40px; @@ -583,7 +581,7 @@ > tfoot > tr > td { padding: 3px; - color: @odoo-main-text-color; + color: $odoo-main-text-color; } } &.o_form_readonly .o_field_widget .o_list_view .o_row_handle { @@ -593,9 +591,9 @@ // Attachments .oe_attachment { display: inline-block; - border: 1px solid @odoo-brand-lightsecondary; - margin: 0 @odoo-form-spacing-unit @odoo-form-spacing-unit 0; - padding: @odoo-form-spacing-unit; + border: 1px solid $odoo-brand-lightsecondary; + margin: 0 $odoo-form-spacing-unit $odoo-form-spacing-unit 0; + padding: $odoo-form-spacing-unit; } &.oe_form_configuration { @@ -654,19 +652,19 @@ label.o_light_label, .o_light_label label { } // XXS form view specific rules -.form-break-table() { +@mixin form-break-table { display: block; - margin-bottom: @odoo-form-spacing-unit * 4; + margin-bottom: $odoo-form-spacing-unit * 4; > tbody { display: block; > tr { - .o-flex-display(); - .o-flex-flow(row, wrap); + @include o-flex-display; + @include o-flex-flow(row, wrap); > td { - .o-flex(1, 0, auto); + @include o-flex(1, 0, auto); display: block; max-width: 100%; padding: 0; @@ -674,11 +672,11 @@ label.o_light_label, .o_light_label label { width: auto!important; // !important is required to override the width computed in JS &.o_td_label { width: 94%!important; // The label must be on its own line except if the form field is small enough (checkbox) - line-height: @odoo-label-font-size-factor; + line-height: $odoo-label-font-size-factor; } .o_field_widget { - margin-bottom: @odoo-form-spacing-unit * 2; + margin-bottom: $odoo-form-spacing-unit * 2; &.o_field_boolean { margin-right: 0; } @@ -698,16 +696,16 @@ label.o_light_label, .o_light_label label { } .o_group { &.o_inner_group { - .form-break-table(); + @include form-break-table; } } } // Settings form views .o_settings_container { - .o-flex-display(); - .o-flex(0, 1, auto); - .o-flex-flow(row, wrap); + @include o-flex-display; + @include o-flex(0, 1, auto); + @include o-flex-flow(row, wrap); .o_setting_box:visible:nth-child(odd) { clear: left; } diff --git a/addons/web/static/src/scss/form_view_extra.scss b/addons/web/static/src/scss/form_view_extra.scss index 95da6a2b35b..f401ecdda56 100644 --- a/addons/web/static/src/scss/form_view_extra.scss +++ b/addons/web/static/src/scss/form_view_extra.scss @@ -1,6 +1,6 @@ -@sheet-max-width: 860px; -@sheet-min-width: 650px; -@sheet-padding: 16px; +$sheet-max-width: 860px; +$sheet-min-width: 650px; +$sheet-padding: 16px; .o_form_view { &.o_form_nosheet.oe_form_nomargin { @@ -11,8 +11,8 @@ background: url(/web/static/src/img/form_sheetbg.png); > .o_form_sheet { - min-width: @sheet-min-width; - max-width: @sheet-max-width; + min-width: $sheet-min-width; + max-width: $sheet-max-width; min-height: 330px; padding: 16px; border: 1px solid #c8c8d3; @@ -73,12 +73,12 @@ line-height: 1.2; .o_stat_value { - .o-text-overflow(block); + @include o-text-overflow(block); font-weight: 700; - color: @odoo-brand-primary; + color: $odoo-brand-primary; } .o_stat_text { - .o-text-overflow(block); + @include o-text-overflow(block); font-size: small; .o_stat_value { @@ -105,7 +105,7 @@ padding: 0 10px; } .o_dropdown_more { - .o-position-absolute(@top: 100%, @right: 0); + @include o-position-absolute($top: 100%, $right: 0); min-width: 0; padding: 0px; } @@ -144,7 +144,7 @@ // Separators .o_horizontal_separator { - color: @odoo-brand-optional; + color: $odoo-brand-optional; font-weight: bold; } @@ -166,8 +166,8 @@ // Chatter .oe_chatter { display: block; - min-width: @sheet-min-width + 2* @sheet-padding; - max-width: @sheet-max-width + 2* @sheet-padding; + min-width: $sheet-min-width + 2* $sheet-padding; + max-width: $sheet-max-width + 2* $sheet-padding; margin: 0 auto; padding: 16px 16px 48px; } diff --git a/addons/web/static/src/scss/graph_view.scss b/addons/web/static/src/scss/graph_view.scss index fc8fc323582..62e94e926ce 100644 --- a/addons/web/static/src/scss/graph_view.scss +++ b/addons/web/static/src/scss/graph_view.scss @@ -3,7 +3,7 @@ height: 100%; overflow: auto; svg { - background-color: @odoo-view-background-color; + background-color: $odoo-view-background-color; } } } @@ -16,5 +16,5 @@ // Control panel buttons // ------------------------------------------------------------------ .o_graph_measures_list { - .o-selected-li; + @include o-selected-li; } diff --git a/addons/web/static/src/scss/kanban_column_progressbar.scss b/addons/web/static/src/scss/kanban_column_progressbar.scss index f4cffd6c097..9a54bbd8067 100644 --- a/addons/web/static/src/scss/kanban_column_progressbar.scss +++ b/addons/web/static/src/scss/kanban_column_progressbar.scss @@ -1,41 +1,41 @@ -@o-kanban-counter-header-height: @o-kanban-header-title-height*0.6; +$o-kanban-counter-header-height: $o-kanban-header-title-height*0.6; -.o-kanban-css-filter(@class, @accent-color) { +@mixin o-kanban-css-filter($class, $accent-color) { // Provide CSS reordering and highlight - &.o_kanban_group_show_@{class} { - @mix-soft: mix(@accent-color, @odoo-webclient-background-color, 5%); - @mix-full: mix(@accent-color, @odoo-webclient-background-color); + &.o_kanban_group_show_#{$class} { + $mix-soft: mix($accent-color, $odoo-webclient-background-color, 5%); + $mix-full: mix($accent-color, $odoo-webclient-background-color); &, .o_kanban_header { - background-color: @mix-soft; - border-color: @mix-full; + background-color: $mix-soft; + border-color: $mix-full; } - .progress-bar.bg-@{class}-full { + .progress-bar.bg-#{$class}-full { border: 1px solid white; } - .oe_kanban_card_@{class} { + .oe_kanban_card_#{$class} { order: 1; - margin-bottom: @o-kanban-inside-vgutter*0.5; + margin-bottom: $o-kanban-inside-vgutter*0.5; - ~ .oe_kanban_card_@{class} { - margin-top: -@o-kanban-inside-vgutter*0.5 - 1px; + ~ .oe_kanban_card_#{$class} { + margin-top: -$o-kanban-inside-vgutter*0.5 - 1px; } ~ .o_kanban_load_more { - margin-top: -@o-kanban-inside-vgutter*0.5; + margin-top: -$o-kanban-inside-vgutter*0.5; } } .o_kanban_load_more { order: 2; - padding: @o-kanban-inside-vgutter*0.5 0 @o-kanban-inside-vgutter; + padding: $o-kanban-inside-vgutter*0.5 0 $o-kanban-inside-vgutter; } - .o_kanban_record:not(.oe_kanban_card_@{class}) { + .o_kanban_record:not(.oe_kanban_card_#{$class}) { order: 3; - .o-hover-opacity(0.5); + @include o-hover-opacity(0.5); box-shadow: none; } } @@ -44,7 +44,7 @@ // If columns has the progressbar, adapt the layout .o_kanban_view .o_kanban_group.o_kanban_has_progressbar { > .o_kanban_header .o_kanban_header_title { - height: @o-kanban-counter-header-height; + height: $o-kanban-counter-header-height; margin-top: 5px; } @@ -57,16 +57,16 @@ .o_kanban_counter { position: relative; - .o-flex-display(); - .o-align-items(center); - .o-transition(opacity, 0.3s); - margin-bottom: @o-kanban-record-margin*2; + @include o-flex-display; + @include o-align-items(center); + @include o-transition(opacity, 0.3s); + margin-bottom: $o-kanban-record-margin*2; > .o_kanban_counter_progress { width: 76%; - height: @font-size-small; + height: $font-size-small; margin-bottom: 0; - background-color: @gray-lighter-dark; + background-color: $gray-lighter-dark; box-shadow: none; .progress-bar { @@ -82,24 +82,24 @@ .o_kanban_counter_label { font-size: 10px; - .user-select(none); + @include user-select(none); } } > .o_kanban_counter_side { width: 21%; margin-left: 3%; - color: @headings-color; + color: $headings-color; text-align: right; white-space: nowrap; - .o-transform-origin(right, center); + @include o-transform-origin(right, center); &.o_kanban_grow { - .o-animation(grow, 1s, ease); + @include o-animation(grow, 1s, ease); } &.o_kanban_grow_huge { - .o-animation(grow_huge, 1s, ease); + @include o-animation(grow_huge, 1s, ease); } // Target currency icon @@ -113,16 +113,16 @@ } .o_kanban_view .o_kanban_group { - .o-kanban-css-filter(success, @brand-success); - .o-kanban-css-filter(warning, @brand-warning); - .o-kanban-css-filter(danger, @brand-danger); + @include o-kanban-css-filter(success, $brand-success); + @include o-kanban-css-filter(warning, $brand-warning); + @include o-kanban-css-filter(danger, $brand-danger); &.o_kanban_group_show { - .o-flex-display(); - .o-flex-flow(column, nowrap); + @include o-flex-display; + @include o-flex-flow(column, nowrap); > * { - .o-flex(0, 0, auto); + @include o-flex(0, 0, auto); } } } diff --git a/addons/web/static/src/scss/kanban_dashboard.scss b/addons/web/static/src/scss/kanban_dashboard.scss index 83db9319166..0a1688260a8 100644 --- a/addons/web/static/src/scss/kanban_dashboard.scss +++ b/addons/web/static/src/scss/kanban_dashboard.scss @@ -1,26 +1,170 @@ +// FIXME variables and mixins were moved from kanban_view.scss to here as this +// file is placed before in the assets template (and changing file order may +// break selector priorities). + +$o-kanban-record-margin: $odoo-horizontal-padding/2; +$o-kanban-group-padding: $odoo-horizontal-padding; // Cannot be higher than this + +$o-kanban-default-record-width: 300px; +$o-kanban-small-record-width: 240px; + +$o-kanban-header-title-height: 50px; + +$o-kanban-image-width: 64px; +$o-kanban-inside-vgutter: 8px; +$o-kanban-inside-hgutter: 8px; +$o-kanban-color-border-width: 3px; +$o-kanban-inside-hgutter-mobile: $odoo-horizontal-padding; +$o-kanban-inner-hmargin: 5px; +$o-kanban-progressbar-height: 20px; + +// ------- Kanban grouped mixins ------- +@mixin o-kanban-icon($base-opacity: 0.5) { + display: block; + text-align: center; + color: $odoo-main-text-color; + font-size: $font-size-small; + cursor: pointer; + @include o-hover-opacity($base-opacity); +} +@mixin o-kanban-tag-color { + @for $size from 1 through $odoo-nb-ui-color { + // Note: the first color is supposed to be invisible if there is a color + // field but it is used as a default color when there is no color field + &.o_tag_color_#{$size - 1} span { + background-color: nth($odoo-colors, $size); + } + } +} +@mixin o-kanban-record-color { + @for $size from 2 through $odoo-nb-ui-color { + // Note: the first color is not defined as it is the 'no color' for kanban + .oe_kanban_color_#{$size - 1}::after { + background-color: nth($odoo-colors, $size); + } + } +} +@mixin o-kanban-slim-col { + position: relative; + @include o-flex(0, 0, auto); + margin: 0; + padding: 0 floor($o-kanban-group-padding * 0.7); + cursor: pointer; +} +@mixin o-kanban-header-title { + @include o-flex-display; + @include o-align-items(center); + height: $o-kanban-header-title-height; + line-height: 2.2; + color: $headings-color; +} +@mixin o-kanban-v-title { + @include o-position-absolute($o-kanban-inside-vgutter * 2, $left: floor(-$o-kanban-inside-vgutter * 1.2)); + @include o-transform-origin(left, bottom, $z: 0); + @include o-transform(rotate(90deg)); + overflow: visible; + white-space: nowrap; + font-size: 15px; +} + +// ------- Kanban records mixins ------- +@mixin o-kanban-record-title($font-size) { + color: $headings-color; + font-size: $font-size; + font-weight: 500; + margin-bottom: 0; + margin-top: 0; +} +@mixin o-kanban-dropdown($padding-base: $o-kanban-inside-vgutter) { + margin: -1px -1px auto auto; // compensate border + padding: $padding-base/2 $padding-base; + border: 1px solid transparent; + border-bottom: none; + vertical-align: top; + color: $text-color; + + &:hover { + color: $headings-color; + } + &:focus, &:active, &:focus:active { + outline: none; + } +} +@mixin o-kanban-dropdown-open { + position: relative; + background: white; + border-color: $gray-lighter-darker; + z-index: $zindex-dropdown + 1; +} +@mixin o-kanban-dropdown-menu { + @include o-position-absolute($right: -1px); + margin-top: -1px; + border-color: $gray-lighter-darker; +} +@mixin o-kanban-colorpicker { + max-width: 150px; + padding: 3px ($odoo-dropdown-hpadding - $o-kanban-inner-hmargin) 3px $odoo-dropdown-hpadding; + + > li { + display: inline-block; + margin: $o-kanban-inner-hmargin $o-kanban-inner-hmargin 0 0; + border: 1px solid white; + box-shadow: 0 0 0 1px $gray-lighter-dark; + + > a { + display: block; + + &::after { + content: ""; + display: block; + width: 20px; + height: 15px; + } + } + + // No Color + &:first-child > a { + position: relative; + &::before { + content: ""; + @include o-position-absolute(-2px, $left: 10px); + display: block; + width: 1px; + height: 20px; + @include rotate(45deg); + background-color: red; + } + &::after { + background-color: white; + } + } + } +} + + // ------- Kanban dashboard variables ------- // Since rows and containers are used inside cards, we're // forced to set the padding relative to the grid system. -@o-kanban-dashboard-hpadding: @grid-gutter-width*0.5; -@o-kanban-dashboard-vpadding: @grid-gutter-width*0.25; +$o-kanban-dashboard-hpadding: $grid-gutter-width*0.5; +$o-kanban-dashboard-vpadding: $grid-gutter-width*0.25; // Used to manage spacing in complex dropdown menu -@o-kanban-dashboard-dropdown-complex-gap: 5px; +$o-kanban-dashboard-dropdown-complex-gap: 5px; // Emulate dropdown links -.o-kanban-dashboard-dropdown-link(@link-padding-gap: @odoo-dropdown-hpadding) { +@mixin o-kanban-dashboard-dropdown-link($link-padding-gap: $odoo-dropdown-hpadding) { padding: 0; > a { - margin: auto auto auto -@link-padding-gap; - padding: 3px @link-padding-gap; - color: @text-color; + margin: auto auto auto -$link-padding-gap; + padding: 3px $link-padding-gap; + color: $text-color; display: block; &:hover { - background-color: @gray-lighter-dark; - color: @headings-color; + background-color: $gray-lighter-dark; + color: $headings-color; } } &:last-child { @@ -30,16 +174,16 @@ .o_kanban_view.o_kanban_dashboard { // correctly display the no_content_helper in dashboards - .o-flex-flow(row, wrap); + @include o-flex-flow(row, wrap); .o_kanban_record { position: relative; - .o-flex-display(); - .o-flex-flow(column, nowrap); - .o-justify-content(space-between); - padding: @o-kanban-dashboard-vpadding @o-kanban-dashboard-hpadding; + @include o-flex-display; + @include o-flex-flow(column, nowrap); + @include o-justify-content(space-between); + padding: $o-kanban-dashboard-vpadding $o-kanban-dashboard-hpadding; - @media (max-width: @screen-xs-max) { + @media (max-width: $screen-xs-max) { margin-bottom: 10px; } @@ -57,20 +201,20 @@ } // ------- Dropdown toggle & menu ------- - @o-kanban-manage-toggle-height: 35px; + $o-kanban-manage-toggle-height: 35px; .o_kanban_manage_toggle_button { - .o-kanban-dropdown(@o-kanban-dashboard-hpadding); - height: @o-kanban-manage-toggle-height; + @include o-kanban-dropdown($o-kanban-dashboard-hpadding); + height: $o-kanban-manage-toggle-height; } .o_kanban_card_manage_pane { - .dropdown-menu; - .o-kanban-dropdown-menu(); + @extend .dropdown-menu; // FIXME was a mixin before scss convertion + @include o-kanban-dropdown-menu; // Arbitrary value to place the dropdown-menu exactly below the // dropdown-toggle (height is forced so that it works on Firefox) - top: @o-kanban-manage-toggle-height - 1; + top: $o-kanban-manage-toggle-height - 1; > div:not(.o_no_padding_kanban_colorpicker) { padding: 3px 0 3px 20px; @@ -79,11 +223,11 @@ } > .o_kanban_card_manage_section { - border-bottom: 1px solid @gray-lighter-dark; + border-bottom: 1px solid $gray-lighter-dark; margin-bottom: 10px; > div { - .o-kanban-dashboard-dropdown-link(); + @include o-kanban-dashboard-dropdown-link; } } @@ -93,32 +237,32 @@ max-width: 400px; .row { - .o-flex-display(); - .o-flex-flow(row, nowrap); - .o-justify-content(space-between); + @include o-flex-display; + @include o-flex-flow(row, nowrap); + @include o-justify-content(space-between); margin-left: 0; margin-right: 0; - padding-left: @o-kanban-dashboard-dropdown-complex-gap*2; - padding-right: @o-kanban-dashboard-dropdown-complex-gap*2; + padding-left: $o-kanban-dashboard-dropdown-complex-gap*2; + padding-right: $o-kanban-dashboard-dropdown-complex-gap*2; } div[class*="col-"] { - .o-flex(1, 1, percentage(100/3)); - padding-left: @o-kanban-dashboard-dropdown-complex-gap; - padding-right: @o-kanban-dashboard-dropdown-complex-gap; + @include o-flex(1, 1, percentage(100/3)); + padding-left: $o-kanban-dashboard-dropdown-complex-gap; + padding-right: $o-kanban-dashboard-dropdown-complex-gap; > .o_kanban_card_manage_title { - .h5; + @extend .h5; // FIXME was a mixin before scss convertion font-weight: 500; } > div:not(.o_kanban_card_manage_title) { - .o-kanban-dashboard-dropdown-link(@link-padding-gap: @o-kanban-dashboard-dropdown-complex-gap); + @include o-kanban-dashboard-dropdown-link($link-padding-gap: $o-kanban-dashboard-dropdown-complex-gap); } } .row.o_kanban_card_manage_settings { - border-top: 1px solid @gray-lighter-dark; - padding-top: @o-kanban-dashboard-dropdown-complex-gap*3; + border-top: 1px solid $gray-lighter-dark; + padding-top: $o-kanban-dashboard-dropdown-complex-gap*3; .oe_kanban_colorpicker { max-width: none; @@ -126,13 +270,13 @@ } div[class*="col-"] + div[class*="col-"] { - border-left: 1px solid @gray-lighter-dark; + border-left: 1px solid $gray-lighter-dark; } // Default options box div.text-right { text-align: left; // :/ - .o-kanban-dashboard-dropdown-link(0); + @include o-kanban-dashboard-dropdown-link(0); > a { margin-left: 40px; padding-left: 20px; @@ -148,7 +292,7 @@ display: block; } .o_kanban_manage_toggle_button { - .o-kanban-dropdown-open(); + @include o-kanban-dropdown-open; position: absolute; } } @@ -158,27 +302,27 @@ // Provide enough room for the dropdown-toggle .o_primary { - padding-right: @o-kanban-dashboard-hpadding*2; + padding-right: $o-kanban-dashboard-hpadding*2; } // Uniform titles .o_kanban_card_header_title .o_primary, .o_kanban_primary_left .o_primary > span:first-child, .oe_kanban_content > .o_title > h3 { - .o-kanban-record-title(@font-size: 16px); + @include o-kanban-record-title($font-size: 16px); display: block; } // Identify subtitles without classes .o_kanban_primary_left .o_primary > span:nth-child(2) > strong { font-weight: 500; - font-size: @font-size-small; - color: @text-muted; + font-size: $font-size-small; + color: $text-muted; } // Provide enough room to add an icon before the title &.o_has_icon .o_primary { - padding-left: @o-kanban-record-margin*1.5; + padding-left: $o-kanban-record-margin*1.5; } // ------- Kanban Content ------- @@ -189,11 +333,11 @@ } .o_kanban_card_header + .container.o_kanban_card_content { - .o-flex(1, 0, auto); - .o-flex-display(); - .o-flex-flow(column, nowrap); - .o-justify-content(space-between); - margin-top: @o-kanban-dashboard-vpadding * 2; + @include o-flex(1, 0, auto); + @include o-flex-display; + @include o-flex-flow(column, nowrap); + @include o-justify-content(space-between); + margin-top: $o-kanban-dashboard-vpadding * 2; padding-right: 0; padding-left: 0; @@ -203,31 +347,31 @@ a { position: relative; - .o-text-overflow(inline-block); + @include o-text-overflow(inline-block); } .o_kanban_primary_bottom { - margin-top: @o-kanban-dashboard-vpadding; - margin-bottom: -@o-kanban-dashboard-vpadding; + margin-top: $o-kanban-dashboard-vpadding; + margin-bottom: -$o-kanban-dashboard-vpadding; &.bottom_block { - border-top: 1px solid @gray-lighter-dark; - background-color: @gray-lighter; - padding-top: @o-kanban-dashboard-vpadding; - padding-bottom: @o-kanban-dashboard-vpadding; + border-top: 1px solid $gray-lighter-dark; + background-color: $gray-lighter; + padding-top: $o-kanban-dashboard-vpadding; + padding-bottom: $o-kanban-dashboard-vpadding; } } } .o_dashboard_graph { overflow: hidden; - margin: (@o-kanban-dashboard-vpadding * 2) -@o-kanban-dashboard-hpadding; + margin: ($o-kanban-dashboard-vpadding * 2) -$o-kanban-dashboard-hpadding; } } .o_favorite, .o_kanban_manage_toggle_button { - .o-position-absolute(0, 0); - padding: @o-kanban-record-margin; + @include o-position-absolute(0, 0); + padding: $o-kanban-record-margin; } .o_favorite { @@ -238,6 +382,6 @@ // Emphasize records' colors when necessary &.o_emphasize_colors .o_kanban_record::after { - width: @o-kanban-color-border-width * 2; + width: $o-kanban-color-border-width * 2; } } diff --git a/addons/web/static/src/scss/kanban_examples_dialog.scss b/addons/web/static/src/scss/kanban_examples_dialog.scss index 35a3d914b8e..2a27d2500b9 100644 --- a/addons/web/static/src/scss/kanban_examples_dialog.scss +++ b/addons/web/static/src/scss/kanban_examples_dialog.scss @@ -1,29 +1,29 @@ .o_kanban_examples_dialog { - .o-flex-display(); + @include o-flex-display; padding: 0px; - background: @odoo-color-silver; + background: $odoo-color-silver; // sidebar .o_kanban_examples_dialog_nav { - .o-flex(0, 0, auto); - border-right: 1px solid @gray-lighter-dark; + @include o-flex(0, 0, auto); + border-right: 1px solid $gray-lighter-dark; background: white; > ul > li { margin: 0; - border-bottom: 1px solid @gray-lighter-dark; + border-bottom: 1px solid $gray-lighter-dark; > a { padding: 12px 15px; - color: @odoo-main-text-color; + color: $odoo-main-text-color; border-left: 3px solid transparent; &:focus { outline: none; } } &.active > a { - color: @headings-color; - border-left-color: @odoo-brand-optional; + color: $headings-color; + border-left-color: $odoo-brand-optional; font-weight: bold; } } @@ -31,28 +31,28 @@ // content .o_kanban_examples_dialog_content { - .o-flex(1, 1, 100%); + @include o-flex(1, 1, 100%); .o_kanban_examples_description { padding: 16px 16px 0; text-align: justify; } .o_kanban_examples { - .o-flex-display(); + @include o-flex-display; padding: 0 6px; .o_kanban_examples_group { - .o-flex(1, 1, 100%); + @include o-flex(1, 1, 100%); margin: 10px; .o_kanban_examples_ghost { padding: 5px; margin-top: -1px; - border: thin solid @gray-lighter-dark; + border: thin solid $gray-lighter-dark; background-color: white; .o_ghost_content { height: 12px; - background: @gray-lighter-dark; + background: $gray-lighter-dark; &.o_ghost_tag { display: inline-block; width: 40%; diff --git a/addons/web/static/src/scss/kanban_view.scss b/addons/web/static/src/scss/kanban_view.scss index f9130469665..0f7432cfae4 100644 --- a/addons/web/static/src/scss/kanban_view.scss +++ b/addons/web/static/src/scss/kanban_view.scss @@ -1,158 +1,22 @@ -@o-kanban-record-margin: @odoo-horizontal-padding/2; -@o-kanban-group-padding: @odoo-horizontal-padding; // Cannot be higher than this - -@o-kanban-default-record-width: 300px; -@o-kanban-small-record-width: 240px; - -@o-kanban-header-title-height: 50px; - -@o-kanban-image-width: 64px; -@o-kanban-inside-vgutter: 8px; -@o-kanban-inside-hgutter: 8px; -@o-kanban-color-border-width: 3px; -@o-kanban-inside-hgutter-mobile: @odoo-horizontal-padding; -@o-kanban-inner-hmargin: 5px; -@o-kanban-progressbar-height: 20px; - -// ------- Kanban grouped mixins ------- -.o-kanban-icon(@base-opacity: 0.5) { - display: block; - text-align: center; - color: @odoo-main-text-color; - font-size: @font-size-small; - cursor: pointer; - .o-hover-opacity(@base-opacity); -} -.o-kanban-tag-color(@size: 0) when (@size < @odoo-nb-ui-color) { - // Note: the 0 color is supposed to be invisible if there is a color field - // but it is used as a default color when there is no color field - &.o_tag_color_@{size} span { - background-color: ~"@{odoo-color-@{size}}"; - } - .o-kanban-tag-color(@size + 1); -} -.o-kanban-record-color(@size: 1) when (@size < @odoo-nb-ui-color) { - // Note: the 0 color is not defined as it is the 'no color' for kanban - .oe_kanban_color_@{size}::after { - background-color: ~"@{odoo-color-@{size}}"; - } - .o-kanban-record-color(@size + 1); -} -.o-kanban-slim-col() { - position: relative; - .o-flex(0, 0, auto); - margin: 0; - padding: 0 floor(@o-kanban-group-padding * 0.7); - cursor: pointer; -} -.o-kanban-header-title() { - .o-flex-display(); - .o-align-items(center); - height: @o-kanban-header-title-height; - line-height: 2.2; - color: @headings-color; -} -.o-kanban-v-title() { - .o-position-absolute(@o-kanban-inside-vgutter * 2, @left: floor(-@o-kanban-inside-vgutter * 1.2)); - .o-transform-origin(left, bottom, @z: 0); - .o-transform(rotate(90deg)); - overflow: visible; - white-space: nowrap; - font-size: 15px; -} - -// ------- Kanban records mixins ------- -.o-kanban-record-title(@font-size) { - color: @headings-color; - font-size: @font-size; - font-weight: 500; - margin-bottom: 0; - margin-top: 0; -} -.o-kanban-dropdown(@padding-base: @o-kanban-inside-vgutter) { - margin: -1px -1px auto auto; // compensate border - padding: @padding-base/2 @padding-base; - border: 1px solid transparent; - border-bottom: none; - vertical-align: top; - color: @text-color; - - &:hover { - color: @headings-color; - } - &:focus, &:active, &:focus:active { - outline: none; - } -} -.o-kanban-dropdown-open() { - position: relative; - background: white; - border-color: @gray-lighter-darker; - z-index: @zindex-dropdown + 1; -} -.o-kanban-dropdown-menu() { - .o-position-absolute(@right: -1px); - margin-top: -1px; - border-color: @gray-lighter-darker; -} -.o-kanban-colorpicker() { - max-width: 150px; - padding: 3px (@odoo-dropdown-hpadding - @o-kanban-inner-hmargin) 3px @odoo-dropdown-hpadding; - - > li { - display: inline-block; - margin: @o-kanban-inner-hmargin @o-kanban-inner-hmargin 0 0; - border: 1px solid white; - box-shadow: 0 0 0 1px @gray-lighter-dark; - - > a { - display: block; - - &::after { - content: ""; - display: block; - width: 20px; - height: 15px; - } - } - - // No Color - &:first-child > a { - position: relative; - &::before { - content: ""; - .o-position-absolute(-2px, @left: 10px); - display: block; - width: 1px; - height: 20px; - .rotate(45deg); - background-color: red; - } - &::after { - background-color: white; - } - } - } -} // ------- Kanban View Layout ------- .o_kanban_view { - .o-flex-display(); - .o-align-content(stretch); + @include o-flex-display; + @include o-align-content(stretch); overflow-x: visible; - @media (max-width: @screen-xs-max) { + @media (max-width: $screen-xs-max) { padding: 0px!important; overflow-x: auto; } .o_kanban_record, .o_kanban_quick_create { - padding: @o-kanban-inside-vgutter @o-kanban-inside-hgutter; - border: 1px solid @gray-lighter-dark; + padding: $o-kanban-inside-vgutter $o-kanban-inside-hgutter; + border: 1px solid $gray-lighter-dark; background-color: white; - @media (max-width: @screen-xs-max) { - padding: @o-kanban-inside-vgutter @o-kanban-inside-hgutter-mobile; + @media (max-width: $screen-xs-max) { + padding: $o-kanban-inside-vgutter $o-kanban-inside-hgutter-mobile; } &:focus, &:focus-within { -webkit-box-shadow: 3px 3px 10px 0px rgba(0,0,0,1); @@ -165,7 +29,7 @@ .o_kanban_quick_create { box-shadow: 0 0 20px -10px; - margin: 0 @o-kanban-record-margin -1px @o-kanban-record-margin; + margin: 0 $o-kanban-record-margin -1px $o-kanban-record-margin; margin-bottom: 8px; .o_form_view { @@ -179,7 +43,7 @@ .o_kanban_record { position: relative; display: inline-block; // Force the creation of a block formatting context to clear float items - border-color: @gray-lighter-darker; + border-color: $gray-lighter-darker; min-width: 150px; margin: 0 0 -1px; @@ -187,21 +51,21 @@ // Records colours &::after { content: ""; - .o-position-absolute(0, auto, 0, -1px); - width: @o-kanban-color-border-width; + @include o-position-absolute(0, auto, 0, -1px); + width: $o-kanban-color-border-width; } // Inner Sections .o_kanban_record_top, .o_kanban_record_body { - margin-bottom: @o-kanban-inner-hmargin; + margin-bottom: $o-kanban-inner-hmargin; } .o_kanban_record_top, .o_kanban_record_bottom { - .o-flex-display(); + @include o-flex-display; } .o_kanban_record_top { - .o-align-items(flex-start); + @include o-align-items(flex-start); .o_dropdown_kanban { // For v11 layout, reset positioning to default to properly use @@ -213,7 +77,7 @@ .o_kanban_record_headings { line-height: 1.2; - .o-flex(1, 1, auto); + @include o-flex(1, 1, auto); // Ensure long word doesn't break out of container word-wrap: break-word; overflow: hidden; @@ -221,22 +85,22 @@ } .o_kanban_record_title { - .o-kanban-record-title (@font-size: 13px); + @include o-kanban-record-title($font-size: 13px); } .o_kanban_record_subtitle { display: block; - margin-top: @o-kanban-inner-hmargin*0.5; + margin-top: $o-kanban-inner-hmargin*0.5; } .o_kanban_record_bottom { .oe_kanban_bottom_left, .oe_kanban_bottom_right { - .o-flex-display(); - .o-align-items(center); + @include o-flex-display; + @include o-align-items(center); height: 20px; } .oe_kanban_bottom_left { - .o-flex(1, 1, auto); + @include o-flex(1, 1, auto); > * { margin-right: 6px; @@ -249,7 +113,7 @@ } } .oe_kanban_bottom_right{ - .o-flex(0, 1, auto); + @include o-flex(0, 1, auto); .oe_kanban_avatar { width: 20px; @@ -258,9 +122,9 @@ } } .o_link_muted { - color: @text-color; + color: $text-color; &:hover { - color: @brand-primary; + color: $brand-primary; text-decoration: underline; } } @@ -276,22 +140,22 @@ // ------- v11 Layout + generic layouts (~v10) ------- // Kanban Record - Dropdown .o_dropdown_kanban { - .o-position-absolute(@o-kanban-inside-vgutter, @o-kanban-inside-hgutter); + @include o-position-absolute($o-kanban-inside-vgutter, $o-kanban-inside-hgutter); visibility: hidden; - @media (max-width: @screen-xs-max) { + @media (max-width: $screen-xs-max) { visibility: visible; } .dropdown-toggle { - .o-kanban-dropdown(); - margin: (-@o-kanban-inside-vgutter - 1px) (-@o-kanban-inside-hgutter - 1px) 0 0; + @include o-kanban-dropdown; + margin: (-$o-kanban-inside-vgutter - 1px) (-$o-kanban-inside-hgutter - 1px) 0 0; } &.open .dropdown-toggle { - .o-kanban-dropdown-open(); + @include o-kanban-dropdown-open; } .dropdown-menu { - .o-kanban-dropdown-menu(); - right: (-@o-kanban-inside-hgutter - 1); + @include o-kanban-dropdown-menu; + right: (-$o-kanban-inside-hgutter - 1); } } @@ -301,13 +165,13 @@ // Kanban Record - Dropdown colorpicker .oe_kanban_colorpicker { - .o-kanban-colorpicker(); + @include o-kanban-colorpicker; } // Kanban Record - Inner elements .o_field_many2manytags, .o_kanban_tags { display: block; - margin-bottom: @o-kanban-inner-hmargin; + margin-bottom: $o-kanban-inner-hmargin; line-height: 1.2; .o_tag { @@ -316,7 +180,7 @@ font-size: 11px; font-weight: 500; background-color: transparent; - .o-kanban-tag-color(); + @include o-kanban-tag-color; span { display: inline-block; @@ -342,9 +206,9 @@ margin-top: 15px; > button, > a { - .o-position-absolute(@right: @o-kanban-record-margin, @bottom: @o-kanban-record-margin); - @media (max-width: @screen-xs-max) { - right: @o-kanban-inside-hgutter-mobile; + @include o-position-absolute($right: $o-kanban-record-margin, $bottom: $o-kanban-record-margin); + @media (max-width: $screen-xs-max) { + right: $o-kanban-inside-hgutter-mobile; } } } @@ -355,30 +219,30 @@ } &.ui-sortable-helper { - .o-transform(rotate(-3deg)); + @include o-transform(rotate(-3deg)); box-shadow: 0 5px 25px -10px black; - .transition(~"transform 0.6s, box-shadow 0.3s"); + @include transition(transform 0.6s, box-shadow 0.3s); } .o_attachment_image > img { width: 100%; height: auto; - margin-bottom: @o-kanban-inner-hmargin; + margin-bottom: $o-kanban-inner-hmargin; } .o_progressbar { - .o-flex-display(); - height: @o-kanban-progressbar-height; + @include o-flex-display; + height: $o-kanban-progressbar-height; .o_progressbar_title { - .o-flex(0, 0, auto); + @include o-flex(0, 0, auto); } .o_progress { - .o-flex(1, 1, auto); + @include o-flex(1, 1, auto); margin-top: 3px; } .o_progressbar_value { - .o-flex(0, 0, auto); + @include o-flex(0, 0, auto); width: auto; height: 100%; text-align: right; @@ -391,12 +255,12 @@ .o_kanban_image { float: left; - width: @o-kanban-image-width; + width: $o-kanban-image-width; + div { - padding-left: @o-kanban-image-width + @o-kanban-inside-hgutter; - @media (max-width: @screen-xs-max) { - padding-left: @o-kanban-image-width + @o-kanban-inside-hgutter-mobile; + padding-left: $o-kanban-image-width + $o-kanban-inside-hgutter; + @media (max-width: $screen-xs-max) { + padding-left: $o-kanban-image-width + $o-kanban-inside-hgutter-mobile; } } } @@ -404,10 +268,10 @@ .oe_kanban_details { width: 100%; ul { - margin-bottom: @o-kanban-inner-hmargin*0.5;; + margin-bottom: $o-kanban-inner-hmargin*0.5;; padding-left: 0; list-style: none; - font-size: @font-size-small; + font-size: $font-size-small; li { margin-bottom: 2px; @@ -416,11 +280,11 @@ } .o_kanban_footer { - .o-flex-display(); - .o-justify-content(space-between); - .o-align-items(center); + @include o-flex-display; + @include o-justify-content(space-between); + @include o-align-items(center); > * { - .o-flex(0, 0, auto); + @include o-flex(0, 0, auto); } } @@ -442,7 +306,7 @@ &.o_kanban_grouped { min-height: 100%; padding: 0; - background-color: @gray-lighter; + background-color: $gray-lighter; .o_kanban_record, .o_kanban_quick_create { width: 100%; @@ -451,21 +315,21 @@ } &.o_kanban_small_column .o_kanban_group:not(.o_column_folded) { - width: @o-kanban-small-record-width + 2*@o-kanban-group-padding; + width: $o-kanban-small-record-width + 2*$o-kanban-group-padding; } } // Kanban Grouped Layout - Column default .o_kanban_group { - .o-flex(0, 0, auto); - padding: 0 @o-kanban-group-padding @o-kanban-group-padding @o-kanban-group-padding; + @include o-flex(0, 0, auto); + padding: 0 $o-kanban-group-padding $o-kanban-group-padding $o-kanban-group-padding; .o_kanban_header > .o_kanban_header_title { - .o-kanban-header-title(); + @include o-kanban-header-title; .o_column_title { - .o-flex(1, 1, auto); - .o-text-overflow(); + @include o-flex(1, 1, auto); + @include o-text-overflow; font-size: 16px; font-weight: 500; } @@ -475,26 +339,26 @@ } .o_kanban_quick_add i { - .o-kanban-icon; - margin-left: @o-kanban-inside-hgutter*2; + @include o-kanban-icon; + margin-left: $o-kanban-inside-hgutter*2; } &:hover .o_kanban_config, .o_kanban_config.open { visibility: visible; - margin-left: @o-kanban-inside-hgutter; + margin-left: $o-kanban-inside-hgutter; } .o_kanban_config { visibility: hidden; i { - .o-kanban-icon; + @include o-kanban-icon; } } } .o_kanban_load_more { - padding: @o-kanban-record-margin 0; + padding: $o-kanban-record-margin 0; box-shadow: inset 0 10px 13px -13px black; text-align: center; } @@ -504,11 +368,11 @@ } &:not(.o_column_folded) { - width: @o-kanban-default-record-width + 2*@o-kanban-group-padding; + width: $o-kanban-default-record-width + 2*$o-kanban-group-padding; } &.o_kanban_dragged { - background-color: @odoo-main-text-color; + background-color: $odoo-main-text-color; .o_kanban_record { visibility: hidden; @@ -522,8 +386,8 @@ // Kanban Grouped Layout - Column Folded .o_kanban_group.o_column_folded { - .o-kanban-slim-col(); - background-color: @gray-lighter-dark; + @include o-kanban-slim-col; + background-color: $gray-lighter-dark; & + .o_kanban_group.o_column_folded { margin-left: 1px; @@ -534,10 +398,10 @@ opacity: 0.5; .o_column_title { - .o-kanban-v-title(); + @include o-kanban-v-title; } .o_column_unfold { - .o-kanban-icon(1); + @include o-kanban-icon(1); } } @@ -558,7 +422,7 @@ cursor: pointer; padding: 12px 16px; white-space: nowrap; - color: @text-muted; + color: $text-muted; opacity: 0.6; &:hover { opacity: 1; @@ -567,7 +431,7 @@ .o_kanban_add_column { display: inline-block; padding: 10px 14px; - background-color: @odoo-color-silver-dark; + background-color: $odoo-color-silver-dark; } .o_kanban_title { margin-left: 10px; @@ -575,12 +439,12 @@ } .o_quick_create_unfolded { - padding: @o-kanban-inside-vgutter @o-kanban-inside-hgutter; - width: @o-kanban-small-record-width; + padding: $o-kanban-inside-vgutter $o-kanban-inside-hgutter; + width: $o-kanban-small-record-width; height: 100%; border: none; box-shadow: 0 0 20px -10px; - background-color: @gray-lighter; + background-color: $gray-lighter; .o_kanban_header { height: 50px; @@ -601,7 +465,7 @@ } .o_kanban_muted_record { - background: @gray-lighter-dark; + background: $gray-lighter-dark; height: 70px; margin: 10px 0px; } @@ -611,19 +475,19 @@ // Kanban UN-grouped Layout &.o_kanban_ungrouped { - .o-flex-flow(row, wrap); - .o-justify-content(flex-start); + @include o-flex-flow(row, wrap); + @include o-justify-content(flex-start); - padding: @o-kanban-record-margin (@odoo-horizontal-padding - @o-kanban-record-margin); + padding: $o-kanban-record-margin ($odoo-horizontal-padding - $o-kanban-record-margin); .o_kanban_record { - .o-flex(1, 1, auto); - width: @o-kanban-default-record-width; - margin: (@o-kanban-record-margin * 0.5) @o-kanban-record-margin; + @include o-flex(1, 1, auto); + width: $o-kanban-default-record-width; + margin: ($o-kanban-record-margin * 0.5) $o-kanban-record-margin; - @media (max-width: @screen-xs-max) { + @media (max-width: $screen-xs-max) { margin: 0 0 -1px 0; - .o-flex(1, 0, 100%); + @include o-flex(1, 0, 100%); } &.o_kanban_ghost { @@ -639,10 +503,10 @@ &.o_kanban_mobile .o_kanban_record { div.label { - .o-text-overflow(); + @include o-text-overflow; } } // Records colours - .o-kanban-record-color(); + @include o-kanban-record-color; } diff --git a/addons/web/static/src/scss/kanban_view_mobile.scss b/addons/web/static/src/scss/kanban_view_mobile.scss index d09b6968925..ebb5db45457 100644 --- a/addons/web/static/src/scss/kanban_view_mobile.scss +++ b/addons/web/static/src/scss/kanban_view_mobile.scss @@ -1,27 +1,27 @@ -@o-kanban-mobile-tabs-height: 40px; +$o-kanban-mobile-tabs-height: 40px; -@media (max-width: @screen-xs-max) { +@media (max-width: $screen-xs-max) { .o_kanban_view.o_kanban_grouped { display: block; position: relative; overflow: hidden; .o_kanban_mobile_tabs { - height: @o-kanban-mobile-tabs-height; + height: $o-kanban-mobile-tabs-height; position: relative; background-color: #5E5E5E; .o_kanban_mobile_tab { - .o-position-absolute(@left: 100%); - .o-transform(translateX(-50%)); - height: @o-kanban-mobile-tabs-height; + @include o-position-absolute($left: 100%); + @include o-transform(translateX(-50%)); + height: $o-kanban-mobile-tabs-height; padding: 10px; font-size: 14px; color: white; &.o_current { font-weight: bold; - border-bottom: 3px solid @odoo-brand-optional; + border-bottom: 3px solid $odoo-brand-optional; } .o_column_title { white-space: nowrap; @@ -31,7 +31,7 @@ // [class] to get same specificity as elsewhere (kanban_view.less) &[class] .o_kanban_group:not(.o_column_folded) { - .o-position-absolute(@top: @o-kanban-mobile-tabs-height, @left: 0, @bottom: 0); + @include o-position-absolute($top: $o-kanban-mobile-tabs-height, $left: 0, $bottom: 0); overflow-x: scroll; width: 100%; padding: 0; diff --git a/addons/web/static/src/scss/layout_background.scss b/addons/web/static/src/scss/layout_background.scss index 6750705c35b..b51cff84599 100644 --- a/addons/web/static/src/scss/layout_background.scss +++ b/addons/web/static/src/scss/layout_background.scss @@ -1,9 +1,9 @@ .o_background_footer, .o_background_header, .o_report_layout_background { font-family: 'Lato'; - color: @gray; + color: $gray; } .o_background_header { - border-bottom: 1px solid @gray-lighter; + border-bottom: 1px solid $gray-lighter; .company_address { min-width: 300px; } @@ -13,19 +13,19 @@ margin-right: 16px; } h3 { - color: @odoo-brand-primary; + color: $odoo-brand-primary; font-weight: 700; max-width: 300px; } } .o_background_footer { ul { - border-top: 1px solid @odoo-brand-primary; - border-bottom: 1px solid @odoo-brand-primary; + border-top: 1px solid $odoo-brand-primary; + border-bottom: 1px solid $odoo-brand-primary; padding: 4px 0; margin: 0 0 4px 0; li { - color: @odoo-brand-primary; + color: $odoo-brand-primary; } } } @@ -36,10 +36,10 @@ background-repeat: no-repeat; min-height: 900px; thead tr th, h2 { - color: @odoo-brand-primary; + color: $odoo-brand-primary; } tbody { - color: @gray; + color: $gray; tr:nth-child(odd) { background-color: rgba(184, 171, 180, 0.2); } @@ -53,11 +53,11 @@ background-color: transparent !important; } tr:first-child td { - /*we could get rid of this rule if .border-black td would be terminated in report.less*/ + /*we could get rid of this rule if .border-black td would be terminated in report.scss*/ border-top: none !important; } tr:last-child td { - color: @odoo-brand-primary; + color: $odoo-brand-primary; } } #total { diff --git a/addons/web/static/src/scss/layout_boxed.scss b/addons/web/static/src/scss/layout_boxed.scss index 21fcf66efc5..f3aa7601107 100644 --- a/addons/web/static/src/scss/layout_boxed.scss +++ b/addons/web/static/src/scss/layout_boxed.scss @@ -1,22 +1,22 @@ .o_boxed_footer, .o_boxed_header, .o_report_layout_boxed { font-family: 'Lato'; - color: @gray; + color: $gray; font-size: 12px; } .o_boxed_header { - border-bottom: 1px solid @gray-lighter; + border-bottom: 1px solid $gray-lighter; img { max-height: 100px; } h4 { - color: @o-we-color-text-normal; + color: $o-we-color-text-normal; font-weight: 700; text-transform: uppercase; } } .o_boxed_footer { white-space: nowrap; - border-top: 3px solid @gray; + border-top: 3px solid $gray; ul { margin: 4px 0; } @@ -25,7 +25,7 @@ // This is not a general rule since the id is not used in all the reports, // we should make a general structure for report body to use it everywhere #informations { - border: 1px solid @gray; + border: 1px solid $gray; padding-top: 10px; margin: 0; } @@ -33,22 +33,22 @@ text-transform: uppercase; } table { - border: 1px solid @gray; + border: 1px solid $gray; thead { tr th { - border-bottom: 3px solid @gray !important; + border-bottom: 3px solid $gray !important; text-transform: uppercase; } } tbody { - color: @gray; + color: $gray; tr { td { border-top: none; - border-right: 1px solid @gray; + border-right: 1px solid $gray; } td:last-child { - background-color: @gray-lighter; + background-color: $gray-lighter; } } } @@ -59,14 +59,14 @@ border-right: none; } tr:last-child td, tr:first-child td { - /*we could get rid of this rule if .border-black td would be terminated in report.less*/ + /*we could get rid of this rule if .border-black td would be terminated in report.scss*/ border-top: none !important; } tr:first-child td { background-color: transparent; } tr:last-child td { - background-color: @gray; + background-color: $gray; color: #fff; } } diff --git a/addons/web/static/src/scss/layout_clean.scss b/addons/web/static/src/scss/layout_clean.scss index 869e1f4098f..190e5c6862a 100644 --- a/addons/web/static/src/scss/layout_clean.scss +++ b/addons/web/static/src/scss/layout_clean.scss @@ -10,16 +10,16 @@ } .o_clean_footer { margin: 0 3px; - border-top: 3px solid @odoo-brand-primary; + border-top: 3px solid $odoo-brand-primary; h4 { - color: @odoo-brand-primary; + color: $odoo-brand-primary; font-weight: bolder; } .pagenumber { width: 35px; height: 35px; - border: 3px solid @odoo-brand-primary; - background-color: @odoo-brand-optional; + border: 3px solid $odoo-brand-primary; + background-color: $odoo-brand-optional; color: white; padding-top: 6px; text-align: center; @@ -27,18 +27,18 @@ } .o_report_layout_clean { h1, h2, h3 { - color: @odoo-brand-optional; + color: $odoo-brand-optional; font-weight: bolder; } strong { - color: @odoo-brand-primary; + color: $odoo-brand-primary; } table { thead { - color: @odoo-brand-primary; + color: $odoo-brand-primary; tr th { text-align: left !important; - border-top: 3px solid @odoo-brand-primary !important; + border-top: 3px solid $odoo-brand-primary !important; text-transform: uppercase; } tr th:last-child { @@ -54,7 +54,7 @@ border-top: none; } tr:last-child td { - border-bottom: 3px solid @odoo-brand-primary; + border-bottom: 3px solid $odoo-brand-primary; } tr { td { @@ -74,10 +74,10 @@ top: -20px; > table { tr:last-child td { - border-top: 1px solid @gray-lighter !important; + border-top: 1px solid $gray-lighter !important; } tr:first-child td { - /*we could get rid of this rule if .border-black td would be terminated in report.less*/ + /*we could get rid of this rule if .border-black td would be terminated in report.scss*/ border-top: none !important; } } diff --git a/addons/web/static/src/scss/list_view.scss b/addons/web/static/src/scss/list_view.scss index 9106cf45a87..2c69f00e429 100644 --- a/addons/web/static/src/scss/list_view.scss +++ b/addons/web/static/src/scss/list_view.scss @@ -1,9 +1,9 @@ -@odoo-list-group-header-color: lighten(@odoo-brand-lightsecondary, 10%); +$odoo-list-group-header-color: lighten($odoo-brand-lightsecondary, 10%); .o_list_view { position: relative; cursor: pointer; - background-color: @odoo-view-background-color; + background-color: $odoo-view-background-color; margin-bottom: 0px; &.table { @@ -13,7 +13,7 @@ } thead { - color: @odoo-main-text-color; + color: $odoo-main-text-color; border-bottom: 1px solid #cacaca; > tr > th { border-left: 1px solid #dfdfdf; @@ -25,16 +25,16 @@ tfoot { cursor: default; - color: @odoo-list-footer-color; - background-color: @odoo-list-footer-bg-color; - font-weight: @odoo-list-footer-font-weight; + color: $odoo-list-footer-color; + background-color: $odoo-list-footer-bg-color; + font-weight: $odoo-list-footer-font-weight; border-top: 2px solid #cacaca; border-bottom: 1px solid #cacaca; } .o_column_sortable { position: relative; - .user-select(none); // Prevent unwanted selection while sorting + @include user-select(none); // Prevent unwanted selection while sorting &::after { font-family: FontAwesome; @@ -61,7 +61,7 @@ opacity: 0.3; } &.o-sort-up, &.o-sort-down { - color: @headings-color; + color: $headings-color; &::after { opacity: 1; } @@ -88,7 +88,7 @@ font-style: italic; } .text-muted { - color: lighten(@text-muted, 10%); + color: lighten($text-muted, 10%); } // Grouped list views @@ -100,14 +100,14 @@ } .o_group_pager { cursor: text; - .user-select(none); + @include user-select(none); text-align: right; padding-top: 0; padding-bottom: 0; .o_pager_previous, .o_pager_next { - background-color: @odoo-list-group-header-color; + background-color: $odoo-list-group-header-color; &:hover { - background-color: darken(@odoo-list-group-header-color, 10%); + background-color: darken($odoo-list-group-header-color, 10%); } } } @@ -118,11 +118,11 @@ tbody { tr:focus-within { - background-color: @odoo-form-lightsecondary; + background-color: $odoo-form-lightsecondary; } tr{ .focussed { - background-color: @odoo-form-lightsecondary; + background-color: $odoo-form-lightsecondary; } } } @@ -167,7 +167,7 @@ // Field widgets override > .o_field_widget { - .o-position-absolute(0, 0, auto, 0); + @include o-position-absolute(0, 0, auto, 0); min-height: 100%; &:not(.o_field_text) { @@ -182,11 +182,11 @@ } } > .o_field_translate { - .o-position-absolute(0, 5px); + @include o-position-absolute(0, 5px); width: 16px; // to have some space on the right } .o_input { - padding: @table-condensed-cell-padding; + padding: $table-condensed-cell-padding; background-color: white; .o_input { @@ -210,7 +210,7 @@ padding-right: 15px; // To prevent caret overlapping } > .o_dropdown_button, .o_datepicker_button { - .o-position-absolute(20%, 5px); + @include o-position-absolute(20%, 5px); } } .o_field_widget > .o_external_button { diff --git a/addons/web/static/src/scss/list_view_extra.scss b/addons/web/static/src/scss/list_view_extra.scss index 9a9413c0dd7..ec53efc6df5 100644 --- a/addons/web/static/src/scss/list_view_extra.scss +++ b/addons/web/static/src/scss/list_view_extra.scss @@ -5,6 +5,6 @@ } tbody > tr.o_group_header { - .o-vertical-gradient(#fcfcfc, #dedede); + @include o-vertical-gradient(#fcfcfc, #dedede); } } diff --git a/addons/web/static/src/scss/mimetypes.scss b/addons/web/static/src/scss/mimetypes.scss index e4d2624dc6d..f366f7eed97 100644 --- a/addons/web/static/src/scss/mimetypes.scss +++ b/addons/web/static/src/scss/mimetypes.scss @@ -1,6 +1,7 @@ .o_image { - .square(38px); display: inline-block; + width: 38px; + height: 38px; background-image: url('/web/static/src/img/mimetypes/unknown.svg'); background-size: contain; diff --git a/addons/web/static/src/scss/modal.scss b/addons/web/static/src/scss/modal.scss index 5b74583ee41..82faabfa3bc 100644 --- a/addons/web/static/src/scss/modal.scss +++ b/addons/web/static/src/scss/modal.scss @@ -13,8 +13,8 @@ } .o_modal_header { - .o-webclient-padding(@top: 10px, @bottom: 10px); - .clearfix(); + @include o-webclient-padding($top: 10px, $bottom: 10px); + @include clearfix; .o_search_options { display: inline-block; @@ -31,7 +31,7 @@ } - @media (min-width: @screen-sm-min) { + @media (min-width: $screen-sm-min) { .modal-dialog { height: 100%; padding: 30px 0; @@ -39,11 +39,11 @@ .modal-content { max-height: 100%; - .o-flex-display(); - .o-flex-flow(column, nowrap); + @include o-flex-display; + @include o-flex-flow(column, nowrap); .modal-header, .modal-footer { - .o-flex(0, 0, auto); + @include o-flex(0, 0, auto); } .modal-body { @@ -54,15 +54,15 @@ &.o_dialog_error { overflow: visible; - .o-flex-display(); - .o-flex-flow(column, nowrap); + @include o-flex-display; + @include o-flex-flow(column, nowrap); > .alert, > button { - .o-flex(0, 0, auto); + @include o-flex(0, 0, auto); } > .o_error_detail { - .o-flex(1, 1, auto); + @include o-flex(1, 1, auto); min-height: 0; overflow: auto; } @@ -74,10 +74,10 @@ } // Temporary fix for modals which are not instantiated thanks to the Dialog -// JS classes (deprecated case) (see bootstrap_overridden.less) + Frontend. +// JS classes (deprecated case) (see bootstrap_overridden.scss) + Frontend. // // TODO the following code was disabled because it is saas-incompatible // // :not(body) > .modal { -// z-index: @zindex-modal-background + 1; +// z-index: $zindex-modal-background + 1; // } diff --git a/addons/web/static/src/scss/model_field_selector.scss b/addons/web/static/src/scss/model_field_selector.scss index aee5bd17867..e75204f6098 100644 --- a/addons/web/static/src/scss/model_field_selector.scss +++ b/addons/web/static/src/scss/model_field_selector.scss @@ -3,9 +3,9 @@ position: relative; > .o_field_selector_value { - .o-flex-display(); - .o-flex-flow(row, wrap); - .o-align-items(center); + @include o-flex-display; + @include o-flex-flow(row, wrap); + @include o-align-items(center); height: 100%; min-height: 20px; // needed when there is no value in it and used standalone &:active, &:focus, &:active:focus { @@ -14,34 +14,34 @@ > .o_field_selector_chain_part { padding: 0px 1px; - border: 1px solid darken(@odoo-brand-lightsecondary, 10%); - background: @odoo-brand-lightsecondary; + border: 1px solid darken($odoo-brand-lightsecondary, 10%); + background: $odoo-brand-lightsecondary; margin-bottom: 1px; } > i { - .o-align-self(center); + @include o-align-self(center); margin: 0 2px; font-size: 10px; } } > .o_field_selector_controls { - .o-position-absolute(0, 0, 1px); - .o-flex-display(); - .o-align-items(center); + @include o-position-absolute(0, 0, 1px); + @include o-flex-display; + @include o-align-items(center); cursor: pointer; } &.o_edit_mode { > .o_field_selector_controls::after { - .o-caret-down(); + @include o-caret-down; } > .o_field_selector_popover { - @o-field-selector-arrow-height: 7px; - .o-position-absolute(@top: 100%, @left: 0); + $o-field-selector-arrow-height: 7px; + @include o-position-absolute($top: 100%, $left: 0); z-index: 1051; width: 265px; - margin-top: @o-field-selector-arrow-height; + margin-top: $o-field-selector-arrow-height; background: white; box-shadow: 0 3px 10px rgba(0,0,0,.4); @@ -51,38 +51,38 @@ .o_field_selector_popover_header { color: white; - background: @brand-primary; + background: $brand-primary; font-weight: bold; padding: 5px 0 5px 0.4em; .o_field_selector_title { width: 100%; - .o-text-overflow(); + @include o-text-overflow; padding: 0px 35px; text-align: center; } .o_field_selector_popover_option { - .o-position-absolute(@top: 0); + @include o-position-absolute($top: 0); padding: 7px 8px 8px 6px; &.o_prev_page { left: 0; - border-right: 1px solid darken(@brand-primary, 10%); + border-right: 1px solid darken($brand-primary, 10%); } &.o_field_selector_close { right: 0; - border-left: 1px solid darken(@brand-primary, 10%); + border-left: 1px solid darken($brand-primary, 10%); } &:hover { - background: darken(@brand-primary, 10%); + background: darken($brand-primary, 10%); } } &:before { - .o-position-absolute(@top: -@o-field-selector-arrow-height, @left: @o-field-selector-arrow-height); + @include o-position-absolute($top: -$o-field-selector-arrow-height, $left: $o-field-selector-arrow-height); content: ""; - border-left: @o-field-selector-arrow-height solid rgba(0, 0, 0, 0); - border-right: @o-field-selector-arrow-height solid rgba(0, 0, 0, 0); - border-bottom: @o-field-selector-arrow-height solid @brand-primary; + border-left: $o-field-selector-arrow-height solid rgba(0, 0, 0, 0); + border-right: $o-field-selector-arrow-height solid rgba(0, 0, 0, 0); + border-bottom: $o-field-selector-arrow-height solid $brand-primary; } } .o_field_selector_popover_body { @@ -109,16 +109,16 @@ font-size: 12px; } .o_field_selector_relation_icon { - .o-position-absolute(@top: 0, @right: 0, @bottom: 0); - .o-flex-display(); - .o-align-items(center); + @include o-position-absolute($top: 0, $right: 0, $bottom: 0); + @include o-flex-display; + @include o-align-items(center); padding: 10px; } } } } .o_field_selector_popover_footer { - background: @brand-primary; + background: $brand-primary; padding: 5px 0.4em; > input { diff --git a/addons/web/static/src/scss/navbar.scss b/addons/web/static/src/scss/navbar.scss index cf14f9a8615..8273c30182d 100644 --- a/addons/web/static/src/scss/navbar.scss +++ b/addons/web/static/src/scss/navbar.scss @@ -1,26 +1,26 @@ .o_main_navbar { position: relative; - height: @odoo-navbar-height; - border-bottom: 1px solid @odoo-navbar-inverse-link-hover-bg; - background-color: @odoo-brand-primary; + height: $odoo-navbar-height; + border-bottom: 1px solid $odoo-navbar-inverse-link-hover-bg; + background-color: $odoo-brand-primary; color: white; > a, > button { float: left; - height: @odoo-navbar-height; + height: $odoo-navbar-height; border: none; - padding: 0 @odoo-horizontal-padding - 4px 0 @odoo-horizontal-padding; - line-height: @odoo-navbar-height; + padding: 0 $odoo-horizontal-padding - 4px 0 $odoo-horizontal-padding; + line-height: $odoo-navbar-height; background-color: transparent; text-align: center; color: inherit; font-size: 18px; - .user-select(none); + @include user-select(none); &:hover, &:focus { - background-color: @odoo-navbar-inverse-link-hover-bg; + background-color: $odoo-navbar-inverse-link-hover-bg; color: inherit; } &:focus, &:active, &:focus:active { @@ -32,16 +32,16 @@ display: block; float: left; margin-right: 35px; - .user-select(none); + @include user-select(none); color: white; font-size: 22px; font-weight: 500; - line-height: @odoo-navbar-height; + line-height: $odoo-navbar-height; - @media (max-width: @screen-xs-max) { + @media (max-width: $screen-xs-max) { float: none; margin: 0; - border-bottom: 1px solid @odoo-navbar-inverse-link-hover-bg; + border-bottom: 1px solid $odoo-navbar-inverse-link-hover-bg; color: transparent; } } @@ -64,13 +64,13 @@ > a { display: block; - height: @odoo-navbar-height; + height: $odoo-navbar-height; padding: 0 10px; color: white; - line-height: @odoo-navbar-height; + line-height: $odoo-navbar-height; &:hover { - background-color: @odoo-navbar-inverse-link-hover-bg; + background-color: $odoo-navbar-inverse-link-hover-bg; } &:focus, &:active, &:focus:active { @@ -80,7 +80,7 @@ &.o_extra_menu_items { > a { - width: @odoo-navbar-height; + width: $odoo-navbar-height; text-align: center; } &.open > ul { @@ -88,12 +88,12 @@ > li { > a { - background-color: @odoo-brand-primary; + background-color: $odoo-brand-primary; color: white; - border-bottom: 1px solid @odoo-brand-lightsecondary; + border-bottom: 1px solid $odoo-brand-lightsecondary; &.dropdown-toggle { - background-color: lighten(@odoo-brand-primary, 15%); + background-color: lighten($odoo-brand-primary, 15%); pointer-events: none; // hack to prevent clicking on it because dropdown always opened } } @@ -125,36 +125,34 @@ overflow: auto; margin-top: 0; - .o-menu-indentation(@index) when (@index < 6) { - > li.o_menu_header_lvl_@{index}, > li .o_menu_entry_lvl_@{index} { - padding-left: @odoo-dropdown-hpadding + (@index - 2)*12px; + @for $index from 3 through 5 { + > li.o_menu_header_lvl_#{$index}, > li .o_menu_entry_lvl_#{$index} { + padding-left: $odoo-dropdown-hpadding + ($index - 2)*12px; } - .o-menu-indentation(@index + 1); } - .o-menu-indentation(3); } .open .dropdown-toggle { - background-color: @odoo-navbar-inverse-link-hover-bg; + background-color: $odoo-navbar-inverse-link-hover-bg; } .o_user_menu { margin-left: 6px; > a { - padding-right: @odoo-horizontal-padding; + padding-right: $odoo-horizontal-padding; } .oe_topbar_avatar { height: 17px; - .o-transform(translateY(-2px)); + @include o-transform(translateY(-2px)); } } - @media (max-width: @screen-xs-max) { - .o-transition(height, 200ms, linear); + @media (max-width: $screen-xs-max) { + @include o-transition(height, 200ms, linear); position: relative; - height: @odoo-navbar-height; + height: $odoo-navbar-height; overflow: hidden; > ul { @@ -188,15 +186,15 @@ } &.o_menu_systray { - .o-position-absolute(0px, @odoo-navbar-height, auto, @odoo-navbar-height); - height: @odoo-navbar-height; + @include o-position-absolute(0px, $odoo-navbar-height, auto, $odoo-navbar-height); + height: $odoo-navbar-height; text-align: right; > li { display: inline-block; &.open .dropdown-menu { - .o-position-absolute(@odoo-navbar-height, 0, 0, 0); + @include o-position-absolute($odoo-navbar-height, 0, 0, 0); position: fixed; width: auto; } @@ -210,7 +208,7 @@ } } -@media (max-width: @screen-xs-max) { +@media (max-width: $screen-xs-max) { body.o_mobile_menu_opened { overflow: hidden; height: 100%; @@ -223,7 +221,7 @@ } } -@media (max-width: @screen-xs-max) { +@media (max-width: $screen-xs-max) { .o_switch_company_menu > .dropdown-menu { padding-top: 0px; li.bg-info { diff --git a/addons/web/static/src/scss/pivot_view.scss b/addons/web/static/src/scss/pivot_view.scss index d7dfdd45de5..83b17a4e751 100644 --- a/addons/web/static/src/scss/pivot_view.scss +++ b/addons/web/static/src/scss/pivot_view.scss @@ -5,36 +5,36 @@ // items corresponding to the clicked cell &.o_enable_linking { .o_pivot_cell_value:hover { - color: @odoo-brand-optional; + color: $odoo-brand-optional; cursor: pointer; } } table { - background-color: @odoo-view-background-color; + background-color: $odoo-view-background-color; width: auto; // bootstrap override th { font-weight: normal; // bootstrap override - background-color: lighten(@odoo-brand-secondary, 40%); + background-color: lighten($odoo-brand-secondary, 40%); } - .o-pivot-header-cell() { - background-color: lighten(@odoo-brand-secondary, 40%); + @mixin o-pivot-header-cell { + background-color: lighten($odoo-brand-secondary, 40%); cursor: pointer; white-space: nowrap; - .user-select(none); + @include user-select(none); &:hover { - background-color: lighten(@odoo-brand-secondary, 30%); + background-color: lighten($odoo-brand-secondary, 30%); } } .o_pivot_measure_row { - .o-pivot-header-cell; + @include o-pivot-header-cell; } .o_pivot_header_cell_closed { - .o-pivot-header-cell; + @include o-pivot-header-cell; &::before { font-family: FontAwesome; content: ""; @@ -43,7 +43,7 @@ } .o_pivot_header_cell_opened { - .o-pivot-header-cell; + @include o-pivot-header-cell; &::before { font-family: FontAwesome; content: ""; @@ -52,18 +52,18 @@ } .o_pivot_measure_row_sorted_asc::after { - .o-caret-down; + @include o-caret-down; margin-left: 5px; } .o_pivot_measure_row_sorted_desc::after { - .o-caret-up; + @include o-caret-up; margin-left: 5px; } } .o_pivot_field_selection::after { - .o-caret-right; + @include o-caret-right; position: absolute; right: 6px; top: 9px; @@ -74,5 +74,5 @@ // Control panel buttons // ------------------------------------------------------------------ .o_pivot_measures_list { - .o-selected-li; + @include o-selected-li; } \ No newline at end of file diff --git a/addons/web/static/src/scss/progress_bar.scss b/addons/web/static/src/scss/progress_bar.scss index 25a89d15ecf..e4322845c45 100644 --- a/addons/web/static/src/scss/progress_bar.scss +++ b/addons/web/static/src/scss/progress_bar.scss @@ -14,16 +14,16 @@ height: 15px; vertical-align: middle; - border: 1px solid lighten(@odoo-brand-secondary, 25%); + border: 1px solid lighten($odoo-brand-secondary, 25%); overflow: hidden; background-color: white; &.o_progress_overflow { - background-color: @odoo-brand-secondary; + background-color: $odoo-brand-secondary; } .o_progressbar_complete { - background-color: @odoo-brand-optional; + background-color: $odoo-brand-optional; height: 100%; } } diff --git a/addons/web/static/src/scss/rainbow.scss b/addons/web/static/src/scss/rainbow.scss index b86387b18ca..102b76f02f8 100644 --- a/addons/web/static/src/scss/rainbow.scss +++ b/addons/web/static/src/scss/rainbow.scss @@ -1,42 +1,42 @@ /************** rainbow *****************/ // Variables -@reward-size: 400px; -@reward-size-mobile: 300px; -@reward-text-color: #727880; -@reward-base-time: 1.4s; +$reward-size: 400px; +$reward-size-mobile: 300px; +$reward-text-color: #727880; +$reward-base-time: 1.4s; // o_reward .o_reward { will-change: transform; - z-index: @zindex-modal; + z-index: $zindex-modal; padding: 50px; - margin: -5% auto 0 -(@reward-size / 2); - @media (max-width: @screen-xs-max) { - margin: -5% auto 0 -(@reward-size-mobile / 2); + margin: -5% auto 0 -($reward-size / 2); + @media (max-width: $screen-xs-max) { + margin: -5% auto 0 -($reward-size-mobile / 2); } background-image: -webkit-radial-gradient(#EDEFF4 30%, transparent 70%, transparent); background-image: -o-radial-gradient(#EDEFF4 30%, transparent 70%, transparent); background-image: radial-gradient(#EDEFF4 30%, transparent 70%, transparent); - .o-animation(reward-fading, @reward-base-time * 0.5, ease-in-out, 0s, 1, normal, forwards); - .o-position-absolute(20%, auto, auto, 50%); - .size(@reward-size, @reward-size); - @media (max-width: @screen-xs-max) { - .size(@reward-size-mobile, @reward-size-mobile); + @include o-animation(reward-fading, $reward-base-time * 0.5, ease-in-out, 0s, 1, normal, forwards); + @include o-position-absolute(20%, auto, auto, 50%); + @include size($reward-size, $reward-size); + @media (max-width: $screen-xs-max) { + @include size($reward-size-mobile, $reward-size-mobile); } &.o_reward_fading { display: block; - .o-animation(reward-fading-reverse, (@reward-base-time * 0.4), ease-in-out, 0s, 1, normal, forwards); + @include o-animation(reward-fading-reverse, ($reward-base-time * 0.4), ease-in-out, 0s, 1, normal, forwards); .o_reward_face_group { - .o-animation(reward-jump-reverse, (@reward-base-time * 0.4), ease-in-out, 0s, 1, normal, forwards); + @include o-animation(reward-jump-reverse, ($reward-base-time * 0.4), ease-in-out, 0s, 1, normal, forwards); } .o_reward_rainbow { path { - .o-animation(reward-rainbow-reverse, (@reward-base-time * 0.5), ease-out, 0s, 1, normal, forwards); + @include o-animation(reward-rainbow-reverse, ($reward-base-time * 0.5), ease-out, 0s, 1, normal, forwards); } } @@ -53,15 +53,15 @@ fill: none; stroke-linecap: round; stroke-width: 21px; - .o-animation(reward-rainbow, (@reward-base-time ), ease-out, 0s, 1, normal, forwards); + @include o-animation(reward-rainbow, ($reward-base-time ), ease-out, 0s, 1, normal, forwards); } } .o_reward_face_group { transform-origin: center; - .o-animation(reward-jump, @reward-base-time * 0.8, ease-in-out); - .o-position-absolute(6%, 0, 0, 0); - .size(100%, 60%); + @include o-animation(reward-jump, $reward-base-time * 0.8, ease-in-out); + @include o-position-absolute(6%, 0, 0, 0); + @include size(100%, 60%); } .o_reward_face { @@ -70,25 +70,25 @@ position: relative; border-radius: 100%; background: center center / contain no-repeat; - .o-animation(reward-float, @reward-base-time, ease-in-out, @reward-base-time, infinite, alternate); - .size(34%, 56.67%); + @include o-animation(reward-float, $reward-base-time, ease-in-out, $reward-base-time, infinite, alternate); + @include size(34%, 56.67%); } .o_reward_stars { display: block; - .size(@reward-size * 0.75, @reward-size / 2); - @media (max-width: @screen-xs-max) { - .size(@reward-size-mobile * 0.75, @reward-size-mobile / 2); + @include size($reward-size * 0.75, $reward-size / 2); + @media (max-width: $screen-xs-max) { + @include size($reward-size-mobile * 0.75, $reward-size-mobile / 2); } - .o-position-absolute(18%, 7%); + @include o-position-absolute(18%, 7%); svg { transform-origin: center center; - .o-position-absolute(28%, @left:3%); - .o-animation(reward-stars, @reward-base-time, ease-in-out, 0s, infinite, alternate-reverse); + @include o-position-absolute(28%, $left:3%); + @include o-animation(reward-stars, $reward-base-time, ease-in-out, 0s, infinite, alternate-reverse); &.star2, &.star4 { - .o-animation(reward-stars, (@reward-base-time*1.2), ease-in-out, 0s, infinite, alternate); + @include o-animation(reward-stars, ($reward-base-time*1.2), ease-in-out, 0s, infinite, alternate); } &.star2 { @@ -112,8 +112,8 @@ .o_reward_thumbup { width: 40px; display: block; - .o-animation(reward-scale, @reward-base-time * 0.5, ease-in-out, 0s, infinite, alternate); - .o-position-absolute(63%, auto, auto, 65%); + @include o-animation(reward-scale, $reward-base-time * 0.5, ease-in-out, 0s, infinite, alternate); + @include o-position-absolute(63%, auto, auto, 65%); } .o_reward_msg_container { @@ -123,15 +123,15 @@ margin-left: 15%; // Translate before animate - .o-transform(translateY(5px)); + @include o-transform(translateY(5px)); - .o-animation(reward-float, @reward-base-time, ease-in-out, @reward-base-time, infinite, alternate-reverse); - .o-position-absolute(85%, auto, auto, 0%); + @include o-animation(reward-float, $reward-base-time, ease-in-out, $reward-base-time, infinite, alternate-reverse); + @include o-position-absolute(85%, auto, auto, 0%); .o_reward_thumb_right { height: 40px; z-index: 1; - .o-position-absolute(0, auto, auto, 16%); + @include o-position-absolute(0, auto, auto, 16%); } .o_reward_msg { @@ -153,21 +153,21 @@ position: relative; font-family: sans-serif; text-align: left; - color: @reward-text-color; + color: $reward-text-color; } .o_reward_shadow_container { - .o-transform(~"translateY(0px) rotateZ(0)"); - .o-animation(reward-float, @reward-base-time, ease-in-out, @reward-base-time, infinite, alternate); + @include o-transform(translateY(0px) rotateZ(0)); + @include o-animation(reward-float, $reward-base-time, ease-in-out, $reward-base-time, infinite, alternate); } .o_reward_shadow { - .size(100%, 12px); + @include size(100%, 12px); background-color: #e7eaf0; border-radius: 100%; - .o-transform(~"scale(0.8) rotateZ(0)"); - .o-animation(reward-scale, @reward-base-time, ease-in-out, @reward-base-time, infinite, alternate); - .o-position-absolute(auto, auto, -40px, 0); + @include o-transform(scale(0.8) rotateZ(0)); + @include o-animation(reward-scale, $reward-base-time, ease-in-out, $reward-base-time, infinite, alternate); + @include o-position-absolute(auto, auto, -40px, 0); } } } @@ -189,25 +189,25 @@ @keyframes reward-jump { 0% { - .o-transform(~"scale(0.5)"); + @include o-transform(scale(0.5)); } 50% { - .o-transform(~"scale(1.05)"); + @include o-transform(scale(1.05)); } to { - .o-transform(~"scale(1)"); + @include o-transform(scale(1)); } } @keyframes reward-jump-reverse { 0% { - .o-transform(~"scale(1)"); + @include o-transform(scale(1)); } 50% { - .o-transform(~"scale(1.05)"); + @include o-transform(scale(1.05)); } to { - .o-transform(~"scale(0.5)"); + @include o-transform(scale(0.5)); } } @@ -228,30 +228,30 @@ @keyframes reward-float { from { - .o-transform(~"translateY(0px)"); + @include o-transform(translateY(0px)); } to { - .o-transform(~"translateY(5px)"); + @include o-transform(translateY(5px)); } } @keyframes reward-stars { from { - .o-transform(~"scale(0.3) rotate(0deg)"); + @include o-transform(scale(0.3) rotate(0deg)); } 50% { - .o-transform(~"scale(1.0) rotate(20deg)"); + @include o-transform(scale(1.0) rotate(20deg)); } to { - .o-transform(~"scale(0.3) rotate(80deg)"); + @include o-transform(scale(0.3) rotate(80deg)); } } @keyframes reward-scale { from { - .o-transform(~"scale(0.8)"); + @include o-transform(scale(0.8)); } to { - .o-transform(~"scale(1.0)"); + @include o-transform(scale(1.0)); } } diff --git a/addons/web/static/src/scss/search_view.scss b/addons/web/static/src/scss/search_view.scss index 0261806631a..5f40760c2c6 100644 --- a/addons/web/static/src/scss/search_view.scss +++ b/addons/web/static/src/scss/search_view.scss @@ -1,55 +1,55 @@ -.o-search-options-dropdown-custom-li() { +@mixin o-search-options-dropdown-custom-li { margin: 3px 25px; width: auto; max-width: 250px; } .o_searchview { - .o-flex-display(); - .o-flex-flow(row, wrap); - .o-align-items(flex-end); + @include o-flex-display; + @include o-flex-flow(row, wrap); + @include o-align-items(flex-end); position: relative; padding: 0 20px 1px 0; .o_searchview_facet { - @o-searchview-facet-remove-width: 18px; + $o-searchview-facet-remove-width: 18px; - .o-flex(0, 0, auto); + @include o-flex(0, 0, auto); max-width: 100%; - .o-flex-display(); + @include o-flex-display; position: relative; margin: 1px 3px 0 0; .o_searchview_facet_label { - .o-flex(0, 0, auto); - .o-text-overflow(); + @include o-flex(0, 0, auto); + @include o-text-overflow; padding: 0 3px; color: white; - .o-flex-display(); - .o-align-items(center); + @include o-flex-display; + @include o-align-items(center); } - + .o_facet_values { - padding: 0 @o-searchview-facet-remove-width 0 5px; + padding: 0 $o-searchview-facet-remove-width 0 5px; .o_facet_values_sep { font-style: italic; } } .o_facet_remove { - .o-flex(0, 0, auto); - .o-flex-display(); - .o-justify-content(center); - .o-align-items(center); - .o-position-absolute(0, 0, 0); - width: @o-searchview-facet-remove-width; + @include o-flex(0, 0, auto); + @include o-flex-display; + @include o-justify-content(center); + @include o-align-items(center); + @include o-position-absolute(0, 0, 0); + width: $o-searchview-facet-remove-width; cursor: pointer; } } .o_searchview_input { width: 100px; - .o-flex(1, 0, auto); + @include o-flex(1, 0, auto); } .o_searchview_more { @@ -58,7 +58,7 @@ } .o_searchview_autocomplete { - .o-position-absolute(100%, @left: auto); + @include o-position-absolute(100%, $left: auto); width: 100%; li { @@ -75,14 +75,14 @@ background-color: inherit; } &.o-expand, &.o-expanded { // caret - .o-position-absolute(@left: 6px); + @include o-position-absolute($left: 6px); padding: 3px; } &.o-expand:before { - .o-caret-right; + @include o-caret-right; } &.o-expanded:before { - .o-caret-down; + @include o-caret-down; } } } @@ -101,18 +101,18 @@ display: inline-block; cursor: pointer; - .user-select(none); // Prevent text selection when toggling the dropdowns + @include user-select(none); // Prevent text selection when toggling the dropdowns > a { // dropdown togglers - color: @odoo-main-text-color; + color: $odoo-main-text-color; &:hover { text-decoration: none; font-weight: bold; - color: darken(@odoo-main-text-color, 10%); + color: darken($odoo-main-text-color, 10%); } } &.open > a { font-weight: bold; - color: darken(@odoo-main-text-color, 10%); + color: darken($odoo-main-text-color, 10%); } } @@ -122,33 +122,33 @@ .o_closed_menu { position: relative; a:before { - .o-caret-right; - .o-position-absolute(@top: 50%, @left: 10px); - margin-top: (-@caret-width-base); + @include o-caret-right; + @include o-position-absolute($top: 50%, $left: 10px); + margin-top: (-$caret-width-base); } } .o_open_menu { position: relative; a:before { - .o-caret-down; - .o-position-absolute(@top: 50%, @left: 10px); - margin-top: (-@caret-width-base); + @include o-caret-down; + @include o-position-absolute($top: 50%, $left: 10px); + margin-top: (-$caret-width-base); } } // Filters .o_filters_menu { - .o-selected-li; - - max-height: ~"calc(100vh - 125px)"; + @include o-selected-li; + + max-height: calc(100vh - 125px); overflow: auto; .o_filter_condition { - .o-search-options-dropdown-custom-li; + @include o-search-options-dropdown-custom-li; margin-bottom: 8px; .o_or_filter { // or between conditions display: none; // hidden for the first condition - .o-position-absolute(@top: 7px, @left: -18px); + @include o-position-absolute($top: 7px, $left: -18px); } } .o_filter_condition + .o_filter_condition { @@ -161,31 +161,31 @@ } .o_searchview_extended_prop_value { // date fields: datepicker position .datepickerbutton { - .o-position-absolute(3px, -20px); + @include o-position-absolute(3px, -20px); cursor: pointer; } } .o_searchview_extended_delete_prop { // delete condition button position - .o-position-absolute(3px, -18px); + @include o-position-absolute(3px, -18px); cursor: pointer; } .o_add_filter_menu { // apply and add buttons display: none; // Needed by the webclient - .o-search-options-dropdown-custom-li; + @include o-search-options-dropdown-custom-li; } } // Group By .o_group_by_menu { - .o-selected-li; - - max-height: ~"calc(100vh - 125px)"; + @include o-selected-li; + + max-height: calc(100vh - 125px); overflow: auto; .divider {display: none;} // hide the divider by default (no group) .o_add_group { // add button display: none; // Needed by the webclient - .o-search-options-dropdown-custom-li; + @include o-search-options-dropdown-custom-li; } } @@ -193,15 +193,15 @@ .o_favorites_menu { max-height: 75vh; overflow-y: auto; - .o-selected-li; - - max-height: ~"calc(100vh - 125px)"; + @include o-selected-li; + + max-height: calc(100vh - 125px); overflow: auto; .divider {display: none;} // hide the divider by default (no favorite) .o-searchview-custom-private, .o-searchview-custom-public { .o-remove-filter { - .o-position-absolute(50%, 12px); + @include o-position-absolute(50%, 12px); margin-top: -6px; cursor: pointer; } @@ -214,7 +214,7 @@ } .o_save_name { // save button display: none; // hidden by default - .o-search-options-dropdown-custom-li; + @include o-search-options-dropdown-custom-li; } } } diff --git a/addons/web/static/src/scss/search_view_extra.scss b/addons/web/static/src/scss/search_view_extra.scss index 9c263976e4d..e5b378e6e41 100644 --- a/addons/web/static/src/scss/search_view_extra.scss +++ b/addons/web/static/src/scss/search_view_extra.scss @@ -1,21 +1,21 @@ .o_searchview { background-color: white; border: 1px solid #ccc; - border-radius: @border-radius-base; + border-radius: $border-radius-base; padding: 1px 25px 3px 5px; .o_searchview_facet { - border: 1px solid @gray-light; - background: lighten(@odoo-brand-primary, 35%); + border: 1px solid $gray-light; + background: lighten($odoo-brand-primary, 35%); .o_searchview_facet_label { - background-color: @gray-light; + background-color: $gray-light; } .o_facet_remove { - color: @gray-light; + color: $gray-light; &:hover { - color: @gray; + color: $gray; } } } @@ -25,10 +25,10 @@ padding: 4px 0 0 0; } .o_searchview_more { - .o-position-absolute(@top: 6px, @right: 5px); + @include o-position-absolute($top: 6px, $right: 5px); } .o_searchview_autocomplete li.o-selection-focus { - background-color: @odoo-brand-primary; + background-color: $odoo-brand-primary; > a { color: white; } @@ -38,6 +38,6 @@ // Search options: inputs and selects style .o_search_options { input[type="text"], select { - .form-control(); + @extend .form-control; // FIXME was a mixin before scss convertion } } diff --git a/addons/web/static/src/scss/tooltip.scss b/addons/web/static/src/scss/tooltip.scss index e071bf04a40..79fb0b60fb7 100644 --- a/addons/web/static/src/scss/tooltip.scss +++ b/addons/web/static/src/scss/tooltip.scss @@ -7,17 +7,17 @@ .tooltip-inner { max-width: 300px; // fallback for browsers which do not support "vw" unit max-width: 100vw; - background-color: @odoo-tooltip-background-color; - color: @odoo-tooltip-color; - border-radius: @border-radius-base; - box-shadow: 0px 0px 1px 1px @odoo-brand-secondary; + background-color: $odoo-tooltip-background-color; + color: $odoo-tooltip-color; + border-radius: $border-radius-base; + box-shadow: 0px 0px 1px 1px $odoo-brand-secondary; padding: 5px; text-align: left; .oe_tooltip_string { - background-color: @odoo-brand-primary; + background-color: $odoo-brand-primary; color: white; font-weight: bold; padding: 5px; @@ -42,18 +42,18 @@ } &.top, &.top-left, &.top-right { .tooltip-arrow { - border-top-color: @odoo-tooltip-arrow-color!important; + border-top-color: $odoo-tooltip-arrow-color!important; } } &.bottom, &.bottom-left, &.bottom-right { .tooltip-arrow { - border-bottom-color: @odoo-tooltip-arrow-color!important; + border-bottom-color: $odoo-tooltip-arrow-color!important; } } &.left .tooltip-arrow { - border-left-color: @odoo-tooltip-arrow-color!important; + border-left-color: $odoo-tooltip-arrow-color!important; } &.right .tooltip-arrow { - border-right-color: @odoo-tooltip-arrow-color!important; + border-right-color: $odoo-tooltip-arrow-color!important; } } diff --git a/addons/web/static/src/scss/ui.scss b/addons/web/static/src/scss/ui.scss index 0a387331031..8911b4f10ab 100644 --- a/addons/web/static/src/scss/ui.scss +++ b/addons/web/static/src/scss/ui.scss @@ -3,9 +3,9 @@ } .o_text_overflow { - .o-text-overflow(); + @include o-text-overflow; } .ui-autocomplete { - z-index: @zindex-modal + 1; + z-index: $zindex-modal + 1; } diff --git a/addons/web/static/src/scss/utils.scss b/addons/web/static/src/scss/utils.scss index e89da21b4f6..6db15976bd5 100644 --- a/addons/web/static/src/scss/utils.scss +++ b/addons/web/static/src/scss/utils.scss @@ -5,53 +5,53 @@ // ------------------------------------------------------------------ // Padding // ------------------------------------------------------------------ -.o-webclient-padding(@top: 0px, @right: @odoo-horizontal-padding, @bottom: 0px, @left: @odoo-horizontal-padding) { - padding-top: @top; - padding-right: @right; - padding-bottom: @bottom; - padding-left: @left; +@mixin o-webclient-padding($top: 0px, $right: $odoo-horizontal-padding, $bottom: 0px, $left: $odoo-horizontal-padding) { + padding-top: $top; + padding-right: $right; + padding-bottom: $bottom; + padding-left: $left; } // ------------------------------------------------------------------ // Caret // ------------------------------------------------------------------ -.utils-caret-boilerplate() { +@mixin utils-caret-boilerplate { content: ""; display: inline-block; width: 0; height: 0; vertical-align: middle; } -.o-caret-down(@caret-width: @caret-width-base) { - .utils-caret-boilerplate; +@mixin o-caret-down($caret-width: $caret-width-base) { + @include utils-caret-boilerplate; border-bottom: 0; - border-left: @caret-width solid transparent; - border-right: @caret-width solid transparent; - border-top: @caret-width solid; + border-left: $caret-width solid transparent; + border-right: $caret-width solid transparent; + border-top: $caret-width solid; -moz-transform: scale(0.9999); // Smooth the caret on firefox } -.o-caret-up(@caret-width: @caret-width-base) { - .utils-caret-boilerplate; - border-bottom: @caret-width solid; - border-left: @caret-width solid transparent; - border-right: @caret-width solid transparent; +@mixin o-caret-up($caret-width: $caret-width-base) { + @include utils-caret-boilerplate; + border-bottom: $caret-width solid; + border-left: $caret-width solid transparent; + border-right: $caret-width solid transparent; border-top: 0; -moz-transform: scale(0.9999); // Smooth the caret on firefox } -.o-caret-left(@caret-width: @caret-width-base) { - .utils-caret-boilerplate; - border-bottom: @caret-width solid transparent; +@mixin o-caret-left($caret-width: $caret-width-base) { + @include utils-caret-boilerplate; + border-bottom: $caret-width solid transparent; border-left: 0; - border-right: @caret-width solid; - border-top: @caret-width solid transparent; + border-right: $caret-width solid; + border-top: $caret-width solid transparent; -moz-transform: scale(0.9999); // Smooth the caret on firefox } -.o-caret-right(@caret-width: @caret-width-base) { - .utils-caret-boilerplate; - border-bottom: @caret-width solid transparent; - border-left: @caret-width solid; +@mixin o-caret-right($caret-width: $caret-width-base) { + @include utils-caret-boilerplate; + border-bottom: $caret-width solid transparent; + border-left: $caret-width solid; border-right: 0; - border-top: @caret-width solid transparent; + border-top: $caret-width solid transparent; -moz-transform: scale(0.9999); // Smooth the caret on firefox } @@ -59,7 +59,7 @@ // Vendor prefixes // ------------------------------------------------------------------ // Flex -.o-flex-display() { +@mixin o-flex-display { display: -ms-flexbox; display: -moz-box; display: -webkit-box; @@ -67,7 +67,7 @@ display: flex; } -.o-inline-flex-display() { +@mixin o-inline-flex-display { display: -ms-inline-flexbox; display: -moz-inline-box; display: -webkit-inline-box; @@ -75,66 +75,66 @@ display: inline-flex; } -.o-flex-flow(@direction, @wrap) { - -ms-flex-flow: @direction @wrap; - -moz-flex-flow: @direction @wrap; - -webkit-flex-flow: @direction @wrap; +@mixin o-flex-flow($direction, $wrap) { + -ms-flex-flow: $direction $wrap; + -moz-flex-flow: $direction $wrap; + -webkit-flex-flow: $direction $wrap; - flex-flow: @direction @wrap; + flex-flow: $direction $wrap; } -.o-flex(@grow, @schrink, @basis) { - -ms-flex: @grow @schrink @basis; - -moz-flex: @grow @schrink @basis; - -webkit-box-flex: @grow; - -webkit-flex: @grow @schrink @basis; +@mixin o-flex($grow, $schrink, $basis) { + -ms-flex: $grow $schrink $basis; + -moz-flex: $grow $schrink $basis; + -webkit-box-flex: $grow; + -webkit-flex: $grow $schrink $basis; - flex: @grow @schrink @basis; + flex: $grow $schrink $basis; } -.o-justify-content(@justify) { - -moz-justify-content: @justify; - -webkit-justify-content: @justify; +@mixin o-justify-content($justify) { + -moz-justify-content: $justify; + -webkit-justify-content: $justify; - justify-content: @justify; + justify-content: $justify; } -.o-align-content(@align) { - -webkit-align-content: @align; +@mixin o-align-content($align) { + -webkit-align-content: $align; - align-content: @align; + align-content: $align; } -.o-align-items(@align) { - -webkit-align-items: @align; +@mixin o-align-items($align) { + -webkit-align-items: $align; - align-items: @align; + align-items: $align; } -.o-align-self(@align) { - -webkit-align-self: @align; +@mixin o-align-self($align) { + -webkit-align-self: $align; - align-self: @align; + align-self: $align; } // Background-size -.o-background-size(@size) { - -webkit-background-size: @size; - -moz-background-size: @size; - -o-background-size: @size; - background-size: @size; +@mixin o-background-size($size) { + -webkit-background-size: $size; + -moz-background-size: $size; + -o-background-size: $size; + background-size: $size; } // ------------------------------------------------------------------ // Dropdowns // ------------------------------------------------------------------ -.o-selected-li() { +@mixin o-selected-li { li { position: relative; > a { - color: @odoo-main-text-color; + color: $odoo-main-text-color; &:hover { - color: darken(@odoo-main-text-color, 10%); + color: darken($odoo-main-text-color, 10%); } } &.selected { > a { - color: darken(@odoo-main-text-color, 10%); + color: darken($odoo-main-text-color, 10%); font-weight: bold; &:before { font-family: FontAwesome; @@ -150,68 +150,68 @@ // ------------------------------------------------------------------ // Select Appearance // ------------------------------------------------------------------ -.o-appearance(@value) { - -webkit-appearance: @value; - -moz-appearance: @value; - appearance: @value; +@mixin o-appearance($value) { + -webkit-appearance: $value; + -moz-appearance: $value; + appearance: $value; } // ------------------------------------------------------------------ // Transform // ------------------------------------------------------------------ -.o-transform-origin(@x: 50%, @y: 50%, @z: 0) { - -ms-transform-origin: @x @y @z; - -webkit-transform-origin: @x @y @z; - -moz-transform-origin: @x @y @z; - transform-origin: @x @y @z; +@mixin o-transform-origin($x: 50%, $y: 50%, $z: 0) { + -ms-transform-origin: $x $y $z; + -webkit-transform-origin: $x $y $z; + -moz-transform-origin: $x $y $z; + transform-origin: $x $y $z; } // ------------------------------------------------------------------ // Animation // ------------------------------------------------------------------ -.o-animation(@name: none, @duration: 0s, @timing-function: ease, @delay: 0s, @iteration-count: 1, @direction: normal, @fill-mode: none, @play-state: running) { - -webkit-animation: @name @duration @timing-function @delay @iteration-count @direction @fill-mode @play-state; - -moz-animation: @name @duration @timing-function @delay @iteration-count @direction @fill-mode @play-state; - -o-animation: @name @duration @timing-function @delay @iteration-count @direction @fill-mode @play-state; - animation: @name @duration @timing-function @delay @iteration-count @direction @fill-mode @play-state; +@mixin o-animation($name: none, $duration: 0s, $timing-function: ease, $delay: 0s, $iteration-count: 1, $direction: normal, $fill-mode: none, $play-state: running) { + -webkit-animation: $name $duration $timing-function $delay $iteration-count $direction $fill-mode $play-state; + -moz-animation: $name $duration $timing-function $delay $iteration-count $direction $fill-mode $play-state; + -o-animation: $name $duration $timing-function $delay $iteration-count $direction $fill-mode $play-state; + animation: $name $duration $timing-function $delay $iteration-count $direction $fill-mode $play-state; } // ------------------------------------------------------------------ // Transition // ------------------------------------------------------------------ -.o-transition(@property: all, @duration: 0s, @timing-function: ease, @transition-delay: 0s) { - -webkit-transition: @property @duration @timing-function @transition-delay; - -moz-transition: @property @duration @timing-function @transition-delay; - -o-transition: @property @duration @timing-function @transition-delay; - transition: @property @duration @timing-function @transition-delay; +@mixin o-transition($property: all, $duration: 0s, $timing-function: ease, $transition-delay: 0s) { + -webkit-transition: $property $duration $timing-function $transition-delay; + -moz-transition: $property $duration $timing-function $transition-delay; + -o-transition: $property $duration $timing-function $transition-delay; + transition: $property $duration $timing-function $transition-delay; } // ------------------------------------------------------------------ // Columns // ------------------------------------------------------------------ -.o-columns(@width: auto, @col: auto) { - -webkit-columns: @width @col; - -moz-columns: @width @col; - columns: @width @col; +@mixin o-columns($width: auto, $col: auto) { + -webkit-columns: $width $col; + -moz-columns: $width $col; + columns: $width $col; } // ------------------------------------------------------------------ // Position absolute // ------------------------------------------------------------------ -.o-position-absolute(@top: auto, @right: auto, @bottom: auto, @left: auto) { +@mixin o-position-absolute($top: auto, $right: auto, $bottom: auto, $left: auto) { position: absolute; - top: @top; - left: @left; - bottom: @bottom; - right: @right; + top: $top; + left: $left; + bottom: $bottom; + right: $right; } // ------------------------------------------------------------------ // Text overflow // ------------------------------------------------------------------ -.o-text-overflow(@display: inline-block, @max-width: 100%) { - display: @display; - max-width: @max-width; +@mixin o-text-overflow($display: inline-block, $max-width: 100%) { + display: $display; + max-width: $max-width; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -221,54 +221,63 @@ // ------------------------------------------------------------------ // Gradients // ------------------------------------------------------------------ -.o-linear-gradient(@deg: 45deg, @start-color: #555, @end-color: #333) { +@mixin o-linear-gradient($deg: 45deg, $start-color: #555, $end-color: #333) { background-repeat: repeat-x; - background-image: -webkit-linear-gradient(@deg, @start-color, @end-color); - background-image: -o-linear-gradient(@deg, @start-color, @end-color); - background-image: linear-gradient(@deg, @start-color, @end-color); + background-image: -webkit-linear-gradient($deg, $start-color, $end-color); + background-image: -o-linear-gradient($deg, $start-color, $end-color); + background-image: linear-gradient($deg, $start-color, $end-color); } -.o-vertical-gradient(@startColor: #555, @endColor: #333) { - background-color: mix(@startColor, @endColor); - background-image: -webkit-gradient(linear, left top, left bottom, from(@startColor), to(@endColor)); - background-image: -webkit-linear-gradient(top, @startColor, @endColor); - background-image: -moz-linear-gradient(top, @startColor, @endColor); - background-image: -ms-linear-gradient(top, @startColor, @endColor); - background-image: -o-linear-gradient(top, @startColor, @endColor); - background-image: linear-gradient(to bottom, @startColor, @endColor); +@mixin o-vertical-gradient($startColor: #555, $endColor: #333) { + background-color: mix($startColor, $endColor); + background-image: -webkit-gradient(linear, left top, left bottom, from($startColor), to($endColor)); + background-image: -webkit-linear-gradient(top, $startColor, $endColor); + background-image: -moz-linear-gradient(top, $startColor, $endColor); + background-image: -ms-linear-gradient(top, $startColor, $endColor); + background-image: -o-linear-gradient(top, $startColor, $endColor); + background-image: linear-gradient(to bottom, $startColor, $endColor); } -.o-skew-gradient(@startColor: #555, @endColor: #333) { - background-color: @endColor; - background: -moz-linear-gradient(135deg, @endColor, @startColor); - background: -o-linear-gradient(135deg, @startColor, @endColor); - background: -webkit-gradient(linear, left top, right bottom, from(@startColor), to(@endColor)); - background: -ms-linear-gradient(top, @startColor, @endColor); +@mixin o-skew-gradient($startColor: #555, $endColor: #333) { + background-color: $endColor; + background: -moz-linear-gradient(135deg, $endColor, $startColor); + background: -o-linear-gradient(135deg, $startColor, $endColor); + background: -webkit-gradient(linear, left top, right bottom, from($startColor), to($endColor)); + background: -ms-linear-gradient(top, $startColor, $endColor); } // ------------------------------------------------------------------ // Transform // ------------------------------------------------------------------ -.o-transform(@transform) { - -webkit-transform: @transform; - -moz-transform: @transform; - -ms-transform: @transform; - -o-transform: @transform; - transform: @transform; +@mixin o-transform($transform) { + -webkit-transform: $transform; + -moz-transform: $transform; + -ms-transform: $transform; + -o-transform: $transform; + transform: $transform; } // ------------------------------------------------------------------ // Hovering effects // ------------------------------------------------------------------ -.o-hover-opacity(@default-opacity: 0.5, @hover-opacity: 1) { - opacity: @default-opacity; +@mixin o-hover-opacity($default-opacity: 0.5, $hover-opacity: 1) { + opacity: $default-opacity; &:hover, &:focus, &.focus { - opacity: @hover-opacity; + opacity: $hover-opacity; } } -.o-hover-text-color(@default-color: @text-color, @hover-color: @link-color) { - color: @default-color; +@mixin o-hover-text-color($default-color: $text-color, $hover-color: $link-color) { + color: $default-color; &:hover, &:focus, &.focus { - color: @hover-color; + color: $hover-color; } } + +//------------------------------------------------------------------------------ +// Colors +//------------------------------------------------------------------------------ + +@function o-get-most-contrast($color, $c1, $c2) { + $brightness: brightness($color); + @return if(abs($brightness - brightness($c1)) > abs($brightness - brightness($c2)), $c1, $c2); +} diff --git a/addons/web/static/src/scss/variables.scss b/addons/web/static/src/scss/variables.scss index 1b4d2f09468..20180488042 100644 --- a/addons/web/static/src/scss/variables.scss +++ b/addons/web/static/src/scss/variables.scss @@ -4,89 +4,79 @@ /// // Font sizes -@odoo-font-size-base: 13px; +$odoo-font-size-base: 13px; // Colors -@odoo-brand-primary: #7c7bad; -@odoo-brand-optional: #7c7bad; -@odoo-brand-secondary: #f0eeee; -@odoo-brand-lightsecondary: #e2e2e0; -@odoo-color-silver: #F9F9F9; -@odoo-color-silver-dark: #E5E5E5; -@odoo-color-silver-darker: #d9d7d7; +$odoo-brand-primary: #7c7bad; +$odoo-brand-optional: #7c7bad; +$odoo-brand-secondary: #f0eeee; +$odoo-brand-lightsecondary: #e2e2e0; +$odoo-color-silver: #F9F9F9; +$odoo-color-silver-dark: #E5E5E5; +$odoo-color-silver-darker: #d9d7d7; -// Define @gray-lighter-dark as a minor bootstrap @gray-lighter variation used +// Define $gray-lighter-dark as a minor bootstrap $gray-lighter variation used // for design purposes only (e.g. cards' borders). We avoid to overwrite the -// default @gray-light because it is deeply used by bootstrap to define muted +// default $gray-light because it is deeply used by bootstrap to define muted // elements. -@gray-lighter-dark: @odoo-color-silver-dark; -@gray-lighter-darker: @odoo-color-silver-darker; +$gray-lighter-dark: $odoo-color-silver-dark; +$gray-lighter-darker: $odoo-color-silver-darker; -@odoo-color-pink: #875A7B; // Enterprise @odoo-brand-primary -@odoo-main-color-muted: #a8a8a8; -@odoo-main-text-color: #4c4c4c; +$odoo-color-pink: #875A7B; // Enterprise $odoo-brand-primary +$odoo-main-color-muted: #a8a8a8; +$odoo-main-text-color: #4c4c4c; -@odoo-view-background-color: white; -@odoo-shadow-color: #303030; +$odoo-view-background-color: white; +$odoo-shadow-color: #303030; -@odoo-webclient-background-color: @odoo-color-silver; -@odoo-control-panel-background-color: @odoo-color-silver; -@odoo-form-lightsecondary: #ccc; +$odoo-webclient-background-color: $odoo-color-silver; +$odoo-control-panel-background-color: $odoo-color-silver; +$odoo-form-lightsecondary: #ccc; -@odoo-list-footer-color: @odoo-main-text-color; -@odoo-list-footer-bg-color: #eee; -@odoo-list-footer-font-weight: bold; +$odoo-list-footer-color: $odoo-main-text-color; +$odoo-list-footer-bg-color: #eee; +$odoo-list-footer-font-weight: bold; -@odoo-tooltip-background-color: black; -@odoo-tooltip-color: white; -@odoo-tooltip-arrow-color: black; -@odoo-tooltip-text-color: #777777; -@odoo-tooltip-title-text-color: #4c4c4c; +$odoo-tooltip-background-color: black; +$odoo-tooltip-color: white; +$odoo-tooltip-arrow-color: black; +$odoo-tooltip-text-color: #777777; +$odoo-tooltip-title-text-color: #4c4c4c; // UI custom colors for tags, kanban records' colors, ...) -@odoo-nb-ui-color: 12; -@odoo-color-0: @gray-light; -@odoo-color-1: #F06050; -@odoo-color-2: #F4A460; -@odoo-color-3: #F7CD1F; -@odoo-color-4: #6CC1ED; -@odoo-color-5: #814968; -@odoo-color-6: #EB7E7F; -@odoo-color-7: #2C8397; -@odoo-color-8: #475577; -@odoo-color-9: #D6145F; -@odoo-color-10: #30C381; -@odoo-color-11: #9365B8; +$odoo-nb-ui-color: 12; +$odoo-colors: $gray-light, #F06050, #F4A460, #F7CD1F, #6CC1ED, #814968, + #EB7E7F, #2C8397, #475577, #D6145F, #30C381, #9365B8; // Layout -@screen-xs-min: 475px; -@screen-xxs-max: (@screen-xs-min - 1); +$screen-xs-min: 475px; +$screen-xxs-max: ($screen-xs-min - 1); -@screen-xl-min: 1534px; -@screen-lg-max: (@screen-xl-min - 1); +$screen-xl-min: 1534px; +$screen-lg-max: ($screen-xl-min - 1); -@odoo-form-group-cols: 12; -@odoo-form-spacing-unit: 5px; -@odoo-horizontal-padding: 16px; -@odoo-innergroup-rpadding: 45px; -@odoo-dropdown-hpadding: 20px; +$odoo-form-group-cols: 12; +$odoo-form-spacing-unit: 5px; +$odoo-horizontal-padding: 16px; +$odoo-innergroup-rpadding: 45px; +$odoo-dropdown-hpadding: 20px; -@border-radius-base: 3px; +$border-radius-base: 3px; -@odoo-sheet-vpadding: 24px; +$odoo-sheet-vpadding: 24px; // Needed for having no spacing between sheet and mail body in mass_mailing: // Different required cancel paddings between web and web_enterprise -@odoo-sheet-cancel-tpadding: 0px; -@odoo-sheet-cancel-hpadding: @odoo-horizontal-padding; -@odoo-sheet-cancel-bpadding: @odoo-horizontal-padding; +$odoo-sheet-cancel-tpadding: 0px; +$odoo-sheet-cancel-hpadding: $odoo-horizontal-padding; +$odoo-sheet-cancel-bpadding: $odoo-horizontal-padding; -@odoo-avatar-size: 90px; +$odoo-avatar-size: 90px; -@odoo-statusbar-height: 33px; -@odoo-statusbar-arrow-width: @odoo-statusbar-height/3; -@odoo-statusbar-disabled-bg: lighten(@odoo-brand-lightsecondary, 7%); +$odoo-statusbar-height: 33px; +$odoo-statusbar-arrow-width: $odoo-statusbar-height/3; +$odoo-statusbar-disabled-bg: lighten($odoo-brand-lightsecondary, 7%); -@odoo-label-font-size-factor: 0.8; -@odoo-navbar-height: 34px; -@odoo-navbar-inverse-link-hover-bg: @navbar-inverse-link-active-bg; +$odoo-label-font-size-factor: 0.8; +$odoo-navbar-height: 34px; +$odoo-navbar-inverse-link-hover-bg: $navbar-inverse-link-active-bg; diff --git a/addons/web/static/src/scss/views.scss b/addons/web/static/src/scss/views.scss index 0c7936fc570..790cec7746d 100644 --- a/addons/web/static/src/scss/views.scss +++ b/addons/web/static/src/scss/views.scss @@ -1,6 +1,6 @@ /** * This file regroups the rules which apply on elements which are shared between - * all renderers. For field default rules, see the fields.less file. + * all renderers. For field default rules, see the fields.scss file. */ // Invisible modifier (can be inside the view, the button area, ...) @@ -9,7 +9,7 @@ } // Status -// This should normally be put in fields.less but these classes are used outside +// This should normally be put in fields.scss but these classes are used outside // of `.o_field_widget` so it needs to be placed at an upper level. .o_status { display: inline-block; @@ -18,13 +18,13 @@ border-radius: 6px; vertical-align: middle; - background-color: @gray-lighter-dark; + background-color: $gray-lighter-dark; &.o_status_green { - background-color: @brand-success; + background-color: $brand-success; } &.o_status_red { - background-color: @brand-danger; + background-color: $brand-danger; } } @@ -40,10 +40,10 @@ // No content helper .o_view_nocontent { - .o-position-absolute(20%, 0, 0, 0); + @include o-position-absolute(20%, 0, 0, 0); pointer-events: none; z-index: 1; - + .o_nocontent_help { pointer-events: auto; max-width: 650px; @@ -51,12 +51,12 @@ padding: 15px; z-index: 1000; text-align: center; - color: @odoo-tooltip-text-color; + color: $odoo-tooltip-text-color; font-size: 115%; > p:first-of-type { margin-top: 0; - color: @odoo-tooltip-title-text-color; + color: $odoo-tooltip-title-text-color; font-weight: bold; font-size: 125%; } @@ -65,7 +65,7 @@ cursor: pointer; } - .o-init-image() { + @mixin o-init-image { content: ""; display: block; margin: auto; @@ -73,20 +73,20 @@ } .o_view_nocontent_smiling_face:before { - .o-init-image(); - .size(120px, 140px); + @include o-init-image; + @include size(120px, 140px); background: transparent url(/web/static/src/img/smiling_face.svg) no-repeat center; } .o_view_nocontent_neutral_face:before { - .o-init-image(); - .size(120px, 140px); + @include o-init-image; + @include size(120px, 140px); background: transparent url(/web/static/src/img/neutral_face.svg) no-repeat center; } .o_view_nocontent_empty_folder:before { - .o-init-image(); - .size(120px, 80px); + @include o-init-image; + @include size(120px, 80px); margin-top: 30px; margin-bottom: 30px; background: transparent url(/web/static/src/img/empty_folder.svg) no-repeat center; @@ -94,8 +94,8 @@ .o_empty_custom_dashboard { min-height: 327px; - margin-left: -@grid-gutter-width/2; - margin-top: -@grid-gutter-width/2; + margin-left: -$grid-gutter-width/2; + margin-top: -$grid-gutter-width/2; padding: 100px 0 0 137px; background: transparent url(/web/static/src/img/graph_background.png) no-repeat 0 0; } diff --git a/addons/web/static/src/scss/web_calendar.scss b/addons/web/static/src/scss/web_calendar.scss index 5179552b3b6..257e81bc89a 100644 --- a/addons/web/static/src/scss/web_calendar.scss +++ b/addons/web/static/src/scss/web_calendar.scss @@ -1,20 +1,20 @@ -@nb-calendar-colors: 24; +$nb-calendar-colors: 24; @keyframes backgroundfade { - from {background-color: fade(@odoo-brand-primary, 50%);} + from {background-color: rgba($odoo-brand-primary, 0.5);} to {background-color: #f5f5f5;} } .o_calendar_container { height: 100%; - .o-webclient-padding(@top: @odoo-horizontal-padding/2, @bottom: @odoo-horizontal-padding/2); - .o-flex-display(); + @include o-webclient-padding($top: $odoo-horizontal-padding/2, $bottom: $odoo-horizontal-padding/2); + @include o-flex-display; - .calendar_color_loop(@index) when (@index < @nb-calendar-colors+1) { - .o_calendar_color_@{index} { + @for $index from 1 through $nb-calendar-colors { + .o_calendar_color_#{$index} { color: #0D0D0D; - background-color: spin(rgb(255, 192, 192), 360/(@nb-calendar-colors+1) * @index); - border-color: spin(rgb(255, 192, 192), 360/(@nb-calendar-colors+1) * @index); + background-color: adjust-hue(rgb(255, 192, 192), (360/($nb-calendar-colors+1) * $index) * 1deg); + border-color: adjust-hue(rgb(255, 192, 192), (360/($nb-calendar-colors+1) * $index) * 1deg); opacity: 0.7; &.o_event_hightlight { font-weight: bold; @@ -24,30 +24,23 @@ color: #666 !important; } } - .calendar_color_loop(@index + 1); - } - .calendar_color_loop(1); - - .underline_color_loop(@index) when (@index < @nb-calendar-colors+1) { - .o_underline_color_@{index} { - border-bottom: 4px solid spin(rgba(255, 192, 192, 0.7), 360/(@nb-calendar-colors+1) * @index); + .o_underline_color_#{$index} { + border-bottom: 4px solid adjust-hue(rgba(255, 192, 192, 0.7), (360/($nb-calendar-colors+1) * $index) * 1deg); } - .underline_color_loop(@index + 1); } - .underline_color_loop(1); .o_calendar_view { - .o-flex(1, 1, auto); + @include o-flex(1, 1, auto); min-width: 0; .o_calendar_widget { height: 100%; - background-color: @odoo-view-background-color; + background-color: $odoo-view-background-color; * { z-index: 0; // FIXME } .fc-week-number, .fc-widget-header { - background-color: lighten(@odoo-brand-secondary, 30%); + background-color: lighten($odoo-brand-secondary, 30%); } .o_avatar_square { border-radius: 5px; @@ -71,19 +64,19 @@ } .o_calendar_sidebar_container { - .o-flex(0, 0, @odoo-horizontal-padding); + @include o-flex(0, 0, $odoo-horizontal-padding); position: relative; &.o_sidebar_hidden { - margin-right: -@odoo-horizontal-padding; // hack to display the toggler in the gutter + margin-right: -$odoo-horizontal-padding; // hack to display the toggler in the gutter .o_calendar_sidebar_toggler { padding: 4px; - color: darken(@odoo-webclient-background-color, 30%); + color: darken($odoo-webclient-background-color, 30%); } } .o_calendar_sidebar_toggler { - .o-position-absolute(@top: 0, @right: 0); + @include o-position-absolute($top: 0, $right: 0); cursor: pointer; padding: 6px; z-index: 1; @@ -95,7 +88,7 @@ .o_calendar_sidebar { width: 250px; margin-left: 8px; - background: @odoo-view-background-color; + background: $odoo-view-background-color; } .ui-datepicker { @@ -106,18 +99,18 @@ padding: 0; .ui-widget-header { - .o-flex-display(); + @include o-flex-display; background: none; - background-color: lighten(@odoo-brand-secondary, 30%); + background-color: lighten($odoo-brand-secondary, 30%); border-radius: 0; .ui-datepicker-prev, .ui-datepicker-next { - .o-flex(0, 0, auto); + @include o-flex(0, 0, auto); position: static; cursor: pointer; padding: 2px; text-align: center; - color: @odoo-main-text-color; + color: $odoo-main-text-color; &.ui-state-hover { background: none; border: none; @@ -142,7 +135,7 @@ } } .ui-datepicker-title { - .o-flex(0, 0, auto); + @include o-flex(0, 0, auto); order: 2; display: inline-block; margin: 0 10px; @@ -151,31 +144,31 @@ table { td { padding: 0 2px 2px 0; - background-color: @odoo-view-background-color; + background-color: $odoo-view-background-color; a { border: none; background: none; - background-color: lighten(@odoo-brand-secondary, 40%); + background-color: lighten($odoo-brand-secondary, 40%); text-align: center; } } .ui-state-default { - color: @odoo-brand-primary; + color: $odoo-brand-primary; &:hover { background: none; - background-color: fade(@odoo-brand-primary, 50%); - border-color: @odoo-brand-primary; - color: @odoo-view-background-color; + background-color: rgba($odoo-brand-primary, 0.5); + border-color: $odoo-brand-primary; + color: $odoo-view-background-color; }; } .ui-state-active { background: none; - background-color: @odoo-brand-primary; - color: @odoo-view-background-color; + background-color: $odoo-brand-primary; + color: $odoo-view-background-color; } .o_selected_range.o_color { background: none; - background-color: @odoo-brand-primary; + background-color: $odoo-brand-primary; animation: backgroundfade 3s forwards; } } @@ -213,7 +206,7 @@ padding: 0; } } -@media (max-width: @screen-xs-max) { +@media (max-width: $screen-xs-max) { .o_control_panel { .o_calendar_button_today { float: right; diff --git a/addons/web/static/src/scss/webclient.scss b/addons/web/static/src/scss/webclient.scss index 1de198d282b..d4bd0b4e0f2 100644 --- a/addons/web/static/src/scss/webclient.scss +++ b/addons/web/static/src/scss/webclient.scss @@ -3,19 +3,19 @@ // ------------------------------------------------------------------ .o_web_client { position: relative; // normally useless but required by bootstrap-datepicker - background-color: @odoo-webclient-background-color; + background-color: $odoo-webclient-background-color; } // ------------------------------------------------------------------ // Misc. widgets // ------------------------------------------------------------------ -@notification-error-bg-color: #F16567; -@notification-info-bg-color: #FCFBEA; +$notification-error-bg-color: #F16567; +$notification-info-bg-color: #FCFBEA; .o_notification_manager { width: 300px; max-width: 100%; - .o-position-absolute(@navbar-height, 0px); + @include o-position-absolute($navbar-height, 0px); z-index: 1100; // Bootstrap modal z-index is 1050 .o_notification { @@ -24,19 +24,19 @@ opacity: 0; - background-color: @notification-info-bg-color; - box-shadow: 0px 0px 5px 1px @odoo-main-text-color; + background-color: $notification-info-bg-color; + box-shadow: 0px 0px 5px 1px $odoo-main-text-color; position: relative; .o_close { - .o-position-absolute(5px, 5px); + @include o-position-absolute(5px, 5px); color: rgba(0, 0, 0, 0.3); text-decoration: none; } .o_notification_title { - .o-flex-display(); - .o-align-items(center); + @include o-flex-display; + @include o-align-items(center); border-bottom: 1px solid rgba(0, 0, 0, 0.1); padding: 10px 10px 10px 20px; @@ -56,7 +56,7 @@ &.o_error { color: white; - background-color: @notification-error-bg-color; + background-color: $notification-error-bg-color; } } } @@ -103,30 +103,30 @@ div.o_boolean_toggle { } > input:checked + .slider { - background-color: @odoo-brand-optional; + background-color: $odoo-brand-optional; &:before { - .translate(14px; 0px); + @include translate(14px, 0px); } } } // Full bg colors (bootstrap extension) .bg-success-full { - background-color: @brand-success; + background-color: $brand-success; } .bg-warning-full { - background-color: @brand-warning; + background-color: $brand-warning; } .bg-danger-full { - background-color: @brand-danger; + background-color: $brand-danger; } .bg-info-full { - background-color: @brand-info; + background-color: $brand-info; } .o_web_accesskey_overlay { - font-family: @font-family-sans-serif; + font-family: $font-family-sans-serif; position: absolute; width: 100%; height: 100%; @@ -137,4 +137,4 @@ div.o_boolean_toggle { justify-content: center; display: flex; align-items: center; -} \ No newline at end of file +} diff --git a/addons/web/static/src/scss/webclient_extra.scss b/addons/web/static/src/scss/webclient_extra.scss index 82798437672..701cfe2a9b3 100644 --- a/addons/web/static/src/scss/webclient_extra.scss +++ b/addons/web/static/src/scss/webclient_extra.scss @@ -7,8 +7,8 @@ outline: none; } .o_input { - border: 1px solid @odoo-form-lightsecondary; - border-radius: @border-radius-base; + border: 1px solid $odoo-form-lightsecondary; + border-radius: $border-radius-base; padding: 2px 4px; color: #1f1f1f; @@ -29,7 +29,7 @@ select { top: 0; right: 50%; padding: 4px 12px; - background-color: @odoo-color-pink; + background-color: $odoo-color-pink; color: white; text-align: center; border-top: none; @@ -41,6 +41,6 @@ select { // User menu in navbar //------------------------------------------------------------------------------ #oe_main_menu_navbar .oe_user_menu_placeholder .o_user_menu .oe_topbar_name { - .o-text-overflow(); + @include o-text-overflow; max-width: 150px; } diff --git a/addons/web/static/src/scss/webclient_layout.scss b/addons/web/static/src/scss/webclient_layout.scss index f876d8b3527..14892617b5e 100644 --- a/addons/web/static/src/scss/webclient_layout.scss +++ b/addons/web/static/src/scss/webclient_layout.scss @@ -1,8 +1,8 @@ -@odoo-submenu-width: 220px; +$odoo-submenu-width: 220px; .o_web_client { - .o-flex-display(); - .o-flex-flow(column, nowrap); + @include o-flex-display; + @include o-flex-flow(column, nowrap); overflow: hidden; &.o_fullscreen { @@ -16,7 +16,7 @@ .navbar { - .o-flex(0, 0, auto); + @include o-flex(0, 0, auto); li > a { padding: 4px 8px; @@ -31,20 +31,20 @@ } > .o_main { - .o-flex(1, 1, auto); - .o-flex-display(); + @include o-flex(1, 1, auto); + @include o-flex-display; min-height: 0; // Allow flex to shrink this element as much as it wants height: 100%; .o_sub_menu { - .o-flex(0, 0, @odoo-submenu-width); - .o-flex-display(); - .o-flex-flow(column, nowrap); - border-right: 1px solid darken(@odoo-control-panel-background-color, 20%); - background-color: @odoo-control-panel-background-color; + @include o-flex(0, 0, $odoo-submenu-width); + @include o-flex-display; + @include o-flex-flow(column, nowrap); + border-right: 1px solid darken($odoo-control-panel-background-color, 20%); + background-color: $odoo-control-panel-background-color; .o_sub_menu_logo { - .o-flex(0, 0, auto); + @include o-flex(0, 0, auto); text-align: center; position: relative; @@ -68,20 +68,20 @@ } .o_sub_menu_content { - .o-flex(1, 1, auto); + @include o-flex(1, 1, auto); height:100%; overflow-y: auto; .oe_secondary_menu_section { font-weight: bold; margin-left: 8px; - color: @odoo-brand-optional; + color: $odoo-brand-optional; } .oe_secondary_submenu { margin: 3px 0px 10px; line-height: 1.1em; >li:not(.active) > a { - color: @odoo-main-text-color; + color: $odoo-main-text-color; } > li > a { padding: 4px 4px 4px 18px; @@ -98,7 +98,7 @@ } } .oe_menu_text { - .o-text-overflow(); + @include o-text-overflow; max-width: 85%; margin-top: 1px; } @@ -129,34 +129,34 @@ } .o_sub_menu_footer { - .o-flex(0, 0, auto); + @include o-flex(0, 0, auto); text-align: center; > a { font-weight: bold; > span { - color: @odoo-color-pink; + color: $odoo-color-pink; } } } } .o_main_content { - .o-flex(1, 1, auto); - .o-flex-display(); - .o-flex-flow(column, nowrap); + @include o-flex(1, 1, auto); + @include o-flex-display; + @include o-flex-flow(column, nowrap); .o_control_panel { - .o-flex(0, 0, auto); + @include o-flex(0, 0, auto); } .o_content { - .o-flex(1, 1, auto); + @include o-flex(1, 1, auto); height: 100%; overflow: auto; position: relative; > .o_view_controller { - .o-position-absolute(0, 0, 0, 0); // Get the 100% height of its flex parent + @include o-position-absolute(0, 0, 0, 0); // Get the 100% height of its flex parent height: 100%; } } diff --git a/addons/web_diagram/static/src/scss/diagram_view.scss b/addons/web_diagram/static/src/scss/diagram_view.scss index 2a0fddbb6e6..c56f5ac0b67 100644 --- a/addons/web_diagram/static/src/scss/diagram_view.scss +++ b/addons/web_diagram/static/src/scss/diagram_view.scss @@ -3,7 +3,7 @@ background-color: white; .o_diagram_header { - .o-webclient-padding(@top: 16px, @bottom: 16px); + @include o-webclient-padding($top: 16px, $bottom: 16px); > span { display: block; text-align: justify; diff --git a/addons/web_editor/static/src/scss/web_editor.common.scss b/addons/web_editor/static/src/scss/web_editor.common.scss index 99f6a474397..577e2e568b3 100644 --- a/addons/web_editor/static/src/scss/web_editor.common.scss +++ b/addons/web_editor/static/src/scss/web_editor.common.scss @@ -31,7 +31,7 @@ html, body { min-width: 20px; } } - @media (max-width: @screen-xs-max) { + @media (max-width: $screen-xs-max) { .table-responsive > table.table { table-layout: auto; } @@ -83,7 +83,7 @@ div.media_iframe_video { iframe { width: 100%; height: 100%; - .o-position-absolute(@top: 0); + @include o-position-absolute($top: 0); margin: 0 auto; margin-left: -50%; } @@ -108,7 +108,7 @@ div.media_iframe_video { } .css_editable_mode_display { - .o-position-absolute(); + @include o-position-absolute; width: 100%; height: 100%; display: none; @@ -120,7 +120,7 @@ html[data-browser^="msie"] div.media_iframe_video iframe { margin-left: 0; } -@media (max-width: @screen-xs-max) { +@media (max-width: $screen-xs-max) { img:not(.cke_iframe), .media_iframe_video, span.fa, i.fa { -webkit-transform: none !important; -moz-transform: none !important; @@ -159,72 +159,70 @@ ul.oe_menu_editor { } // Generate all spacings for all sizes -.o-spacing-all(@factor: 1) { +@mixin o-spacing-all($factor: 1) { // Generate vertical margin/padding classes used by the editor - .o-generate-spacings(256/8); - .o-generate-spacings(@n, @i: 0) when (@i =< @n) { - .o-vspacing(@i * 8); - .o-generate-spacings(@n, @i + 1); + @for $i from 0 through (256 / 8) { + @include o-vspacing($i * 8); } - .o-vspacing(4, @factor); + @include o-vspacing(4, $factor); // 92px vertical margin is kept for compatibility - .o-vmargins(92, @factor); + @include o-vmargins(92, $factor); // Some horizontal margin classes defined for convenience // (and compatibility) - .o-hmargins(0, @factor); - .o-hmargins(4, @factor); - .o-hmargins(8, @factor); - .o-hmargins(16, @factor); - .o-hmargins(32, @factor); - .o-hmargins(64, @factor); + @include o-hmargins(0, $factor); + @include o-hmargins(4, $factor); + @include o-hmargins(8, $factor); + @include o-hmargins(16, $factor); + @include o-hmargins(32, $factor); + @include o-hmargins(64, $factor); } // Generate all spacings for one size, scalled by a given factor // (0 <= factor <= 1) -.o-vspacing(@name, @factor: 1) { - .o-vmargins(@name, @factor); - .o-vpaddings(@name, @factor); +@mixin o-vspacing($name, $factor: 1) { + @include o-vmargins($name, $factor); + @include o-vpaddings($name, $factor); } -.o-vmargins(@name, @factor: 1) { - .o-vmargins-define(@name, @factor * @name); +@mixin o-vmargins($name, $factor: 1) { + @include o-vmargins-define($name, $factor * $name); } -.o-vpaddings(@name, @factor: 1) { - .o-vpaddings-define(@name, @factor * @name); +@mixin o-vpaddings($name, $factor: 1) { + @include o-vpaddings-define($name, $factor * $name); } -.o-hspacing(@name, @factor: 1) { - .o-hmargins(@name, @factor); - .o-hpaddings(@name, @factor); +@mixin o-hspacing($name, $factor: 1) { + @include o-hmargins($name, $factor); + @include o-hpaddings($name, $factor); } -.o-hmargins(@name, @factor: 1) { - .o-hmargins-define(@name, @factor * @name); +@mixin o-hmargins($name, $factor: 1) { + @include o-hmargins-define($name, $factor * $name); } -.o-hpaddings(@name, @factor: 1) { - .o-hpaddings-define(@name, @factor * @name); +@mixin o-hpaddings($name, $factor: 1) { + @include o-hpaddings-define($name, $factor * $name); } // Generate all spacings for one size, given the name of the spacing and // intended size -.o-vmargins-define(@name, @size: @name) { - .mt@{name} { margin-top: unit(@size, px)!important; } - .mb@{name} { margin-bottom: unit(@size, px)!important; } +@mixin o-vmargins-define($name, $size: $name) { + .mt#{$name} { margin-top: $size * 1px !important; } + .mb#{$name} { margin-bottom: $size * 1px !important; } } -.o-vpaddings-define(@name, @size: @name) { - .pt@{name} { padding-top: unit(@size, px)!important; } - .pb@{name} { padding-bottom: unit(@size, px)!important; } +@mixin o-vpaddings-define($name, $size: $name) { + .pt#{$name} { padding-top: $size * 1px !important; } + .pb#{$name} { padding-bottom: $size * 1px !important; } } -.o-hmargins-define(@name, @size: @name) { - .ml@{name} { margin-left: unit(@size, px)!important; } - .mr@{name} { margin-right: unit(@size, px)!important; } +@mixin o-hmargins-define($name, $size: $name) { + .ml#{$name} { margin-left: $size * 1px !important; } + .mr#{$name} { margin-right: $size * 1px !important; } } -.o-hpaddings-define(@name, @size: @name) { - .pl@{name} { padding-left: unit(@size, px)!important; } - .pr@{name} { padding-right: unit(@size, px)!important; } +@mixin o-hpaddings-define($name, $size: $name) { + .pl#{$name} { padding-left: $size * 1px !important; } + .pr#{$name} { padding-right: $size * 1px !important; } } // Generate all margins -.o-spacing-all(); +@include o-spacing-all; // Underline a.o_underline { @@ -235,74 +233,74 @@ a.o_underline { } // Colors -@gray-white: #fff; +$gray-white: #fff; -@color-alpha: #1cc1a9; -@color-beta: #875A7B; -@color-gamma: #BA3C3D; -@color-delta: #0D6759; -@color-epsilon: #0B2E59; +$color-alpha: #1cc1a9; +$color-beta: #875A7B; +$color-gamma: #BA3C3D; +$color-delta: #0D6759; +$color-epsilon: #0B2E59; // Greyscale transparent colours -@color-black-25: fade(black, 25%); -@color-black-50: fade(black, 50%); -@color-black-75: fade(black, 75%); -@color-white-25: fade(white, 25%); -@color-white-50: fade(white, 50%); -@color-white-75: fade(white, 75%); +$color-black-25: rgba(black, 0.25); +$color-black-50: rgba(black, 0.5); +$color-black-75: rgba(black, 0.75); +$color-white-25: rgba(white, 0.25); +$color-white-50: rgba(white, 0.5); +$color-white-75: rgba(white, 0.75); -.o-create-color-classes(@name, @color, @complementary: contrast(@color, @text-color, #FFF, 60%), @content-color: @color) { - .bg-@{name} { - background-color: @color; - color: @complementary; +@mixin o-create-color-classes($name, $color, $complementary: o-get-most-contrast($color, $text-color, #FFF), $content-color: $color) { + .bg-#{$name} { + background-color: $color; + color: $complementary; .text-muted { - color: fade(@complementary, 40%); + color: rgba($complementary, 0.4); } } - body .text-@{name} { // body to make the rules more important that bg-* ones - color: @content-color; + body .text-#{$name} { // body to make the rules more important that bg-* ones + color: $content-color; } } -.o-create-color-btn-classes(@name, @color, @complementary: contrast(@color, @text-color, #FFF, 60%), @border-color: darken(@color, 5%)) { - .btn-@{name} { - .button-variant(@complementary, @color, @border-color); +@mixin o-create-color-btn-classes($name, $color, $complementary: o-get-most-contrast($color, $text-color, #FFF), $border-color: darken($color, 5%)) { + .btn-#{$name} { + @include button-variant($complementary, $color, $border-color); } } // Create classes for theme colors... -.o-create-color-classes(alpha, @color-alpha); -.o-create-color-classes(beta, @color-beta); -.o-create-color-classes(gamma, @color-gamma); -.o-create-color-classes(delta, @color-delta); -.o-create-color-classes(epsilon, @color-epsilon); +@include o-create-color-classes(alpha, $color-alpha); +@include o-create-color-classes(beta, $color-beta); +@include o-create-color-classes(gamma, $color-gamma); +@include o-create-color-classes(delta, $color-delta); +@include o-create-color-classes(epsilon, $color-epsilon); // ... and button classes -.o-create-color-btn-classes(alpha, @color-alpha); -.o-create-color-btn-classes(beta, @color-beta); -.o-create-color-btn-classes(gamma, @color-gamma); -.o-create-color-btn-classes(delta, @color-delta); -.o-create-color-btn-classes(epsilon, @color-epsilon); +@include o-create-color-btn-classes(alpha, $color-alpha); +@include o-create-color-btn-classes(beta, $color-beta); +@include o-create-color-btn-classes(gamma, $color-gamma); +@include o-create-color-btn-classes(delta, $color-delta); +@include o-create-color-btn-classes(epsilon, $color-epsilon); // Create classes for UI colors -.o-create-color-classes(primary, @brand-primary); -.o-create-color-classes(success, @state-success-bg, @content-color: @state-success-text); -.o-create-color-classes(info, @state-info-bg, @content-color: @state-info-text); -.o-create-color-classes(warning, @state-warning-bg, @content-color: @state-warning-text); -.o-create-color-classes(danger, @state-danger-bg, @content-color: @state-danger-text); +@include o-create-color-classes(primary, $brand-primary); +@include o-create-color-classes(success, $state-success-bg, $content-color: $state-success-text); +@include o-create-color-classes(info, $state-info-bg, $content-color: $state-info-text); +@include o-create-color-classes(warning, $state-warning-bg, $content-color: $state-warning-text); +@include o-create-color-classes(danger, $state-danger-bg, $content-color: $state-danger-text); // Create classes for greyscale colors -.o-create-color-classes(~'black', @gray-base); -.o-create-color-classes(~'gray-darker', @gray-darker); -.o-create-color-classes(~'gray-dark', @gray-dark); -.o-create-color-classes(~'gray', @gray); -.o-create-color-classes(~'gray-light', @gray-light); -.o-create-color-classes(~'gray-lighter', @gray-lighter); -.o-create-color-classes(~'white', @gray-white); +@include o-create-color-classes('black', $gray-base); +@include o-create-color-classes('gray-darker', $gray-darker); +@include o-create-color-classes('gray-dark', $gray-dark); +@include o-create-color-classes('gray', $gray); +@include o-create-color-classes('gray-light', $gray-light); +@include o-create-color-classes('gray-lighter', $gray-lighter); +@include o-create-color-classes('white', $gray-white); // Create classes for greyscale transparent colours -.o-create-color-classes(~'black-25', @color-black-25); -.o-create-color-classes(~'black-50', @color-black-50); -.o-create-color-classes(~'black-75', @color-black-75); -.o-create-color-classes(~'white-25', @color-white-25); -.o-create-color-classes(~'white-50', @color-white-50); -.o-create-color-classes(~'white-75', @color-white-75); +@include o-create-color-classes('black-25', $color-black-25); +@include o-create-color-classes('black-50', $color-black-50); +@include o-create-color-classes('black-75', $color-black-75); +@include o-create-color-classes('white-25', $color-white-25); +@include o-create-color-classes('white-50', $color-white-50); +@include o-create-color-classes('white-75', $color-white-75); diff --git a/addons/web_editor/static/src/scss/web_editor.ui.scss b/addons/web_editor/static/src/scss/web_editor.ui.scss index 76e86b98cb9..5d848a481e4 100644 --- a/addons/web_editor/static/src/scss/web_editor.ui.scss +++ b/addons/web_editor/static/src/scss/web_editor.ui.scss @@ -1,23 +1,38 @@ +// Mixins for buttons with alpha bg-color +@mixin o-alpha-button-preview { + position: relative; + background-image: url('/web_editor/static/src/img/transparent.png'); + background-size: 10px auto; + z-index: 1; + + // Place an overlay that inherit the button's bg-color. + &::before { + content: ""; + @include o-position-absolute(0, 0, 0, 0); + z-index: -1; + background-color: inherit; + } +} // TOP BAR (EDIT) #web_editor-top-edit { - .o-position-absolute(0, 0, auto, 0); + @include o-position-absolute(0, 0, auto, 0); position: fixed; - height: @odoo-navbar-height; - z-index: @zindex-modal - 9; + height: $odoo-navbar-height; + z-index: $zindex-modal - 9; background-color: rgba(0,0,0,0); - .o-transition(background-color, 400ms, @o-we-md-ease); - font-family: @o-we-font-family; + @include o-transition(background-color, 400ms, $o-we-md-ease); + font-family: $o-we-font-family; form.navbar-form { height: 100%; z-index: 1060; margin: 0; padding: 0; - .o-position-absolute(@right: -@o-we-sidebar-width); - .o-transition(right, 0.4s, @o-we-md-ease); - border-left: 1px solid @o-we-color-divider; + @include o-position-absolute($right: -$o-we-sidebar-width); + @include o-transition(right, 0.4s, $o-we-md-ease); + border-left: 1px solid $o-we-color-divider; background-color: inherit; .btn-group { @@ -30,27 +45,27 @@ padding: 10px; line-height: 1.2; font-size: 13px; - font-family: @o-we-font-family; + font-family: $o-we-font-family; - .o-transition(all, 0.3s); + @include o-transition(all, 0.3s); border: none; border-radius: 0; .fa { - margin-right: @grid-gutter-width/4; + margin-right: $grid-gutter-width/4; &.fa-times { - color: @o-we-color-danger; + color: $o-we-color-danger; } } &.btn-primary { - .button-variant(white, @odoo-brand-primary, @odoo-brand-primary); + @include button-variant(white, $odoo-brand-primary, $odoo-brand-primary); } &.btn-default { - .button-variant(white, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)); + @include button-variant(white, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)); &:hover { - background: fade(black, 50%); + background: rgba(black, 0.5); } } @@ -71,48 +86,48 @@ padding: 4px; } html[lang] > body.editor_enable [data-oe-translation-state] { - @o-color-content-to-translate: rgb(255, 255, 90); - @o-color-translated-content: rgb(120, 215, 110); + $o-color-content-to-translate: rgb(255, 255, 90); + $o-color-translated-content: rgb(120, 215, 110); - background: fade(@o-color-content-to-translate, 50%)!important; + background: rgba($o-color-content-to-translate, 0.5)!important; &[data-oe-translation-state="translated"] { - background: fade(@o-color-translated-content, 50%)!important; + background: rgba($o-color-translated-content, 0.5)!important; } &.o_dirty { - background: fade(@o-color-translated-content, 25%)!important; + background: rgba($o-color-translated-content, 0.25)!important; } } // SNIPPET PANEL #oe_snippets { - .o-w-preserve-btn(); + @include o-w-preserve-btn; - .o-flex-display(); - .o-flex-flow(column, nowrap); - .o-position-absolute(0, auto, 0, -@o-we-sidebar-width); + @include o-flex-display; + @include o-flex-flow(column, nowrap); + @include o-position-absolute(0, auto, 0, -$o-we-sidebar-width); position: fixed; - width: @o-we-sidebar-width; - z-index: @zindex-modal - 9; + width: $o-we-sidebar-width; + z-index: $zindex-modal - 9; - font-family: Roboto, @font-family-sans-serif; - border-right: 1px solid @o-we-color-divider; - .o-transition(left, 400ms, @o-we-md-ease); - .o-linear-gradient(45deg, @o-we-color-normal, darken(@o-we-color-normal, 10%)); + font-family: Roboto, $font-family-sans-serif; + border-right: 1px solid $o-we-color-divider; + @include o-transition(left, 400ms, $o-we-md-ease); + @include o-linear-gradient(45deg, $o-we-color-normal, darken($o-we-color-normal, 10%)); box-shadow: 0px 10px 10px -10px black inset; #snippets_menu { - .o-flex(0, 0, auto); - height: @odoo-navbar-height; - line-height: @odoo-navbar-height; + @include o-flex(0, 0, auto); + height: $odoo-navbar-height; + line-height: $odoo-navbar-height; margin: 0; padding: 0; - background: @o-we-color-dark; + background: $o-we-color-dark; text-align: center; font-weight: normal; font-size: 17px; color: white; - font-family: @o-we-font-family; + font-family: $o-we-font-family; } #o_scroll { @@ -121,9 +136,9 @@ html[lang] > body.editor_enable [data-oe-translation-state] { .o_panel_header { color: #999999; - .o-flex-display(); - .o-align-items(center); - .o-justify-content(center); + @include o-flex-display; + @include o-align-items(center); + @include o-justify-content(center); padding: 3%; color: white; margin-bottom: 3%; @@ -145,7 +160,7 @@ html[lang] > body.editor_enable [data-oe-translation-state] { margin: 0 0 6% 3%; box-shadow: none; background-color: transparent; - .user-select(none); + @include user-select(none); cursor: pointer; cursor: copy; @@ -161,8 +176,8 @@ html[lang] > body.editor_enable [data-oe-translation-state] { } &:hover .oe_snippet_thumbnail_img { - .o-transition(transform, 200ms, ease); - .scale(1.05); + @include o-transition(transform, 200ms, ease); + @include scale(1.05); } } @@ -181,7 +196,7 @@ html[lang] > body.editor_enable [data-oe-translation-state] { } .btn.o_install_btn { display: none; - .o-position-absolute(16px, 4px, auto, 4px); + @include o-position-absolute(16px, 4px, auto, 4px); } &:hover .btn.o_install_btn { display: block; @@ -198,7 +213,7 @@ html[lang] > body.editor_enable [data-oe-translation-state] { .oe_snippet { // No root because can be drag and drop (and the helper is in the body) position: relative; width: 100px; - background-color: @o-we-color-normal; + background-color: $o-we-color-normal; > :not(.oe_snippet_thumbnail) { display: none!important; @@ -210,7 +225,7 @@ html[lang] > body.editor_enable [data-oe-translation-state] { .oe_snippet_thumbnail_img { width: 100%; height: 0; - border: 1px solid @o-we-color-normal; + border: 1px solid $o-we-color-normal; padding-bottom: 75%; background-size: cover; background-position: center center; @@ -223,12 +238,12 @@ html[lang] > body.editor_enable [data-oe-translation-state] { } .oe_snippet_thumbnail_title { display: block; - border: 1px solid @o-we-color-dark; + border: 1px solid $o-we-color-dark; padding: 5px; font-size: 12px; font-weight: 300; text-shadow: none; - color: @o-we-color-text-light; + color: $o-we-color-text-light; } &:hover .oe_snippet_thumbnail_title { color: white; @@ -239,54 +254,54 @@ html[lang] > body.editor_enable [data-oe-translation-state] { // DROPZONES @keyframes dropZoneInsert { to { - background-color: fade(@odoo-brand-primary, 20%); + background-color: rgba($odoo-brand-primary, 0.2); } } #wrapwrap .oe_drop_zone { - background-color: fade(@odoo-brand-primary, 5%); - .o-animation(dropZoneInsert, 1s, linear, 0s, infinite, alternate); + background-color: rgba($odoo-brand-primary, 0.05); + @include o-animation(dropZoneInsert, 1s, linear, 0s, infinite, alternate); &.oe_insert { - @odoo-dropzone-size: 40px; - @odoo-dropzone-border-width: 2px; - @odoo-dropzone-border: @odoo-dropzone-border-width dashed @odoo-brand-primary; + $odoo-dropzone-size: 40px; + $odoo-dropzone-border-width: 2px; + $odoo-dropzone-border: $odoo-dropzone-border-width dashed $odoo-brand-primary; z-index: 999; - border: @odoo-dropzone-border; + border: $odoo-dropzone-border; border-top: none; border-bottom: none; position: relative; width: 100%; - height: @odoo-dropzone-size; - margin: -@odoo-dropzone-size/2 0; + height: $odoo-dropzone-size; + margin: -$odoo-dropzone-size/2 0; - .o-transition(margin, 400ms, linear); + @include o-transition(margin, 400ms, linear); &:after { content: ""; display: block; width: 100%; height: 50%; - border-bottom: @odoo-dropzone-border; + border-bottom: $odoo-dropzone-border; box-sizing: content-box; } &.oe_vertical { - border: 2px dashed @odoo-brand-primary; + border: 2px dashed $odoo-brand-primary; border-left: none; border-right: none; - width: @odoo-dropzone-size; + width: $odoo-dropzone-size; float: left; - margin: 0 -@odoo-dropzone-size/2; + margin: 0 -$odoo-dropzone-size/2; &:after { width: 50%; height: 100%; border-bottom: none; - border-right: @odoo-dropzone-border; + border-right: $odoo-dropzone-border; } } } @@ -294,20 +309,20 @@ html[lang] > body.editor_enable [data-oe-translation-state] { // MANIPULATORS #oe_manipulators { - @odoo-handle-edge-size: 1px; - @odoo-handle-border-width: 1px; + $odoo-handle-edge-size: 1px; + $odoo-handle-border-width: 1px; position: relative; // SNIPPET MANIPULATORS .oe_overlay { - .o-position-absolute(); + @include o-position-absolute; z-index: 1002; display: none; height: 0; background: transparent; text-align: center; - .o-transition(opacity, 400ms, linear); + @include o-transition(opacity, 400ms, linear); &.o_keypress { opacity: 0; } @@ -317,8 +332,8 @@ html[lang] > body.editor_enable [data-oe-translation-state] { // OVERLAY OPTIONS > .oe_overlay_options { - font-family: @o-we-font-family; - .o-position-absolute(@bottom: 0, @left: 0); + font-family: $o-we-font-family; + @include o-position-absolute($bottom: 0, $left: 0); width: 250px; // the parent oe_overlay has a width equal to the snippet width, the 250px is there to force the options to stay on one line without overriding bootstrap .btn-group text-align: left; @@ -326,24 +341,24 @@ html[lang] > body.editor_enable [data-oe-translation-state] { white-space: nowrap; .btn { - @o-overlay-option-size: 25px; + $o-overlay-option-size: 25px; display: inline-block; - width: @o-overlay-option-size; - height: @o-overlay-option-size; + width: $o-overlay-option-size; + height: $o-overlay-option-size; padding: 0; - border: 1px solid @o-we-color-dark; - line-height: @o-overlay-option-size; + border: 1px solid $o-we-color-dark; + line-height: $o-overlay-option-size; font-size: 11px; border-radius: 0; font-weight: normal; - .o-transition(all, 400ms); - color: @o-we-color-text-light; - background-color: @o-we-color-light; + @include o-transition(all, 400ms); + color: $o-we-color-text-light; + background-color: $o-we-color-light; &:hover { color: white; - background-color: lighten(@o-we-color-dark, 10%); + background-color: lighten($o-we-color-dark, 10%); > .fa { color: white; @@ -352,24 +367,24 @@ html[lang] > body.editor_enable [data-oe-translation-state] { &.oe_snippet_remove { color: white; - background-color: @o-we-color-danger; - border-color: darken(@o-we-color-danger, 20%); + background-color: $o-we-color-danger; + border-color: darken($o-we-color-danger, 20%); > .fa { color: white; } &:hover { - background-color: darken(@o-we-color-danger, 20%); + background-color: darken($o-we-color-danger, 20%); } } &.oe_snippet_parent > i { - .scaleX(-1); + @include scaleX(-1); font-size: 12px; } > .fa { - color: @o-we-color-text-light; + color: $o-we-color-text-light; } } @@ -378,11 +393,11 @@ html[lang] > body.editor_enable [data-oe-translation-state] { .btn { width: auto; padding: 0 25px 0 5px; - background-color: @o-we-color-dark; + background-color: $o-we-color-dark; text-transform: uppercase; &:hover, &:active, &:focus { - background-color: lighten(@o-we-color-dark, 5%); - border-color: lighten(@o-we-color-dark, 10%); + background-color: lighten($o-we-color-dark, 5%); + border-color: lighten($o-we-color-dark, 10%); color: white; } &:active, &:focus, &:active:focus { @@ -392,22 +407,22 @@ html[lang] > body.editor_enable [data-oe-translation-state] { content: ""; width: 7px; height: 2px; - background-color: @o-we-color-text-light; - .o-position-absolute(46%); - .o-transition(all, 0.3s); + background-color: $o-we-color-text-light; + @include o-position-absolute(46%); + @include o-transition(all, 0.3s); } &:before { right: 9px; - .rotate(45deg); + @include rotate(45deg); } &:after { right: 5px; - .rotate(-45deg); + @include rotate(-45deg); } } // Open menu &.open .btn { - background-color: @o-we-color-light; + background-color: $o-we-color-light; &:before, &:after { width: 9px; } @@ -416,7 +431,7 @@ html[lang] > body.editor_enable [data-oe-translation-state] { transform: translateX(5px) rotate(-45deg); } &:after { - .rotate(45deg); + @include rotate(45deg); } } @@ -424,11 +439,11 @@ html[lang] > body.editor_enable [data-oe-translation-state] { .dropdown-menu { margin: -1px 0 0 0; padding: 0; - border: 1px solid @o-we-color-dark; + border: 1px solid $o-we-color-dark; border-radius: 0; - background-color: @o-we-color-light; + background-color: $o-we-color-light; a { - color: @o-we-color-text-light; + color: $o-we-color-text-light; font-weight: normal; font-size: 12px; padding: 5px 35px 5px 20px; @@ -437,7 +452,7 @@ html[lang] > body.editor_enable [data-oe-translation-state] { > li { position: relative; &:hover { - background-color: fadeOut(@o-we-color-dark, 50%); + background-color: fadeOut($o-we-color-dark, 50%); > a { color: white; background: transparent; @@ -455,22 +470,22 @@ html[lang] > body.editor_enable [data-oe-translation-state] { } } &.dropdown-submenu:before { - .o-position-absolute(@top: 10px, @right: 10px); - .o-caret-right(3px); - border-left-color: @o-we-color-text-light; + @include o-position-absolute($top: 10px, $right: 10px); + @include o-caret-right(3px); + border-left-color: $o-we-color-text-light; } &.divider { - background-color: @o-we-color-divider; + background-color: $o-we-color-divider; margin: 0 8px; } &.active > a { color: white; - background-color: fadeOut(@o-we-color-dark, 50%); + background-color: fadeOut($o-we-color-dark, 50%); &:before { - .o-position-absolute(@top: 5px, @left: 5px); + @include o-position-absolute($top: 5px, $left: 5px); content: "\f00c"; font-family: "FontAwesome"; - color: @odoo-brand-optional; + color: $odoo-brand-optional; } } &.dropdown-header { @@ -493,9 +508,9 @@ html[lang] > body.editor_enable [data-oe-translation-state] { margin: 7px 0 4px 4px; &::before { content: "\f148"; - .o-position-absolute(@top: 2px, @left: 8px); + @include o-position-absolute($top: 2px, $left: 8px); font-family: FontAwesome; - .scaleX(-1); + @include scaleX(-1); } ~ li:not(.dropdown-header) { a { @@ -514,7 +529,7 @@ html[lang] > body.editor_enable [data-oe-translation-state] { display: block; margin: 4px 35px 4px 20px; height: 1px; - background: fade(@o-we-color-text-light, 10%); + background: rgba($o-we-color-text-light, 0.1); } > a > i { @@ -529,60 +544,60 @@ html[lang] > body.editor_enable [data-oe-translation-state] { &.o_top_cover > .oe_overlay_options { bottom: auto; - top: @odoo-handle-border-width; - right: @odoo-handle-border-width; + top: $odoo-handle-border-width; + right: $odoo-handle-border-width; } // HANDLES > .o_handles { - @o-handles-offset-to-hide: 10000px; - @o-handless-accent-color: #00e2ff; - .o-position-absolute(-@o-handles-offset-to-hide, 0, auto, 0); + $o-handles-offset-to-hide: 10000px; + $o-handless-accent-color: #00e2ff; + @include o-position-absolute(-$o-handles-offset-to-hide, 0, auto, 0); &:hover > .o_handle { - background-color: fade(@o-handless-accent-color, 5%); + background-color: rgba($o-handless-accent-color, 0.05); } > .o_handle { - @o-handle-btn-size: 18px; + $o-handle-btn-size: 18px; position: relative; - border: 0 solid @o-handless-accent-color; - .o-transition(background, 300ms); + border: 0 solid $o-handless-accent-color; + @include o-transition(background, 300ms); &:hover, &.o_active { - background-color: fade(@o-handless-accent-color, 20%); + background-color: rgba($o-handless-accent-color, 0.2); &:before { content: ''; - .o-position-absolute(0, @left:50%); + @include o-position-absolute(0, $left:50%); width: 1px; height: 100%; margin-left: -1px; - background-color: fade(@o-handless-accent-color, 50%); + background-color: rgba($o-handless-accent-color, 0.5); } &.w:before { - .o-position-absolute(50%, @left: 0); + @include o-position-absolute(50%, $left: 0); width: 100%; height: 1px; } &:after { - border-color: darken(@o-handless-accent-color, 10%); - background-color: darken(@o-handless-accent-color, 20%); + border-color: darken($o-handless-accent-color, 10%); + background-color: darken($o-handless-accent-color, 20%); } } &:after { display: block; - width: @o-handle-btn-size; - height: @o-handle-btn-size; - border: solid 1px darken(@o-handless-accent-color, 10%); - line-height: @o-handle-btn-size - 2; + width: $o-handle-btn-size; + height: $o-handle-btn-size; + border: solid 1px darken($o-handless-accent-color, 10%); + line-height: $o-handle-btn-size - 2; font-size: 14px; font-family: FontAwesome; - background-color: darken(@o-handless-accent-color, 20%); + background-color: darken($o-handless-accent-color, 20%); color: white; } &.w:after, &.e:after { @@ -610,46 +625,46 @@ html[lang] > body.editor_enable [data-oe-translation-state] { } &.w { - .o-position-absolute(@o-handles-offset-to-hide, auto, -@o-handles-offset-to-hide, 0); - width: @odoo-handle-edge-size; - border-width: @odoo-handle-border-width; + @include o-position-absolute($o-handles-offset-to-hide, auto, -$o-handles-offset-to-hide, 0); + width: $odoo-handle-edge-size; + border-width: $odoo-handle-border-width; border-right-width: 0; cursor: e-resize; &:after { - .o-position-absolute(@top: 50%, @left: 40%); - margin-top: -@o-handle-btn-size/2; + @include o-position-absolute($top: 50%, $left: 40%); + margin-top: -$o-handle-btn-size/2; } } &.e { - .o-position-absolute(@o-handles-offset-to-hide, 0, -@o-handles-offset-to-hide, auto); - width: @odoo-handle-edge-size; - border-right-width: @odoo-handle-border-width; + @include o-position-absolute($o-handles-offset-to-hide, 0, -$o-handles-offset-to-hide, auto); + width: $odoo-handle-edge-size; + border-right-width: $odoo-handle-border-width; cursor: w-resize; &:after { - .o-position-absolute(@top: 50%, @right: 40%); - margin-top: -@o-handle-btn-size/2; + @include o-position-absolute($top: 50%, $right: 40%); + margin-top: -$o-handle-btn-size/2; } } &.n { - .o-position-absolute(@o-handles-offset-to-hide, 0, auto, 0); - border-top-width: @odoo-handle-border-width; + @include o-position-absolute($o-handles-offset-to-hide, 0, auto, 0); + border-top-width: $odoo-handle-border-width; cursor: ns-resize; &:after { - .o-position-absolute(@left: 50%, @top: 40%); - margin-left: -@o-handle-btn-size/2; + @include o-position-absolute($left: 50%, $top: 40%); + margin-left: -$o-handle-btn-size/2; } } &.s { - .o-position-absolute(auto, 0, -@o-handles-offset-to-hide, 0); - border-bottom-width: @odoo-handle-border-width; + @include o-position-absolute(auto, 0, -$o-handles-offset-to-hide, 0); + border-bottom-width: $odoo-handle-border-width; cursor: ns-resize; &:after { - .o-position-absolute(@left: 50%, @bottom: 40%); - margin-left: -@o-handle-btn-size/2; + @include o-position-absolute($left: 50%, $bottom: 40%); + margin-left: -$o-handle-btn-size/2; } } @@ -686,12 +701,12 @@ html[lang] > body.editor_enable [data-oe-translation-state] { // NOTE EDITOR .note-popover .popover { - height: @odoo-navbar-height; + height: $odoo-navbar-height; top: 0 !important; left: 0 !important; padding: 0; - margin: 0 0 0 @o-we-sidebar-width; - background-color: @o-we-color-dark; + margin: 0 0 0 $o-we-sidebar-width; + background-color: $o-we-color-dark; border-radius: 0; border-width: 0 1px; width: auto; @@ -699,50 +714,50 @@ html[lang] > body.editor_enable [data-oe-translation-state] { box-shadow: none; .popover-content { - height: @odoo-navbar-height; + height: $odoo-navbar-height; white-space: nowrap; - font-family: @o-we-font-family; + font-family: $o-we-font-family; h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { - font-family: @o-we-font-family; + font-family: $o-we-font-family; } .btn { - height: @odoo-navbar-height; + height: $odoo-navbar-height; border: none; border-radius: 0; - padding: @padding-base-vertical @padding-base-horizontal; // force this because of themes - background-color: @o-we-color-dark; - color: @o-we-color-text-normal; + padding: $padding-base-vertical $padding-base-horizontal; // force this because of themes + background-color: $o-we-color-dark; + color: $o-we-color-text-normal; border-top: 2px solid transparent; - .o-transition(all, 0.3s); + @include o-transition(all, 0.3s); > .fa { - color: @o-we-color-text-normal; + color: $o-we-color-text-normal; } &:hover { - border-top: 2px solid @o-we-color-text-normal; - color: @o-we-color-text-light; + border-top: 2px solid $o-we-color-text-normal; + color: $o-we-color-text-light; > .fa { - color: @o-we-color-text-light; + color: $o-we-color-text-light; } } .o_image_alt { - .o-text-overflow(inline-block); + @include o-text-overflow(inline-block); max-width: 100px; } &.active { border-top: 2px solid white; - background-color: @o-we-color-dark; - color: @o-we-color-text-light; + background-color: $o-we-color-dark; + color: $o-we-color-text-light; box-shadow: inset 0 3px 10px rgba(0, 0, 0, 0.5); > .fa { - color: @o-we-color-text-light; + color: $o-we-color-text-light; } } } @@ -752,7 +767,7 @@ html[lang] > body.editor_enable [data-oe-translation-state] { &.open, .btn-group.open { .dropdown-toggle { border-top: 2px solid white; - background-color: @o-we-color-darker; + background-color: $o-we-color-darker; color: white; box-shadow: none; @@ -765,18 +780,18 @@ html[lang] > body.editor_enable [data-oe-translation-state] { .dropdown-menu { margin: 0; border-radius: 0; - background-color: @o-we-color-darker; - color: @o-we-color-text-normal; + background-color: $o-we-color-darker; + color: $o-we-color-text-normal; > li > a { width: 100%; - color: @o-we-color-text-light; + color: $o-we-color-text-light; > .fa { - color: @o-we-color-text-light; + color: $o-we-color-text-light; } &:hover { - background-color: @o-we-tab-active-bg; + background-color: $o-we-tab-active-bg; color: white; > .fa { @@ -793,7 +808,7 @@ html[lang] > body.editor_enable [data-oe-translation-state] { padding: 4px; border-radius: 2px; border: 1px solid #989898; - border-color: fadeOut(@o-we-color-text-normal, 0.5); + border-color: fadeOut($o-we-color-text-normal, 0.5); } .note-color-palette .note-color-row { height: auto!important; @@ -808,7 +823,7 @@ html[lang] > body.editor_enable [data-oe-translation-state] { float: left; margin: 1px 1px 0 0; border-color: black; - .o_alpha_button_preview(); + @include o-alpha-button-preview; &.o_small { width: 16px; @@ -876,10 +891,10 @@ table.colorpicker { } } .colorpicker { - background-color: @o-we-color-dark!important; + background-color: $o-we-color-dark!important; .o_colorpicker_sections { - border: 1px solid darken(@o-we-color-dark, 12%); + border: 1px solid darken($o-we-color-dark, 12%); border-width: 1px 0 0; font-size: 14px; @@ -902,7 +917,7 @@ table.colorpicker { padding: 5px 10px!important; border-radius: 0; background-color: transparent; - color: darken(@o-we-color-text-light, 10%); + color: darken($o-we-color-text-light, 10%); > i.fa { font-size: 20px; } @@ -917,7 +932,7 @@ table.colorpicker { } } &.active > a { - background-color: @o-we-tab-active-bg!important; + background-color: $o-we-tab-active-bg!important; } } } @@ -927,7 +942,7 @@ table.colorpicker { margin-left: 50px; .tab-pane { padding: 5px 10px; - background-color: @o-we-tab-active-bg; + background-color: $o-we-tab-active-bg; } &.o_unique_palette { margin-left: 0; @@ -946,7 +961,7 @@ table.colorpicker { display: block; width: 100%; height: 30px; - border: 1px solid @o-we-color-dark; + border: 1px solid $o-we-color-dark; border-radius: 3px; margin: 0 0 5px; padding: 0 20px; @@ -954,15 +969,15 @@ table.colorpicker { font-size: 12px; font-weight: bold; text-align: left; - .o_alpha_button_preview(); + @include o-alpha-button-preview; &:hover, &.selected { - box-shadow: 0px 0px 2px 2px @o-we-color-light; + box-shadow: 0px 0px 2px 2px $o-we-color-light; } &:after { content: "A"; - .o-position-absolute(0, 0); + @include o-position-absolute(0, 0); width: 25px; text-align: center; font-size: 13px; @@ -972,13 +987,13 @@ table.colorpicker { &.selected:after { content: "\f00c"; font-family: "FontAwesome"; - color: @brand-success; + color: $brand-success; } &[data-event="foreColor"] { - background-color: @o-we-color-normal; + background-color: $o-we-color-normal; &:after { - background-color: fade(white, 30%); + background-color: rgba(white, 0.3); } } @@ -997,22 +1012,22 @@ table.colorpicker { } .note-palette-title { padding: 10px 0px 10px 10px; - color: @o-we-color-text-light; + color: $o-we-color-text-light; font-weight: bold; } .palette-reset { - .o-position-absolute(0, 0); + @include o-position-absolute(0, 0); margin: 0; padding: 5px 10px 0; .note-color-reset { font-size: 20px!important; - color: desaturate(fade(@o-we-color-danger, 60%), 40%); + color: desaturate(rgba($o-we-color-danger, 0.6), 40%); margin: 1px 0 0; padding: 0; cursor: pointer; &:hover { background: transparent!important; - color: @o-we-color-danger; + color: $o-we-color-danger; } } } @@ -1020,18 +1035,18 @@ table.colorpicker { // ENTER IN EDIT MODE body.editor_enable { - padding-top: @odoo-navbar-height!important; + padding-top: $odoo-navbar-height!important; #web_editor-top-edit { - background-color: @o-we-color-dark; + background-color: $o-we-color-dark; form.navbar-form { right: 0; } } &.editor_has_snippets { - .o-transition(padding-left, 400ms, @o-we-md-ease); - padding-left: @o-we-sidebar-width!important; + @include o-transition(padding-left, 400ms, $o-we-md-ease); + padding-left: $o-we-sidebar-width!important; #oe_snippets { left: 0; @@ -1040,7 +1055,7 @@ body.editor_enable { } #web_editor_inside_iframe { - background-color: @odoo-brand-secondary; + background-color: $odoo-brand-secondary; #wrapwrap { position: relative; @@ -1065,31 +1080,15 @@ body.editor_enable { } } -// Mixins for buttons with alpha bg-color -.o_alpha_button_preview () { - position: relative; - background-image: url('/web_editor/static/src/img/transparent.png'); - background-size: 10px auto; - z-index: 1; - - // Place an overlay that inherit the button's bg-color. - &::before { - content: ""; - .o-position-absolute(0, 0, 0, 0); - z-index: -1; - background-color: inherit; - } -} - // Animations @keyframes fadeInDownSmall { 0% { opacity: 0; - .translate(0, -5px); + @include translate(0, -5px); } 100% { opacity: 1; - .translate(0, 0); + @include translate(0, 0); } } @keyframes fadeInOut { @@ -1107,17 +1106,17 @@ body.editor_enable { } } @keyframes inputHighlighter { - from { background: @odoo-brand-optional; } + from { background: $odoo-brand-optional; } to { width: 0; background: transparent; } } // INPUTS -@o-switch-size: 2ex; -@o-switch-inactive-color: @gray-lighter; +$o-switch-size: 2ex; +$o-switch-inactive-color: $gray-lighter; .o_switch { - .o-flex-display(); - .o-align-items(center); + @include o-flex-display; + @include o-align-items(center); font-weight: normal; cursor: pointer; @@ -1125,35 +1124,35 @@ body.editor_enable { display: none; + span { - background-color: @o-switch-inactive-color; - box-shadow: inset 0 0 0px 1px darken(@o-switch-inactive-color,10%); + background-color: $o-switch-inactive-color; + box-shadow: inset 0 0 0px 1px darken($o-switch-inactive-color,10%); border-radius: 100rem; - height: @o-switch-size; - width: @o-switch-size * 1.8; + height: $o-switch-size; + width: $o-switch-size * 1.8; margin-right: 0.5em; display: inline-block; - .transition(all 0.3s @o-we-md-ease); + @include transition(all 0.3s $o-we-md-ease); &:after { content: ""; - background: @o-we-color-paper; + background: $o-we-color-paper; display: block; - width: @o-switch-size - 0.2; - height: @o-switch-size - 0.2; + width: $o-switch-size - 0.2; + height: $o-switch-size - 0.2; margin-top: 0.1ex; margin-left: 0.1ex; border-radius: 100rem; - .transition(all 0.3s @o-we-md-ease); - box-shadow: 0 1px 1px darken(@o-switch-inactive-color,35%), inset 0 0 0 1px lighten(@o-switch-inactive-color,10%); + @include transition(all 0.3s $o-we-md-ease); + box-shadow: 0 1px 1px darken($o-switch-inactive-color,35%), inset 0 0 0 1px lighten($o-switch-inactive-color,10%); } } &:checked + span { box-shadow: none; - .o-linear-gradient(0deg, @o-we-color-success, darken(@o-we-color-success, 10%)); + @include o-linear-gradient(0deg, $o-we-color-success, darken($o-we-color-success, 10%)); &:after { - margin-left: (@o-switch-size*1.8 - @o-switch-size) + 0.1; + margin-left: ($o-switch-size*1.8 - $o-switch-size) + 0.1; } } } @@ -1161,7 +1160,7 @@ body.editor_enable { > input { &:not(:checked) + span { box-shadow: none; - .o-linear-gradient(0deg, lighten(@brand-danger, 5%), darken(@brand-danger, 5%)); + @include o-linear-gradient(0deg, lighten($brand-danger, 5%), darken($brand-danger, 5%)); } } } @@ -1191,9 +1190,9 @@ body.editor_enable { color: #999; font-size: 18px; font-weight: normal; - .o-position-absolute(@top: 10px, @left: 5px); + @include o-position-absolute($top: 10px, $left: 5px); pointer-events: none; - .transition(0.2s ease all) + @include transition(0.2s ease all); } /* active state */ @@ -1210,9 +1209,9 @@ body.editor_enable { height: 2px; width: 0; bottom: 1px; - .o-position-absolute(); + @include o-position-absolute; background: #5264AE; - .transition(0.2s ease all); + @include transition(0.2s ease all); } .bar:before { left: 50%; @@ -1228,7 +1227,7 @@ body.editor_enable { /* HIGHLIGHTER ================================== */ .highlight { - .o-position-absolute(@top: 25%, @left: 0); + @include o-position-absolute($top: 25%, $left: 0); height: 60%; width: 100px; pointer-events: none; @@ -1237,94 +1236,94 @@ body.editor_enable { /* active state */ input:focus ~ .highlight { - .animation(inputHighlighter 0.3s ease); + @include animation(inputHighlighter 0.3s ease); } } // DRAG&DROP ANIMATIONS .oe_snippet_body { opacity: 0; - .o-animation(fadeInDownSmall, 700ms, @fill-mode: forwards); + @include o-animation(fadeInDownSmall, 700ms, $fill-mode: forwards); } // ACE EDITOR .o_ace_view_editor { - @o-ace-color: #2F3129; - background: @o-ace-color; + $o-ace-color: #2F3129; + background: $o-ace-color; color: white; - .o-flex-display(); - .o-flex-flow(column, nowrap); + @include o-flex-display; + @include o-flex-flow(column, nowrap); opacity: 0.97; .o_ace_view_editor_title { - .o-flex(0, 0, auto); - .o-flex-display(); - .o-align-items(center); - padding: @grid-gutter-width/4; + @include o-flex(0, 0, auto); + @include o-flex-display; + @include o-align-items(center); + padding: $grid-gutter-width/4; > .o_ace_type_switcher > button::after { - .o-caret-down(); + @include o-caret-down; margin-left: 4px; } > * { - .o-flex(0, 0, auto); - margin: 0 @grid-gutter-width/4; + @include o-flex(0, 0, auto); + margin: 0 $grid-gutter-width/4; &.o_include_option { - .o-flex-display(); - .o-align-items(center); + @include o-flex-display; + @include o-align-items(center); font-size: 11px; > .o_checkbox { - margin-right: @grid-gutter-width/4; + margin-right: $grid-gutter-width/4; } } &.o_res_list { - .o-flex(1, 1, auto); + @include o-flex(1, 1, auto); min-width: 60px; } } } #ace-view-id { - .o-flex(0, 0, auto); - padding: @grid-gutter-width/4 @grid-gutter-width/2; - background-color: lighten(@o-ace-color, 10%); + @include o-flex(0, 0, auto); + padding: $grid-gutter-width/4 $grid-gutter-width/2; + background-color: lighten($o-ace-color, 10%); } #ace-view-editor { + @mixin ace-line-error-mixin { + content: ""; + z-index: 1000; + display: block; + background-color: $brand-danger; + opacity: 0.5; + pointer-events: none; + } + height: 70%; // in case flex is not supported - .o-flex(1, 1, auto); + @include o-flex(1, 1, auto); .ace_gutter { cursor: ew-resize; .ace_gutter-cell.o_error { position: relative; &::after { - .o-position-absolute(-100%, 0, -100%, 0); - .ace-line-error-mixin(); + @include o-position-absolute(-100%, 0, -100%, 0); + @include ace-line-error-mixin; } } } .ace_resize_bar { - .o-position-absolute(@right: 0); + @include o-position-absolute($right: 0); width: 25px; height: 100%; cursor: ew-resize; } .ace_scroller.o_error::after { - .o-position-absolute(0, auto, 0, 0); + @include o-position-absolute(0, auto, 0, 0); width: 3px; - .ace-line-error-mixin(); - } - - .ace-line-error-mixin() { - content: ""; - z-index: 1000; - display: block; - background-color: @brand-danger; - opacity: 0.5; - pointer-events: none; + @include ace-line-error-mixin; } } } @@ -1372,24 +1371,24 @@ body .modal { padding-right: 30px; } > span { - .o-position-absolute(7px, 7px); + @include o-position-absolute(7px, 7px); font-size: 1.3em; } } } .well { - border-color: @gray-lighter; + border-color: $gray-lighter; border-top-width: 0; } .o_existing_attachment_cell { - @odoo-border-image: 2px; + $odoo-border-image: 2px; .o_existing_attachment_remove { - .o-position-absolute(@odoo-border-image, 15px + @odoo-border-image); + @include o-position-absolute($odoo-border-image, 15px + $odoo-border-image); padding: 3px 5px 5px 5px; - background-color: fade(white, 80%); + background-color: rgba(white, 0.8); text-shadow: 0 0 1px white; border-radius: 0 0 0 2px; opacity: 0; @@ -1397,13 +1396,13 @@ body .modal { &:hover { background-color: white; - color: @o-we-color-danger; + color: $o-we-color-danger; } } .o_image { - border: @odoo-border-image solid transparent; + border: $odoo-border-image solid transparent; cursor: pointer; - .o-transition(opacity, 400ms); + @include o-transition(opacity, 400ms); &.o_webimage { width: 100%; @@ -1416,8 +1415,8 @@ body .modal { } } &.o_selected .o_image { - border-color: @odoo-brand-primary; - box-shadow: 0px 0px 2px 2px @odoo-brand-secondary; + border-color: $odoo-brand-primary; + box-shadow: 0px 0px 2px 2px $odoo-brand-secondary; } &:hover .o_existing_attachment_remove { opacity: 1; @@ -1437,8 +1436,8 @@ body .modal { &.o_selected { cursor: auto; - background-color: @o-we-color-paper; - box-shadow: 0px 0px 0px 1px @o-we-color-success; + background-color: $o-we-color-paper; + box-shadow: 0px 0px 0px 1px $o-we-color-success; } } } @@ -1458,11 +1457,11 @@ body .modal { // VIDEO TAB #editor-media-video .well { padding: 0; - .o-flex-display(); - .o-flex-flow(row, wrap); + @include o-flex-display; + @include o-flex-flow(row, wrap); .o_video_dialog_form { - .o-flex(1, 1, auto); + @include o-flex(1, 1, auto); min-width: 0; padding: 20px; @@ -1478,7 +1477,7 @@ body .modal { } > .o_validate_feedback { - .o-position-absolute(auto, 10px, 10px); + @include o-position-absolute(auto, 10px, 10px); > .fa { display: none; @@ -1495,12 +1494,12 @@ body .modal { #video-preview { position: relative; - .o-flex(1, 0, 50%); - .o-flex-display(); - .o-flex-flow(column, nowrap); - .o-justify-content(center); + @include o-flex(1, 0, 50%); + @include o-flex-display; + @include o-flex-flow(column, nowrap); + @include o-justify-content(center); - .o-we-preview-box(0 19px); + @include o-we-preview-box(0 19px); border: none; .media_iframe_video { @@ -1508,12 +1507,12 @@ body .modal { } .o_video_dialog_iframe { - .o-we-preview-content(); + @include o-we-preview-content; max-width: 100%; max-height: 100%; &.alert { - .o-animation(fadeInDownSmall, 700ms, @fill-mode: forwards); + @include o-animation(fadeInDownSmall, 700ms, $fill-mode: forwards); margin: 0 auto; } } @@ -1527,7 +1526,7 @@ body .modal { margin: 15px 0; .help-control { - .o-position-absolute(15px, 15px); + @include o-position-absolute(15px, 15px); } .help { margin: 15px 0; @@ -1539,22 +1538,22 @@ body .modal { width: 120px; height: 100px; .bg { - .o-position-absolute(0, 0, 0, 0); + @include o-position-absolute(0, 0, 0, 0); border: 1px dotted #888787; background-image: url(/web/image); background-position: center center; - .o-background-size(cover); + @include o-background-size(cover); } .el { - .o-position-absolute(10px, 0, 10px, 0); + @include o-position-absolute(10px, 0, 10px, 0); border: 1px solid #222; } &.contain_bg { .bg { - .o-position-absolute(0, 12px, 20px, 12px); + @include o-position-absolute(0, 12px, 20px, 12px); } .el { - .o-position-absolute(0, 0, 20px, 0); + @include o-position-absolute(0, 0, 20px, 0); } } } @@ -1564,7 +1563,7 @@ body .modal { } .o_bg_img_opt_cover_edition { - .o-we-preview-box(); + @include o-we-preview-box; h6 { color: white; @@ -1574,7 +1573,7 @@ body .modal { position: relative; background: white; min-height: 10px; - .o-we-preview-content(); + @include o-we-preview-content; > img { cursor: crosshair; @@ -1586,8 +1585,8 @@ body .modal { } } .o_bg_img_opt_ui_info { - .animation(fadeInOut 2s ease forwards); - .o-position-absolute(@bottom: 1px, @right: 0); + @include animation(fadeInOut 2s ease forwards); + @include o-position-absolute($bottom: 1px, $right: 0); display: block; padding: 3px 13px; background-color: rgba(255, 255, 255, 0.8); @@ -1603,11 +1602,11 @@ body .modal { } } .grid { - .o-position-absolute(@top: 33.33%, @left: 0); + @include o-position-absolute($top: 33.33%, $left: 0); display: block; width: 100%; height: 1px; - background: fadeOut(lighten(@odoo-brand-optional, 30%), 50%); + background: fadeOut(lighten($odoo-brand-optional, 30%), 50%); pointer-events: none; &.grid-2 { top: 66.66% @@ -1626,7 +1625,7 @@ body .modal { } } .o_focus_point { - .o-position-absolute(@top: 0, @left: 0); + @include o-position-absolute($top: 0, $left: 0); width: 30px; height: 30px; border: 2px solid white; @@ -1636,7 +1635,7 @@ body .modal { box-shadow: 0 0 1px #333; pointer-events: none; &.o_with_transition { - .o-transition(all, 0.2s); + @include o-transition(all, 0.2s); } &:before { pointer-events: none; @@ -1651,7 +1650,7 @@ body .modal { border-radius: 100em; opacity: 1; box-shadow: 0 0 0 100em rgba(0, 0, 0, 0.33); - .o-transition(opacity, 0.2s); + @include o-transition(opacity, 0.2s); } } } @@ -1669,7 +1668,7 @@ body .modal { input:checked + i::before { content: "\f00c"; - .o-position-absolute(@top: 6px, @left: 5px); + @include o-position-absolute($top: 6px, $left: 5px); } &.btn-link { @@ -1681,7 +1680,7 @@ body .modal { } } .o_link_dialog_preview { - border-left: 1px solid @gray-lighter; + border-left: 1px solid $gray-lighter; } } } diff --git a/addons/web_editor/static/src/scss/web_editor.variables.scss b/addons/web_editor/static/src/scss/web_editor.variables.scss index 40f4625c9ad..08c67c9c7f6 100644 --- a/addons/web_editor/static/src/scss/web_editor.variables.scss +++ b/addons/web_editor/static/src/scss/web_editor.variables.scss @@ -2,41 +2,41 @@ /// This files regroups the variables and mixins which are specific to the editor. /// -@o-we-font-family: Roboto, 'Montserrat', "Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif; +$o-we-font-family: Roboto, 'Montserrat', "Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif; -@o-we-color-dark: #2c2c36; -@o-we-color-darker: darken(@o-we-color-dark, 2%); -@o-we-color-divider: #33363e; -@o-we-color-light: #4e525b; -@o-we-color-normal: #50545d; -@o-we-color-paper: #fcfcfc; -@o-we-color-text-normal: #999999; -@o-we-color-text-light: #d4d5d7; -@o-we-color-danger: #e6586c; -@o-we-color-warning: #f0ad4e; -@o-we-color-success: #40ad67; -@o-we-color-info: #6999a8; +$o-we-color-dark: #2c2c36; +$o-we-color-darker: darken($o-we-color-dark, 2%); +$o-we-color-divider: #33363e; +$o-we-color-light: #4e525b; +$o-we-color-normal: #50545d; +$o-we-color-paper: #fcfcfc; +$o-we-color-text-normal: #999999; +$o-we-color-text-light: #d4d5d7; +$o-we-color-danger: #e6586c; +$o-we-color-warning: #f0ad4e; +$o-we-color-success: #40ad67; +$o-we-color-info: #6999a8; -@o-we-sidebar-width: 210px; +$o-we-sidebar-width: 210px; -@o-we-tab-active-bg: #3D4048; +$o-we-tab-active-bg: #3D4048; // Transitions -@o-we-md-ease: cubic-bezier(0.19, 1, 0.22, 1); +$o-we-md-ease: cubic-bezier(0.19, 1, 0.22, 1); // ============ 'Preview' component Mixins =============== // Create a "preview" work-area to edit/customize specific elements -.o-we-preview-box(@padding: 0px 25px 25px 25px, @color-text: white) { - padding: @padding; +@mixin o-we-preview-box($padding: 0px 25px 25px 25px, $color-text: white) { + padding: $padding; border-top: 1px solid black; border-bottom: 1px solid white; - .o-linear-gradient(-150deg, @o-we-color-dark, @o-we-color-darker); + @include o-linear-gradient(-150deg, $o-we-color-dark, $o-we-color-darker); - color: @color-text; + color: $color-text; } -.o-we-preview-content() { +@mixin o-we-preview-content { display: inline-block; max-width: 100%; overflow: hidden; @@ -47,28 +47,28 @@ // ============ Preservetion mixins =============== // Used to preserve web_editor and website UI from themes customizations -.o-w-preserve-base() { - font-family: @o-we-font-family; +@mixin o-w-preserve-base { + font-family: $o-we-font-family; line-height: 1.42857143; - color: @o-we-color-divider; + color: $o-we-color-divider; .text-muted { - color: @o-we-color-text-normal; + color: $o-we-color-text-normal; } } -.o-w-preserve-headings() { +@mixin o-w-preserve-headings { h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { - font-family: @o-we-font-family; + font-family: $o-we-font-family; line-height: 1.42857143; - color: @o-we-color-dark; + color: $o-we-color-dark; font-weight: bold; } } -.o-w-preserve-links() { +@mixin o-w-preserve-links { a:not(.o_btn_preview) { - color: @odoo-brand-optional; + color: $odoo-brand-optional; &:focus, &:active, &:focus:active { outline: none!important; @@ -82,13 +82,13 @@ } } -.o-w-preserve-forms() { +@mixin o-w-preserve-forms { .form-control { height: 34px; padding: 6px 12px; font-size: 14px; line-height: 1.42857143; - border: 1px solid @o-we-color-text-light; + border: 1px solid $o-we-color-text-light; color: #555; background-color: #fff; border-radius: 0; @@ -96,24 +96,24 @@ .has-error { .form-control { - border-color: @state-danger-text; + border-color: $state-danger-text; } } select.form-control { - .o-appearance(none); + @include o-appearance(none); background: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPScxLjEnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZycgeG1 sbnM6eGxpbms9J2h0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsnIHdpZHRoPScyNCcgaGVpZ2 h0PScyNCcgdmlld0JveD0nMCAwIDI0IDI0Jz48cGF0aCBpZD0nc3ZnXzEnIGQ9J203LjQwNiw3L jgyOGw0LjU5NCw0LjU5NGw0LjU5NCwtNC41OTRsMC40MDYsMS40MDZsLTUsNC43NjZsLTUsLTQu NzY2bDAuNDA2LC0xLjQwNnonIGZpbGw9JyM4ODgnLz48L3N2Zz4='); background-position: 100% 65%; background-repeat: no-repeat; } } -.o-w-preserve-modals() { +@mixin o-w-preserve-modals { background: 0; .modal-content { border-radius: 0; - background-color: @o-we-color-paper; + background-color: $o-we-color-paper; .modal-body { background-color: white; @@ -124,24 +124,24 @@ } } -.o-w-preserve-tabs() { +@mixin o-w-preserve-tabs { .nav-tabs { - border-bottom: 1px solid @gray-lighter; + border-bottom: 1px solid $gray-lighter; > li { > a { line-height: 1.42857143; - color: @o-we-color-light; + color: $o-we-color-light; &:hover { - border-color: @gray-lighter; + border-color: $gray-lighter; } } &.active > a { &, &:hover, &:focus { - color: @o-we-color-normal; - background-color: @o-we-color-paper; - border-color: @gray-lighter; + color: $o-we-color-normal; + background-color: $o-we-color-paper; + border-color: $gray-lighter; border-bottom-color: transparent; } } @@ -149,54 +149,54 @@ } } -.o-w-preserve-btn() { +@mixin o-w-preserve-btn { .btn:not(.o_btn_preview) { border-width: 1px; border-radius: 0; font-weight: normal; - .button-size(6px; 12px; 14px; 1.42857143; 0); + @include button-size(6px, 12px, 14px, 1.42857143, 0); &.btn-primary { - .button-variant(white, @odoo-brand-optional, darken(@odoo-brand-optional,5%)); + @include button-variant(white, $odoo-brand-optional, darken($odoo-brand-optional,5%)); } &.btn-default { - .button-variant(@o-we-color-normal, white, @o-we-color-text-light); + @include button-variant($o-we-color-normal, white, $o-we-color-text-light); } &.btn-link { - .button-variant(@odoo-brand-optional, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)); + @include button-variant($odoo-brand-optional, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)); } &.btn-success { - .button-variant(white; @o-we-color-success; darken(@o-we-color-success, 5%)); + @include button-variant(white, $o-we-color-success, darken($o-we-color-success, 5%)); } &.btn-info { - .button-variant(white; @o-we-color-info; darken(@o-we-color-info, 5%)); + @include button-variant(white, $o-we-color-info, darken($o-we-color-info, 5%)); } &.btn-warning { - .button-variant(white; @o-we-color-warning; darken(@o-we-color-warning, 5%)); + @include button-variant(white, $o-we-color-warning, darken($o-we-color-warning, 5%)); } &.btn-danger { - .button-variant(white; @o-we-color-danger; darken(@o-we-color-danger, 5%)); + @include button-variant(white, $o-we-color-danger, darken($o-we-color-danger, 5%)); } &.btn-lg { - .button-size(10px; 16px; 18px; 1.3333333; 0); + @include button-size(10px, 16px, 18px, 1.3333333, 0); } &.btn-sm { - .button-size(5px; 10px; 12px; 1.5; 0); + @include button-size(5px, 10px, 12px, 1.5, 0); } &.btn-xs { - .button-size(1px; 5px; 12px; 1.5; 0); + @include button-size(1px, 5px, 12px, 1.5, 0); } } } -.o-w-preserve-wells() { +@mixin o-w-preserve-wells { .well { padding: 19px; margin-bottom: 20px; - background-color: @o-we-color-paper; - border: 1px solid darken(@o-we-color-paper,5%); + background-color: $o-we-color-paper; + border: 1px solid darken($o-we-color-paper,5%); border-radius: 0; - .box-shadow(none); + @include box-shadow(none); } } diff --git a/addons/web_settings_dashboard/static/src/scss/dashboard.scss b/addons/web_settings_dashboard/static/src/scss/dashboard.scss index 06e19f02095..3b3ea30d02a 100644 --- a/addons/web_settings_dashboard/static/src/scss/dashboard.scss +++ b/addons/web_settings_dashboard/static/src/scss/dashboard.scss @@ -1,10 +1,10 @@ .o_web_settings_dashboard { - @bg-dashboard-col: #FFF; + $bg-dashboard-col: #FFF; - .o_web_settings_dashboard_card() { + @mixin o-web-settings-dashboard-card { box-shadow: 0 1px 2px 0 rgba(0,0,0,.14); - background: @bg-dashboard-col; + background: $bg-dashboard-col; border-radius: 2px; } @@ -18,7 +18,7 @@ .o_web_settings_dashboard_col { padding: 10px 8px; - @media (max-width: @screen-sm-max) { + @media (max-width: $screen-sm-max) { padding: 5px 8px; } @@ -28,7 +28,7 @@ } > div { - .o_web_settings_dashboard_card(); + @include o-web-settings-dashboard-card; padding: 25px 18px 18px 18px; .o_web_settings_dashboard_header { font-size: 22px; @@ -72,7 +72,7 @@ .o_web_settings_dashboard_planner { .progress { height: 10px; - background-color: darken(@bg-dashboard-col, 15%); + background-color: darken($bg-dashboard-col, 15%); cursor: pointer; margin-bottom: 30px; } @@ -87,7 +87,7 @@ .o_web_settings_dashboard_progress_title { font-weight: bold; cursor: pointer; - color: @odoo-brand-optional; + color: $odoo-brand-optional; } } } diff --git a/addons/web_tour/static/src/scss/keyframes.scss b/addons/web_tour/static/src/scss/keyframes.scss index 08402f4b2ea..71b390211f0 100644 --- a/addons/web_tour/static/src/scss/keyframes.scss +++ b/addons/web_tour/static/src/scss/keyframes.scss @@ -1,49 +1,49 @@ @-webkit-keyframes move-left-right { 0% { - .translate(-3px, 0); + @include translate(-3px, 0); } 100% { - .translate(3px, 0); + @include translate(3px, 0); } } @-moz-keyframes move-left-right { 0% { - .translate(-3px, 0); + @include translate(-3px, 0); } 100% { - .translate(3px, 0); + @include translate(3px, 0); } } @keyframes move-left-right { 0% { - .translate(-3px, 0); + @include translate(-3px, 0); } 100% { - .translate(3px, 0); + @include translate(3px, 0); } } @-webkit-keyframes move-bottom-top { 0% { - .translate(0, -3px); + @include translate(0, -3px); } 100% { - .translate(0, 3px); + @include translate(0, 3px); } } @-moz-keyframes move-bottom-top { 0% { - .translate(0px, -3px); + @include translate(0px, -3px); } 100% { - .translate(0, 3px); + @include translate(0, 3px); } } @keyframes move-bottom-top { 0% { - .translate(0px, -3px); + @include translate(0px, -3px); } 100% { - .translate(0, 3px); + @include translate(0, 3px); } } diff --git a/addons/web_tour/static/src/scss/tip.scss b/addons/web_tour/static/src/scss/tip.scss index bff1d27ff82..f09ed1852ce 100644 --- a/addons/web_tour/static/src/scss/tip.scss +++ b/addons/web_tour/static/src/scss/tip.scss @@ -26,110 +26,110 @@ } .o_tooltip { - @o-tip-color: @odoo-brand-primary; - @o-tip-size: 24px; - @o-tip-border-width: 2px; - @o-tip-arrow-length: 10px; - @o-tip-arrow-width: 20px; - @o-tip-arrow-integration: 2px; + $o-tip-color: $odoo-brand-primary; + $o-tip-size: 24px; + $o-tip-border-width: 2px; + $o-tip-arrow-length: 10px; + $o-tip-arrow-width: 20px; + $o-tip-arrow-integration: 2px; - @o-tip-duration-in: 300ms; - @o-tip-size-duration-in: floor(@o-tip-duration-in * 3 / 4); - @o-tip-size-delay-in: floor(@o-tip-duration-in / 4); - @o-tip-border-radius-duration-in: floor(@o-tip-duration-in / 2); - @o-tip-border-radius-delay-in: floor(@o-tip-duration-in * 0); - @o-tip-bg-color-duration-in: floor(@o-tip-duration-in * 1); - @o-tip-bg-color-delay-in: floor(@o-tip-duration-in * 0); - @o-tip-arrow-duration-in: floor(@o-tip-duration-in / 2); - @o-tip-arrow-delay-in: floor(@o-tip-duration-in * 0); - @o-tip-white-arrow-duration-in: floor(@o-tip-duration-in * 1); - @o-tip-white-arrow-delay-in: floor(@o-tip-duration-in * 0); + $o-tip-duration-in: 300ms; + $o-tip-size-duration-in: floor($o-tip-duration-in * 3 / 4); + $o-tip-size-delay-in: floor($o-tip-duration-in / 4); + $o-tip-border-radius-duration-in: floor($o-tip-duration-in / 2); + $o-tip-border-radius-delay-in: floor($o-tip-duration-in * 0); + $o-tip-bg-color-duration-in: floor($o-tip-duration-in * 1); + $o-tip-bg-color-delay-in: floor($o-tip-duration-in * 0); + $o-tip-arrow-duration-in: floor($o-tip-duration-in / 2); + $o-tip-arrow-delay-in: floor($o-tip-duration-in * 0); + $o-tip-white-arrow-duration-in: floor($o-tip-duration-in * 1); + $o-tip-white-arrow-delay-in: floor($o-tip-duration-in * 0); - @o-tip-duration-out: 200ms; - @o-tip-size-duration-out: floor(@o-tip-duration-out * 2 / 3); - @o-tip-size-delay-out: floor(@o-tip-duration-out * 0); - @o-tip-border-radius-duration-out: floor(@o-tip-duration-out * 2 / 3); - @o-tip-border-radius-delay-out: floor(@o-tip-duration-out / 3); - @o-tip-arrow-duration-out: floor(@o-tip-duration-out / 2); - @o-tip-arrow-delay-out: floor(@o-tip-duration-out / 2); + $o-tip-duration-out: 200ms; + $o-tip-size-duration-out: floor($o-tip-duration-out * 2 / 3); + $o-tip-size-delay-out: floor($o-tip-duration-out * 0); + $o-tip-border-radius-duration-out: floor($o-tip-duration-out * 2 / 3); + $o-tip-border-radius-delay-out: floor($o-tip-duration-out / 3); + $o-tip-arrow-duration-out: floor($o-tip-duration-out / 2); + $o-tip-arrow-delay-out: floor($o-tip-duration-out / 2); box-sizing: content-box; - .o-position-absolute(@top: 50%, @left: 50%); + @include o-position-absolute($top: 50%, $left: 50%); opacity: 0; - width: @o-tip-size; - height: @o-tip-size; - border: @o-tip-border-width solid @o-tip-color; + width: $o-tip-size; + height: $o-tip-size; + border: $o-tip-border-width solid $o-tip-color; border-radius: 50%; padding: 0; // ! Cannot be changed ! Javascript rely on this. - z-index: @zindex-modal + 1; // See comment on 'o_tooltip_parent' class - background-color: @o-tip-color; + z-index: $zindex-modal + 1; // See comment on 'o_tooltip_parent' class + background-color: $o-tip-color; box-shadow: 0 2px 2px 1px rgba(150, 150, 150, 0.3); transition: - width @o-tip-size-duration-out ease @o-tip-size-delay-out, - height @o-tip-size-duration-out ease @o-tip-size-delay-out, - margin @o-tip-size-duration-out ease @o-tip-size-delay-out, - border-radius @o-tip-border-radius-duration-out ease @o-tip-border-radius-delay-out; + width $o-tip-size-duration-out ease $o-tip-size-delay-out, + height $o-tip-size-duration-out ease $o-tip-size-delay-out, + margin $o-tip-size-duration-out ease $o-tip-size-delay-out, + border-radius $o-tip-border-radius-duration-out ease $o-tip-border-radius-delay-out; &.o_animated { - .o-animation(move-bottom-top, 500ms, ease-in, 0ms, infinite, alternate); + @include o-animation(move-bottom-top, 500ms, ease-in, 0ms, infinite, alternate); &.right, &.left { - .animation-name(move-left-right); + @include animation-name(move-left-right); } } &::before { content: ""; border: 0 solid rgba(0, 0, 0, 0); - transition: all @o-tip-arrow-duration-out ease @o-tip-arrow-delay-out; + transition: all $o-tip-arrow-duration-out ease $o-tip-arrow-delay-out; } &.right::before { - .o-position-absolute(@left: -@o-tip-arrow-length+@o-tip-arrow-integration, @top: (@o-tip-size - @o-tip-arrow-width) / 2); - border-width: @o-tip-arrow-width/2 @o-tip-arrow-length @o-tip-arrow-width/2 0; - border-right-color: @o-tip-color; + @include o-position-absolute($left: -$o-tip-arrow-length+$o-tip-arrow-integration, $top: ($o-tip-size - $o-tip-arrow-width) / 2); + border-width: $o-tip-arrow-width/2 $o-tip-arrow-length $o-tip-arrow-width/2 0; + border-right-color: $o-tip-color; } &.top::before { - .o-position-absolute(@bottom: -@o-tip-arrow-length+@o-tip-arrow-integration, @left: (@o-tip-size - @o-tip-arrow-width) / 2); - border-width: @o-tip-arrow-length @o-tip-arrow-width/2 0 @o-tip-arrow-width/2; - border-top-color: @o-tip-color; + @include o-position-absolute($bottom: -$o-tip-arrow-length+$o-tip-arrow-integration, $left: ($o-tip-size - $o-tip-arrow-width) / 2); + border-width: $o-tip-arrow-length $o-tip-arrow-width/2 0 $o-tip-arrow-width/2; + border-top-color: $o-tip-color; } &.left::before { - .o-position-absolute(@right: -@o-tip-arrow-length+@o-tip-arrow-integration, @top: (@o-tip-size - @o-tip-arrow-width) / 2); - border-width: @o-tip-arrow-width/2 0 @o-tip-arrow-width/2 @o-tip-arrow-length; - border-left-color: @o-tip-color; + @include o-position-absolute($right: -$o-tip-arrow-length+$o-tip-arrow-integration, $top: ($o-tip-size - $o-tip-arrow-width) / 2); + border-width: $o-tip-arrow-width/2 0 $o-tip-arrow-width/2 $o-tip-arrow-length; + border-left-color: $o-tip-color; } &.bottom::before { - .o-position-absolute(@top: -@o-tip-arrow-length+@o-tip-arrow-integration, @left: (@o-tip-size - @o-tip-arrow-width) / 2); - border-width: 0 @o-tip-arrow-width/2 @o-tip-arrow-length @o-tip-arrow-width/2; - border-bottom-color: @o-tip-color; + @include o-position-absolute($top: -$o-tip-arrow-length+$o-tip-arrow-integration, $left: ($o-tip-size - $o-tip-arrow-width) / 2); + border-width: 0 $o-tip-arrow-width/2 $o-tip-arrow-length $o-tip-arrow-width/2; + border-bottom-color: $o-tip-color; } &::after { content: ""; - .o-position-absolute(-@o-tip-border-width, -@o-tip-border-width, -@o-tip-border-width, -@o-tip-border-width); - border-color: @o-tip-color; + @include o-position-absolute(-$o-tip-border-width, -$o-tip-border-width, -$o-tip-border-width, -$o-tip-border-width); + border-color: $o-tip-color; border-radius: 50%; - transition: margin @o-tip-size-duration-out ease @o-tip-size-delay-out, border-radius @o-tip-duration-out linear 0s; - background: radial-gradient(lighten(@o-tip-color, 7%), @o-tip-color); + transition: margin $o-tip-size-duration-out ease $o-tip-size-delay-out, border-radius $o-tip-duration-out linear 0s; + background: radial-gradient(lighten($o-tip-color, 7%), $o-tip-color); } > .o_tooltip_overlay { display: none; - .o-position-absolute(0, 0, 0, 0); - margin: -@o-tip-border-width; + @include o-position-absolute(0, 0, 0, 0); + margin: -$o-tip-border-width; z-index: -1; } > .o_tooltip_content { overflow: hidden; - padding: floor(@o-tip-size/4) floor(@o-tip-size/2); + padding: floor($o-tip-size/4) floor($o-tip-size/2); visibility: hidden; transition: visibility 0s ease 0s; color: black; // Force style so that it does not depend on where the tooltip is attached - line-height: @line-height-base; - font-size: @font-size-base; - font-family: @font-family-sans-serif; + line-height: $line-height-base; + font-size: $font-size-base; + font-family: $font-family-sans-serif; font-weight: normal; .o_skip_tour { @@ -151,14 +151,14 @@ background-color: white; transition: - width @o-tip-size-duration-in ease @o-tip-size-delay-in, - height @o-tip-size-duration-in ease @o-tip-size-delay-in, - margin @o-tip-size-duration-in ease @o-tip-size-delay-in, - border-radius @o-tip-border-radius-duration-in ease @o-tip-border-radius-delay-in, - background-color @o-tip-bg-color-duration-in ease @o-tip-bg-color-delay-in; + width $o-tip-size-duration-in ease $o-tip-size-delay-in, + height $o-tip-size-duration-in ease $o-tip-size-delay-in, + margin $o-tip-size-duration-in ease $o-tip-size-delay-in, + border-radius $o-tip-border-radius-duration-in ease $o-tip-border-radius-delay-in, + background-color $o-tip-bg-color-duration-in ease $o-tip-bg-color-delay-in; &::before { - transition: all @o-tip-arrow-duration-in ease @o-tip-arrow-delay-in; + transition: all $o-tip-arrow-duration-in ease $o-tip-arrow-delay-in; } &::after { border: 0 solid rgba(0, 0, 0, 0); @@ -170,55 +170,55 @@ } > .o_tooltip_content { visibility: visible; - transition: visibility 0s ease @o-tip-duration-in; + transition: visibility 0s ease $o-tip-duration-in; } &.right { &::before { - left: -@o-tip-arrow-length; - border-right-color: @o-tip-color; + left: -$o-tip-arrow-length; + border-right-color: $o-tip-color; } &::after { - .o-position-absolute(@left: -@o-tip-arrow-length+@o-tip-border-width*2, @top: (@o-tip-size - @o-tip-arrow-width) / 2); - border-width: @o-tip-arrow-width/2 @o-tip-arrow-length @o-tip-arrow-width/2 0; + @include o-position-absolute($left: -$o-tip-arrow-length+$o-tip-border-width*2, $top: ($o-tip-size - $o-tip-arrow-width) / 2); + border-width: $o-tip-arrow-width/2 $o-tip-arrow-length $o-tip-arrow-width/2 0; border-right-color: white; - transition: border-right-color @o-tip-white-arrow-duration-in ease @o-tip-white-arrow-delay-in; + transition: border-right-color $o-tip-white-arrow-duration-in ease $o-tip-white-arrow-delay-in; } } &.top { &::before { - bottom: -@o-tip-arrow-length; - border-top-color: @o-tip-color; + bottom: -$o-tip-arrow-length; + border-top-color: $o-tip-color; } &::after { - .o-position-absolute(@bottom: -@o-tip-arrow-length+@o-tip-border-width*2, @left: (@o-tip-size - @o-tip-arrow-width) / 2); - border-width: @o-tip-arrow-length @o-tip-arrow-width/2 0 @o-tip-arrow-width/2; + @include o-position-absolute($bottom: -$o-tip-arrow-length+$o-tip-border-width*2, $left: ($o-tip-size - $o-tip-arrow-width) / 2); + border-width: $o-tip-arrow-length $o-tip-arrow-width/2 0 $o-tip-arrow-width/2; border-top-color: white; - transition: border-top-color @o-tip-white-arrow-duration-in ease @o-tip-white-arrow-delay-in; + transition: border-top-color $o-tip-white-arrow-duration-in ease $o-tip-white-arrow-delay-in; } } &.left { &::before { - right: -@o-tip-arrow-length; - border-left-color: @o-tip-color; + right: -$o-tip-arrow-length; + border-left-color: $o-tip-color; } &::after { - .o-position-absolute(@right: -@o-tip-arrow-length+@o-tip-border-width*2, @top: (@o-tip-size - @o-tip-arrow-width) / 2); - border-width: @o-tip-arrow-width/2 0 @o-tip-arrow-width/2 @o-tip-arrow-length; + @include o-position-absolute($right: -$o-tip-arrow-length+$o-tip-border-width*2, $top: ($o-tip-size - $o-tip-arrow-width) / 2); + border-width: $o-tip-arrow-width/2 0 $o-tip-arrow-width/2 $o-tip-arrow-length; border-left-color: white; - transition: border-left-color @o-tip-white-arrow-duration-in ease @o-tip-white-arrow-delay-in; + transition: border-left-color $o-tip-white-arrow-duration-in ease $o-tip-white-arrow-delay-in; } } &.bottom { &::before { - top: -@o-tip-arrow-length; - border-bottom-color: @o-tip-color; + top: -$o-tip-arrow-length; + border-bottom-color: $o-tip-color; } &::after { - .o-position-absolute(@top: -@o-tip-arrow-length+@o-tip-border-width*2, @left: (@o-tip-size - @o-tip-arrow-width) / 2); - border-width: 0 @o-tip-arrow-width/2 @o-tip-arrow-length @o-tip-arrow-width/2; + @include o-position-absolute($top: -$o-tip-arrow-length+$o-tip-border-width*2, $left: ($o-tip-size - $o-tip-arrow-width) / 2); + border-width: 0 $o-tip-arrow-width/2 $o-tip-arrow-length $o-tip-arrow-width/2; border-bottom-color: white; - transition: border-bottom-color @o-tip-white-arrow-duration-in ease @o-tip-white-arrow-delay-in; + transition: border-bottom-color $o-tip-white-arrow-duration-in ease $o-tip-white-arrow-delay-in; } } } @@ -227,13 +227,13 @@ &.left, &.right { &::before, &.active::after { top: auto; - bottom: (@o-tip-size - @o-tip-arrow-width) / 2; + bottom: ($o-tip-size - $o-tip-arrow-width) / 2; } } &.top, &.bottom { &::before, &.active::after { left: auto; - right: (@o-tip-size - @o-tip-arrow-width) / 2; + right: ($o-tip-size - $o-tip-arrow-width) / 2; } } } diff --git a/addons/website/static/src/scss/website.backend.scss b/addons/website/static/src/scss/website.backend.scss index 2021761aa1c..254e90f3957 100644 --- a/addons/website/static/src/scss/website.backend.scss +++ b/addons/website/static/src/scss/website.backend.scss @@ -4,18 +4,18 @@ .o_website_dashboard { background-color: #ececec; div.o_box { - .clearfix(); - color: @odoo-main-color-muted; - background-color: @odoo-view-background-color; + @include clearfix; + color: $odoo-main-color-muted; + background-color: $odoo-view-background-color; background-size: cover; - margin-top: @odoo-horizontal-padding; + margin-top: $odoo-horizontal-padding; position: static; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3); h2, h4 { text-transform: uppercase; margin-top: 0; - color: @odoo-brand-primary; + color: $odoo-brand-primary; } h4 { margin: 0 0 0 8px; } @@ -46,7 +46,7 @@ th { text-transform: uppercase; - color: @odoo-main-text-color; + color: $odoo-main-text-color; border-top-width: 0px; } td, th { @@ -67,7 +67,7 @@ /*------------------------------------------*/ .gapi-analytics-data-chart svg g path, svg [class*="nv-series-"] { - stroke: @odoo-main-color-muted !important; + stroke: $odoo-main-color-muted !important; } svg { @@ -75,7 +75,7 @@ float: left; g.nvd3.nv-wrap.nv-lineChart { - .translate(45; 30) !important; + @include translate(45, 30); // FIXME was marked important before scss convertion } g.nv-x.nv-axis .tick > line { @@ -86,19 +86,19 @@ .nv-series-0 { stroke-width: 3 !important; .nv-point { - stroke: @odoo-brand-optional; + stroke: $odoo-brand-optional; stroke-opacity: 1 !important; &.hover { - stroke: darken(@odoo-brand-optional, 10%); + stroke: darken($odoo-brand-optional, 10%); } } } .nv-series-1 { .nv-point { - stroke: @odoo-main-color-muted !important; + stroke: $odoo-main-color-muted !important; stroke-opacity: 1 !important; &.hover { - stroke: darken(@odoo-main-color-muted, 10%); + stroke: darken($odoo-main-color-muted, 10%); } } } @@ -107,17 +107,17 @@ .nvtooltip { border-radius: 0; - border: 1px solid @gray-lighter; + border: 1px solid $gray-lighter; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3); .legend-color-guide > div { border: none; } tr:first-child .legend-color-guide > div { - background-color: @odoo-brand-optional !important; + background-color: $odoo-brand-optional !important; } tr:last-child .legend-color-guide > div { - background-color: darken(@odoo-brand-lightsecondary, 10%) !important; + background-color: darken($odoo-brand-lightsecondary, 10%) !important; } } } @@ -129,11 +129,11 @@ flex-flow: row wrap; justify-content: flex-start; > .o_inner_box { - @media (max-width: @screen-sm-min) { + @media (max-width: $screen-sm-min) { flex: 1 1 200px; display: block !important; } - @media (min-width: @screen-sm-min) { + @media (min-width: $screen-sm-min) { flex: 0 0 16.6%; } } @@ -141,22 +141,22 @@ .o_inner_box { padding-top: 10px; text-align: center; - border: 1px solid @odoo-view-background-color; + border: 1px solid $odoo-view-background-color; height: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; color: white; - background-color: @odoo-brand-optional; + background-color: $odoo-brand-optional; &:hover { - background-color: darken(@odoo-brand-optional, 10%); + background-color: darken($odoo-brand-optional, 10%); } &.o_primary { - background-color: @odoo-brand-primary; + background-color: $odoo-brand-primary; color: white; &:hover { - background-color: darken(@odoo-brand-primary, 10%); + background-color: darken($odoo-brand-primary, 10%); } } .o_highlight { @@ -167,10 +167,10 @@ .o_graph_sales { .o_legend0 { - background-color: @odoo-brand-optional; + background-color: $odoo-brand-optional; } .o_legend1 { - background-color: @odoo-main-color-muted; + background-color: $odoo-main-color-muted; } } @@ -209,8 +209,8 @@ .o_properties_selection { - @media (min-width: @screen-md-min) { - .o-flex-display(); + @media (min-width: $screen-md-min) { + @include o-flex-display; } margin-top: 10px; @@ -226,7 +226,7 @@ float: right; top: -60px; right: 10px; - border: 1px solid @gray-lighter; + border: 1px solid $gray-lighter; font-weight: 300; white-space: nowrap; padding: .5em 1.5em; @@ -249,24 +249,24 @@ @keyframes increase { 10% { - background-color: lighten(@odoo-brand-optional, 30%); - border-color: @odoo-brand-optional; - color: @odoo-brand-optional; + background-color: lighten($odoo-brand-optional, 30%); + border-color: $odoo-brand-optional; + color: $odoo-brand-optional; } } @keyframes decrease { 10% { - background-color: lighten(@odoo-brand-optional, 30%); - border-color: @odoo-brand-optional; - color: @odoo-brand-optional; + background-color: lighten($odoo-brand-optional, 30%); + border-color: $odoo-brand-optional; + color: $odoo-brand-optional; } } } tr.o_product_template { cursor: pointer; - color: @odoo-main-text-color; + color: $odoo-main-text-color; } .o_loader { diff --git a/addons/website/static/src/scss/website.edit_mode.scss b/addons/website/static/src/scss/website.edit_mode.scss index ab88c5ee422..2bc24d4b69d 100644 --- a/addons/website/static/src/scss/website.edit_mode.scss +++ b/addons/website/static/src/scss/website.edit_mode.scss @@ -2,14 +2,14 @@ .o_homepage_editor_welcome_message { padding-top: 128px; padding-bottom: 128px; - font-family: Roboto, @font-family-sans-serif; + font-family: Roboto, $font-family-sans-serif; .o_tooltip_container { - .o-inline-flex-display(); - .o-align-items(center); + @include o-inline-flex-display; + @include o-align-items(center); > .o_tooltip { - .o-position-absolute(); + @include o-position-absolute; position: relative; display: inline-block; margin: 0 8px; @@ -22,7 +22,7 @@ .o_editable { &:not(:empty), &[data-oe-type] { &:not([data-oe-model="ir.ui.view"]):not([data-oe-type="html"]):hover { - box-shadow: @odoo-brand-primary 0 0 5px 2px inset; + box-shadow: $odoo-brand-primary 0 0 5px 2px inset; } } &:focus, &[data-oe-type] { @@ -33,7 +33,7 @@ display: inline-block; } .btn, &.btn { - .user-select(auto); + @include user-select(auto); cursor: text!important; } /* Summernote not Support for placeholder text https://github.com/summernote/summernote/issues/581 */ @@ -44,14 +44,14 @@ &.oe_structure.oe_empty, &[data-oe-type=html] { &:empty { - border: 2px dashed @gray-lighter-darker; + border: 2px dashed $gray-lighter-darker; margin: 20px; padding: 112px 0px; text-align: center; &:before { content: attr(data-editor-message); font-size: 20px; - color: @gray-lighter-darker; + color: $gray-lighter-darker; } } > p:empty:only-child { @@ -65,7 +65,7 @@ /* Prevent the text contents of draggable elements from being selectable. */ [draggable] { - .user-select(none); + @include user-select(none); } .oe_editable:focus, diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss index 4fdbb8db726..ee2fb57228f 100644 --- a/addons/website/static/src/scss/website.scss +++ b/addons/website/static/src/scss/website.scss @@ -66,10 +66,10 @@ font[style*='background'], font[class*='bg-'] { } // "Cover" snippet -@s_text_block_image_fw-padding: 0 30px; +$s-text-block-image-fw-padding: 0 30px; .s_text_block_image_fw { .container { - padding: @s_text_block_image_fw-padding; + padding: $s-text-block-image-fw-padding; > .row > div { padding: 30px; } @@ -120,7 +120,7 @@ table.table_desc tr td { color: inherit; } .text-muted { - color: @text-muted; + color: $text-muted; } } @@ -129,8 +129,8 @@ table.table_desc tr td { border : 1px solid rgba(0, 0, 0, 0.15); .panel-body { border-top: none; - border-bottom-left-radius: (@panel-border-radius - 1); - border-bottom-right-radius: (@panel-border-radius - 1); + border-bottom-left-radius: ($panel-border-radius - 1); + border-bottom-right-radius: ($panel-border-radius - 1); } } @@ -224,7 +224,7 @@ table.table_desc tr td { } div.carousel .container { > .carousel-caption { - .o-position-absolute(@right: 50%, @left: 50%); + @include o-position-absolute($right: 50%, $left: 50%); bottom: 20px; > div { position: absolute; @@ -235,7 +235,7 @@ div.carousel .container { } } > .carousel-image { - .o-position-absolute(@top: 5%, @bottom: 5%); + @include o-position-absolute($top: 5%, $bottom: 5%); max-height: 90%; margin: 0 auto; } @@ -453,7 +453,7 @@ div.carousel { .carousel-indicators li { box-shadow: 0 0 0 1px grey; &:hover:not(.active) { - background-color: @color-white-50; + background-color: $color-white-50; } } span.carousel-img img, @@ -481,7 +481,7 @@ div.carousel { } > .s_parallax_bg { - .o-position-absolute(0, 0, 0, 0); + @include o-position-absolute(0, 0, 0, 0); background-size: cover; background-attachment: scroll; pointer-events: none; @@ -493,7 +493,7 @@ div.carousel { // Company Team .s_company_team { - @media (max-width: @screen-sm-max) { + @media (max-width: $screen-sm-max) { img { max-width: 50%; } @@ -501,30 +501,30 @@ div.carousel { } #wrapwrap .o_header_affix { - .o-position-absolute(0, 0, auto, 0); + @include o-position-absolute(0, 0, auto, 0); position: fixed; - z-index: @zindex-modal - 20; - background: @navbar-default-bg; - border-bottom: @navbar-default-border; + z-index: $zindex-modal - 20; + background: $navbar-default-bg; + border-bottom: $navbar-default-border; margin-top: -200px; - .o-transition(margin-top, 500ms); + @include o-transition(margin-top, 500ms); &.affixed { margin-top: 0px; } } #oe_main_menu_navbar + #wrapwrap .o_header_affix { - top: @odoo-navbar-height; + top: $odoo-navbar-height; } .navbar .o_extra_menu_items.open > ul { > li { + li { - border-top: 1px solid @gray-lighter; + border-top: 1px solid $gray-lighter; } > a.dropdown-toggle { - background-color: @gray-lighter; + background-color: $gray-lighter; color: inherit; // Useful when the toggle is active pointer-events: none; // hack to prevent clicking on it because dropdown always opened } diff --git a/addons/website/static/src/scss/website.ui.scss b/addons/website/static/src/scss/website.ui.scss index 2e4195fda47..5ad2f5ba40f 100644 --- a/addons/website/static/src/scss/website.ui.scss +++ b/addons/website/static/src/scss/website.ui.scss @@ -5,17 +5,17 @@ // LAYOUTING body.o_connected_user { - padding-top: @odoo-navbar-height!important; + padding-top: $odoo-navbar-height!important; } -// MAIN MENU STYLE (added above navbar.less) +// MAIN MENU STYLE (added above navbar.scss) #oe_main_menu_navbar { - .o-position-absolute(0, 0, auto, 0); + @include o-position-absolute(0, 0, auto, 0); position: fixed; - z-index: @zindex-modal - 10; + z-index: $zindex-modal - 10; - font-family: @o-we-font-family; - font-size: @odoo-font-size-base; + font-family: $o-we-font-family; + font-size: $odoo-font-size-base; a:hover, a:focus { text-decoration: none; } @@ -27,7 +27,7 @@ body.o_connected_user { .o_menu_sections { a { > .fa-plus, > .fa-pencil { - margin-right: @grid-gutter-width/4; + margin-right: $grid-gutter-width/4; } } @@ -38,18 +38,18 @@ body.o_connected_user { } .o_menu_systray { a { - padding: 0 @grid-gutter-width/2; + padding: 0 $grid-gutter-width/2; &.css_edit_dynamic{ - padding: 0 @grid-gutter-width/4; + padding: 0 $grid-gutter-width/4; } &[data-action="edit"], &[data-action="translate"], &.css_edit_dynamic { - .button-variant(white, @odoo-brand-optional, @odoo-brand-optional); + @include button-variant(white, $odoo-brand-optional, $odoo-brand-optional); } > .fa-plus, > .fa-pencil { - margin-right: @grid-gutter-width/4; + margin-right: $grid-gutter-width/4; } } @@ -58,7 +58,7 @@ body.o_connected_user { font-size: 20px; } } - @media only screen and (max-width: @screen-xs-max) { + @media only screen and (max-width: $screen-xs-max) { #oe_applications { position: inherit; z-index: 1002; @@ -66,50 +66,50 @@ body.o_connected_user { } } -.o-w-close-icon(@size:12px, @color:#000, @color-hover:#000, @thickness: 1px, @opacity: 0.7, @opacity-hover: 1) { +@mixin o-w-close-icon($size:12px, $color:#000, $color-hover:#000, $thickness: 1px, $opacity: 0.7, $opacity-hover: 1) { color: transparent; position: relative; display: inline-block; - opacity: @opacity; - .square(@size); + opacity: $opacity; + @include square($size); &:hover, &:focus { outline: none; - opacity: @opacity-hover; + opacity: $opacity-hover; &::after, &::before { - background: @color-hover; + background: $color-hover; } } &:after, &:before { content: ''; margin-top: -1px; - background: @color; - .size(100%, @thickness); - .o-position-absolute(50%, @left:0); - .o-transform(rotate(45deg)); + background: $color; + @include size(100%, $thickness); + @include o-position-absolute(50%, $left:0); + @include o-transform(rotate(45deg)); } &:after { - .o-transform(rotate(-45deg)); + @include o-transform(rotate(-45deg)); } } // MODALS body .modal { &.o_technical_modal { - .o-w-preserve-base(); - .o-w-preserve-headings(); - .o-w-preserve-forms(); - .o-w-preserve-links(); - .o-w-preserve-btn(); - .o-w-preserve-wells(); - .o-w-preserve-modals(); - .o-w-preserve-tabs(); + @include o-w-preserve-base; + @include o-w-preserve-headings; + @include o-w-preserve-forms; + @include o-w-preserve-links; + @include o-w-preserve-btn; + @include o-w-preserve-wells; + @include o-w-preserve-modals; + @include o-w-preserve-tabs; button.close { - .o-w-close-icon(12px); + @include o-w-close-icon(12px); margin-right: -2px; } } @@ -137,7 +137,7 @@ body .modal { .modal-header { border: none; cursor: pointer; - font-family: @o-we-font-family; + font-family: $o-we-font-family; h4 { color: lightgray; @@ -145,7 +145,7 @@ body .modal { font-weight: normal; .fa { - margin-left: @grid-gutter-width/2; + margin-left: $grid-gutter-width/2; } } } @@ -155,17 +155,17 @@ body .modal { border-radius: 20px; padding: 15px; - @mobile-preview-width: 320px; - @mobile-preview-height: 530px; + $mobile-preview-width: 320px; + $mobile-preview-height: 530px; - .o-flex-display(); - width: @mobile-preview-width + 15; - height: @mobile-preview-height; - .o-transition(all, 400ms); + @include o-flex-display; + width: $mobile-preview-width + 15; + height: $mobile-preview-height; + @include o-transition(all, 400ms); &.o_invert_orientation { - width: @mobile-preview-height + 15; - height: @mobile-preview-width; + width: $mobile-preview-height + 15; + height: $mobile-preview-width; } > iframe { @@ -229,11 +229,11 @@ body .modal { &:first-child { width: 55%; padding-right: 15px; - border: 1px solid @o-we-color-text-light; + border: 1px solid $o-we-color-text-light; text-align: right; - background-color: @o-we-color-paper; + background-color: $o-we-color-paper; - @media screen and (min-width: @screen-md-min) { + @media screen and (min-width: $screen-md-min) { width: 38%; } } @@ -243,7 +243,7 @@ body .modal { visibility: visible; padding-left: 15px; - @media screen and (min-width: @screen-md-min) { + @media screen and (min-width: $screen-md-min) { padding-left: 50px; } } @@ -252,7 +252,7 @@ body .modal { tbody { td { padding: 5px; - .o-transition(padding, .3s); + @include o-transition(padding, .3s); &:first-child { border-width: 0 1px; @@ -265,8 +265,8 @@ body .modal { font-weight: normal; .oe_remove { - .o-w-close-icon(10px, white, @o-we-color-danger, 2px); - .o-position-absolute(5px, 5px); + @include o-w-close-icon(10px, white, $o-we-color-danger, 2px); + @include o-position-absolute(5px, 5px); } } } @@ -287,7 +287,7 @@ body .modal { } tr { - .o-animation(fadeInDownSmall, .3s); + @include o-animation(fadeInDownSmall, .3s); &:first-child { td:first-child { @@ -352,16 +352,16 @@ body .modal { // ADD NEW PAGE MODAL #o_new_content_menu_choices { - .o-position-absolute(@odoo-navbar-height, 0, 0, 0); + @include o-position-absolute($odoo-navbar-height, 0, 0, 0); position: fixed; - .o-flex-display(); - .o-justify-content(center); - .o-align-items(center); - font-family: @o-we-font-family; + @include o-flex-display; + @include o-justify-content(center); + @include o-align-items(center); + font-family: $o-we-font-family; &::before { content: " "; - .o-position-absolute(0, 0, 0, 0); + @include o-position-absolute(0, 0, 0, 0); z-index: -1; pointer-events: none; background-color: black; @@ -369,9 +369,9 @@ body .modal { } > ul { - .o-flex-display(); - .o-flex-flow(row, wrap); - .o-justify-content(space-around); + @include o-flex-display; + @include o-flex-flow(row, wrap); + @include o-justify-content(space-around); width: auto; max-width: 60%; max-height: 100%; @@ -382,7 +382,7 @@ body .modal { li { display: block; opacity: 0; - .animation(fadeInDownSmall 1s forwards); + @include animation(fadeInDownSmall 1s forwards); margin: 2em 32px; padding: 0 15px; @@ -401,7 +401,7 @@ body .modal { background-color: #2C2C36; color: white; - .o-transition(all, 0.5s, cubic-bezier(0.19, 1, 0.22, 1)); + @include o-transition(all, 0.5s, cubic-bezier(0.19, 1, 0.22, 1)); } p { color: white; @@ -436,7 +436,7 @@ body .modal { overflow: visible; display: block; .modal-dialog { - .o-position-absolute(@odoo-navbar-height + 10, 10px); + @include o-position-absolute($odoo-navbar-height + 10, 10px); width: auto; margin: 0; font-family: Roboto; @@ -445,7 +445,7 @@ body .modal { display: none; } &.loading .loading_backdrop { - .o-position-absolute(0, 0, 0, 0); + @include o-position-absolute(0, 0, 0, 0); display: block; background: black; opacity: 0.3; @@ -478,11 +478,11 @@ body .modal { // ACE EDITOR .o_ace_view_editor { - .o-w-preserve-base(); - .o-w-preserve-btn(); - .o-w-preserve-forms(); + @include o-w-preserve-base; + @include o-w-preserve-btn; + @include o-w-preserve-forms; - .o-position-absolute(@odoo-navbar-height, 0, 0); + @include o-position-absolute($odoo-navbar-height, 0, 0); position: fixed; z-index: 1001; } @@ -523,15 +523,15 @@ body .modal { } #edit_website_pages { th { - background-color: @odoo-brand-primary; + background-color: $odoo-brand-primary; color: white; } td > a.fa { margin-left: 5px; - color: @odoo-brand-primary; + color: $odoo-brand-primary; } .fa-check, .fa-eye-slash { - color: @odoo-brand-optional; + color: $odoo-brand-optional; } } diff --git a/addons/website_blog/static/src/scss/website_blog.scss b/addons/website_blog/static/src/scss/website_blog.scss index f14b771df53..5f09d61a3ad 100644 --- a/addons/website_blog/static/src/scss/website_blog.scss +++ b/addons/website_blog/static/src/scss/website_blog.scss @@ -40,10 +40,10 @@ position: relative; > .o_blog_cover_component { - .o-position-absolute(0, 0, 0, 0); + @include o-position-absolute(0, 0, 0, 0); display: none; - .o-background-size(cover); + @include o-background-size(cover); background-position: center; background-repeat: no-repeat; } @@ -61,7 +61,7 @@ &.cover, &.cover_footer { > .blog_title { color: white; - .o-position-absolute(20%, @grid-gutter-width, auto, @grid-gutter-width); + @include o-position-absolute(20%, $grid-gutter-width, auto, $grid-gutter-width); } } @@ -92,7 +92,7 @@ } /* mobile preview: for blog h1,h2 font-size and cover-footer height of image overlapas */ - @media (max-width: @screen-xs-max) { + @media (max-width: $screen-xs-max) { .o_blog_cover_container { > .blog_title { > h1 { @@ -224,7 +224,7 @@ .blog_post_year_collapse { cursor: pointer; > i { - color: @brand-primary; + color: $brand-primary; } } diff --git a/addons/website_form/static/src/scss/website_form.scss b/addons/website_form/static/src/scss/website_form.scss index f26718da9c1..b1e9f55e74d 100644 --- a/addons/website_form/static/src/scss/website_form.scss +++ b/addons/website_form/static/src/scss/website_form.scss @@ -9,12 +9,12 @@ flex-basis: 33%; // col-sm-6 - @media (max-width: @screen-sm-max) { + @media (max-width: $screen-sm-max) { flex-basis: 50%; } // col-xs-12 - @media (max-width: @screen-xs-max) { + @media (max-width: $screen-xs-max) { flex-basis: 100%; } } diff --git a/addons/website_hr_recruitment/static/src/scss/s_hr_rating.scss b/addons/website_hr_recruitment/static/src/scss/s_hr_rating.scss index 76b6edb8005..72acce86116 100644 --- a/addons/website_hr_recruitment/static/src/scss/s_hr_rating.scss +++ b/addons/website_hr_recruitment/static/src/scss/s_hr_rating.scss @@ -1,36 +1,34 @@ .s_hr_rating { - @star: "\f005"; - @star-o: "\f006"; - @bolt: "\f0e7"; - @bolt-o: "_"; - @heart: "\f004"; - @heart-o: "\f08a"; + $star: "\f005"; + $star-o: "\f006"; + $bolt: "\f0e7"; + $bolt-o: "_"; + $heart: "\f004"; + $heart-o: "\f08a"; - .s_hr_rating_generate_icons (@off, @on) { + @mixin s-hr-rating-generate-icons($off, $on) { .fa:before { - content: @off; + content: $off; } - .loop(@counter) when (@counter > 0) { - &.s_hr_rating_@{counter} { - .fa:nth-of-type(-n+@{counter}):before { - content: @on; + @for $counter from 5 to 0 { + &.s_hr_rating_#{$counter} { + .fa:nth-of-type(-n+#{$counter}):before { + content: $on; } } - .loop((@counter - 1)); } - .loop(5); } &.s_hr_rating_stars { - .s_hr_rating_generate_icons(@star-o, @star); + @include s-hr-rating-generate-icons($star-o, $star); } &.s_hr_rating_bolts { - .s_hr_rating_generate_icons(@bolt-o, @bolt); + @include s-hr-rating-generate-icons($bolt-o, $bolt); } &.s_hr_rating_hearts { - .s_hr_rating_generate_icons(@heart-o, @heart); + @include s-hr-rating-generate-icons($heart-o, $heart); } &.s_hr_rating_bar { @@ -41,25 +39,23 @@ .s_hr_rating_bar { height: 15px; padding: 1px; - background-color: @gray-lighter; + background-color: $gray-lighter; border-radius: 2px; &:before { content: ""; border-radius: 2px; - background-color: @brand-primary; + background-color: $brand-primary; display: block; - .size(0, 100%); + @include size(0, 100%); } } - .loop(@counter) when (@counter > 0) { - &.s_hr_rating_@{counter} { + @for $counter from 5 to 0 { + &.s_hr_rating_#{$counter} { .s_hr_rating_bar:before { - width: percentage(@counter/5); + width: percentage($counter/5); } } - .loop((@counter - 1)); } - .loop(5); } -} \ No newline at end of file +} diff --git a/addons/website_livechat/views/website_livechat.xml b/addons/website_livechat/views/website_livechat.xml index 265b8741cd9..25592403b9c 100644 --- a/addons/website_livechat/views/website_livechat.xml +++ b/addons/website_livechat/views/website_livechat.xml @@ -13,6 +13,7 @@ + diff --git a/addons/website_quote/static/src/scss/website_quotation.scss b/addons/website_quote/static/src/scss/website_quotation.scss index 5603f341908..c372164a5df 100644 --- a/addons/website_quote/static/src/scss/website_quotation.scss +++ b/addons/website_quote/static/src/scss/website_quotation.scss @@ -1,6 +1,6 @@ .o_website_quote{ h1[id],h2[id]{ margin-top: 0px; - padding-top: @odoo-navbar-height; + padding-top: $odoo-navbar-height; } } diff --git a/addons/website_rating/static/src/scss/website_rating.scss b/addons/website_rating/static/src/scss/website_rating.scss index 3d7b6465515..b44da995762 100644 --- a/addons/website_rating/static/src/scss/website_rating.scss +++ b/addons/website_rating/static/src/scss/website_rating.scss @@ -1,13 +1,13 @@ /* static stars */ -@rating-star-color: #FACC2E; +$rating-star-color: #FACC2E; .o_website_rating_static{ - color: @rating-star-color; + color: $rating-star-color; } .o_website_rating_card_container { .o_message_counter { - color: @gray; + color: $gray; } /* progress bars */ @@ -29,13 +29,13 @@ margin-right: 5px; } .o_rating_progressbar{ - background-color: @rating-star-color; + background-color: $rating-star-color; } } .o_website_rating_table_percent { text-align: right; padding-left: 5px; - font-size: @font-size-small; + font-size: $font-size-small; } .o_website_rating_table_reset { .o_website_rating_select_text { diff --git a/addons/website_sale/static/src/scss/website_sale.scss b/addons/website_sale/static/src/scss/website_sale.scss index a17ac6fd137..308a3fc56ef 100644 --- a/addons/website_sale/static/src/scss/website_sale.scss +++ b/addons/website_sale/static/src/scss/website_sale.scss @@ -48,7 +48,7 @@ td, th { &:first-child { - padding-left: @grid-gutter-width*0.5; + padding-left: $grid-gutter-width*0.5; } } } @@ -773,7 +773,7 @@ td.noborder { } .border_primary { - border: 1px solid @odoo-brand-primary; + border: 1px solid $odoo-brand-primary; } .js_change_shipping { diff --git a/addons/website_sale/static/src/scss/website_sale_backend.scss b/addons/website_sale/static/src/scss/website_sale_backend.scss index 88354e35503..c5ef9a72b4d 100644 --- a/addons/website_sale/static/src/scss/website_sale_backend.scss +++ b/addons/website_sale/static/src/scss/website_sale_backend.scss @@ -4,45 +4,45 @@ .o_kanban_record.o_attachment.o_website_sale_image_card { border: none; background: none; - margin: 0 0 @grid-gutter-width*0.2; - padding: @o-mail-attachment-margin; - .o-flex(0, 1, 50%); + margin: 0 0 $grid-gutter-width*0.2; + padding: $o-mail-attachment-margin; + @include o-flex(0, 1, 50%); - @media (min-width: @screen-sm-min) { - .o-flex(0, 0, percentage(1/3)); + @media (min-width: $screen-sm-min) { + @include o-flex(0, 0, percentage(1/3)); } - @media (min-width: @screen-md-min) { - .o-flex(0, 0, percentage(1/5)); + @media (min-width: $screen-md-min) { + @include o-flex(0, 0, percentage(1/5)); } - @media (min-width: @screen-lg-min){ - .o-flex(0, 0, percentage(1/6)); + @media (min-width: $screen-lg-min){ + @include o-flex(0, 0, percentage(1/6)); } .o_image_box { padding-top: 50%; - @media (min-width: @screen-sm-min) { + @media (min-width: $screen-sm-min) { padding-top: 75%; } } .o_image_overlay { bottom: 16%; - background: fade(@gray-darker, 20%); + background: rgba($gray-darker, 0.2); } .o_website_sale_image_card_title { - .o-text-overflow(block); + @include o-text-overflow(block); padding:6px; position: relative; - background: @gray-lighter; - color:@headings-color; + background: $gray-lighter; + color:$headings-color; } .o_website_sale_image_card_remove, .o_website_sale_image_card_size { - .o-position-absolute(0, 0); + @include o-position-absolute(0, 0); border-radius: 0 2px; } @@ -51,11 +51,11 @@ right: auto; border-radius: 0 0 2px; font-weight: normal; - font-size: @font-size-small - 1; + font-size: $font-size-small - 1; &.label-normal { - background-color: @gray-lighter; - color: @text-color; + background-color: $gray-lighter; + color: $text-color; } } } @@ -63,14 +63,14 @@ .o_website_sale_image_modal { .o_website_sale_image_modal_container { - border-left: 1px solid @gray-lighter-darker; + border-left: 1px solid $gray-lighter-darker; .o_field_image { margin-bottom: 0; - box-shadow: 0 2px 10px @gray-lighter-dark; + box-shadow: 0 2px 10px $gray-lighter-dark; > img { - border: 1px solid @gray-lighter-darker; + border: 1px solid $gray-lighter-darker; min-height: 200px; max-height: 350px; // Fallback for browsers that dosn't support responsive units max-height: 50vh; @@ -78,9 +78,9 @@ } .o_form_image_controls { - .o-hover-opacity(0.7, 1); + @include o-hover-opacity(0.7, 1); padding: 2%; } } } -} \ No newline at end of file +} diff --git a/addons/website_sale/static/src/scss/website_sale_dashboard.scss b/addons/website_sale/static/src/scss/website_sale_dashboard.scss index b8ade85cba6..35bb6a0469c 100644 --- a/addons/website_sale/static/src/scss/website_sale_dashboard.scss +++ b/addons/website_sale/static/src/scss/website_sale_dashboard.scss @@ -13,14 +13,14 @@ opacity: 0.2; } .o_demo_message { - color: @odoo-main-color-muted; + color: $odoo-main-color-muted; width: 100%; - .o-position-absolute(@left: 0, @top: 12%); - .o-flex-display(); - .o-justify-content(center); + @include o-position-absolute($left: 0, $top: 12%); + @include o-flex-display; + @include o-justify-content(center); } .o_link_enable { - @media (min-width: @screen-md-min) { + @media (min-width: $screen-md-min) { border-right: 1px solid #ccc; } height: initial; @@ -29,19 +29,19 @@ overflow: hidden; text-overflow: ellipsis; a { - color: darken(@odoo-brand-lightsecondary, 40%); + color: darken($odoo-brand-lightsecondary, 40%); } &:hover { - background-color: @odoo-brand-lightsecondary; + background-color: $odoo-brand-lightsecondary; } .o_highlight { - color: @odoo-brand-optional; + color: $odoo-brand-optional; font-size: 20px; font-weight: bold; } } .o_link_disable { - @media (min-width: @screen-md-min) { + @media (min-width: $screen-md-min) { border-right: 1px solid #ccc; } height: initial; @@ -50,7 +50,7 @@ overflow: hidden; text-overflow: ellipsis; margin: 10px 0px; - color: darken(@odoo-brand-lightsecondary, 40%); + color: darken($odoo-brand-lightsecondary, 40%); .o_highlight { font-size: 20px; font-weight: bold; diff --git a/addons/website_sale/static/src/scss/website_sale_frontend.scss b/addons/website_sale/static/src/scss/website_sale_frontend.scss index f7d35c780a6..7ddf72e289f 100644 --- a/addons/website_sale/static/src/scss/website_sale_frontend.scss +++ b/addons/website_sale/static/src/scss/website_sale_frontend.scss @@ -2,39 +2,38 @@ //## ---------------------------- // Theming variables -@o-wsale-wizard-thickness: 2px; -@o-wsale-wizard-dot-size: 10px; -@o-wsale-wizard-dot-active-glow: 4px; +$o-wsale-wizard-thickness: 2px; +$o-wsale-wizard-dot-size: 10px; +$o-wsale-wizard-dot-active-glow: 4px; -@o-wsale-wizard-color-inner: white; -@o-wsale-wizard-color-default: @gray-lighter; +$o-wsale-wizard-color-inner: white; +$o-wsale-wizard-color-default: $gray-lighter; -@o-wsale-wizard-dot-active: @brand-primary; -@o-wsale-wizard-dot-completed: @brand-success; - -@o-wsale-wizard-label-default: @text-muted; -@o-wsale-wizard-label-active: @text-color; -@o-wsale-wizard-label-completed: @state-success-text; +$o-wsale-wizard-dot-active: $brand-primary; +$o-wsale-wizard-dot-completed: $brand-success; +$o-wsale-wizard-label-default: $text-muted; +$o-wsale-wizard-label-active: $text-color; +$o-wsale-wizard-label-completed: $state-success-text; .progress-wizard { // Scoped variables - @tmp-dot-radius: (@o-wsale-wizard-dot-size + @o-wsale-wizard-thickness)*0.5; - @tmp-check-size: max(@font-size-base, @o-wsale-wizard-dot-size + @o-wsale-wizard-thickness + @o-wsale-wizard-dot-active-glow*2); - @tmp-check-pos: @o-wsale-wizard-dot-size*0.5 - @tmp-check-size*0.5; + $tmp-dot-radius: ($o-wsale-wizard-dot-size + $o-wsale-wizard-thickness)*0.5; + $tmp-check-size: max($font-size-base, $o-wsale-wizard-dot-size + $o-wsale-wizard-thickness + $o-wsale-wizard-dot-active-glow*2); + $tmp-check-pos: $o-wsale-wizard-dot-size*0.5 - $tmp-check-size*0.5; - margin-top: @grid-gutter-width*0.5; - padding: 0 @grid-gutter-width*0.5; + margin-top: $grid-gutter-width*0.5; + padding: 0 $grid-gutter-width*0.5; - @media (min-width: @screen-sm-min) { + @media (min-width: $screen-sm-min) { padding: 0; } .progress-wizard-step { position: relative; - @media (min-width: @screen-sm-min) { - margin-top: @tmp-dot-radius + @o-wsale-wizard-thickness*3.5; + @media (min-width: $screen-sm-min) { + margin-top: $tmp-dot-radius + $o-wsale-wizard-thickness*3.5; float: left; width: 100%/3; @@ -42,56 +41,57 @@ width: 100%/4; } } - @media (max-width: @screen-xs-max) { + @media (max-width: $screen-xs-max) { &.disabled, &.complete { display:none; } } .progress-wizard-dot { - .square(@o-wsale-wizard-dot-size); + width: $o-wsale-wizard-dot-size; + height: $o-wsale-wizard-dot-size; position: relative; display: inline-block; - background-color: @o-wsale-wizard-color-inner; + background-color: $o-wsale-wizard-color-inner; border-radius: 50%; - box-shadow: 0 0 0 @o-wsale-wizard-thickness @o-wsale-wizard-color-default; + box-shadow: 0 0 0 $o-wsale-wizard-thickness $o-wsale-wizard-color-default; - @media (min-width: @screen-sm-min) { - .o-position-absolute(@left: 50%); - margin: -@tmp-dot-radius 0 0 -(@o-wsale-wizard-dot-size*0.5); + @media (min-width: $screen-sm-min) { + @include o-position-absolute($left: 50%); + margin: -$tmp-dot-radius 0 0 -($o-wsale-wizard-dot-size*0.5); } } .progress-wizard-steplabel { - color: @o-wsale-wizard-label-default; + color: $o-wsale-wizard-label-default; margin: 5px 0 5px 5px; - font-size: @font-size-base; + font-size: $font-size-base; display: inline-block; - @media (min-width: @screen-sm-min) { + @media (min-width: $screen-sm-min) { display: block; - margin: (10px + @tmp-dot-radius) 0 20px 0; + margin: (10px + $tmp-dot-radius) 0 20px 0; } - @media (max-width: @screen-xs-max) { + @media (max-width: $screen-xs-max) { margin-left: -15px; font-size:24px; } } .progress-wizard-bar { - height: @o-wsale-wizard-thickness; - background-color: @o-wsale-wizard-color-default; + height: $o-wsale-wizard-thickness; + background-color: $o-wsale-wizard-color-default; } &.active { .progress-wizard-dot { - .o-animation(fadeIn, 1s); - background: @o-wsale-wizard-dot-active; - box-shadow: 0 0 0 @o-wsale-wizard-dot-active-glow - 1px @o-wsale-wizard-color-inner, - 0 0 0 @o-wsale-wizard-dot-active-glow fade(@o-wsale-wizard-dot-active, 50%); + @include o-animation(fadeIn, 1s); + background: $o-wsale-wizard-dot-active; + box-shadow: 0 0 0 $o-wsale-wizard-dot-active-glow - 1px $o-wsale-wizard-color-inner, + 0 0 0 $o-wsale-wizard-dot-active-glow rgba($o-wsale-wizard-dot-active, 0.5); } .progress-wizard-steplabel { - color: @o-wsale-wizard-label-active; + color: $o-wsale-wizard-label-active; font-weight: bolder; } } @@ -102,15 +102,16 @@ box-shadow: none; &:after { - .o-position-absolute(@tmp-check-pos, @left: @tmp-check-pos); - .square(@tmp-check-size); + @include o-position-absolute($tmp-check-pos, $left: $tmp-check-pos); + width: $tmp-check-size; + height: $tmp-check-size; border-radius: 100%; - background: @o-wsale-wizard-color-inner; - color: @o-wsale-wizard-dot-completed; + background: $o-wsale-wizard-color-inner; + color: $o-wsale-wizard-dot-completed; text-align: center; line-height: 1; - font-size: @tmp-check-size; + font-size: $tmp-check-size; font-family: FontAwesome; content: "\f058"; @@ -118,16 +119,16 @@ } .progress-wizard-steplabel { - color: @o-wsale-wizard-label-completed; + color: $o-wsale-wizard-label-completed; } &:hover:not(.disabled) { .progress-wizard-dot:after { - color: @o-wsale-wizard-label-completed; + color: $o-wsale-wizard-label-completed; } .progress-wizard-steplabel { - color: @o-wsale-wizard-label-active; + color: $o-wsale-wizard-label-active; } } } diff --git a/addons/website_sale_comparison/static/src/scss/website_sale_comparison.scss b/addons/website_sale_comparison/static/src/scss/website_sale_comparison.scss index ff167568e8b..17e19f4f7c6 100644 --- a/addons/website_sale_comparison/static/src/scss/website_sale_comparison.scss +++ b/addons/website_sale_comparison/static/src/scss/website_sale_comparison.scss @@ -9,7 +9,7 @@ border-bottom: 0px; padding: 10px 20px; text-align: center; - border: 2px solid @brand-primary; + border: 2px solid $brand-primary; border-bottom: 0px; background-color: white; opacity: 0.95; @@ -17,7 +17,7 @@ .o_product_panel { position: relative; .o_product_panel_header { - color: @navbar-default-link-color; + color: $navbar-default-link-color; margin: 0 10px 0 10px; cursor: pointer; .o_product_icon { diff --git a/addons/website_sale_options/static/src/scss/website_sale.scss b/addons/website_sale_options/static/src/scss/website_sale.scss index 18da68c5440..805ccc4e404 100644 --- a/addons/website_sale_options/static/src/scss/website_sale.scss +++ b/addons/website_sale_options/static/src/scss/website_sale.scss @@ -12,7 +12,7 @@ div#modal_optional_products table tr td { border: 0; } -@media (max-width: @screen-xs-max) { +@media (max-width: $screen-xs-max) { div#modal_optional_products .td-qty { display: none; } diff --git a/addons/website_sale_wishlist/static/src/scss/website_sale_wishlist.scss b/addons/website_sale_wishlist/static/src/scss/website_sale_wishlist.scss index 2bac6365fa7..52194927f2b 100644 --- a/addons/website_sale_wishlist/static/src/scss/website_sale_wishlist.scss +++ b/addons/website_sale_wishlist/static/src/scss/website_sale_wishlist.scss @@ -5,7 +5,7 @@ } // XS size -@media (max-width: @screen-xs-max) { +@media (max-width: $screen-xs-max) { .oe_website_sale { .td-wish-btn { width: 100px; diff --git a/addons/website_slides/static/src/scss/website_slides.scss b/addons/website_slides/static/src/scss/website_slides.scss index 12469b90f46..6cf36c1c4a0 100644 --- a/addons/website_slides/static/src/scss/website_slides.scss +++ b/addons/website_slides/static/src/scss/website_slides.scss @@ -1,28 +1,28 @@ -.define-color-if-not-defined() { - @nav-tabs-border-color: #dddddd; - @brand-info: #dddddd; - @body-bg: #FFFFFF; - @brand-primary: #428bca; - @link-color: @brand-primary; - @panel-footer-bg: #f5f5f5; - @nav-link-hover-bg: #FFFFFF; - @navbar-default-link-color: #777; - @navbar-default-link-hover-color: #333; - @navbar-default-bg: #f8f8f8; - @MAX-Z-INDEX : 2147483647; -} .define-color-if-not-defined(); +@mixin define-color-if-not-defined { + $nav-tabs-border-color: #dddddd; + $brand-info: #dddddd; + $body-bg: #FFFFFF; + $brand-primary: #428bca; + $link-color: $brand-primary; + $panel-footer-bg: #f5f5f5; + $nav-link-hover-bg: #FFFFFF; + $navbar-default-link-color: #777; + $navbar-default-link-hover-color: #333; + $navbar-default-bg: #f8f8f8; + $MAX-Z-INDEX : 2147483647; +} @include define-color-if-not-defined; -.top_covered_image { +@mixin top-covered-image { object-fit: cover; object-position: top; } .oe_slides_panel_footer { - background-color: @navbar-default-bg; + background-color: $navbar-default-bg; } .oe_slides_panel_footer .fa, .oe_slide_js_embed_option_link{ - color : @brand-primary; + color : $brand-primary; cursor: pointer; } @@ -33,7 +33,7 @@ left: 0px; right: 0px; bottom: 0px; - background-color: @body-bg; + background-color: $body-bg; opacity: 1; display:none; overflow-y: auto !important; @@ -44,13 +44,13 @@ } section.oe_slides_promote_box { - background-color: @panel-footer-bg; - border-bottom: 1px solid @nav-tabs-border-color; - border-top: 1px solid @nav-tabs-border-color; + background-color: $panel-footer-bg; + border-bottom: 1px solid $nav-tabs-border-color; + border-top: 1px solid $nav-tabs-border-color; } img.oe_slides_channel_thumbnail { - .top_covered_image(); + @include top-covered-image; height: 250px; width: 100% } @@ -60,7 +60,7 @@ img.oe_slides_opacity { } img.oe_slides_promote_image { - .top_covered_image(); + @include top-covered-image; max-height: 300px; width: 100%; overflow: hidden; @@ -72,13 +72,13 @@ img.oe_slides_promote_image { } .oe_slides_apart_small { - .top_covered_image(); + @include top-covered-image; height: 60px; width: 90px; } .oe_slides_statistics_title { - border-bottom: 1px solid @nav-tabs-border-color; + border-bottom: 1px solid $nav-tabs-border-color; padding-bottom: 5px; } .oe_slides_transcript { @@ -87,12 +87,12 @@ img.oe_slides_promote_image { } .oe_slides_bottom_border { - border-bottom: 1px solid @nav-tabs-border-color; + border-bottom: 1px solid $nav-tabs-border-color; } .oe_slide_js_like, .oe_slide_js_unlike{ cursor: pointer; - color: @link-color; + color: $link-color; } textarea.o_slides_comment { @@ -105,7 +105,7 @@ textarea.o_slides_comment { } .oe_slides_grid_thumbnail { - .top_covered_image(); + @include top-covered-image; height: 200px; width: 100%; overflow: hidden; @@ -179,7 +179,7 @@ textarea.o_slides_comment { } .oe_show_footer { - z-index: @MAX-Z-INDEX; // Looks terrible but seems necessary due to fullscreen & canvas in PDFSlidesViewer + z-index: $MAX-Z-INDEX; // Looks terrible but seems necessary due to fullscreen & canvas in PDFSlidesViewer } // Display Slide Navigation Footer bit clear on mobile preview @media screen and (max-width: 300px) { diff --git a/addons/website_theme_install/static/src/scss/website_theme_install.scss b/addons/website_theme_install/static/src/scss/website_theme_install.scss index 775b5761dea..bf278d0886e 100644 --- a/addons/website_theme_install/static/src/scss/website_theme_install.scss +++ b/addons/website_theme_install/static/src/scss/website_theme_install.scss @@ -1,25 +1,25 @@ -@o-theme-kanban-gray: #fcfcfc; +$o-theme-kanban-gray: #fcfcfc; .o_kanban_view.o_theme_kanban { - background-color: @o-theme-kanban-gray; + background-color: $o-theme-kanban-gray; /// Un-grouped Layout (default) &.o_kanban_ungrouped { - .o-justify-content(space-between); - margin: 0 0 0 (@o-kanban-record-margin - 2 * @grid-gutter-width); + @include o-justify-content(space-between); + margin: 0 0 0 ($o-kanban-record-margin - 2 * $grid-gutter-width); - @media (max-width: @screen-xs-max) { - padding-left: @odoo-horizontal-padding - @o-kanban-record-margin; - padding-right: @odoo-horizontal-padding; + @media (max-width: $screen-xs-max) { + padding-left: $odoo-horizontal-padding - $o-kanban-record-margin; + padding-right: $odoo-horizontal-padding; } .o_kanban_record { - .o-flex(1, 0, 220px); + @include o-flex(1, 0, 220px); } } .o_kanban_record { - margin-left: @grid-gutter-width * 2; + margin-left: $grid-gutter-width * 2; padding: 0; box-shadow: none; background: none; @@ -29,26 +29,26 @@ content: "•••"; display: block; padding-left: 10px; - color: darken(@o-theme-kanban-gray, 10%); + color: darken($o-theme-kanban-gray, 10%); font: 12px/20px Courier, monospace; letter-spacing: -1px; } &.o_theme_installed .o_theme_preview_top { - border-color: @odoo-brand-optional; + border-color: $odoo-brand-optional; > .fa-check-circle { - .o-position-absolute(10px, 10px); - .square(20px); + @include o-position-absolute(10px, 10px); + @include square(20px); font-size: 20px; } } .o_theme_preview_top { - border: 1px solid darken(@o-theme-kanban-gray, 20%); + border: 1px solid darken($o-theme-kanban-gray, 20%); border-radius: 2px; - .o-transform-origin(center, bottom); - .o-transition(all, .1s); + @include o-transform-origin(center, bottom); + @include o-transition(all, .1s); .o_theme_cover, .o_theme_logo, .o_theme_screenshot { width: 100%; @@ -74,19 +74,19 @@ } .o_button_area { - .o-position-absolute(20px, -1px, -1px, -1px); - .o-transition(opacity, 100ms); - .o-flex-display(); - .o-flex-flow(column, nowrap); - .o-justify-content(center); - .translate3d(0,0,0); - .o-linear-gradient(0deg, fade(black, 60%), fade(black, 30%)); + @include o-position-absolute(20px, -1px, -1px, -1px); + @include o-transition(opacity, 100ms); + @include o-flex-display; + @include o-flex-flow(column, nowrap); + @include o-justify-content(center); + @include translate3d(0,0,0); + @include o-linear-gradient(0deg, rgba(black, 0.6), rgba(black, 0.3)); padding: 10% 20%; opacity: 0; visibility: hidden; > .btn { - padding: @padding-large-vertical @padding-large-horizontal; + padding: $padding-large-vertical $padding-large-horizontal; } hr { @@ -96,15 +96,15 @@ &:not(.o_theme_installed) { .o_theme_preview_top:hover { - .o-transition(all, .3s); - .o-transform(translateY(-10px)); - border-color: darken(@o-theme-kanban-gray, 26%); + @include o-transition(all, .3s); + @include o-transform(translateY(-10px)); + border-color: darken($o-theme-kanban-gray, 26%); box-shadow: 0 15px 12px -8px rgba(0, 0, 0, .4); .o_button_area { opacity: 1; visibility: visible; - .o-transition(opacity, 0.2s, ease, 0.1s); + @include o-transition(opacity, 0.2s, ease, 0.1s); } } } @@ -113,7 +113,7 @@ /// Grouped Layout &.o_kanban_grouped { .o_kanban_group { - background-color: @o-theme-kanban-gray; + background-color: $o-theme-kanban-gray; padding: 0 20px; .o_kanban_header { @@ -121,7 +121,7 @@ .o_column_title { padding: 0; - color: @text-color; + color: $text-color; } &:hover, &.open { @@ -132,11 +132,11 @@ } .o_theme_preview_top { - border-color: darken(@o-theme-kanban-gray, 16%); + border-color: darken($o-theme-kanban-gray, 16%); } &:nth-child(even) { - background-color: darken(@o-theme-kanban-gray, 4%); + background-color: darken($o-theme-kanban-gray, 4%); .o_theme_cover, .o_theme_logo { background-color: white;