From 729937c89a376d021e56628a7c91e65fdb9a4ed2 Mon Sep 17 00:00:00 2001 From: Ferran Recio Date: Wed, 16 Aug 2023 16:34:09 +0200 Subject: [PATCH] MDL-78954 theme_boost: action menu subpanel styling --- theme/boost/scss/moodle/core.scss | 50 +++++++++++++++++++++++++++++++ theme/boost/style/moodle.css | 40 ++++++++++++++++++++++++- theme/boost/upgrade.txt | 4 +++ theme/classic/style/moodle.css | 40 ++++++++++++++++++++++++- 4 files changed, 132 insertions(+), 2 deletions(-) diff --git a/theme/boost/scss/moodle/core.scss b/theme/boost/scss/moodle/core.scss index fa74918fb2d..42805d2cc34 100644 --- a/theme/boost/scss/moodle/core.scss +++ b/theme/boost/scss/moodle/core.scss @@ -42,6 +42,14 @@ $font-size-xs: ($font-size-base * .75) !default; } } +@mixin optional-animation($animation) { + animation: $animation; + + @media (prefers-reduced-motion: reduce) { + animation: none; + } +} + .context-header-settings-menu .dropdown-toggle > .icon, #region-main-settings-menu .dropdown-toggle > .icon { height: 24px; @@ -382,11 +390,53 @@ img.resize { .dropdown-subpanel-content { max-width: $modal-sm; + box-shadow: 0 0 1rem rgba($black, .15); a:focus { outline: solid $primary; } } + + .dropdown-subpanel-content.show { + @include optional-animation(0.15s animate-pop); + } + + // Chevrons in sub panel items are always to end. + .dropdown-subpanel .dropdown-item { + &::after { + border: 0; + @extend .fa-solid; + content: fa-content($fa-var-chevron-right); + } + &::before { + display: none; + } + } +} + +@keyframes animate-pop { + 0% { + transform: scale(0.90, 0.90); + } + + 100% { + transform: scale(1, 1); + } +} + +.dir-rtl .action-menu { + // Chevrons in subpanels items are always to end. + .dropdown-subpanel .dropdown-item { + &::after { + border: 0; + @extend .fa-solid; + content: fa-content($fa-var-chevron-left); + } + + &::before { + display: none; + } + } } .block img.resize { diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css index e6493fc9f1c..2cc790ac2f6 100644 --- a/theme/boost/style/moodle.css +++ b/theme/boost/style/moodle.css @@ -2088,7 +2088,9 @@ .dropleft .dropdown-toggle::before, .dropdown-toggle::after, .dropdown-item[aria-current=true]:before, -.dropdown-item[aria-selected=true]:before { +.dropdown-item[aria-selected=true]:before, +.dir-rtl .action-menu .dropdown-subpanel .dropdown-item::after, +.action-menu .dropdown-subpanel .dropdown-item::after { font-weight: 900; } @@ -4948,6 +4950,8 @@ .dropdown-toggle::after, .dropdown-item[aria-current=true]:before, .dropdown-item[aria-selected=true]:before, +.dir-rtl .action-menu .dropdown-subpanel .dropdown-item::after, +.action-menu .dropdown-subpanel .dropdown-item::after, .far, .fa-regular, .content-bank-container.view-grid .cb-unlisted::after, @@ -4987,6 +4991,8 @@ .dropdown-toggle::after, .dropdown-item[aria-current=true]:before, .dropdown-item[aria-selected=true]:before, +.dir-rtl .action-menu .dropdown-subpanel .dropdown-item::after, +.action-menu .dropdown-subpanel .dropdown-item::after, .far, .fa-regular, .content-bank-container.view-grid .cb-unlisted::after { @@ -23255,10 +23261,42 @@ img.resize { } .action-menu .dropdown-subpanel-content { max-width: 300px; + box-shadow: 0 0 1rem rgba(0, 0, 0, 0.15); } .action-menu .dropdown-subpanel-content a:focus { outline: solid #0f6cbf; } +.action-menu .dropdown-subpanel-content.show { + animation: 0.15s animate-pop; +} +@media (prefers-reduced-motion: reduce) { + .action-menu .dropdown-subpanel-content.show { + animation: none; + } +} +.action-menu .dropdown-subpanel .dropdown-item::after { + border: 0; + content: "\f054"; +} +.action-menu .dropdown-subpanel .dropdown-item::before { + display: none; +} + +@keyframes animate-pop { + 0% { + transform: scale(0.9, 0.9); + } + 100% { + transform: scale(1, 1); + } +} +.dir-rtl .action-menu .dropdown-subpanel .dropdown-item::after { + border: 0; + content: "\f053"; +} +.dir-rtl .action-menu .dropdown-subpanel .dropdown-item::before { + display: none; +} .block img.resize { height: 0.9em; diff --git a/theme/boost/upgrade.txt b/theme/boost/upgrade.txt index 18fa35e5742..77254f4eb3a 100644 --- a/theme/boost/upgrade.txt +++ b/theme/boost/upgrade.txt @@ -1,6 +1,10 @@ This file describes API changes in /theme/boost information provided here is intended especially for theme designers. +=== 4.3 === + +* New SCSS mixin optional_animate to animate an element unless if the user has reduced motion in their preferences. + === 4.0 === * Following the adopted standards, breadcrumbs have been removed for pages that reside on the 1st level within a course e.g. participants, grades, settings, reports. diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css index b3ba1cc90e9..16314c492a8 100644 --- a/theme/classic/style/moodle.css +++ b/theme/classic/style/moodle.css @@ -2088,7 +2088,9 @@ .dropleft .dropdown-toggle::before, .dropdown-toggle::after, .dropdown-item[aria-current=true]:before, -.dropdown-item[aria-selected=true]:before { +.dropdown-item[aria-selected=true]:before, +.dir-rtl .action-menu .dropdown-subpanel .dropdown-item::after, +.action-menu .dropdown-subpanel .dropdown-item::after { font-weight: 900; } @@ -4948,6 +4950,8 @@ .dropdown-toggle::after, .dropdown-item[aria-current=true]:before, .dropdown-item[aria-selected=true]:before, +.dir-rtl .action-menu .dropdown-subpanel .dropdown-item::after, +.action-menu .dropdown-subpanel .dropdown-item::after, .far, .fa-regular, .content-bank-container.view-grid .cb-unlisted::after, @@ -4987,6 +4991,8 @@ .dropdown-toggle::after, .dropdown-item[aria-current=true]:before, .dropdown-item[aria-selected=true]:before, +.dir-rtl .action-menu .dropdown-subpanel .dropdown-item::after, +.action-menu .dropdown-subpanel .dropdown-item::after, .far, .fa-regular, .content-bank-container.view-grid .cb-unlisted::after { @@ -23255,10 +23261,42 @@ img.resize { } .action-menu .dropdown-subpanel-content { max-width: 300px; + box-shadow: 0 0 1rem rgba(0, 0, 0, 0.15); } .action-menu .dropdown-subpanel-content a:focus { outline: solid #0f6cbf; } +.action-menu .dropdown-subpanel-content.show { + animation: 0.15s animate-pop; +} +@media (prefers-reduced-motion: reduce) { + .action-menu .dropdown-subpanel-content.show { + animation: none; + } +} +.action-menu .dropdown-subpanel .dropdown-item::after { + border: 0; + content: "\f054"; +} +.action-menu .dropdown-subpanel .dropdown-item::before { + display: none; +} + +@keyframes animate-pop { + 0% { + transform: scale(0.9, 0.9); + } + 100% { + transform: scale(1, 1); + } +} +.dir-rtl .action-menu .dropdown-subpanel .dropdown-item::after { + border: 0; + content: "\f053"; +} +.dir-rtl .action-menu .dropdown-subpanel .dropdown-item::before { + display: none; +} .block img.resize { height: 0.9em;