From 66c8eb19e10f88bff60cfd13c203409ecfdbbf48 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mikel=20Mart=C3=ADn?= Date: Thu, 23 Jan 2025 16:05:44 +0100 Subject: [PATCH] MDL-75669 theme_boost: Fix dropdowns styles --- lib/templates/local/dropdown/dialog.mustache | 1 + theme/boost/scss/moodle/action-menu.scss | 4 -- theme/boost/scss/moodle/dropdown.scss | 16 ++--- theme/boost/scss/moodle/modules.scss | 7 -- theme/boost/style/moodle.css | 70 +++++++------------- theme/classic/style/moodle.css | 70 +++++++------------- 6 files changed, 57 insertions(+), 111 deletions(-) diff --git a/lib/templates/local/dropdown/dialog.mustache b/lib/templates/local/dropdown/dialog.mustache index c8e78db9b26..554f7c1fa68 100644 --- a/lib/templates/local/dropdown/dialog.mustache +++ b/lib/templates/local/dropdown/dialog.mustache @@ -74,6 +74,7 @@ }} {{#buttonclasses}} {{buttonclasses}} {{/buttonclasses}} {{! }} {{/ buttonclasses }}" type="button" + role="button" id="{{#buttonid}}{{buttonid}}{{/buttonid}}{{^buttonid}}dropdownDialog{{uniqid}}{{/buttonid}}" data-bs-toggle="dropdown" aria-haspopup="true" diff --git a/theme/boost/scss/moodle/action-menu.scss b/theme/boost/scss/moodle/action-menu.scss index e5fa45503b5..9fc907b28b3 100644 --- a/theme/boost/scss/moodle/action-menu.scss +++ b/theme/boost/scss/moodle/action-menu.scss @@ -89,10 +89,6 @@ &:hover, &:focus, &:focus-within { - outline: 0; - background-color: $dropdown-link-active-bg; - color: $dropdown-link-active-color; - a { color: $dropdown-link-active-color; } diff --git a/theme/boost/scss/moodle/dropdown.scss b/theme/boost/scss/moodle/dropdown.scss index bdf83c22073..701d67adec1 100644 --- a/theme/boost/scss/moodle/dropdown.scss +++ b/theme/boost/scss/moodle/dropdown.scss @@ -14,9 +14,6 @@ &:hover, &:focus, &:focus-within { - outline: 0; - background-color: $dropdown-link-active-bg; - color: $dropdown-link-active-color; a { color: $dropdown-link-active-color; } @@ -40,12 +37,15 @@ width: fit-content; } -// Add dropdown menu items styles for each theme color (mantainning default hover colour for contrast). +// Add dropdown menu items styles for each theme color mantainning default hover colour for contrast. @each $color, $value in $theme-colors { - .dropdown-item.text-#{$color} { - color: $value; - &:hover { - color: $dropdown-link-hover-color !important; /* stylelint-disable-line declaration-no-important */ + .dropdown-item { + &:hover, + &:focus { + &.text-#{$color}, + a.text-#{$color} { + color: $dropdown-link-hover-color !important; /* stylelint-disable-line declaration-no-important */ + } } } } diff --git a/theme/boost/scss/moodle/modules.scss b/theme/boost/scss/moodle/modules.scss index 9875d410fb6..8b66a9a51a2 100644 --- a/theme/boost/scss/moodle/modules.scss +++ b/theme/boost/scss/moodle/modules.scss @@ -1630,13 +1630,6 @@ $popout-header-height: 4rem; } } } - &#page-mod-feedback-manage_templates, - &#page-mod-feedback-use_templ { - .dropdown-item:hover a.text-danger { - color: $dropdown-link-hover-color !important;/* stylelint-disable-line declaration-no-important */ - text-decoration: none; - } - } // Analysis page. table.analysis { diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css index 38ad48ed9a4..6da6e7825ba 100644 --- a/theme/boost/style/moodle.css +++ b/theme/boost/style/moodle.css @@ -28667,11 +28667,6 @@ body.behat-site .action-menu .dropdown-subpanel-content.show { width: 100%; color: #1d2125; } -.dropdown-item.active, .dropdown-item:active, .dropdown-item:hover, .dropdown-item:focus, .dropdown-item:focus-within { - outline: 0; - background-color: #0f6cbf; - color: #fff; -} .dropdown-item.active a, .dropdown-item:active a, .dropdown-item:hover a, .dropdown-item:focus a, .dropdown-item:focus-within a { color: #fff; } @@ -36963,10 +36958,6 @@ img.userpicture { .path-mod-feedback#page-mod-feedback-manage_templates .publictemplates .action-menu .menubar { justify-content: end; } -.path-mod-feedback#page-mod-feedback-manage_templates .dropdown-item:hover a.text-danger, .path-mod-feedback#page-mod-feedback-use_templ .dropdown-item:hover a.text-danger { - color: #fff !important; /* stylelint-disable-line declaration-no-important */ - text-decoration: none; -} .path-mod-feedback table.analysis { width: 100%; border-top: 1px solid #dee2e6; @@ -40862,11 +40853,6 @@ div.editor_atto_toolbar button .icon { width: 100%; color: #1d2125; } -.dropdown-item.active, .dropdown-item:active, .dropdown-item:hover, .dropdown-item:focus, .dropdown-item:focus-within { - outline: 0; - background-color: #0f6cbf; - color: #fff; -} .dropdown-item.active a, .dropdown-item:active a, .dropdown-item:hover a, .dropdown-item:focus a, .dropdown-item:focus-within a { color: #fff; } @@ -40886,59 +40872,51 @@ div.editor_atto_toolbar button .icon { width: fit-content; } -.dropdown-item.text-primary { - color: #0f6cbf; -} -.dropdown-item.text-primary:hover { +.dropdown-item:hover.text-primary, +.dropdown-item:hover a.text-primary, .dropdown-item:focus.text-primary, +.dropdown-item:focus a.text-primary { color: #fff !important; /* stylelint-disable-line declaration-no-important */ } -.dropdown-item.text-secondary { - color: #ced4da; -} -.dropdown-item.text-secondary:hover { +.dropdown-item:hover.text-secondary, +.dropdown-item:hover a.text-secondary, .dropdown-item:focus.text-secondary, +.dropdown-item:focus a.text-secondary { color: #fff !important; /* stylelint-disable-line declaration-no-important */ } -.dropdown-item.text-success { - color: #357a32; -} -.dropdown-item.text-success:hover { +.dropdown-item:hover.text-success, +.dropdown-item:hover a.text-success, .dropdown-item:focus.text-success, +.dropdown-item:focus a.text-success { color: #fff !important; /* stylelint-disable-line declaration-no-important */ } -.dropdown-item.text-info { - color: #008196; -} -.dropdown-item.text-info:hover { +.dropdown-item:hover.text-info, +.dropdown-item:hover a.text-info, .dropdown-item:focus.text-info, +.dropdown-item:focus a.text-info { color: #fff !important; /* stylelint-disable-line declaration-no-important */ } -.dropdown-item.text-warning { - color: #f0ad4e; -} -.dropdown-item.text-warning:hover { +.dropdown-item:hover.text-warning, +.dropdown-item:hover a.text-warning, .dropdown-item:focus.text-warning, +.dropdown-item:focus a.text-warning { color: #fff !important; /* stylelint-disable-line declaration-no-important */ } -.dropdown-item.text-danger { - color: #ca3120; -} -.dropdown-item.text-danger:hover { +.dropdown-item:hover.text-danger, +.dropdown-item:hover a.text-danger, .dropdown-item:focus.text-danger, +.dropdown-item:focus a.text-danger { color: #fff !important; /* stylelint-disable-line declaration-no-important */ } -.dropdown-item.text-light { - color: #f8f9fa; -} -.dropdown-item.text-light:hover { +.dropdown-item:hover.text-light, +.dropdown-item:hover a.text-light, .dropdown-item:focus.text-light, +.dropdown-item:focus a.text-light { color: #fff !important; /* stylelint-disable-line declaration-no-important */ } -.dropdown-item.text-dark { - color: #1d2125; -} -.dropdown-item.text-dark:hover { +.dropdown-item:hover.text-dark, +.dropdown-item:hover a.text-dark, .dropdown-item:focus.text-dark, +.dropdown-item:focus a.text-dark { color: #fff !important; /* stylelint-disable-line declaration-no-important */ } diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css index e6c8354d1c0..ebacb01aca4 100644 --- a/theme/classic/style/moodle.css +++ b/theme/classic/style/moodle.css @@ -28673,11 +28673,6 @@ body.behat-site .action-menu .dropdown-subpanel-content.show { width: 100%; color: #1d2125; } -.dropdown-item.active, .dropdown-item:active, .dropdown-item:hover, .dropdown-item:focus, .dropdown-item:focus-within { - outline: 0; - background-color: #0f6cbf; - color: #fff; -} .dropdown-item.active a, .dropdown-item:active a, .dropdown-item:hover a, .dropdown-item:focus a, .dropdown-item:focus-within a { color: #fff; } @@ -36969,10 +36964,6 @@ img.userpicture { .path-mod-feedback#page-mod-feedback-manage_templates .publictemplates .action-menu .menubar { justify-content: end; } -.path-mod-feedback#page-mod-feedback-manage_templates .dropdown-item:hover a.text-danger, .path-mod-feedback#page-mod-feedback-use_templ .dropdown-item:hover a.text-danger { - color: #fff !important; /* stylelint-disable-line declaration-no-important */ - text-decoration: none; -} .path-mod-feedback table.analysis { width: 100%; border-top: 1px solid #dee2e6; @@ -40802,11 +40793,6 @@ div.editor_atto_toolbar button .icon { width: 100%; color: #1d2125; } -.dropdown-item.active, .dropdown-item:active, .dropdown-item:hover, .dropdown-item:focus, .dropdown-item:focus-within { - outline: 0; - background-color: #0f6cbf; - color: #fff; -} .dropdown-item.active a, .dropdown-item:active a, .dropdown-item:hover a, .dropdown-item:focus a, .dropdown-item:focus-within a { color: #fff; } @@ -40826,59 +40812,51 @@ div.editor_atto_toolbar button .icon { width: fit-content; } -.dropdown-item.text-primary { - color: #0f6cbf; -} -.dropdown-item.text-primary:hover { +.dropdown-item:hover.text-primary, +.dropdown-item:hover a.text-primary, .dropdown-item:focus.text-primary, +.dropdown-item:focus a.text-primary { color: #fff !important; /* stylelint-disable-line declaration-no-important */ } -.dropdown-item.text-secondary { - color: #ced4da; -} -.dropdown-item.text-secondary:hover { +.dropdown-item:hover.text-secondary, +.dropdown-item:hover a.text-secondary, .dropdown-item:focus.text-secondary, +.dropdown-item:focus a.text-secondary { color: #fff !important; /* stylelint-disable-line declaration-no-important */ } -.dropdown-item.text-success { - color: #357a32; -} -.dropdown-item.text-success:hover { +.dropdown-item:hover.text-success, +.dropdown-item:hover a.text-success, .dropdown-item:focus.text-success, +.dropdown-item:focus a.text-success { color: #fff !important; /* stylelint-disable-line declaration-no-important */ } -.dropdown-item.text-info { - color: #008196; -} -.dropdown-item.text-info:hover { +.dropdown-item:hover.text-info, +.dropdown-item:hover a.text-info, .dropdown-item:focus.text-info, +.dropdown-item:focus a.text-info { color: #fff !important; /* stylelint-disable-line declaration-no-important */ } -.dropdown-item.text-warning { - color: #f0ad4e; -} -.dropdown-item.text-warning:hover { +.dropdown-item:hover.text-warning, +.dropdown-item:hover a.text-warning, .dropdown-item:focus.text-warning, +.dropdown-item:focus a.text-warning { color: #fff !important; /* stylelint-disable-line declaration-no-important */ } -.dropdown-item.text-danger { - color: #ca3120; -} -.dropdown-item.text-danger:hover { +.dropdown-item:hover.text-danger, +.dropdown-item:hover a.text-danger, .dropdown-item:focus.text-danger, +.dropdown-item:focus a.text-danger { color: #fff !important; /* stylelint-disable-line declaration-no-important */ } -.dropdown-item.text-light { - color: #f8f9fa; -} -.dropdown-item.text-light:hover { +.dropdown-item:hover.text-light, +.dropdown-item:hover a.text-light, .dropdown-item:focus.text-light, +.dropdown-item:focus a.text-light { color: #fff !important; /* stylelint-disable-line declaration-no-important */ } -.dropdown-item.text-dark { - color: #1d2125; -} -.dropdown-item.text-dark:hover { +.dropdown-item:hover.text-dark, +.dropdown-item:hover a.text-dark, .dropdown-item:focus.text-dark, +.dropdown-item:focus a.text-dark { color: #fff !important; /* stylelint-disable-line declaration-no-important */ }