From e715b7a79174b02e9b33544a347fde643ee55b2b Mon Sep 17 00:00:00 2001
From: Ferran Recio <ferran@moodle.com>
Date: Mon, 21 Aug 2023 12:01:59 +0200
Subject: [PATCH] MDL-78954 theme_boost: move action menu css to separate file

---
 theme/boost/scss/moodle.scss             |   1 +
 theme/boost/scss/moodle/action-menu.scss | 119 ++++++++++++++
 theme/boost/scss/moodle/core.scss        | 113 -------------
 theme/boost/style/moodle.css             | 198 +++++++++++------------
 theme/classic/style/moodle.css           | 198 +++++++++++------------
 5 files changed, 318 insertions(+), 311 deletions(-)
 create mode 100644 theme/boost/scss/moodle/action-menu.scss

diff --git a/theme/boost/scss/moodle.scss b/theme/boost/scss/moodle.scss
index 7451eeb10ac..5f7d59dc777 100644
--- a/theme/boost/scss/moodle.scss
+++ b/theme/boost/scss/moodle.scss
@@ -8,6 +8,7 @@ $breadcrumb-divider-rtl: "◀" !default;
 // Massive, needs broken up.
 @import "moodle/variables";
 @import "moodle/core";
+@import "moodle/action-menu";
 @import "moodle/icons";
 @import "moodle/admin";
 @import "moodle/blocks";
diff --git a/theme/boost/scss/moodle/action-menu.scss b/theme/boost/scss/moodle/action-menu.scss
new file mode 100644
index 00000000000..4edb2971030
--- /dev/null
+++ b/theme/boost/scss/moodle/action-menu.scss
@@ -0,0 +1,119 @@
+.action-menu .dropdown-toggle {
+    text-decoration: none;
+    display: inline-block;
+}
+
+.action-menu {
+    white-space: nowrap;
+    display: inline;
+
+    // Kebab action menus do no show chevrons or extra dropdown icons.
+    .dropdown-toggle.no-caret {
+        &::after {
+            display: none;
+        }
+
+        &::before {
+            display: none;
+        }
+    }
+
+    .dropdown.downleft .dropdown-subpanel-content {
+        right: 0;
+        left: auto;
+    }
+
+    .dropdown-subpanel.content-displayed {
+        background-color: $gray-200;
+    }
+
+    .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;
+        }
+    }
+}
+
+// Make links in a menu clickable anywhere in the row.
+.dropdown-item {
+    a {
+        display: block;
+        width: 100%;
+        color: $body-color;
+    }
+
+    &.active,
+    &:active,
+    &:hover,
+    &:focus,
+    &:focus-within {
+        outline: 0;
+        background-color: $dropdown-link-active-bg;
+        color: $dropdown-link-active-color;
+
+        a {
+            color: $dropdown-link-active-color;
+        }
+    }
+
+    &[aria-current="true"],
+    &[aria-selected="true"] {
+        position: relative;
+        display: flex;
+        align-items: center;
+
+        &:before {
+            @extend .fa-solid;
+            content: fa-content($fa-var-check);
+            position: absolute;
+            left: 0.4rem;
+            font-size: 0.7rem;
+        }
+    }
+}
diff --git a/theme/boost/scss/moodle/core.scss b/theme/boost/scss/moodle/core.scss
index e6e6952c39e..966e769af28 100644
--- a/theme/boost/scss/moodle/core.scss
+++ b/theme/boost/scss/moodle/core.scss
@@ -370,85 +370,6 @@ img.resize {
     width: 1em;
 }
 
-.action-menu .dropdown-toggle {
-    text-decoration: none;
-    display: inline-block;
-}
-
-.action-menu {
-    white-space: nowrap;
-    display: inline;
-
-    // Kebab action menus do no show chevrons or extra dropdown icons.
-    .dropdown-toggle.no-caret {
-        &::after {
-            display: none;
-        }
-        &::before {
-            display: none;
-        }
-    }
-
-    .dropdown.downleft .dropdown-subpanel-content {
-        right: 0;
-        left: auto;
-    }
-
-    .dropdown-subpanel.content-displayed {
-        background-color: $gray-200;
-    }
-
-    .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 {
     height: 0.9em;
     width: 0.8em;
@@ -2466,40 +2387,6 @@ $footer-link-color: $bg-inverse-link-color !default;
     }
 }
 
-// Make links in a menu clickable anywhere in the row.
-.dropdown-item {
-    a {
-        display: block;
-        width: 100%;
-        color: $body-color;
-    }
-    &.active,
-    &:active,
-    &:hover,
-    &:focus,
-    &:focus-within {
-        outline: 0;
-        background-color: $dropdown-link-active-bg;
-        color: $dropdown-link-active-color;
-        a {
-            color: $dropdown-link-active-color;
-        }
-    }
-    &[aria-current="true"],
-    &[aria-selected="true"] {
-        position: relative;
-        display: flex;
-        align-items: center;
-        &:before {
-            @extend .fa-solid;
-            content: fa-content($fa-var-check);
-            position: absolute;
-            left: 0.4rem;
-            font-size: 0.7rem;
-        }
-    }
-}
-
 .competency-tree {
     ul {
         padding-left: 1.5rem;
diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
index 0ee5e0dc426..c554b0bc08e 100644
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -2083,14 +2083,14 @@
 .block_navigation .block_tree [aria-expanded=false] > p:before,
 .block_settings .block_tree [aria-expanded=true] > p:before,
 .block_navigation .block_tree [aria-expanded=true] > p:before,
-.dropup .dropdown-toggle::after,
-.dropright .dropdown-toggle::after,
-.dropleft .dropdown-toggle::before,
-.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 {
+.action-menu .dropdown-subpanel .dropdown-item::after,
+.dropup .dropdown-toggle::after,
+.dropright .dropdown-toggle::after,
+.dropleft .dropdown-toggle::before,
+.dropdown-toggle::after {
   font-weight: 900;
 }
 
@@ -4944,14 +4944,14 @@
 .block_navigation .block_tree [aria-expanded=false] > p:before,
 .block_settings .block_tree [aria-expanded=true] > p:before,
 .block_navigation .block_tree [aria-expanded=true] > p:before,
-.dropup .dropdown-toggle::after,
-.dropright .dropdown-toggle::after,
-.dropleft .dropdown-toggle::before,
-.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,
+.dropup .dropdown-toggle::after,
+.dropright .dropdown-toggle::after,
+.dropleft .dropdown-toggle::before,
+.dropdown-toggle::after,
 .far,
 .fa-regular,
 .content-bank-container.view-grid .cb-unlisted::after,
@@ -4985,14 +4985,14 @@
 .block_navigation .block_tree [aria-expanded=false] > p:before,
 .block_settings .block_tree [aria-expanded=true] > p:before,
 .block_navigation .block_tree [aria-expanded=true] > p:before,
-.dropup .dropdown-toggle::after,
-.dropright .dropdown-toggle::after,
-.dropleft .dropdown-toggle::before,
-.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,
+.dropup .dropdown-toggle::after,
+.dropright .dropdown-toggle::after,
+.dropleft .dropdown-toggle::before,
+.dropdown-toggle::after,
 .far,
 .fa-regular,
 .content-bank-container.view-grid .cb-unlisted::after {
@@ -23243,67 +23243,6 @@ img.resize {
   width: 1em;
 }
 
-.action-menu .dropdown-toggle {
-  text-decoration: none;
-  display: inline-block;
-}
-
-.action-menu {
-  white-space: nowrap;
-  display: inline;
-}
-.action-menu .dropdown-toggle.no-caret::after {
-  display: none;
-}
-.action-menu .dropdown-toggle.no-caret::before {
-  display: none;
-}
-.action-menu .dropdown.downleft .dropdown-subpanel-content {
-  right: 0;
-  left: auto;
-}
-.action-menu .dropdown-subpanel.content-displayed {
-  background-color: #e9ecef;
-}
-.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;
   width: 0.8em;
@@ -25269,31 +25208,6 @@ h3.sectionname .inplaceeditable.inplaceeditingon .editinstructions {
   width: 112px;
 }
 
-.dropdown-item a {
-  display: block;
-  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;
-}
-.dropdown-item[aria-current=true], .dropdown-item[aria-selected=true] {
-  position: relative;
-  display: flex;
-  align-items: center;
-}
-.dropdown-item[aria-current=true]:before, .dropdown-item[aria-selected=true]:before {
-  content: "\f00c";
-  position: absolute;
-  left: 0.4rem;
-  font-size: 0.7rem;
-}
-
 .competency-tree ul {
   padding-left: 1.5rem;
 }
@@ -26083,6 +25997,92 @@ blockquote {
     min-width: calc(300px - 25px);
   }
 }
+.action-menu .dropdown-toggle {
+  text-decoration: none;
+  display: inline-block;
+}
+
+.action-menu {
+  white-space: nowrap;
+  display: inline;
+}
+.action-menu .dropdown-toggle.no-caret::after {
+  display: none;
+}
+.action-menu .dropdown-toggle.no-caret::before {
+  display: none;
+}
+.action-menu .dropdown.downleft .dropdown-subpanel-content {
+  right: 0;
+  left: auto;
+}
+.action-menu .dropdown-subpanel.content-displayed {
+  background-color: #e9ecef;
+}
+.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;
+}
+
+.dropdown-item a {
+  display: block;
+  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;
+}
+.dropdown-item[aria-current=true], .dropdown-item[aria-selected=true] {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+.dropdown-item[aria-current=true]:before, .dropdown-item[aria-selected=true]:before {
+  content: "\f00c";
+  position: absolute;
+  left: 0.4rem;
+  font-size: 0.7rem;
+}
+
 .icon {
   font-size: 16px;
   width: 16px;
diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css
index a5e186f77a0..06cf6672f65 100644
--- a/theme/classic/style/moodle.css
+++ b/theme/classic/style/moodle.css
@@ -2083,14 +2083,14 @@
 .block_navigation .block_tree [aria-expanded=false] > p:before,
 .block_settings .block_tree [aria-expanded=true] > p:before,
 .block_navigation .block_tree [aria-expanded=true] > p:before,
-.dropup .dropdown-toggle::after,
-.dropright .dropdown-toggle::after,
-.dropleft .dropdown-toggle::before,
-.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 {
+.action-menu .dropdown-subpanel .dropdown-item::after,
+.dropup .dropdown-toggle::after,
+.dropright .dropdown-toggle::after,
+.dropleft .dropdown-toggle::before,
+.dropdown-toggle::after {
   font-weight: 900;
 }
 
@@ -4944,14 +4944,14 @@
 .block_navigation .block_tree [aria-expanded=false] > p:before,
 .block_settings .block_tree [aria-expanded=true] > p:before,
 .block_navigation .block_tree [aria-expanded=true] > p:before,
-.dropup .dropdown-toggle::after,
-.dropright .dropdown-toggle::after,
-.dropleft .dropdown-toggle::before,
-.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,
+.dropup .dropdown-toggle::after,
+.dropright .dropdown-toggle::after,
+.dropleft .dropdown-toggle::before,
+.dropdown-toggle::after,
 .far,
 .fa-regular,
 .content-bank-container.view-grid .cb-unlisted::after,
@@ -4985,14 +4985,14 @@
 .block_navigation .block_tree [aria-expanded=false] > p:before,
 .block_settings .block_tree [aria-expanded=true] > p:before,
 .block_navigation .block_tree [aria-expanded=true] > p:before,
-.dropup .dropdown-toggle::after,
-.dropright .dropdown-toggle::after,
-.dropleft .dropdown-toggle::before,
-.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,
+.dropup .dropdown-toggle::after,
+.dropright .dropdown-toggle::after,
+.dropleft .dropdown-toggle::before,
+.dropdown-toggle::after,
 .far,
 .fa-regular,
 .content-bank-container.view-grid .cb-unlisted::after {
@@ -23243,67 +23243,6 @@ img.resize {
   width: 1em;
 }
 
-.action-menu .dropdown-toggle {
-  text-decoration: none;
-  display: inline-block;
-}
-
-.action-menu {
-  white-space: nowrap;
-  display: inline;
-}
-.action-menu .dropdown-toggle.no-caret::after {
-  display: none;
-}
-.action-menu .dropdown-toggle.no-caret::before {
-  display: none;
-}
-.action-menu .dropdown.downleft .dropdown-subpanel-content {
-  right: 0;
-  left: auto;
-}
-.action-menu .dropdown-subpanel.content-displayed {
-  background-color: #e9ecef;
-}
-.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;
   width: 0.8em;
@@ -25269,31 +25208,6 @@ h3.sectionname .inplaceeditable.inplaceeditingon .editinstructions {
   width: 112px;
 }
 
-.dropdown-item a {
-  display: block;
-  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;
-}
-.dropdown-item[aria-current=true], .dropdown-item[aria-selected=true] {
-  position: relative;
-  display: flex;
-  align-items: center;
-}
-.dropdown-item[aria-current=true]:before, .dropdown-item[aria-selected=true]:before {
-  content: "\f00c";
-  position: absolute;
-  left: 0.4rem;
-  font-size: 0.7rem;
-}
-
 .competency-tree ul {
   padding-left: 1.5rem;
 }
@@ -26083,6 +25997,92 @@ blockquote {
     min-width: calc(300px - 25px);
   }
 }
+.action-menu .dropdown-toggle {
+  text-decoration: none;
+  display: inline-block;
+}
+
+.action-menu {
+  white-space: nowrap;
+  display: inline;
+}
+.action-menu .dropdown-toggle.no-caret::after {
+  display: none;
+}
+.action-menu .dropdown-toggle.no-caret::before {
+  display: none;
+}
+.action-menu .dropdown.downleft .dropdown-subpanel-content {
+  right: 0;
+  left: auto;
+}
+.action-menu .dropdown-subpanel.content-displayed {
+  background-color: #e9ecef;
+}
+.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;
+}
+
+.dropdown-item a {
+  display: block;
+  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;
+}
+.dropdown-item[aria-current=true], .dropdown-item[aria-selected=true] {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+.dropdown-item[aria-current=true]:before, .dropdown-item[aria-selected=true]:before {
+  content: "\f00c";
+  position: absolute;
+  left: 0.4rem;
+  font-size: 0.7rem;
+}
+
 .icon {
   font-size: 16px;
   width: 16px;