@appscode/design-system 1.1.0-beta.2 → 1.1.0-beta.20

package/components/_left-sidebar-menu.scss

@@ -1,52 +1,13 @@
-.ac-system-left-sidebar {
-  min-height: calc(100vh - 50px);
-
-  // &.is-expanded {
-  //   .ac-left-sidebar-wrapper {
-  //     &.style-2 {
-  //       .ac-left-sidebar-inner {
-  //         .ac-left-sidebar {
-  //           .ac-menu-list {
-  //             background-color: $white-100;
-  //           }
-  //         }
-  //       }
-  //     }
-  //   }
-  // }
-
-  &.is-close {
-    .ac-left-sidebar-wrapper {
-      .ac-left-sidebar-inner {
-        .ac-left-sidebar {
-          .menu-list {
-            &.ac-menu-list {
-              li {
-                a {
-                  &.ac-dropdown-button {
-                    .ac-arrow-down {
-                      right: 0px !important;
-                    }
-                  }
-
-                  span {
-                    margin-right: 0px;
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
+// .ac-system-left-sidebar {
+//   min-height: calc(100vh - 50px);
+// }
 
 .ac-left-sidebar-wrapper {
-  background-color: $white-100-lightest;
-  width: 100%;
-  position: sticky;
-  top: 50px;
+  position: fixed;
+  top: 0px;
+  z-index: 9999;
+  background-color: $primary-20;
+  width: 250px;
 
   // ac-left-sidebar-2 start
   // &.style-2 {
@@ -81,7 +42,6 @@
 
   //       .ac-menu-list {
   //         width: 70px;
-  //         // transition: 0.3s ease-in-out;
   //         background-color: $primary-90;
 
   //         li {
@@ -90,12 +50,8 @@
   //             font-weight: 500;
 
   //             &:hover {
-  //               &::after {
-  //                 width: calc(100% - 5px) !important;
-  //               }
-
   //               span {
-  //                 color: $ac-link-black;
+  //                 color: $primary-97;
   //               }
   //             }
 
@@ -134,378 +90,293 @@
   // }
 
   // ac-left-sidebar-2 end
-  .ac-left-sidebar {
-    .ac-product-logo {
-      background-color: transparent;
-      border-bottom: 1px solid $primary-90;
-      height: 50px;
-      display: flex;
-      // justify-content: space-between;
-      padding: 0 10px 0 15px;
-      align-items: center;
-
-      .ac-product-version {
-        font-size: 12px;
-        font-weight: 500;
-        color: $ac-link-black;
-      }
-    }
-
-    .menu-list {
-      &.ac-menu-list {
-        height: calc(100vh - 100px);
-        overflow-y: auto;
-        padding-top: 8px;
-        scrollbar-color: $white-100-light transparent;
-
-        /* width */
-        &::-webkit-scrollbar {
-          display: none;
-        }
-
-        &::-webkit-scrollbar {
-          display: none;
-        }
-
-        li {
-          &.is-open {
-            a {
-              &.ac-dropdown-button {
-                .ac-arrow-down {
-                  transform: rotate(-180deg);
-                  transform-origin: 5px;
-                }
-              }
-            }
-
-            ul {
-              li {
-                a {
-                  strong {
-                    font-weight: 500;
-                  }
-                }
-              }
-            }
-          }
-
-          a {
-            font-style: normal;
-            font-weight: 500;
-            font-size: 13px;
-            line-height: 16px;
-            color: $ac-link-black;
-            position: relative;
-            z-index: 1;
-            padding: 10px 15px 10px 24px;
-            transition: 0.3s ease-in-out;
-            display: flex;
-            align-items: center;
-
-            &:after {
-              position: absolute;
-              content: "";
-              left: 0;
-              top: 0;
-              width: 0;
-              height: 100%;
-              background-color: $white-100-lighter;
-              border-radius: 0 50px 50px 0;
-              z-index: -1;
-              transition: 0.3s ease-in-out;
-            }
-
-            strong {
-              max-width: calc(100% - 65px);
-              // line-break: anywhere;
-              white-space: break-spaces;
-              display: flex;
-              align-items: center;
-              overflow: hidden;
-              font-weight: 500;
-            }
-
-            &.ac-dropdown-button {
-              user-select: none;
-
-              .ac-arrow-down {
-                position: absolute;
-                margin-right: 0;
-                right: 20px;
-                transition: transform 0.3s;
-                transform-origin: 4px;
-              }
-            }
-
-            &:hover {
-              background-color: transparent;
-
-              &:after {
-                width: calc(100% - 15px);
-                color: $primary;
-              }
-
-              span {
-                color: $ac-link-black;
-
-                img {
-                  filter: grayscale(0);
-                }
-              }
-            }
-
-            &.is-active {
-              color: $primary !important;
-              background-color: transparent;
-
-              span {
-                i.fa {
-                  color: $primary;
-                }
-
-                img {
-                  filter: grayscale(0);
-                }
-              }
-
-              &:after,
-              &::before {
-                background: linear-gradient(
-                  89.41deg,
-                  hsla(
-                    var(--hsl-hue),
-                    var(--hsl-saturation),
-                    var(--hsl-lightness),
-                    0.2
-                  ),
-                  rgba(25, 113, 189, 0) 138.7%
-                );
-                position: absolute;
-                content: "";
-                left: 0;
-                top: 0;
-                width: calc(100% - 15px);
-                height: 100%;
-                border-radius: 0 50px 50px 0;
-                z-index: -1;
-              }
-
-              &::before {
-                background-color: $primary;
-                height: 100%;
-                width: 4px;
-                z-index: 9;
-              }
-            }
-
-            span {
-              margin-right: 15px;
-              width: 16px;
-              height: 16px;
-              color: $black-30;
-              font-size: 16px;
-
-              img {
-                width: 100%;
-                filter: grayscale(1);
-                transition: 0.3s ease-in-out;
-              }
-            }
-          }
-
-          ul {
-            max-height: 0;
-            transition: max-height 0.2s ease-out;
-            margin: 0;
-            padding: 0;
-            border-left: none;
-            overflow: hidden;
-
-            li {
-              a {
-                padding-left: 60px;
-                font-size: 12px;
-                padding-top: 10px;
-                padding-bottom: 10px;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
 }
 
-// widget menu end
-// cluster switcher start
-.ac-left-sidebar {
-  .ac-options.is-right {
-    .option-dots {
-      transition: 0.3s;
-
-      i.fa {
-        &.fa-angle-left {
-          font-size: 18px;
-        }
-      }
-
-      &:active {
-        i.fa {
-          background-color: $white-100-lighter;
-          width: 25px;
-          height: 25px;
-          text-align: center;
-          line-height: 25px;
-          border-radius: 50%;
-        }
-      }
-
-      &:hover {
-        color: $primary !important;
-        transform: scale(1.2);
-      }
-    }
-  }
+// .ac-left-sidebar {
+//   .menu-list {
+//     &.ac-menu-list {
+//       height: calc(100vh - 80px);
+//       overflow-y: auto;
+//       padding-top: 4px;
+//       scrollbar-color: $white-100-light transparent;
+
+//       /* width */
+//       &::-webkit-scrollbar {
+//         display: none;
+//       }
 
-  .is-cluster-logo {
-    display: flex;
-    align-items: center;
-    margin-left: -8px;
-    padding: 5px;
-  }
+//       &::-webkit-scrollbar {
+//         display: none;
+//       }
 
-  // .multiselect {
-  //   height: 50px;
+//       li {
+//         &.is-open {
+//           a {
+//             &.ac-dropdown-button {
+//               .ac-arrow-down {
+//                 transform: rotate(-180deg);
+//                 transform-origin: 5px;
+//               }
+//             }
+//           }
 
-  //   // commented out to set full width select box when right content is not present
-  //   // width: 234px;
+//           ul {
+//             li {
+//               a {
+//                 strong {
+//                   font-weight: 500;
+//                 }
+//               }
+//             }
+//           }
+//         }
 
-  //   left: 0px;
-  //   top: -5px;
+//         a {
+//           font-style: normal;
+//           font-weight: 500;
+//           font-size: 13px;
+//           line-height: 16px;
+//           color: $primary-97;
+//           position: relative;
+//           z-index: 1;
+//           padding: 10px 15px 10px 24px;
+//           transition: 0.3s ease-in-out;
+//           display: flex;
+//           align-items: center;
+
+//           &:after {
+//             position: absolute;
+//             content: "";
+//             left: 10px;
+//             top: 0;
+//             width: calc(100% - 20px);
+//             height: 100%;
+//             background: rgba(255, 255, 255, 0.1);
+//             border-radius: 4px;
+//             z-index: -1;
+//             transition: 0.3s ease-in-out;
+//             opacity: 0;
+//             visibility: hidden;
+//           }
 
-  //   .multiselect__select {
-  //     height: 50px;
-  //     top: 4px;
-  //   }
+//           strong {
+//             max-width: calc(100% - 65px);
+//             // line-break: anywhere;
+//             white-space: break-spaces;
+//             display: flex;
+//             align-items: center;
+//             overflow: hidden;
+//             font-weight: 500;
+//           }
 
-  //   .multiselect__tags {
-  //     border: none !important;
-  //     background-color: $black-60;
-  //     min-height: 54px;
-  //     border-radius: 0;
+//           &.ac-dropdown-button {
+//             user-select: none;
 
-  //     .multiselect__placeholder {
-  //       padding-top: 12px !important;
-  //       font-size: 14px;
-  //     }
+//             .ac-arrow-down {
+//               position: absolute;
+//               margin-right: 0;
+//               right: 20px;
+//               transition: transform 0.3s;
+//               transform-origin: 4px;
+//               color: $black-70;
+//             }
+//           }
 
-  //     .multiselect__input {
-  //       background-color: $ac-bg-light-gray !important;
-  //       top: 13px;
+//           &:hover {
+//             background-color: transparent;
 
-  //       &::placeholder {
-  //         font-size: 12px;
-  //         font-weight: 500;
-  //       }
-  //     }
-  //   }
+//             &:after {
+//               color: $primary;
+//               opacity: 0.5;
+//               visibility: visible;
+//             }
 
-  //   .multiselect__single {
-  //     background-color: $ac-bg-light-gray !important;
-  //     top: 14px !important;
+//             span {
+//               color: $primary-97;
 
-  //     img {
-  //       width: 20px;
-  //       margin-right: 8px;
-  //     }
+//               img {
+//                 filter: brightness(10);
+//               }
+//             }
+//           }
 
-  //     span {
-  //       span {
-  //         overflow: hidden;
-  //         text-overflow: ellipsis;
-  //         display: -webkit-box;
-  //         line-clamp: 1;
-  //         -webkit-line-clamp: 1;
-  //         box-orient: vertical;
-  //         -webkit-box-orient: vertical;
-  //       }
-  //     }
-  //   }
-  // }
+//           span {
+//             margin-right: 12px;
+//             width: 16px;
+//             height: 16px;
+//             color: $black-30;
+//             font-size: 16px;
+
+//             img {
+//               width: 100%;
+//               filter: brightness(10);
+//               transition: 0.3s ease-in-out;
+//             }
+//           }
+//         }
+
+//         ul {
+//           max-height: 0;
+//           transition: max-height 0.2s ease-out;
+//           margin: 0;
+//           padding: 0;
+//           border-left: none;
+//           overflow: hidden;
+
+//           li {
+//             a {
+//               padding-left: 52px;
+//               font-size: 12px;
+//               padding-top: 10px;
+//               padding-bottom: 10px;
+//             }
+//           }
+//         }
+//       }
+//     }
+//     a {
+//       &.is-active {
+//         background-color: transparent;
+//         &::after {
+//           opacity: 1 !important;
+//           visibility: visible !important;
+//         }
+//       }
+//     }
+//   }
 
-  // .multiselect__content-wrapper {
-  //   border: 1px solid $primary-90;
+//   // .ac-options.is-right {
+//   //   .option-dots {
+//   //     transition: 0.3s;
+
+//   //     i.fa {
+//   //       &.fa-angle-left {
+//   //         font-size: 18px;
+//   //       }
+//   //     }
+
+//   //     &:active {
+//   //       i.fa {
+//   //         background-color: $white-100-lighter;
+//   //         width: 25px;
+//   //         height: 25px;
+//   //         text-align: center;
+//   //         line-height: 25px;
+//   //         border-radius: 50%;
+//   //       }
+//   //     }
+
+//   //     &:hover {
+//   //       color: $primary !important;
+//   //       transform: scale(1.2);
+//   //     }
+//   //   }
+//   // }
+// }
 
-  //   .multiselect__content {
-  //     .multiselect__element {
-  //       .multiselect__option {
-  //         display: flex;
-  //         align-items: center;
-  //         font-size: 14px;
+// sidebar footer start
 
-  //         img {
-  //           width: 25px;
-  //         }
+// sidebar footer end
+// widget menu end
+// cluster switcher start
+// .ac-left-sidebar {
+//   .is-cluster-logo {
+//     display: flex;
+//     align-items: center;
+//     margin-left: -8px;
+//     padding: 5px;
+//   }
 
-  //         p {
-  //           color: $primary-10;
-  //           font-weight: 500;
-  //         }
+//   .multiselect {
+//     height: 50px;
 
-  //         .location {
-  //           color: $primary-10;
-  //           font-weight: 400;
-  //           opacity: 0.8;
-  //         }
-  //       }
-  //     }
-  //   }
-  // }
-}
+//     // commented out to set full width select box when right content is not present
+//     // width: 234px;
 
-// cluster switcher end
+//     left: 0px;
+//     top: -5px;
 
-// dark theme start
-// .is-dark-theme {
-//   body {
-//     .ac-system-body {
-//       .ac-system-left-sidebar {
-//         background-color: var(--dark-bg);
+//     .multiselect__select {
+//       height: 50px;
+//       top: 4px;
+//     }
+
+//     .multiselect__tags {
+//       border: none !important;
+//       background-color: $black-60;
+//       min-height: 54px;
+//       border-radius: 0;
+
+//       .multiselect__placeholder {
+//         padding-top: 12px !important;
+//         font-size: 14px;
+//       }
+
+//       .multiselect__input {
+//         background-color: $ac-bg-light-gray !important;
+//         top: 13px;
+
+//         &::placeholder {
+//           font-size: 12px;
+//           font-weight: 500;
+//         }
 //       }
 //     }
 
-//     .ac-left-sidebar-wrapper {
-//       .ac-left-sidebar-inner {
-//         .ac-left-sidebar {
-//           .menu-list {
-//             &.ac-menu-list {
-//               li {
-//                 a {
-//                   &.is-active {
-//                     font-weight: 500;
-//                     color: $ac-full-white !important;
-
-//                     span {
-//                       i.fa {
-//                         color: $primary;
-//                       }
-//                     }
-
-//                     &:after {
-//                       background: var(--dark-bg-light) !important;
-//                     }
-//                   }
-//                 }
-//               }
-//             }
+//     .multiselect__single {
+//       background-color: $ac-bg-light-gray !important;
+//       top: 14px !important;
+
+//       img {
+//         width: 20px;
+//         margin-right: 8px;
+//       }
+
+//       span {
+//         span {
+//           overflow: hidden;
+//           text-overflow: ellipsis;
+//           display: -webkit-box;
+//           line-clamp: 1;
+//           -webkit-line-clamp: 1;
+//           box-orient: vertical;
+//           -webkit-box-orient: vertical;
+//         }
+//       }
+//     }
+//   }
+
+//   .multiselect__content-wrapper {
+//     border: 1px solid $primary-90;
+
+//     .multiselect__content {
+//       .multiselect__element {
+//         .multiselect__option {
+//           display: flex;
+//           align-items: center;
+//           font-size: 14px;
+
+//           img {
+//             width: 25px;
+//           }
+
+//           p {
+//             color: $primary-10;
+//             font-weight: 500;
+//           }
+
+//           .location {
+//             color: $primary-10;
+//             font-weight: 400;
+//             opacity: 0.8;
 //           }
 //         }
 //       }
 //     }
 //   }
 // }
+// cluster switcher end
 
-// dark theme end
 /****************************************
 Responsive Classes
 *****************************************/
@@ -515,87 +386,87 @@ Responsive Classes
     display: none;
   }
 
-  .ac-left-sidebar-wrapper {
-    &.style-2 {
-      .menu-list {
-        &.ac-menu-list {
-          li {
-            .dropdown-2 {
-              ul {
-                li {
-                  background-color: $white-100;
-                }
-              }
-            }
-
-            a {
-              text-align: left;
-            }
-          }
-        }
-      }
-    }
-
-    .ac-left-sidebar-inner {
-      .ac-left-sidebar {
-        .ac-product-logo {
-          .ac-product-version {
-            display: none;
-          }
-        }
-
-        .menu-list {
-          &.ac-menu-list {
-            li {
-              a {
-                padding: 10px 15px 10px 24px;
-                text-align: center;
-
-                strong {
-                  display: none;
-                }
-
-                &.is-active {
-                  &:after {
-                    width: calc(100% - 5px);
-                  }
-                }
-
-                &:hover {
-                  &:after {
-                    width: calc(100% - 5px);
-                  }
-
-                  span {
-                    color: $ac-link-black;
-                  }
-                }
-              }
-
-              .ac-dropdown-button {
-                .ac-arrow-down {
-                  right: 10px !important;
-                }
-              }
-
-              ul {
-                max-height: 0;
-                transition: max-height 0.2s ease-out;
-                background-color: $ac-bg;
-
-                li {
-                  a {
-                    padding: 10px 15px 10px 24px;
-                    text-align: center;
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
+  // .ac-left-sidebar-wrapper {
+  //   &.style-2 {
+  //     .menu-list {
+  //       &.ac-menu-list {
+  //         li {
+  //           .dropdown-2 {
+  //             ul {
+  //               li {
+  //                 background-color: $white-100;
+  //               }
+  //             }
+  //           }
+
+  //           a {
+  //             text-align: left;
+  //           }
+  //         }
+  //       }
+  //     }
+  //   }
+
+  //   .ac-left-sidebar-inner {
+  //     .ac-left-sidebar {
+  //       .ac-product-logo {
+  //         .ac-product-version {
+  //           display: none;
+  //         }
+  //       }
+
+  //       .menu-list {
+  //         &.ac-menu-list {
+  //           li {
+  //             a {
+  //               padding: 10px 15px 10px 24px;
+  //               text-align: center;
+
+  //               strong {
+  //                 display: none;
+  //               }
+
+  //               // &.is-active {
+  //               //   &:after {
+  //               //     width: calc(100% - 5px);
+  //               //   }
+  //               // }
+
+  //               &:hover {
+  //                 // &:after {
+  //                 //   width: calc(100% - 5px);
+  //                 // }
+
+  //                 span {
+  //                   color: $primary-97;
+  //                 }
+  //               }
+  //             }
+
+  //             .ac-dropdown-button {
+  //               .ac-arrow-down {
+  //                 right: 10px !important;
+  //               }
+  //             }
+
+  //             ul {
+  //               max-height: 0;
+  //               transition: max-height 0.2s ease-out;
+  //               background-color: $ac-bg;
+
+  //               li {
+  //                 a {
+  //                   padding: 10px 15px 10px 24px;
+  //                   text-align: center;
+  //                 }
+  //               }
+  //             }
+  //           }
+  //         }
+  //       }
+  //     }
+  //   }
+  // }
 }
 
 // Small devices (landscape phones, 576px and up)