Allow changing colors of the collapse/expand (#1542)

Without having to change the navbar color
projectblacklight · Jun 7, 2024 · 12834c0 · 12834c0
1 parent cd324d9
commit 12834c0
Showing 1 changed file with 10 additions and 11 deletions.
diff --git a/app/assets/stylesheets/arclight/modules/hierarchy_and_online_contents.scss b/app/assets/stylesheets/arclight/modules/hierarchy_and_online_contents.scss
@@ -1,24 +1,23 @@
-//< !-- ! Font Awesome Pro 6.2.0 by @fontawesome - https: //fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
-$hierarchy-view-expand-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><path fill='#{$navbar-light-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zM200 344V280H136c-13.3 0-24-10.7-24-24s10.7-24 24-24h64V168c0-13.3 10.7-24 24-24s24 10.7 24 24v64h64c13.3 0 24 10.7 24 24s-10.7 24-24 24H248v64c0 13.3-10.7 24-24 24s-24-10.7-24-24z'/></svg>") !default;
-$hierarchy-view-collapse-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><path fill='#{$navbar-light-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zm88 200H296c13.3 0 24 10.7 24 24s-10.7 24-24 24H152c-13.3 0-24-10.7-24-24s10.7-24 24-24z'/></svg>") !default;
+:root {
+  --al-toggle-icon-color: #{$navbar-light-color};
+  /* Font Awesome Free 6.5.2 by @fontawesome - https: //fontawesome.com License - https://fontawesome.com/license/free (CC BY 4.0 License) Copyright 2024 Fonticons, Inc. */
+  --al-hierarchy-view-expand-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 475 512'><path stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' stroke='rgb(0, 0, 0)' fill='rgb(0, 0, 0)' d='M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zM200 344V280H136c-13.3 0-24-10.7-24-24s10.7-24 24-24h64V168c0-13.3 10.7-24 24-24s24 10.7 24 24v64h64c13.3 0 24 10.7 24 24s-10.7 24-24 24H248v64c0 13.3-10.7 24-24 24s-24-10.7-24-24z'/></svg>");
+  --al-hierarchy-view-collapse-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 475 512'><path stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' stroke='rgb(0, 0, 0)' fill='rgb(0, 0, 0)' d='M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zm88 200H296c13.3 0 24 10.7 24 24s-10.7 24-24 24H152c-13.3 0-24-10.7-24-24s10.7-24 24-24z'/></svg>");
+}
 
 // Collapse +/- indicators
 .al-toggle-view-children {
-  background-image: escape-svg($hierarchy-view-expand-icon);
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: 100%;
-  display: inline-block;
+  background-color: var(--al-toggle-icon-color);
   flex-shrink: 0;
   height: 1.25rem;
   margin-left: -1.25rem;
   margin-right: 0.25 * $spacer;
   margin-top: 0.1 * $spacer;
-  vertical-align: middle;
-  width: 1rem;
+  mask: var(--al-hierarchy-view-expand-icon);
+  width: 1.1rem;
 
   &:not(.collapsed) {
-    background-image: escape-svg($hierarchy-view-collapse-icon);
+    mask: var(--al-hierarchy-view-collapse-icon);
   }
 }