MID-6271 execute options panel cleanup, details navigation (some impr…

…ovements)

gui/admin-gui/src/frontend/scss/details-menu.scss

@@ -0,0 +1,199 @@
+/*!
+ * Copyright (c) 2022 Evolveum and contributors
+ *
+ * This work is dual-licensed under the Apache License 2.0
+ * and European Union Public License. See LICENSE file for details.
+ */
+
+@import "@fortawesome/fontawesome-free/scss/mixins";
+
+//Expanded
+//$media screen and (min-width: $screen-lg) {
+.details-menu {
+  height: 100%;
+  width: 100%;
+  //position: fixed;
+  z-index: 1;
+  //top: 0;
+  right: 0;
+  overflow-x: hidden;
+  padding-top: 16px;
+
+  & > li.navigation-details {
+    list-style: none;
+    margin: 0px 10px 0px 5px;
+
+    .navigation-details {
+      display: none;
+
+      &.active {
+        background-color: #eeeeee;  //TODO: change to constant
+      }
+      //&.open {
+      //  display: block;
+      //}
+    }
+
+    &.active {
+      background-color: #eeeeee;  //TODO change to constant
+      list-style: none;
+
+      .navigation-details {
+        display: block;
+      }
+    }
+    &.open {
+      display: block;
+
+      .navigation-details {
+        display: block;
+      }
+
+      > a > .fa-angle-left {
+        @include fa-icon-rotate(270deg, 3);
+      }
+    }
+  }
+
+  .details-menu {
+    padding-top: 0px;
+    background-color: $sidebar-light-submenu-bg;
+  }
+}
+//}
+
+//Collapsed
+//@media screen and (max-width: $screen-lg-min) {
+//  .details-menu {
+//    height: 100%;
+//    width: 100%;
+//    //position: fixed;
+//    z-index: 1;
+//    right: 0;
+//    background-color: $sidebar-light-bg;
+//    overflow-x: hidden;
+//    padding-top: 16px;
+//
+//    > li.navigation-details {
+//      list-style: none;
+//      margin: 0px 10px 0px 5px;
+//
+//      > a > i {
+//        width: 100%;
+//      }
+//
+//      & .pull-right-container {
+//        display: none;
+//      }
+//    }
+//
+//    > li.navigation-details:hover {
+//      > a > .details-menu-label:first-of-type {
+//        display: block !important;
+//        right: 132px;
+//        position: absolute;
+//        list-style: none;
+//        margin-top: -20px;
+//        background-color: inherit;
+//      }
+//
+//
+//
+//      .details-menu {
+//        display: block !important;
+//        right: 132px;
+//        position: absolute;
+//        list-style: none;
+//
+//        .navigation-details {
+//          display: block;
+//
+//          & a > .details-menu-label {
+//            display: block;
+//          }
+//        }
+//      }
+//
+//      //  margin: 0px 10px 0px 5px;
+//    }
+//
+//    //& > li.navigation-details {
+//    //  list-style: none;
+//    //  margin: 0px 10px 0px 5px;
+//    //
+//    //  .navigation-details {
+//    //    display: none;
+//    //  }
+//
+//      //&:hover {
+//      //  .details-menu {
+//      //
+//      //
+//      //    .navigation-details {
+//      //      display: block;
+//      //    }
+//      //
+//      //    .details-menu-label {
+//      //      display: block;
+//      //    }
+//      //  }
+//      //
+//      //  .details-menu a >
+//      //  .details-menu-label {
+//      //    display: block;
+//      //  }
+//      //}
+//
+//      //&.active {
+//      //  background-color: #eeeeee;
+//      //  list-style: none;
+//      //
+//      //  .navigation-details {
+//      //    display: block;
+//      //  }
+//      //}
+//    //}
+//
+//    .details-menu {
+//      padding-top: 0px;
+//    }
+//  }
+//}
+
+//@media screen and (max-width: $screen-lg-min) {
+//  .details-menu a >
+//  .details-menu-label {
+//    display: none;
+//  }
+//}
+
+
+.details-menu a {
+  padding: 6px 8px 6px 5px;
+  text-decoration: none;
+  font-size: 15px;
+  color: $sidebar-light-color;
+  display: block;
+  cursor: pointer;
+
+  & > i {
+    padding-right: 5px;
+
+    &.fa {
+      width: 20px;
+    }
+
+    &.fe {
+      width: 20px;
+    }
+  }
+}
+
+.details-menu a:hover {
+  color: $sidebar-light-hover-color;
+  background-color: $sidebar-light-hover-bg;
+}
+
+ul.details-menu {
+  padding-inline-start: 13px;
+}