@appscode/design-system 2.0.5 → 2.0.6-alpha.1

package/components/_left-sidebar-menu.scss

@@ -1,482 +0,0 @@
-// .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) {}