From 6047a111474d087bd4b975d4dbb95938a11d13d2 Mon Sep 17 00:00:00 2001 From: Bas Brands Date: Thu, 11 Nov 2021 10:51:21 +0100 Subject: [PATCH] MDL-72457 theme_boost: remove main container border --- theme/boost/scss/moodle/core.scss | 27 +++---- theme/boost/scss/moodle/layout.scss | 11 ++- theme/boost/scss/moodle/login.scss | 1 + .../scss/moodle/secondarynavigation.scss | 7 +- theme/boost/scss/moodle/variables.scss | 2 +- theme/boost/style/moodle.css | 61 +++++++++------- theme/boost/templates/footer.mustache | 2 +- theme/boost/templates/login.mustache | 2 +- theme/classic/scss/classic/post.scss | 8 ++ theme/classic/style/moodle.css | 73 ++++++++++++------- theme/classic/templates/footer.mustache | 2 +- 11 files changed, 114 insertions(+), 82 deletions(-) diff --git a/theme/boost/scss/moodle/core.scss b/theme/boost/scss/moodle/core.scss index df110dda3ae..d777a6ecd57 100644 --- a/theme/boost/scss/moodle/core.scss +++ b/theme/boost/scss/moodle/core.scss @@ -23,16 +23,6 @@ $font-size-xs: ($font-size-base * .75) !default; background-color: $body-bg; } -@include media-breakpoint-up(sm) { - #region-main { - border: $card-border-width solid $card-border-color; - @if $enable-rounded { - @include border-radius($card-border-radius); - } - padding: $card-spacer-x; - } -} - @include media-breakpoint-up(sm) { .context-header-settings-menu, .region-main-settings-menu { @@ -2059,7 +2049,7 @@ nav.navbar .logo img { // Do not remove these rules. overflow: hidden; - padding: 0.25rem; + padding: 0.25rem 0; .page-header-image, .page-header-headings { @@ -2315,7 +2305,7 @@ ul { // rather than being specific to the footer. This is kept for backwards compatibility. $footer-link-color: $bg-inverse-link-color !default; -.footer-dark .container { +.footer-dark { a { color: $footer-link-color; text-decoration: underline; @@ -2345,6 +2335,9 @@ $footer-link-color: $bg-inverse-link-color !default; a { color: $body-color; text-decoration: underline; + .icon { + color: $body-color; + } &:focus { text-decoration: none; } @@ -2910,12 +2903,12 @@ body.dragging { } } -.page-mycourses { - #region-main { - padding: 0; - } - #region-main, +.drawers { .block_myoverview { border: 0; + & > .card-body { + padding-left: 0 !important; /* stylelint-disable-line declaration-no-important */ + padding-right: 0 !important; /* stylelint-disable-line declaration-no-important */ + } } } diff --git a/theme/boost/scss/moodle/layout.scss b/theme/boost/scss/moodle/layout.scss index b7c8ae9c968..f19f9b9bcb5 100644 --- a/theme/boost/scss/moodle/layout.scss +++ b/theme/boost/scss/moodle/layout.scss @@ -43,9 +43,14 @@ margin: 0 auto; @include border-radius(); background-color: $white; - padding: 1.5rem; + padding: 1.5rem 0.5rem; margin-top: 3rem; margin-bottom: 3rem; + flex: 1 0 auto; + } + div[role="main"] { + padding-left: 15px; + padding-right: 15px; } } @@ -67,6 +72,8 @@ .header-maxwidth { max-width: $course-content-maxwidth; margin: 0 auto; + padding-left: 15px; + padding-right: 15px; .header-inner { padding-left: 0; @@ -167,7 +174,7 @@ @include media-breakpoint-up(lg) { .drawer-left, .drawer-right { - top: calc(#{$navbar-height} + 1px); + top: $navbar-height; height: calc(100vh - #{$navbar-height}); } diff --git a/theme/boost/scss/moodle/login.scss b/theme/boost/scss/moodle/login.scss index c29772d7852..4f00f2d3027 100644 --- a/theme/boost/scss/moodle/login.scss +++ b/theme/boost/scss/moodle/login.scss @@ -32,6 +32,7 @@ $login-identity-provider-btn-border: $border-color !default; background-color: $logincontainer-bg; padding: $logincontainer-padding; box-shadow: $logincontainer-shadow; + margin-bottom: 2rem; .login-languagemenu { display: flex; justify-content: flex-end; diff --git a/theme/boost/scss/moodle/secondarynavigation.scss b/theme/boost/scss/moodle/secondarynavigation.scss index ed1c0c82caf..e9d979932ca 100644 --- a/theme/boost/scss/moodle/secondarynavigation.scss +++ b/theme/boost/scss/moodle/secondarynavigation.scss @@ -1,10 +1,11 @@ .secondary-navigation { - border-top: 1px solid $nav-tabs-border-color; - border-bottom: 1px solid $nav-tabs-border-color; max-width: $course-content-maxwidth; margin: 0 auto; + padding: 0 15px 15px; .navigation { - height: $moremenu-height; + border-top: 1px solid $nav-tabs-border-color; + border-bottom: 1px solid $nav-tabs-border-color; + height: calc(#{$moremenu-height} + 2px); background-color: $body-bg; .nav-tabs { border: none; diff --git a/theme/boost/scss/moodle/variables.scss b/theme/boost/scss/moodle/variables.scss index 92f47cf14d1..d752d2447da 100644 --- a/theme/boost/scss/moodle/variables.scss +++ b/theme/boost/scss/moodle/variables.scss @@ -23,7 +23,7 @@ $primary-nav-padding-y: ($spacer / 4) !default; $primary-nav-padding-x: ($spacer / 2) !default; $navbar-height: 60px !default; -$course-content-maxwidth: 800px; +$course-content-maxwidth: 830px; $box-shadow-drawer-left: -0.25rem .25rem .8rem rgba($black, .025) !default; $box-shadow-drawer-right: 0 .25rem .8rem rgba($black, .025) !default; diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css index 5bd4030ac9e..cab0ec2081c 100644 --- a/theme/boost/style/moodle.css +++ b/theme/boost/style/moodle.css @@ -9871,12 +9871,6 @@ a.text-dark:hover, a.text-dark:focus { overflow-y: visible; background-color: #fff; } -@media (min-width: 576px) { - #region-main { - border: 1px solid rgba(0, 0, 0, 0.125); - border-radius: 0.25rem; - padding: 1.25rem; } } - @media (min-width: 576px) { .context-header-settings-menu, .region-main-settings-menu { @@ -11552,7 +11546,7 @@ nav.navbar .logo img { /** Header-bar styles **/ .page-context-header { overflow: hidden; - padding: 0.25rem; } + padding: 0.25rem 0; } .page-context-header .page-header-image, .page-context-header .page-header-headings { float: left; @@ -11741,12 +11735,12 @@ ul { margin-top: 30px; margin-right: 0; } } -.footer-dark .container a { +.footer-dark a { color: #fff; text-decoration: underline; } - .footer-dark .container a .icon { + .footer-dark a .icon { color: #fff; } - .footer-dark .container a:focus .icon { + .footer-dark a:focus .icon { color: #1d2125; } .btn-footer-popover { @@ -11760,6 +11754,8 @@ ul { .popover.footer .popover-body .footer-section a { color: #1d2125; text-decoration: underline; } + .popover.footer .popover-body .footer-section a .icon { + color: #1d2125; } .popover.footer .popover-body .footer-section a:focus { text-decoration: none; } @@ -12213,12 +12209,13 @@ body.dragging .dragging { .collapse-list .collapse-list-item-content .collapse-list-item { padding-left: calc(1rem * 3); } -.page-mycourses #region-main { - padding: 0; } - -.page-mycourses #region-main, -.page-mycourses .block_myoverview { +.drawers .block_myoverview { border: 0; } + .drawers .block_myoverview > .card-body { + padding-left: 0 !important; + /* stylelint-disable-line declaration-no-important */ + padding-right: 0 !important; + /* stylelint-disable-line declaration-no-important */ } .icon { font-size: 16px; @@ -17513,7 +17510,8 @@ textarea[data-auto-rows] { .login-container { background-color: #fff; padding: 3rem; - box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); } + box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); + margin-bottom: 2rem; } .login-container .login-languagemenu { display: flex; justify-content: flex-end; @@ -20164,23 +20162,29 @@ span[data-flexitour="container"][x-placement="right"], span[data-flexitour="cont margin: 0 auto; border-radius: 0.25rem; background-color: #fff; - padding: 1.5rem; + padding: 1.5rem 0.5rem; margin-top: 3rem; - margin-bottom: 3rem; } + margin-bottom: 3rem; + flex: 1 0 auto; } + #page.drawers div[role="main"] { + padding-left: 15px; + padding-right: 15px; } @media (min-width: 768px) { .pagelayout-standard #page.drawers .main-inner, body.limitedwidth #page.drawers .main-inner { - max-width: 800px; } + max-width: 830px; } .pagelayout-standard #page.drawers .footer-popover, body.limitedwidth #page.drawers .footer-popover { - max-width: 800px; + max-width: 830px; width: 100%; margin: 0 auto; border-radius: 0.25rem; } .header-maxwidth { - max-width: 800px; - margin: 0 auto; } + max-width: 830px; + margin: 0 auto; + padding-left: 15px; + padding-right: 15px; } .header-maxwidth .header-inner { padding-left: 0; padding-right: 0; } } @@ -20248,7 +20252,7 @@ span[data-flexitour="container"][x-placement="right"], span[data-flexitour="cont @media (min-width: 992px) { .drawer-left, .drawer-right { - top: calc(60px + 1px); + top: 60px; height: calc(100vh - 60px); } #page.drawers { position: relative; @@ -21301,12 +21305,13 @@ div.editor_atto_toolbar button .icon { border-right: 0; } .secondary-navigation { - border-top: 1px solid #dee2e6; - border-bottom: 1px solid #dee2e6; - max-width: 800px; - margin: 0 auto; } + max-width: 830px; + margin: 0 auto; + padding: 0 15px 15px; } .secondary-navigation .navigation { - height: 60px; + border-top: 1px solid #dee2e6; + border-bottom: 1px solid #dee2e6; + height: calc(60px + 2px); background-color: #fff; } .secondary-navigation .navigation .nav-tabs { border: none; } diff --git a/theme/boost/templates/footer.mustache b/theme/boost/templates/footer.mustache index 132e1930f07..70c72ed4482 100644 --- a/theme/boost/templates/footer.mustache +++ b/theme/boost/templates/footer.mustache @@ -64,7 +64,7 @@
-
+
{{{ output.debug_footer_html }}}
diff --git a/theme/boost/templates/login.mustache b/theme/boost/templates/login.mustache index b1b06b1930a..48428fd2f61 100644 --- a/theme/boost/templates/login.mustache +++ b/theme/boost/templates/login.mustache @@ -38,7 +38,7 @@ {{{ output.standard_top_of_body_html }}} -
+
diff --git a/theme/classic/scss/classic/post.scss b/theme/classic/scss/classic/post.scss index 6c0fcd33bc9..4ac7e52b325 100644 --- a/theme/classic/scss/classic/post.scss +++ b/theme/classic/scss/classic/post.scss @@ -24,6 +24,14 @@ flex: 0 0 $mainwidth-oneblock; max-width: $mainwidth-oneblock; padding: 0 1rem 0 0; + #region-main { + border: $card-border-width solid $card-border-color; + padding: $card-spacer-x; + + @if $enable-rounded { + @include border-radius($card-border-radius); + } + } } } &.blocks-post { diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css index fc39a1d259a..d0daf88be93 100644 --- a/theme/classic/style/moodle.css +++ b/theme/classic/style/moodle.css @@ -9871,12 +9871,6 @@ a.text-dark:hover, a.text-dark:focus { overflow-y: visible; background-color: #fff; } -@media (min-width: 576px) { - #region-main { - border: 1px solid rgba(0, 0, 0, 0.125); - border-radius: 0.25rem; - padding: 1.25rem; } } - @media (min-width: 576px) { .context-header-settings-menu, .region-main-settings-menu { @@ -11552,7 +11546,7 @@ nav.navbar .logo img { /** Header-bar styles **/ .page-context-header { overflow: hidden; - padding: 0.25rem; } + padding: 0.25rem 0; } .page-context-header .page-header-image, .page-context-header .page-header-headings { float: left; @@ -11741,12 +11735,12 @@ ul { margin-top: 30px; margin-right: 0; } } -.footer-dark .container a { +.footer-dark a { color: #fff; text-decoration: underline; } - .footer-dark .container a .icon { + .footer-dark a .icon { color: #fff; } - .footer-dark .container a:focus .icon { + .footer-dark a:focus .icon { color: #1d2125; } .btn-footer-popover { @@ -11760,6 +11754,8 @@ ul { .popover.footer .popover-body .footer-section a { color: #1d2125; text-decoration: underline; } + .popover.footer .popover-body .footer-section a .icon { + color: #1d2125; } .popover.footer .popover-body .footer-section a:focus { text-decoration: none; } @@ -12213,12 +12209,13 @@ body.dragging .dragging { .collapse-list .collapse-list-item-content .collapse-list-item { padding-left: calc(1rem * 3); } -.page-mycourses #region-main { - padding: 0; } - -.page-mycourses #region-main, -.page-mycourses .block_myoverview { +.drawers .block_myoverview { border: 0; } + .drawers .block_myoverview > .card-body { + padding-left: 0 !important; + /* stylelint-disable-line declaration-no-important */ + padding-right: 0 !important; + /* stylelint-disable-line declaration-no-important */ } .icon { font-size: 16px; @@ -17513,7 +17510,8 @@ textarea[data-auto-rows] { .login-container { background-color: #fff; padding: 3rem; - box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); } + box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); + margin-bottom: 2rem; } .login-container .login-languagemenu { display: flex; justify-content: flex-end; @@ -20110,23 +20108,29 @@ span[data-flexitour="container"][x-placement="right"], span[data-flexitour="cont margin: 0 auto; border-radius: 0.25rem; background-color: #fff; - padding: 1.5rem; + padding: 1.5rem 0.5rem; margin-top: 3rem; - margin-bottom: 3rem; } + margin-bottom: 3rem; + flex: 1 0 auto; } + #page.drawers div[role="main"] { + padding-left: 15px; + padding-right: 15px; } @media (min-width: 768px) { .pagelayout-standard #page.drawers .main-inner, body.limitedwidth #page.drawers .main-inner { - max-width: 800px; } + max-width: 830px; } .pagelayout-standard #page.drawers .footer-popover, body.limitedwidth #page.drawers .footer-popover { - max-width: 800px; + max-width: 830px; width: 100%; margin: 0 auto; border-radius: 0.25rem; } .header-maxwidth { - max-width: 800px; - margin: 0 auto; } + max-width: 830px; + margin: 0 auto; + padding-left: 15px; + padding-right: 15px; } .header-maxwidth .header-inner { padding-left: 0; padding-right: 0; } } @@ -20194,7 +20198,7 @@ span[data-flexitour="container"][x-placement="right"], span[data-flexitour="cont @media (min-width: 992px) { .drawer-left, .drawer-right { - top: calc(50px + 1px); + top: 50px; height: calc(100vh - 50px); } #page.drawers { position: relative; @@ -21247,12 +21251,13 @@ div.editor_atto_toolbar button .icon { border-right: 0; } .secondary-navigation { - border-top: 1px solid #dee2e6; - border-bottom: 1px solid #dee2e6; - max-width: 800px; - margin: 0 auto; } + max-width: 830px; + margin: 0 auto; + padding: 0 15px 15px; } .secondary-navigation .navigation { - height: 50px; + border-top: 1px solid #dee2e6; + border-bottom: 1px solid #dee2e6; + height: calc(50px + 2px); background-color: #fff; } .secondary-navigation .navigation .nav-tabs { border: none; } @@ -21363,6 +21368,10 @@ body { flex: 0 0 68%; max-width: 68%; padding: 0 1rem 0 0; } + #page-content.blocks-pre .region-main #region-main { + border: 1px solid rgba(0, 0, 0, 0.125); + padding: 1.25rem; + border-radius: 0.25rem; } #page-content.blocks-post .region-main { flex: 0 0 68%; max-width: 68%; @@ -21424,6 +21433,10 @@ body { flex: 0 0 75%; max-width: 75%; padding: 0 1rem 0 0; } + #page-content.blocks-pre .region-main #region-main { + border: 1px solid rgba(0, 0, 0, 0.125); + padding: 1.25rem; + border-radius: 0.25rem; } #page-content.blocks-post .region-main { flex: 0 0 75%; max-width: 75%; @@ -21485,6 +21498,10 @@ body { flex: 0 0 80%; max-width: 80%; padding: 0 1rem 0 0; } + #page-content.blocks-pre .region-main #region-main { + border: 1px solid rgba(0, 0, 0, 0.125); + padding: 1.25rem; + border-radius: 0.25rem; } #page-content.blocks-post .region-main { flex: 0 0 80%; max-width: 80%; diff --git a/theme/classic/templates/footer.mustache b/theme/classic/templates/footer.mustache index 2114db64f97..e40ecf3c68a 100644 --- a/theme/classic/templates/footer.mustache +++ b/theme/classic/templates/footer.mustache @@ -28,7 +28,7 @@ } }}