[IMP] web,*: split {non-}legacy ui.scss

task-3439226

Part-of: odoo/odoo#133289
This commit is contained in:
Pierre Paridans
2023-08-31 06:15:55 +00:00
parent 73f2d5d8fd
commit 0776f2465c
7 changed files with 167 additions and 162 deletions
@@ -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',
+1
View File
@@ -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',
+2
View File
@@ -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',
-162
View File
@@ -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;
+161
View File
@@ -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;
}
+1
View File
@@ -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',
+1
View File
@@ -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',