@appscode/design-system 1.1.0 → 2.0.1

package/components/_left-sidebar-menu.scss

@@ -1,513 +1,382 @@
-.ac-system-left-sidebar {
-  min-height: calc(100vh - 50px);
-
-  &.is-expanded {
-    .ac-left-sidebar-wrapper {
-      &.style-2 {
-        .ac-lef-sidebar-inner {
-          .ac-left-sidebar {
-            .ac-menu-list {
-              background-color: $ac-white;
-            }
-          }
-        }
-      }
-    }
-  }
-
-  &.is-close {
-    .ac-left-sidebar-wrapper {
-      .ac-lef-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: $ac-white-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 {
-    .ac-lef-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;
-          // transition: 0.3s ease-in-out;
-          background-color: $ac-white-light;
-
-          li {
-            a {
-              padding: 12px 15px 12px 26px !important;
-              font-weight: 500;
-
-              &:hover {
-                &::after {
-                  width: calc(100% - 5px) !important;
-                }
-
-                span {
-                  color: $ac-link-black;
-                }
-              }
-
-              &.ac-dropdown-button {
-                .ac-arrow-down {
-                  right: 8px !important;
-                }
-              }
-            }
-
-            &.is-open {
-              ul {
-                li {
-                  a {
-                    padding-left: 25px;
-                    background-color: $ac-white;
-                  }
-                }
-              }
-            }
-
-            a {
-              strong {
-                display: none;
-              }
-
-              span {
-                padding: 0;
-                margin-right: 0;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
+  // &.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-lef-sidebar-inner {
-    .ac-left-sidebar {
-      .ac-product-logo {
-        background-color: transparent;
-        border-bottom: 1px solid $ac-white-light;
-        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: $ac-white-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: $font-size-small;
-              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: $ac-white-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: $ac-primary;
-                }
-
-                span {
-                  color: $ac-link-black;
-
-                  img {
-                    filter: grayscale(0);
-                  }
-                }
-              }
-
-              &.is-active {
-                color: $ac-primary !important;
-                background-color: transparent;
-
-                span {
-                  i.fa {
-                    color: $ac-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: $ac-primary;
-                  height: 100%;
-                  width: 4px;
-                  z-index: 9;
-                }
-              }
-
-              span {
-                margin-right: 15px;
-                width: 16px;
-                height: 16px;
-                color: $ac-gray-dark;
-                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: $font-size-extra-small;
-                  padding-top: 10px;
-                  padding-bottom: 10px;
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
 }
 
+// .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 {
-  .ac-options.is-right {
-    .option-dots {
-      transition: 0.3s;
-
-      i.fa {
-        &.fa-angle-left {
-          font-size: 18px;
-        }
-      }
-
-      &:active {
-        i.fa {
-          background-color: $ac-white-lighter;
-          width: 25px;
-          height: 25px;
-          text-align: center;
-          line-height: 25px;
-          border-radius: 50%;
-        }
-      }
-
-      &:hover {
-        color: $ac-primary !important;
-        transform: scale(1.2);
-      }
-    }
-  }
-
-  .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: $ac-bg-light-gray;
-      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;
-        }
-      }
-    }
-
-    .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 $ac-white-light;
-
-    .multiselect__content {
-      .multiselect__element {
-        .multiselect__option {
-          display: flex;
-          align-items: center;
-          font-size: 14px;
-
-          img {
-            width: 25px;
-          }
-
-          p {
-            color: $ac-color-text;
-            font-weight: 500;
-          }
-
-          .location {
-            color: $ac-color-text;
-            font-weight: 400;
-            opacity: 0.8;
-          }
-        }
-      }
-    }
-  }
-}
-
+// .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
 
-// dark theme start
-.is-dark-theme {
-  body {
-    .ac-system-body {
-      .ac-system-left-sidebar {
-        background-color: var(--dark-bg);
-      }
-    }
-
-    .ac-left-sidebar-wrapper {
-      .ac-lef-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: $ac-primary;
-                      }
-                    }
-
-                    &:after {
-                      background: var(--dark-bg-light) !important;
-                    }
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-// dark theme end
 /****************************************
 Responsive Classes
 *****************************************/
@@ -517,101 +386,97 @@ Responsive Classes
     display: none;
   }
 
-  .ac-left-sidebar-wrapper {
-    &.style-2 {
-      .menu-list {
-        &.ac-menu-list {
-          li {
-            .dropdown-2 {
-              ul {
-                li {
-                  background-color: $ac-white;
-                }
-              }
-            }
-
-            a {
-              text-align: left;
-            }
-          }
-        }
-      }
-    }
-
-    .ac-lef-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: 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) {
-}
+@media (min-width: 576px) and (max-width: 767.98px) {}
 
 // Medium devices (tablets, 768px and up)
-@media (min-width: 768px) and (max-width: 991.98px) {
-}
+@media (min-width: 768px) and (max-width: 991.98px) {}
 
 // Large devices (desktops, 992px and up)
-@media (min-width: 992px) and (max-width: 1199.98px) {
-}
+@media (min-width: 992px) and (max-width: 1199.98px) {}
 
 // Extra large devices (large desktops, 1200px and up)
-@media (min-width: 1200px) {
-}
+@media (min-width: 1200px) {}