styles: Add btn-toggle styles to generate vertical menus #TASK-7216 #…

…TASK-7100
opencb · Jan 20, 2025 · 22a495a · 22a495a
1 parent 3ba3643
commit 22a495a
Showing 1 changed file with 25 additions and 0 deletions.
diff --git a/styles/jsorolla-ui.scss b/styles/jsorolla-ui.scss
@@ -80,6 +80,31 @@ body {
     --bs-btn-border-color: #{$gray-200};
     --bs-btn-border-width: #{$border-width};
 }
+// button toggle styles from https://getbootstrap.com/docs/5.3/examples/sidebars/sidebars.css
+.btn-toggle {
+    padding: 0.25rem 0.5rem;
+    font-weight: 600;
+    color: var(--bs-emphasis-color);
+    background-color: transparent;
+}
+.btn-toggle:hover,
+.btn-toggle:focus {
+    color: rgba(var(--bs-emphasis-color-rgb), .85);
+    background-color: var(--bs-tertiary-bg);
+}
+.btn-toggle::before {
+    width: 1.25em;
+    line-height: 0;
+    content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
+    transition: transform .35s ease;
+    transform-origin: .5em 50%;
+}
+.btn-toggle[aria-expanded="true"] {
+    color: rgba(var(--bs-emphasis-color-rgb), .85);
+}
+.btn-toggle[aria-expanded="true"]::before {
+    transform: rotate(90deg);
+}
 
 // additional color utilities
 // Note: the $grays map is a Sass map that contains all the gray colors