diff options
Diffstat (limited to 'addons/web/static/src')
43 files changed, 1368 insertions, 1375 deletions
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}}"; - } - } - .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}}"; + @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(); } // 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; - -// Define @gray-lighter-dark as a minor bootstrap @gray-lighter variation used +$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 // 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%; } } |