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;