diff --git a/addons/mrp_subcontracting/__manifest__.py b/addons/mrp_subcontracting/__manifest__.py index d2e6ebd0bed..0b5bc1dafa5 100644 --- a/addons/mrp_subcontracting/__manifest__.py +++ b/addons/mrp_subcontracting/__manifest__.py @@ -52,6 +52,7 @@ 'web/static/src/scss/animation.scss', 'web/static/src/core/colorpicker/colorpicker.scss', 'web/static/src/scss/mimetypes.scss', + 'web/static/src/scss/ui.scss', 'web/static/src/legacy/scss/ui.scss', 'web/static/src/legacy/scss/modal.scss', 'web/static/src/views/fields/translation_dialog.scss', diff --git a/addons/project/__manifest__.py b/addons/project/__manifest__.py index fa4413d6610..5035d25b791 100644 --- a/addons/project/__manifest__.py +++ b/addons/project/__manifest__.py @@ -103,6 +103,7 @@ 'web/static/src/scss/animation.scss', 'web/static/src/core/colorpicker/colorpicker.scss', 'web/static/src/scss/mimetypes.scss', + 'web/static/src/scss/ui.scss', 'web/static/src/legacy/scss/ui.scss', 'web/static/src/legacy/scss/modal.scss', 'web/static/src/views/fields/translation_dialog.scss', diff --git a/addons/web/__manifest__.py b/addons/web/__manifest__.py index 2c3fe9b5188..4c6669050bb 100644 --- a/addons/web/__manifest__.py +++ b/addons/web/__manifest__.py @@ -59,6 +59,7 @@ This module provides the core of the Odoo Web Client. 'web/static/src/scss/animation.scss', 'web/static/src/scss/fontawesome_overridden.scss', 'web/static/src/scss/mimetypes.scss', + 'web/static/src/scss/ui.scss', 'web/static/src/views/fields/translation_dialog.scss', 'web/static/src/legacy/scss/ui.scss', 'web/static/src/legacy/scss/modal.scss', @@ -201,6 +202,7 @@ This module provides the core of the Odoo Web Client. 'web/static/src/scss/base_frontend.scss', 'web/static/src/scss/fontawesome_overridden.scss', 'web/static/src/scss/mimetypes.scss', + 'web/static/src/scss/ui.scss', 'web/static/src/views/fields/translation_dialog.scss', 'web/static/src/views/fields/signature/signature_field.scss', diff --git a/addons/web/static/src/legacy/scss/ui.scss b/addons/web/static/src/legacy/scss/ui.scss index 812b36a0d39..1e7abf967e8 100644 --- a/addons/web/static/src/legacy/scss/ui.scss +++ b/addons/web/static/src/legacy/scss/ui.scss @@ -1,21 +1,3 @@ -:root .o_hidden { - // Add `:root` as parent selector to increase '.o_hidden' hierarchy. - // The aim is to ensure that it overrides any bootstrap default layout - // class (eg. d-flex). - // TODO: After migrating to BTS5 review how layout/visibility classes - // interfere with each other. - display: none!important; -} - -.o_disabled { - pointer-events: none; - opacity: $o-opacity-disabled; -} - -.o_text_overflow { - @include o-text-overflow; -} - .ui-autocomplete { z-index: $zindex-modal + 1; max-width: 600px; @@ -24,16 +6,6 @@ } } -.dropdown-toggle { - white-space: nowrap; - - &.o-no-caret { - &::before, &::after { - content: normal; - } - } -} - // Allow to change data-bs-toggle="collapse" text according to status :not(.collapsed) > .o-collapsed-label, .collapsed > .o-not-collapsed-label { @@ -56,140 +28,6 @@ } } -.o_catch_attention { - position: relative; - z-index: 1; - animation: catchAttention 200ms ease 0s infinite normal; -} - -// ---------------------------------------------------------------------------- -// Render a "tree-view" design on a set of vertical elements - -// @param {number} --treeEntry-padding-h - Entry's horizzontal padding. -// @param {number} --treeEntry-padding-v - Entry's vertical padding. -// @param {number} --treeEntry--before-top - Vertical-line top position. -// @param {string} --treeEntry--after-display - Horizzontal-line display mode. -// @param {color} --treeEntry--beforeAfter-color - Lines color -// @param {color} --treeEntry--beforeAfter-left - Lines left position -// ---------------------------------------------------------------------------- -.o_treeEntry { - $-padding-h: var(--treeEntry-padding-h, #{map-get($spacers, 4)}); - $-padding-v: var(--treeEntry-padding-v, #{map-get($spacers, 2)}); - - padding-left: $-padding-h; - position: relative; - - &:before, &:after { - position: absolute; - left: var(--treeEntry--beforeAfter-left, calc(#{$-padding-h} * .5)); - background: var(--treeEntry--beforeAfter-color, #{$border-color}); - content: ''; - } - - &:before { - top: var(--treeEntry--before-top, 0); - width: 1px; - height: 100%; - } - - &:after { - display: var(--treeEntry--after-display, initial); - top: calc(.5em + #{$-padding-v}); - width: calc(#{$-padding-h} * .5); - height: 1px; - } - - &:last-of-type:before { - height: calc(.5em + #{$-padding-v}); - } -} - -// bounce effect -@keyframes catchAttention { - 0%, 20%, 40%, 60%, 80%, 100% { - transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); - } - 0% { - transform: translateY(-30%); - } - 20% { - transform: translateY(-25%); - } - 40% { - transform: translateY(-20%); - } - 60% { - transform: translateY(-15%); - } - 80% { - transform: translateY(-10%); - } - 100% { - transform: translateY(-5%); - } -} - -span.o_force_ltr { - display: inline; -} -.o_force_ltr { - unicode-bidi: embed; // ensure element has level of embedding for direction - /*rtl:ignore*/ - direction: ltr; -} - -/* rtl:raw: -[type="tel"], -[type="url"], -[type="email"], -[type="number"], -.o_force_ltr { - text-align: end !important; -} -*/ - -// To fill the available space while keeping aspect ratio (crop). -// Assuming the important part of the image is its center. -.o_object_fit_cover { - object-fit: cover; -} - -.o_object_fit_contain { - object-fit: contain; -} - -.o_image_24_cover { - width: 24px; - height: 24px; - object-fit: cover; -} - -.o_image_40_cover { - width: 40px; - height: 40px; - object-fit: cover; -} - -.o_image_64_cover { - width: 64px; - height: 64px; - object-fit: cover; -} - -// Keep ratio but avoid cropping (so part of the background becomes visible). -.o_image_64_contain { - width: 64px; - height: 64px; - object-fit: contain; -} - -// When having a square is not necessary, the image will take less space if any -// of its width or height is smaller than 64px. -.o_image_64_max { - max-width: 64px; - max-height: 64px; -} - .o_image_128_max { max-width: 128px !important; max-height: 128px !important; diff --git a/addons/web/static/src/scss/ui.scss b/addons/web/static/src/scss/ui.scss new file mode 100644 index 00000000000..9154ae17883 --- /dev/null +++ b/addons/web/static/src/scss/ui.scss @@ -0,0 +1,161 @@ +:root .o_hidden { + // Add `:root` as parent selector to increase '.o_hidden' hierarchy. + // The aim is to ensure that it overrides any bootstrap default layout + // class (eg. d-flex). + // TODO: After migrating to BTS5 review how layout/visibility classes + // interfere with each other. + display: none!important; +} + +.o_disabled { + pointer-events: none; + opacity: $o-opacity-disabled; +} + +.o_text_overflow { + @include o-text-overflow; +} + +.dropdown-toggle { + white-space: nowrap; + + &.o-no-caret { + &::before, &::after { + content: normal; + } + } +} + +.o_catch_attention { + position: relative; + z-index: 1; + animation: catchAttention 200ms ease 0s infinite normal; +} + +// ---------------------------------------------------------------------------- +// Render a "tree-view" design on a set of vertical elements + +// @param {number} --treeEntry-padding-h - Entry's horizzontal padding. +// @param {number} --treeEntry-padding-v - Entry's vertical padding. +// @param {number} --treeEntry--before-top - Vertical-line top position. +// @param {string} --treeEntry--after-display - Horizzontal-line display mode. +// @param {color} --treeEntry--beforeAfter-color - Lines color +// @param {color} --treeEntry--beforeAfter-left - Lines left position +// ---------------------------------------------------------------------------- +.o_treeEntry { + $-padding-h: var(--treeEntry-padding-h, #{map-get($spacers, 4)}); + $-padding-v: var(--treeEntry-padding-v, #{map-get($spacers, 2)}); + + padding-left: $-padding-h; + position: relative; + + &:before, &:after { + position: absolute; + left: var(--treeEntry--beforeAfter-left, calc(#{$-padding-h} * .5)); + background: var(--treeEntry--beforeAfter-color, #{$border-color}); + content: ''; + } + + &:before { + top: var(--treeEntry--before-top, 0); + width: 1px; + height: 100%; + } + + &:after { + display: var(--treeEntry--after-display, initial); + top: calc(.5em + #{$-padding-v}); + width: calc(#{$-padding-h} * .5); + height: 1px; + } + + &:last-of-type:before { + height: calc(.5em + #{$-padding-v}); + } +} + +// bounce effect +@keyframes catchAttention { + 0%, 20%, 40%, 60%, 80%, 100% { + transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + } + 0% { + transform: translateY(-30%); + } + 20% { + transform: translateY(-25%); + } + 40% { + transform: translateY(-20%); + } + 60% { + transform: translateY(-15%); + } + 80% { + transform: translateY(-10%); + } + 100% { + transform: translateY(-5%); + } +} + +span.o_force_ltr { + display: inline; +} +.o_force_ltr { + unicode-bidi: embed; // ensure element has level of embedding for direction + /*rtl:ignore*/ + direction: ltr; +} + +/* rtl:raw: +[type="tel"], +[type="url"], +[type="email"], +[type="number"], +.o_force_ltr { + text-align: end !important; +} +*/ + +// To fill the available space while keeping aspect ratio (crop). +// Assuming the important part of the image is its center. +.o_object_fit_cover { + object-fit: cover; +} + +.o_object_fit_contain { + object-fit: contain; +} + +.o_image_24_cover { + width: 24px; + height: 24px; + object-fit: cover; +} + +.o_image_40_cover { + width: 40px; + height: 40px; + object-fit: cover; +} + +.o_image_64_cover { + width: 64px; + height: 64px; + object-fit: cover; +} + +// Keep ratio but avoid cropping (so part of the background becomes visible). +.o_image_64_contain { + width: 64px; + height: 64px; + object-fit: contain; +} + +// When having a square is not necessary, the image will take less space if any +// of its width or height is smaller than 64px. +.o_image_64_max { + max-width: 64px; + max-height: 64px; +} diff --git a/addons/web_editor/__manifest__.py b/addons/web_editor/__manifest__.py index 67136ceaeb1..502a081d94f 100644 --- a/addons/web_editor/__manifest__.py +++ b/addons/web_editor/__manifest__.py @@ -42,6 +42,7 @@ Odoo Web Editor widget. 'web/static/src/scss/animation.scss', 'web/static/src/core/colorpicker/colorpicker.scss', 'web/static/src/scss/mimetypes.scss', + 'web/static/src/scss/ui.scss', 'web/static/src/legacy/scss/ui.scss', 'web/static/src/legacy/scss/modal.scss', 'web/static/src/views/fields/translation_dialog.scss', diff --git a/addons/website_slides/__manifest__.py b/addons/website_slides/__manifest__.py index bc2287ac914..dae3096f802 100644 --- a/addons/website_slides/__manifest__.py +++ b/addons/website_slides/__manifest__.py @@ -141,6 +141,7 @@ Featuring 'web/static/src/scss/animation.scss', 'web/static/src/scss/fontawesome_overridden.scss', 'web/static/src/scss/mimetypes.scss', + 'web/static/src/scss/ui.scss', 'web/static/src/core/colorpicker/colorpicker.scss', 'web/static/src/views/fields/translation_dialog.scss', 'web/static/src/views/fields/signature/signature_field.scss',