diff --git a/addons/web/static/src/scss/bootstrap_review.scss b/addons/web/static/src/scss/bootstrap_review.scss index 9348fcce189..a74d326cd9a 100644 --- a/addons/web/static/src/scss/bootstrap_review.scss +++ b/addons/web/static/src/scss/bootstrap_review.scss @@ -15,3 +15,25 @@ // will use the color of a default card background with a light opacity. @include o-bg-color(rgba($card-bg, $o-card-body-bg-opacity)); } + +// Modify modals so that their scrollable element is the modal-body (except in +// mobile). +@include media-breakpoint-up(sm) { + .modal-dialog { + height: 100%; + padding: $modal-dialog-margin-y-sm-up 0; + margin: 0 auto; + } + .modal-content { + max-height: 100%; + } + .modal-header, .modal-footer { + flex: 0 0 auto; + } + .modal-body { + overflow: auto; + // fix iOS issue https://github.com/scottjehl/Device-Bugs/issues/8 + -webkit-transform: translate3d(0, 0, 0); + min-height: 0; + } +} diff --git a/addons/web/static/src/scss/modal.scss b/addons/web/static/src/scss/modal.scss index f02765c25c4..52c3100df31 100644 --- a/addons/web/static/src/scss/modal.scss +++ b/addons/web/static/src/scss/modal.scss @@ -47,44 +47,20 @@ } } + @include media-breakpoint-up(sm) { + .modal-dialog .modal-content .modal-body.o_dialog_error { + overflow: visible; + display: flex; + flex-flow: column nowrap; - @include media-breakpoint-up(md) { - .modal-dialog { - height: 100%; - padding: 30px 0; - margin: 0 auto; + > .alert, > button { + flex: 0 0 auto; + } - .modal-content { - max-height: 100%; - display: flex; - flex-flow: column nowrap; - - .modal-header, .modal-footer { - flex: 0 0 auto; - } - - .modal-body { - overflow: auto; - // fix iOS issue https://github.com/scottjehl/Device-Bugs/issues/8 - -webkit-transform: translate3d(0, 0, 0); - min-height: 0; - - &.o_dialog_error { - overflow: visible; - display: flex; - flex-flow: column nowrap; - - > .alert, > button { - flex: 0 0 auto; - } - - > .o_error_detail { - flex: 1 1 auto; - min-height: 0; - overflow: auto; - } - } - } + > .o_error_detail { + flex: 1 1 auto; + min-height: 0; + overflow: auto; } } }