mirror_php/moodle
1
0
Fork 0
mirror of https://github.com/moodle/moodle.git synced 2025-03-22 00:20:37 +01:00
Code Issues Projects Releases Wiki Activity

MDL-78954 theme_boost: action menu subpanel styling

Browse Source
This commit is contained in:
Ferran Recio 2023-08-16 16:34:09 +02:00
parent e998f14061
commit 729937c89a
4 changed files with 132 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
theme/boost/scss/moodle/core.scss
View File

@ -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 {

40
theme/boost/style/moodle.css
View File

@ -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;

4
theme/boost/upgrade.txt
View File

@ -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.

40
theme/classic/style/moodle.css
View File

@ -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;