@appscode/design-system 2.0.6-alpha.2 → 2.0.7

package/components/_left-sidebar-menu.scss

@@ -0,0 +1,482 @@
+// .ac-system-left-sidebar {
+//   min-height: calc(100vh - 50px);
+// }
+
+.ac-left-sidebar-wrapper {
+  position: fixed;
+  top: 0px;
+  z-index: 9999;
+  background-color: $primary-20;
+  width: 250px;
+
+  // ac-left-sidebar-2 start
+  // &.style-2 {
+  //   .ac-left-sidebar-inner {
+  //     .ac-left-sidebar {
+  //       .ac-product-logo {
+  //         padding-left: 10px;
+  //         padding-right: 10px;
+  //         justify-content: center;
+
+  //         .ac-product-version {
+  //           p {
+  //             font-size: 11px;
+  //             line-height: 1.2;
+  //           }
+  //         }
+  //       }
+
+  //       .button {
+  //         &.is-transparent {
+  //           width: 70px;
+  //         }
+  //       }
+
+  //       .ac-product-logo {
+  //         padding-left: 20px;
+  //         justify-content: inherit;
+  //         display: flex;
+  //         height: 50px;
+  //         width: 70px !important;
+  //       }
+
+  //       .ac-menu-list {
+  //         width: 70px;
+  //         background-color: $primary-90;
+
+  //         li {
+  //           a {
+  //             padding: 12px 15px 12px 26px !important;
+  //             font-weight: 500;
+
+  //             &:hover {
+  //               span {
+  //                 color: $primary-97;
+  //               }
+  //             }
+
+  //             &.ac-dropdown-button {
+  //               .ac-arrow-down {
+  //                 right: 8px !important;
+  //               }
+  //             }
+  //           }
+
+  //           &.is-open {
+  //             ul {
+  //               li {
+  //                 a {
+  //                   padding-left: 25px;
+  //                   background-color: $white-100;
+  //                 }
+  //               }
+  //             }
+  //           }
+
+  //           a {
+  //             strong {
+  //               display: none;
+  //             }
+
+  //             span {
+  //               padding: 0;
+  //               margin-right: 0;
+  //             }
+  //           }
+  //         }
+  //       }
+  //     }
+  //   }
+  // }
+
+  // ac-left-sidebar-2 end
+}
+
+// .ac-left-sidebar {
+//   .menu-list {
+//     &.ac-menu-list {
+//       height: calc(100vh - 80px);
+//       overflow-y: auto;
+//       padding-top: 4px;
+//       scrollbar-color: $white-100 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: $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;
+//           }
+
+//           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;
+//               color: $black-70;
+//             }
+//           }
+
+//           &:hover {
+//             background-color: transparent;
+
+//             &:after {
+//               color: $primary;
+//               opacity: 0.5;
+//               visibility: visible;
+//             }
+
+//             span {
+//               color: $primary-97;
+
+//               img {
+//                 filter: brightness(10);
+//               }
+//             }
+//           }
+
+//           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;
+//         }
+//       }
+//     }
+//   }
+
+//   // .ac-options.is-right {
+//   //   .option-dots {
+//   //     transition: 0.3s;
+
+//   //     i.fa {
+//   //       &.fa-angle-left {
+//   //         font-size: 18px;
+//   //       }
+//   //     }
+
+//   //     &:active {
+//   //       i.fa {
+//   //         background-color: $primary-90;
+//   //         width: 25px;
+//   //         height: 25px;
+//   //         text-align: center;
+//   //         line-height: 25px;
+//   //         border-radius: 50%;
+//   //       }
+//   //     }
+
+//   //     &:hover {
+//   //       color: $primary !important;
+//   //       transform: scale(1.2);
+//   //     }
+//   //   }
+//   // }
+// }
+
+// sidebar footer start
+
+// 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;
+//   }
+
+//   .multiselect {
+//     height: 50px;
+
+//     // commented out to set full width select box when right content is not present
+//     // width: 234px;
+
+//     left: 0px;
+//     top: -5px;
+
+//     .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: transparent-light-gray !important;
+//         top: 13px;
+
+//         &::placeholder {
+//           font-size: 12px;
+//           font-weight: 500;
+//         }
+//       }
+//     }
+
+//     .multiselect__single {
+//       background-color: transparent-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
+
+/****************************************
+Responsive Classes
+*****************************************/
+// Extra small devices (portrait phones, less than 576px)
+@media (max-width: 575.98px) {
+  .desktop-only {
+    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: $primary-97;
+  //                 }
+  //               }
+  //             }
+
+  //             .ac-dropdown-button {
+  //               .ac-arrow-down {
+  //                 right: 10px !important;
+  //               }
+  //             }
+
+  //             ul {
+  //               max-height: 0;
+  //               transition: max-height 0.2s ease-out;
+  //               background-color: transparent;
+
+  //               li {
+  //                 a {
+  //                   padding: 10px 15px 10px 24px;
+  //                   text-align: center;
+  //                 }
+  //               }
+  //             }
+  //           }
+  //         }
+  //       }
+  //     }
+  //   }
+  // }
+}
+
+// Small devices (landscape phones, 576px and up)
+@media (min-width: 576px) and (max-width: 767.98px) {}
+
+// Medium devices (tablets, 768px and up)
+@media (min-width: 768px) and (max-width: 991.98px) {}
+
+// Large devices (desktops, 992px and up)
+@media (min-width: 992px) and (max-width: 1199.98px) {}
+
+// Extra large devices (large desktops, 1200px and up)
+@media (min-width: 1200px) {}