diff --git a/lib/templates/editswitch.mustache b/lib/templates/editswitch.mustache index 6c368d3e954..20e41656d2d 100644 --- a/lib/templates/editswitch.mustache +++ b/lib/templates/editswitch.mustache @@ -30,6 +30,7 @@ "string": "Edit on" } }} +
-
+
diff --git a/theme/boost/scss/moodle/moremenu.scss b/theme/boost/scss/moodle/moremenu.scss index d3a9ff154a9..b52aef471b4 100644 --- a/theme/boost/scss/moodle/moremenu.scss +++ b/theme/boost/scss/moodle/moremenu.scss @@ -17,8 +17,18 @@ } &.active { - font-weight: bold; - border-bottom: solid 3px $primary; + background-color: $gray-100; + border-color: transparent; + border-bottom-color: $primary; + &:focus, + &:hover { + background-color: $gray-100; + border-bottom-color: $primary; + } + } + &.focus, + &:focus { + position: relative; } &[data-toggle="tab"] { display: inline-flex; @@ -76,4 +86,20 @@ } } } + /* TODO: MDL-72481: Update this style to also apply to aria-selected. */ + .dropdown-item[aria-current="true"], + .dropdown-item.active { + background-color: transparent; + color: $dropdown-link-color; + &:focus-within { + background-color: $dropdown-link-active-bg; + color: $dropdown-link-active-color; + a { + color: $dropdown-link-active-color; + } + } + &:before { + content: $fa-var-check; + } + } } diff --git a/theme/boost/scss/moodle/navbar.scss b/theme/boost/scss/moodle/navbar.scss index fbe7654de4f..257861bc5b4 100644 --- a/theme/boost/scss/moodle/navbar.scss +++ b/theme/boost/scss/moodle/navbar.scss @@ -1,5 +1,6 @@ @mixin hover-navbar { - background-color: $gray-200; + border-color: transparent; + background-color: $gray-100; } .navbar.fixed-top { @@ -8,7 +9,7 @@ box-shadow: none; border-bottom: $gray-300 1px solid; align-items: stretch; - height: $navbar-height; + height: $navbar-height + 1px; .navbar-brand { .logo { diff --git a/theme/boost/scss/moodle/popover-region.scss b/theme/boost/scss/moodle/popover-region.scss index 2d1783ee9bd..3d37ee7cac3 100644 --- a/theme/boost/scss/moodle/popover-region.scss +++ b/theme/boost/scss/moodle/popover-region.scss @@ -202,12 +202,12 @@ $content-header-footer-height: $region-header-height + $region-footer-height; font-size: 11px; line-height: 11px; position: absolute; - top: 5px; + top: $navbar-height / 4; right: 0; } .popover-region-container { - top: calc(#{$navbar-height} - (#{$spacer} / 2)); + top: $navbar-height; } } diff --git a/theme/boost/scss/moodle/primarynavigation.scss b/theme/boost/scss/moodle/primarynavigation.scss index 587fc091d8b..c59acf33ff6 100644 --- a/theme/boost/scss/moodle/primarynavigation.scss +++ b/theme/boost/scss/moodle/primarynavigation.scss @@ -4,6 +4,7 @@ .nav-link { height: $navbar-height; color: $gray-900; + border-top: 3px solid transparent; } } } diff --git a/theme/boost/scss/moodle/secondarynavigation.scss b/theme/boost/scss/moodle/secondarynavigation.scss index b141915b038..38e58cef9b3 100644 --- a/theme/boost/scss/moodle/secondarynavigation.scss +++ b/theme/boost/scss/moodle/secondarynavigation.scss @@ -1,9 +1,14 @@ .secondary-navigation { - border-top: 1px solid $gray-300; - border-bottom: 1px solid $gray-300; + border-top: 1px solid $nav-tabs-border-color; + border-bottom: 1px solid $nav-tabs-border-color; .navigation { - border-color: $gray-300; height: $moremenu-height; - margin-bottom: map-get($spacers, 3); + background-color: $body-bg; + .nav-tabs { + border: none; + .nav-link { + border-radius: initial; + } + } } } diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css index c3f63fd2f36..107394d9920 100644 --- a/theme/boost/style/moodle.css +++ b/theme/boost/style/moodle.css @@ -19653,11 +19653,11 @@ body { font-size: 11px; line-height: 11px; position: absolute; - top: 5px; + top: 15px; right: 0; } .navbar .popover-region-container { - top: calc(60px - (1rem / 2)); } + top: 60px; } .content-item-container { width: 100%; @@ -20537,7 +20537,7 @@ div.editor_atto_toolbar button .icon { box-shadow: none; border-bottom: #dee2e6 1px solid; align-items: stretch; - height: 60px; } + height: 61px; } .navbar.fixed-top .navbar-brand .logo { max-height: calc(60px - (0.25rem * 2)); } .navbar.fixed-top .nav-link { @@ -20941,7 +20941,8 @@ div.editor_atto_toolbar button .icon { .moremenu { opacity: 0; - height: 60px; } + height: 60px; + /* TODO: MDL-72481: Update this style to also apply to aria-selected. */ } .moremenu.observed { opacity: 1; } .moremenu .nav-link { @@ -20953,10 +20954,17 @@ div.editor_atto_toolbar button .icon { border-left: none; border-top: none; } .moremenu .nav-link:hover, .moremenu .nav-link:focus { - background-color: #e9ecef; } + border-color: transparent; + background-color: #f8f9fa; } .moremenu .nav-link.active { - font-weight: bold; - border-bottom: solid 3px #0f6cbf; } + background-color: #f8f9fa; + border-color: transparent; + border-bottom-color: #0f6cbf; } + .moremenu .nav-link.active:focus, .moremenu .nav-link.active:hover { + background-color: #f8f9fa; + border-bottom-color: #0f6cbf; } + .moremenu .nav-link.focus, .moremenu .nav-link:focus { + position: relative; } .moremenu .nav-link[data-toggle="tab"] { display: inline-flex; flex-direction: column; @@ -20996,12 +21004,27 @@ div.editor_atto_toolbar button .icon { background-color: #0f6cbf; } .moremenu .dropdownmoremenu > .dropdown-menu .dropdown-menu .dropdown-divider { display: none; } + .moremenu .dropdown-item[aria-current="true"], + .moremenu .dropdown-item.active { + background-color: transparent; + color: #1d2125; } + .moremenu .dropdown-item[aria-current="true"]:focus-within, + .moremenu .dropdown-item.active:focus-within { + background-color: #0f6cbf; + color: #fff; } + .moremenu .dropdown-item[aria-current="true"]:focus-within a, + .moremenu .dropdown-item.active:focus-within a { + color: #fff; } + .moremenu .dropdown-item[aria-current="true"]:before, + .moremenu .dropdown-item.active:before { + content: ""; } .primary-navigation .navigation { height: 60px; } .primary-navigation .navigation .nav-link { height: 60px; - color: #1d2125; } + color: #1d2125; + border-top: 3px solid transparent; } @media (max-width: 767.98px) { .primary-navigation { @@ -21023,9 +21046,12 @@ div.editor_atto_toolbar button .icon { border-top: 1px solid #dee2e6; border-bottom: 1px solid #dee2e6; } .secondary-navigation .navigation { - border-color: #dee2e6; height: 60px; - margin-bottom: 1rem; } + background-color: #fff; } + .secondary-navigation .navigation .nav-tabs { + border: none; } + .secondary-navigation .navigation .nav-tabs .nav-link { + border-radius: initial; } body { -webkit-font-smoothing: antialiased; diff --git a/theme/boost/templates/navbar.mustache b/theme/boost/templates/navbar.mustache index 3a6a7ddc3d8..aaa31d3b952 100644 --- a/theme/boost/templates/navbar.mustache +++ b/theme/boost/templates/navbar.mustache @@ -68,7 +68,7 @@ {{#str}}sidepanel, core{{/str}} - + {{# output.should_display_navbar_logo }} {{/ output.should_display_navbar_logo }} @@ -98,7 +98,6 @@ {{> core/user_menu }} {{/usermenu}}
-
{{{ output.edit_switch }}}
diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css index 7d32d373f1d..25d6c461430 100644 --- a/theme/classic/style/moodle.css +++ b/theme/classic/style/moodle.css @@ -19599,11 +19599,11 @@ body { font-size: 11px; line-height: 11px; position: absolute; - top: 5px; + top: 12.5px; right: 0; } .navbar .popover-region-container { - top: calc(50px - (1rem / 2)); } + top: 50px; } .content-item-container { width: 100%; @@ -20483,7 +20483,7 @@ div.editor_atto_toolbar button .icon { box-shadow: none; border-bottom: #dee2e6 1px solid; align-items: stretch; - height: 50px; } + height: 51px; } .navbar.fixed-top .navbar-brand .logo { max-height: calc(50px - (0.25rem * 2)); } .navbar.fixed-top .nav-link { @@ -20887,7 +20887,8 @@ div.editor_atto_toolbar button .icon { .moremenu { opacity: 0; - height: 50px; } + height: 50px; + /* TODO: MDL-72481: Update this style to also apply to aria-selected. */ } .moremenu.observed { opacity: 1; } .moremenu .nav-link { @@ -20899,10 +20900,17 @@ div.editor_atto_toolbar button .icon { border-left: none; border-top: none; } .moremenu .nav-link:hover, .moremenu .nav-link:focus { - background-color: #e9ecef; } + border-color: transparent; + background-color: #f8f9fa; } .moremenu .nav-link.active { - font-weight: bold; - border-bottom: solid 3px #0f6cbf; } + background-color: #f8f9fa; + border-color: transparent; + border-bottom-color: #0f6cbf; } + .moremenu .nav-link.active:focus, .moremenu .nav-link.active:hover { + background-color: #f8f9fa; + border-bottom-color: #0f6cbf; } + .moremenu .nav-link.focus, .moremenu .nav-link:focus { + position: relative; } .moremenu .nav-link[data-toggle="tab"] { display: inline-flex; flex-direction: column; @@ -20942,12 +20950,27 @@ div.editor_atto_toolbar button .icon { background-color: #0f6cbf; } .moremenu .dropdownmoremenu > .dropdown-menu .dropdown-menu .dropdown-divider { display: none; } + .moremenu .dropdown-item[aria-current="true"], + .moremenu .dropdown-item.active { + background-color: transparent; + color: #1d2125; } + .moremenu .dropdown-item[aria-current="true"]:focus-within, + .moremenu .dropdown-item.active:focus-within { + background-color: #0f6cbf; + color: #fff; } + .moremenu .dropdown-item[aria-current="true"]:focus-within a, + .moremenu .dropdown-item.active:focus-within a { + color: #fff; } + .moremenu .dropdown-item[aria-current="true"]:before, + .moremenu .dropdown-item.active:before { + content: ""; } .primary-navigation .navigation { height: 50px; } .primary-navigation .navigation .nav-link { height: 50px; - color: #1d2125; } + color: #1d2125; + border-top: 3px solid transparent; } @media (max-width: 767.98px) { .primary-navigation { @@ -20969,9 +20992,12 @@ div.editor_atto_toolbar button .icon { border-top: 1px solid #dee2e6; border-bottom: 1px solid #dee2e6; } .secondary-navigation .navigation { - border-color: #dee2e6; height: 50px; - margin-bottom: 1rem; } + background-color: #fff; } + .secondary-navigation .navigation .nav-tabs { + border: none; } + .secondary-navigation .navigation .nav-tabs .nav-link { + border-radius: initial; } body { -webkit-font-smoothing: antialiased;