From 807e52442cae7cbc01929cd6871ed34b2d31b0e4 Mon Sep 17 00:00:00 2001 From: Bas Brands Date: Tue, 26 Nov 2019 15:02:41 +0100 Subject: [PATCH] MDL-66999 theme_boost: @extend remove .modal- styles for YUI modals Use custom styles which will also fix the close button design in MDL-67295 --- theme/boost/scss/moodle/core.scss | 32 ++++++++++------- theme/boost/style/moodle.css | 60 +++++++++++++++++++------------ theme/classic/style/moodle.css | 60 +++++++++++++++++++------------ 3 files changed, 96 insertions(+), 56 deletions(-) diff --git a/theme/boost/scss/moodle/core.scss b/theme/boost/scss/moodle/core.scss index a5052f1ac6d..4920e65d0e2 100644 --- a/theme/boost/scss/moodle/core.scss +++ b/theme/boost/scss/moodle/core.scss @@ -1140,12 +1140,10 @@ body#page-lib-editor-tinymce-plugins-moodlemedia-preview { display: block; } -.moodle-dialogue-base .moodle-dialogue-wrap.moodle-dialogue-content { - @extend .modal-content; -} - .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd { - @extend .modal-header; + display: flex; + padding: 1rem 1rem; + border-bottom: 1px solid #dee2e6; } .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd.yui3-widget-hd { @@ -1158,7 +1156,6 @@ body#page-lib-editor-tinymce-plugins-moodlemedia-preview { } .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd h1 { - @extend .modal-title; font-size: 1.5rem; } @@ -1167,12 +1164,24 @@ body#page-lib-editor-tinymce-plugins-moodlemedia-preview { left: 0; right: auto; */ - padding: $spacer; + padding: 0; + position: relative; + margin-left: auto; } .moodle-dialogue-base .closebutton { - @extend .close; + padding: $modal-header-padding; + margin: (-$modal-header-padding-y) (-$modal-header-padding-x) (-$modal-header-padding-y) auto; + position: relative; + background-color: transparent; + border: 0; + background-image: none; box-shadow: none; + opacity: 0.7; + &:hover, + &:active { + opacity: 1; + } &::after { content: "×"; } @@ -1180,6 +1189,9 @@ body#page-lib-editor-tinymce-plugins-moodlemedia-preview { .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-bd { padding: 0.5rem; + body { + background-color: $body-bg; + } } .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content { @@ -1224,10 +1236,6 @@ body#page-lib-editor-tinymce-plugins-moodlemedia-preview { border-bottom: 1px solid #eee; } -.moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft { - @extend .modal-footer; -} - .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft:empty { display: none; } diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css index 9c7f6bbbd5b..27b909f0819 100644 --- a/theme/boost/style/moodle.css +++ b/theme/boost/style/moodle.css @@ -5979,7 +5979,7 @@ input[type="button"].btn-block { .alert-dismissible { padding-right: 3.90625rem; } - .alert-dismissible .close, .alert-dismissible .moodle-dialogue-base .closebutton, .moodle-dialogue-base .alert-dismissible .closebutton { + .alert-dismissible .close { position: absolute; top: 0; right: 0; @@ -6287,7 +6287,7 @@ input[type="button"].btn-block { background-color: #1d1e1f; border-color: #1d1e1f; } -.close, .moodle-dialogue-base .closebutton { +.close { float: right; font-size: 1.40625rem; font-weight: 700; @@ -6295,19 +6295,19 @@ input[type="button"].btn-block { color: #000; text-shadow: 0 1px 0 #fff; opacity: .5; } - .close:hover, .moodle-dialogue-base .closebutton:hover { + .close:hover { color: #000; text-decoration: none; } - .close:not(:disabled):not(.disabled):hover, .moodle-dialogue-base .closebutton:not(:disabled):not(.disabled):hover, .close:not(:disabled):not(.disabled):focus, .moodle-dialogue-base .closebutton:not(:disabled):not(.disabled):focus { + .close:not(:disabled):not(.disabled):hover, .close:not(:disabled):not(.disabled):focus { opacity: .75; } -button.close, .moodle-dialogue-base button.closebutton { +button.close { padding: 0; background-color: transparent; border: 0; appearance: none; } -a.close.disabled, .moodle-dialogue-base a.disabled.closebutton { +a.close.disabled { pointer-events: none; } .toast { @@ -6376,13 +6376,11 @@ a.close.disabled, .moodle-dialogue-base a.disabled.closebutton { .modal-dialog-scrollable { display: flex; max-height: calc(100% - 1rem); } - .modal-dialog-scrollable .modal-content, .modal-dialog-scrollable .moodle-dialogue-base .moodle-dialogue-wrap.moodle-dialogue-content, .moodle-dialogue-base .modal-dialog-scrollable .moodle-dialogue-wrap.moodle-dialogue-content { + .modal-dialog-scrollable .modal-content { max-height: calc(100vh - 1rem); overflow: hidden; } - .modal-dialog-scrollable .modal-header, .modal-dialog-scrollable .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd, .moodle-dialogue-base .moodle-dialogue-wrap .modal-dialog-scrollable .moodle-dialogue-hd, .modal-dialog-scrollable .path-mod-assign [data-region="grade-panel"] .popout > .col-md-3, .path-mod-assign [data-region="grade-panel"] .modal-dialog-scrollable .popout > .col-md-3, - .modal-dialog-scrollable .modal-footer, - .modal-dialog-scrollable .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft, - .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .modal-dialog-scrollable .moodle-dialogue-ft { + .modal-dialog-scrollable .modal-header, .modal-dialog-scrollable .path-mod-assign [data-region="grade-panel"] .popout > .col-md-3, .path-mod-assign [data-region="grade-panel"] .modal-dialog-scrollable .popout > .col-md-3, + .modal-dialog-scrollable .modal-footer { flex-shrink: 0; } .modal-dialog-scrollable .modal-body { overflow-y: auto; } @@ -6399,12 +6397,12 @@ a.close.disabled, .moodle-dialogue-base a.disabled.closebutton { flex-direction: column; justify-content: center; height: 100%; } - .modal-dialog-centered.modal-dialog-scrollable .modal-content, .modal-dialog-centered.modal-dialog-scrollable .moodle-dialogue-base .moodle-dialogue-wrap.moodle-dialogue-content, .moodle-dialogue-base .modal-dialog-centered.modal-dialog-scrollable .moodle-dialogue-wrap.moodle-dialogue-content { + .modal-dialog-centered.modal-dialog-scrollable .modal-content { max-height: none; } .modal-dialog-centered.modal-dialog-scrollable::before { content: none; } -.modal-content, .moodle-dialogue-base .moodle-dialogue-wrap.moodle-dialogue-content { +.modal-content { position: relative; display: flex; flex-direction: column; @@ -6428,17 +6426,17 @@ a.close.disabled, .moodle-dialogue-base a.disabled.closebutton { .modal-backdrop.show { opacity: 0.5; } -.modal-header, .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd, .path-mod-assign [data-region="grade-panel"] .popout > .col-md-3 { +.modal-header, .path-mod-assign [data-region="grade-panel"] .popout > .col-md-3 { display: flex; align-items: flex-start; justify-content: space-between; padding: 1rem 1rem; border-bottom: 1px solid #dee2e6; } - .modal-header .close, .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd .close, .path-mod-assign [data-region="grade-panel"] .popout > .col-md-3 .close, .modal-header .moodle-dialogue-base .closebutton, .moodle-dialogue-base .modal-header .closebutton, .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd .closebutton, .path-mod-assign [data-region="grade-panel"] .popout > .col-md-3 .moodle-dialogue-base .closebutton, .moodle-dialogue-base .path-mod-assign [data-region="grade-panel"] .popout > .col-md-3 .closebutton { + .modal-header .close, .path-mod-assign [data-region="grade-panel"] .popout > .col-md-3 .close { padding: 1rem 1rem; margin: -1rem -1rem -1rem auto; } -.modal-title, .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd h1 { +.modal-title { margin-bottom: 0; line-height: 1.5; } @@ -6447,15 +6445,15 @@ a.close.disabled, .moodle-dialogue-base a.disabled.closebutton { flex: 1 1 auto; padding: 1rem; } -.modal-footer, .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft { +.modal-footer { display: flex; align-items: center; justify-content: flex-end; padding: 1rem; border-top: 1px solid #dee2e6; } - .modal-footer > :not(:first-child), .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft > :not(:first-child) { + .modal-footer > :not(:first-child) { margin-left: .25rem; } - .modal-footer > :not(:last-child), .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft > :not(:last-child) { + .modal-footer > :not(:last-child) { margin-right: .25rem; } .modal-scrollbar-measure { @@ -6471,7 +6469,7 @@ a.close.disabled, .moodle-dialogue-base a.disabled.closebutton { margin: 1.75rem auto; } .modal-dialog-scrollable { max-height: calc(100% - 3.5rem); } - .modal-dialog-scrollable .modal-content, .modal-dialog-scrollable .moodle-dialogue-base .moodle-dialogue-wrap.moodle-dialogue-content, .moodle-dialogue-base .modal-dialog-scrollable .moodle-dialogue-wrap.moodle-dialogue-content { + .modal-dialog-scrollable .modal-content { max-height: calc(100vh - 3.5rem); } .modal-dialog-centered { min-height: calc(100% - 3.5rem); } @@ -10581,6 +10579,11 @@ body#page-lib-editor-tinymce-plugins-moodlemedia-preview { .modal.show { display: block; } +.moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd { + display: flex; + padding: 1rem 1rem; + border-bottom: 1px solid #dee2e6; } + .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd.yui3-widget-hd { min-height: 3rem; color: initial; @@ -10596,15 +10599,28 @@ body#page-lib-editor-tinymce-plugins-moodlemedia-preview { left: 0; right: auto; */ - padding: 1rem; } + padding: 0; + position: relative; + margin-left: auto; } .moodle-dialogue-base .closebutton { - box-shadow: none; } + padding: 1rem 1rem; + margin: -1rem -1rem -1rem auto; + position: relative; + background-color: transparent; + border: 0; + background-image: none; + box-shadow: none; + opacity: 0.7; } + .moodle-dialogue-base .closebutton:hover, .moodle-dialogue-base .closebutton:active { + opacity: 1; } .moodle-dialogue-base .closebutton::after { content: "×"; } .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-bd { padding: 0.5rem; } + .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-bd body { + background-color: #fff; } .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content { overflow: auto; diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css index 31b1b7d13e0..6391b23956f 100644 --- a/theme/classic/style/moodle.css +++ b/theme/classic/style/moodle.css @@ -6171,7 +6171,7 @@ input[type="button"].btn-block { .alert-dismissible { padding-right: 3.90625rem; } - .alert-dismissible .close, .alert-dismissible .moodle-dialogue-base .closebutton, .moodle-dialogue-base .alert-dismissible .closebutton { + .alert-dismissible .close { position: absolute; top: 0; right: 0; @@ -6521,7 +6521,7 @@ input[type="button"].btn-block { background-color: #1d1e1f; border-color: #1d1e1f; } -.close, .moodle-dialogue-base .closebutton { +.close { float: right; font-size: 1.40625rem; font-weight: 700; @@ -6529,19 +6529,19 @@ input[type="button"].btn-block { color: #000; text-shadow: 0 1px 0 #fff; opacity: .5; } - .close:hover, .moodle-dialogue-base .closebutton:hover { + .close:hover { color: #000; text-decoration: none; } - .close:not(:disabled):not(.disabled):hover, .moodle-dialogue-base .closebutton:not(:disabled):not(.disabled):hover, .close:not(:disabled):not(.disabled):focus, .moodle-dialogue-base .closebutton:not(:disabled):not(.disabled):focus { + .close:not(:disabled):not(.disabled):hover, .close:not(:disabled):not(.disabled):focus { opacity: .75; } -button.close, .moodle-dialogue-base button.closebutton { +button.close { padding: 0; background-color: transparent; border: 0; appearance: none; } -a.close.disabled, .moodle-dialogue-base a.disabled.closebutton { +a.close.disabled { pointer-events: none; } .toast { @@ -6611,13 +6611,11 @@ a.close.disabled, .moodle-dialogue-base a.disabled.closebutton { .modal-dialog-scrollable { display: flex; max-height: calc(100% - 1rem); } - .modal-dialog-scrollable .modal-content, .modal-dialog-scrollable .moodle-dialogue-base .moodle-dialogue-wrap.moodle-dialogue-content, .moodle-dialogue-base .modal-dialog-scrollable .moodle-dialogue-wrap.moodle-dialogue-content { + .modal-dialog-scrollable .modal-content { max-height: calc(100vh - 1rem); overflow: hidden; } - .modal-dialog-scrollable .modal-header, .modal-dialog-scrollable .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd, .moodle-dialogue-base .moodle-dialogue-wrap .modal-dialog-scrollable .moodle-dialogue-hd, .modal-dialog-scrollable .path-mod-assign [data-region="grade-panel"] .popout > .col-md-3, .path-mod-assign [data-region="grade-panel"] .modal-dialog-scrollable .popout > .col-md-3, - .modal-dialog-scrollable .modal-footer, - .modal-dialog-scrollable .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft, - .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .modal-dialog-scrollable .moodle-dialogue-ft { + .modal-dialog-scrollable .modal-header, .modal-dialog-scrollable .path-mod-assign [data-region="grade-panel"] .popout > .col-md-3, .path-mod-assign [data-region="grade-panel"] .modal-dialog-scrollable .popout > .col-md-3, + .modal-dialog-scrollable .modal-footer { flex-shrink: 0; } .modal-dialog-scrollable .modal-body { overflow-y: auto; } @@ -6634,12 +6632,12 @@ a.close.disabled, .moodle-dialogue-base a.disabled.closebutton { flex-direction: column; justify-content: center; height: 100%; } - .modal-dialog-centered.modal-dialog-scrollable .modal-content, .modal-dialog-centered.modal-dialog-scrollable .moodle-dialogue-base .moodle-dialogue-wrap.moodle-dialogue-content, .moodle-dialogue-base .modal-dialog-centered.modal-dialog-scrollable .moodle-dialogue-wrap.moodle-dialogue-content { + .modal-dialog-centered.modal-dialog-scrollable .modal-content { max-height: none; } .modal-dialog-centered.modal-dialog-scrollable::before { content: none; } -.modal-content, .moodle-dialogue-base .moodle-dialogue-wrap.moodle-dialogue-content { +.modal-content { position: relative; display: flex; flex-direction: column; @@ -6664,7 +6662,7 @@ a.close.disabled, .moodle-dialogue-base a.disabled.closebutton { .modal-backdrop.show { opacity: 0.5; } -.modal-header, .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd, .path-mod-assign [data-region="grade-panel"] .popout > .col-md-3 { +.modal-header, .path-mod-assign [data-region="grade-panel"] .popout > .col-md-3 { display: flex; align-items: flex-start; justify-content: space-between; @@ -6672,11 +6670,11 @@ a.close.disabled, .moodle-dialogue-base a.disabled.closebutton { border-bottom: 1px solid #dee2e6; border-top-left-radius: 0.3rem; border-top-right-radius: 0.3rem; } - .modal-header .close, .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd .close, .path-mod-assign [data-region="grade-panel"] .popout > .col-md-3 .close, .modal-header .moodle-dialogue-base .closebutton, .moodle-dialogue-base .modal-header .closebutton, .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd .closebutton, .path-mod-assign [data-region="grade-panel"] .popout > .col-md-3 .moodle-dialogue-base .closebutton, .moodle-dialogue-base .path-mod-assign [data-region="grade-panel"] .popout > .col-md-3 .closebutton { + .modal-header .close, .path-mod-assign [data-region="grade-panel"] .popout > .col-md-3 .close { padding: 1rem 1rem; margin: -1rem -1rem -1rem auto; } -.modal-title, .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd h1 { +.modal-title { margin-bottom: 0; line-height: 1.5; } @@ -6685,7 +6683,7 @@ a.close.disabled, .moodle-dialogue-base a.disabled.closebutton { flex: 1 1 auto; padding: 1rem; } -.modal-footer, .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft { +.modal-footer { display: flex; align-items: center; justify-content: flex-end; @@ -6693,9 +6691,9 @@ a.close.disabled, .moodle-dialogue-base a.disabled.closebutton { border-top: 1px solid #dee2e6; border-bottom-right-radius: 0.3rem; border-bottom-left-radius: 0.3rem; } - .modal-footer > :not(:first-child), .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft > :not(:first-child) { + .modal-footer > :not(:first-child) { margin-left: .25rem; } - .modal-footer > :not(:last-child), .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft > :not(:last-child) { + .modal-footer > :not(:last-child) { margin-right: .25rem; } .modal-scrollbar-measure { @@ -6711,7 +6709,7 @@ a.close.disabled, .moodle-dialogue-base a.disabled.closebutton { margin: 1.75rem auto; } .modal-dialog-scrollable { max-height: calc(100% - 3.5rem); } - .modal-dialog-scrollable .modal-content, .modal-dialog-scrollable .moodle-dialogue-base .moodle-dialogue-wrap.moodle-dialogue-content, .moodle-dialogue-base .modal-dialog-scrollable .moodle-dialogue-wrap.moodle-dialogue-content { + .modal-dialog-scrollable .modal-content { max-height: calc(100vh - 3.5rem); } .modal-dialog-centered { min-height: calc(100% - 3.5rem); } @@ -10826,6 +10824,11 @@ body#page-lib-editor-tinymce-plugins-moodlemedia-preview { .modal.show { display: block; } +.moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd { + display: flex; + padding: 1rem 1rem; + border-bottom: 1px solid #dee2e6; } + .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd.yui3-widget-hd { min-height: 3rem; color: initial; @@ -10841,15 +10844,28 @@ body#page-lib-editor-tinymce-plugins-moodlemedia-preview { left: 0; right: auto; */ - padding: 1rem; } + padding: 0; + position: relative; + margin-left: auto; } .moodle-dialogue-base .closebutton { - box-shadow: none; } + padding: 1rem 1rem; + margin: -1rem -1rem -1rem auto; + position: relative; + background-color: transparent; + border: 0; + background-image: none; + box-shadow: none; + opacity: 0.7; } + .moodle-dialogue-base .closebutton:hover, .moodle-dialogue-base .closebutton:active { + opacity: 1; } .moodle-dialogue-base .closebutton::after { content: "×"; } .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-bd { padding: 0.5rem; } + .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-bd body { + background-color: #fff; } .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content { overflow: auto; -- 2.17.1