MID-7963 list group menu styles, part two. dark mode/small version no…

…t yet ready
Evolveum · Jun 9, 2022 · 47f61a1 · 47f61a1
1 parent 2cd0214
commit 47f61a1
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 48 deletions.
diff --git a/gui/admin-gui/src/frontend/scss/_list-group-menu.scss b/gui/admin-gui/src/frontend/scss/_list-group-menu.scss
@@ -11,11 +11,12 @@
   margin-bottom: 0;
 }
 
-.list-group-menu {
+@mixin list-group-menu() {
   display: flex;
   flex-direction: column;
   width: 100%;
   min-width: 273px;
+
   @include list-reset();
 
   & ul, li {
@@ -26,33 +27,17 @@
   @include border-radius($list-group-border-radius);
 }
 
-.list-group-menu-item {
+@mixin list-group-menu-item() {
   display: flex;
   flex-direction: column;
   color: $list-group-color;
   background-color: $list-group-bg;
-  border: $list-group-border-width solid $list-group-border-color;
-
-  &:first-child {
-    @include border-top-radius(inherit);
-
-    & > a {
-      @include border-top-radius(inherit);
-    }
-  }
-
-  &:last-child {
-    @include border-bottom-radius(inherit);
-
-    & > a:last-child {
-      @include border-bottom-radius(inherit);
-    }
-  }
 
   & > a {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
+    // todo for "sm" version 0.5rem 1rem
     padding: $list-group-item-padding-y $list-group-item-padding-x;
     color: inherit;
 
@@ -86,6 +71,36 @@
     & > i.icon {
       margin-right: 1rem;
     }
+
+    & > span.label {
+      flex-grow: 1;
+    }
+  }
+}
+
+.list-group-menu {
+  @include list-group-menu();
+}
+
+.list-group-menu-item {
+  @include list-group-menu-item;
+
+  border: $list-group-border-width solid $list-group-border-color;
+
+  &:first-child {
+    @include border-top-radius(inherit);
+
+    & > a {
+      @include border-top-radius(inherit);
+    }
+  }
+
+  &:last-child {
+    @include border-bottom-radius(inherit);
+
+    & > a:last-child {
+      @include border-bottom-radius(inherit);
+    }
   }
 
   & + & {
@@ -96,18 +111,24 @@
       border-top-width: $list-group-border-width;
     }
   }
+}
 
-  // 2nd and 3rd menu level
-  // todo finish left padding, active/hover/disabled states
-  & > ul > li {
-    border: 0;
+.list-group-submenu {
+  @include list-group-menu();
+}
 
-    & > a {
-      padding-left: 2rem;
+.list-group-submenu-item {
+  @include list-group-menu-item;
 
-      & > ul > li >a {
-        padding-left: 3rem;
-      }
-    }
+  & .list-group-submenu > .list-group-submenu-item > a {
+    padding-left: 3.25rem;
+  }
+
+  & > a {
+    padding-left: 2rem;
   }
 }
+
+@include dark-mode () {
+  // todo dark mode
+}
diff --git a/gui/admin-gui/src/main/java/com/evolveum/midpoint/gui/impl/page/self/PageRequestAccess.html b/gui/admin-gui/src/main/java/com/evolveum/midpoint/gui/impl/page/self/PageRequestAccess.html
@@ -17,27 +17,27 @@
             <li class="list-group-menu-item">
                 <a href="#" class="active">
                     <i class="icon fa fa-fw fa-border-all"></i>
-                    <span class="flex-grow-1">All roles</span>
+                    <span class="label">All roles</span>
                 </a>
             </li>
             <li class="list-group-menu-item">
                 <a href="#">
                     <i class="icon fa fa-fw fa-users"></i>
-                    <span class="flex-grow-1">Roles of team mate</span>
+                    <span class="label">Roles of team mate</span>
                     <span class="badge badge-primary badge-pill">14</span>
                 </a>
             </li>
             <li class="list-group-menu-item">
                 <a href="#">
                     <i class="icon fa fa-fw fa-users"></i>
-                    <span class="flex-grow-1">Roles of team mate</span>
+                    <span class="label">Roles of team mate</span>
                     <i class="fa fa-chevron-left"></i>
                 </a>
             </li>
             <li class="list-group-menu-item">
                 <a href="#" class="active">
                     <i class="icon fa fa-fw fa-users"></i>
-                    <span class="flex-grow-1">Roles of team mate</span>
+                    <span class="label">Roles of team mate</span>
                     <i class="fa fa-chevron-down"></i>
                 </a>
                 <select class="form-control m-3 w-auto">
@@ -47,49 +47,49 @@
             <li class="list-group-menu-item">
                 <a href="#" style="color: #495057;">
                     <i class="icon fa fa-fw fa-puzzle-piece"></i>
-                    <span class="flex-grow-1">Applications</span>
+                    <span class="label">Applications</span>
                     <i class="fa fa-chevron-left"></i>
                 </a>
             </li>
             <li class="list-group-menu-item">
                 <a href="#" class="active">
                     <i class="icon fa fa-fw fa-puzzle-piece"></i>
-                    <span class="flex-grow-1">Applications</span>
+                    <span class="label">Applications</span>
                     <i class="fa fa-chevron-down"></i>
                 </a>
-                <ul>
-                    <li class="list-group-menu-item">
+                <ul class="list-group-submenu">
+                    <li class="list-group-submenu-item">
                         <a class="">
                             <i class="icon far fa-fw fa-circle"></i>
-                            <span class="flex-grow-1">Microsoft</span>
+                            <span class="label">Microsoft</span>
                         </a>
                     </li>
-                    <li class="list-group-menu-item">
+                    <li class="list-group-submenu-item">
                         <a class="">
                             <i class="icon far fa-fw fa-circle"></i>
-                            <span class="flex-grow-1">Google</span>
+                            <span class="label">Google</span>
                             <i class="fa fa-chevron-left"></i>
                         </a>
                     </li>
-                    <li class="list-group-menu-item">
+                    <li class="list-group-submenu-item">
                         <a class="">
                             <i class="icon far fa-fw fa-circle"></i>
-                            <span class="flex-grow-1">SAP</span>
+                            <span class="label">SAP</span>
                             <i class="fa fa-chevron-down"></i>
                         </a>
-                        <ul>
-                            <li class="list-group-menu-item">
+                        <ul class="list-group-submenu">
+                            <li class="list-group-submenu-item">
                                 <a class="">
                                     <i class="icon far fa-fw fa-circle"></i>
-                                    <span class="flex-grow-1">3rd level</span>
+                                    <span class="label">3rd level</span>
                                 </a>
                             </li>
                         </ul>
                     </li>
-                    <li class="list-group-menu-item">
-                        <a class="">
+                    <li class="list-group-submenu-item">
+                        <a class="disabled">
                             <i class="icon far fa-fw fa-circle"></i>
-                            <span class="flex-grow-1">Unsorted</span>
+                            <span class="label">Unsorted</span>
                         </a>
                     </li>
                 </ul>