@appscode/design-system 1.1.0 → 2.0.1

package/components/_widget-menu.scss

@@ -1,272 +1,267 @@
 // widget menu start
-.widget-menu {
-  &.style-2 {
-    position: sticky;
-    top: 50px;
-    .menu-list-wrapper {
-      li {
-        a {
-          font-size: 13px;
-          font-weight: 400;
-          color: $ac-color-text;
-          display: block;
-          padding: 7px 10px;
-          padding-left: 20px;
-
-          &.is-active {
-            background-color: $ac-bg;
-            color: $ac-primary;
-          }
-
-          .fa {
-            color: #00a651;
-            float: right;
-            margin-top: 4px;
-
-            &.fa-times-circle {
-              color: $ac-danger;
-            }
-          }
-        }
-      }
-
-      .menu-list {
-        position: relative;
-        left: -5px;
-        top: -3px;
-        z-index: 1;
-        margin-left: 15px;
-
-        // &::before {
-        //   position: absolute;
-        //   z-index: 2;
-        //   content: "";
-        //   left: 10px;
-        //   top: -17px;
-        //   width: 6px;
-        //   height: 6px;
-        //   border-radius: 50%;
-        //   background-color: $ac-color-value;
-        // }
-
-        &::after {
-          position: absolute;
-          z-index: 1;
-          content: "";
-          left: 12.5px;
-          top: -7px;
-          width: 1px;
-          height: calc(100% - 4px);
-          background-color: $ac-color-value;
-        }
-
-        li {
-          position: relative;
-          z-index: 1;
-          padding-left: 25px;
-
-          &::before {
-            position: absolute;
-            z-index: 2;
-            content: "";
-            left: 30px;
-            top: 15px;
-            width: 7px;
-            height: 7px;
-            border-radius: 50%;
-            background-color: $ac-color-value;
-          }
-
-          &::after {
-            position: absolute;
-            content: "";
-            left: 13px;
-            top: 18.4px;
-            width: 20px;
-            height: 1px;
-            background-color: $ac-color-value;
-            z-index: 9;
-          }
-
-          a {
-            font-size: 13px;
-            font-weight: 500;
-            color: $ac-color-text;
-
-            &:hover {
-              color: $ac-primary;
-              background-color: transparent;
-            }
-          }
-
-          ul {
-            padding-left: 0;
-            padding: 0;
-            margin: 0;
-            border-left: none;
-          }
-        }
-      }
-    }
-  }
-
-  .general-information {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 10px 15px 10px 20px;
-
-    p {
-      font-weight: 500;
-      font-weight: 13px;
-    }
-
-    i.fa-check-circle {
-      padding-left: 30px;
-      color: #00a651;
-    }
-  }
-
-  // title start
-  .menu-title {
-    display: flex;
-    align-items: center;
-    width: 100%;
-    justify-content: space-between;
-    padding: 18px;
-    background-color: $ac-white-light;
-
-    p {
-      font-size: 13px;
-      font-weight: 600;
-      color: $ac-color-text;
-    }
-  }
-
-  // title end
-
-  .widget-menu-inner {
-    a {
-      padding: 10px;
-      justify-content: center;
-      padding-left: 20px;
-      display: block;
-      background-color: $ac-white;
-      text-align: left;
-      color: $ac-color-text;
-      font-size: 13px;
-      font-weight: 500;
-
-      &:hover {
-        &:after {
-          width: 100%;
-          border-radius: 0;
-          background-color: $ac-bg;
-        }
-      }
-    }
-
-    .dropdown-2 {
-      position: relative;
-      z-index: 1;
-
-      &:hover {
-        &::after {
-          display: none;
-        }
-      }
-
-      span {
-        i {
-          &.fa {
-            right: 15px;
-            position: absolute;
-          }
-        }
-      }
-
-      ul {
-        position: relative;
-        left: 0;
-        top: 10px;
-        z-index: 1;
-
-        &::after {
-          position: absolute;
-          z-index: 1;
-          content: "";
-          left: 2.5px;
-          top: 0;
-          width: 1px;
-          height: calc(100% - 22px);
-          background-color: $ac-color-value;
-        }
-
-        &::before {
-          position: absolute;
-          z-index: 2;
-          content: "";
-          left: 0;
-          top: 0;
-          width: 6px;
-          height: 6px;
-          border-radius: 50%;
-          background-color: $ac-color-value;
-        }
-
-        li {
-          position: relative;
-          z-index: 1;
-          padding-left: 15px;
-
-          &:after {
-            position: absolute;
-            content: "";
-            left: 3px;
-            bottom: 22px;
-            width: 20px;
-            height: 1px;
-            background-color: $ac-color-value;
-            z-index: 9;
-          }
-
-          &::before {
-            position: absolute;
-            z-index: 2;
-            content: "";
-            left: 20px;
-            bottom: 19.5px;
-            width: 6px;
-            height: 6px;
-            border-radius: 50%;
-            background-color: $ac-color-value;
-          }
-        }
-      }
-    }
-  }
-}
+// .widget-menu {
+//   &.style-2 {
+//     position: sticky;
+//     top: 50px;
+//     .menu-list-wrapper {
+//       li {
+//         a {
+//           font-size: 13px;
+//           font-weight: 400;
+//           color: $primary-10;
+//           display: block;
+//           padding: 7px 10px;
+//           padding-left: 20px;
+
+//           &.is-active {
+//             background-color: transparent;
+//             color: $primary;
+//           }
+
+//           .fa {
+//             color: #00a651;
+//             float: right;
+//             margin-top: 4px;
+
+//             &.fa-times-circle {
+//               color: $danger;
+//             }
+//           }
+//         }
+//       }
+
+//       .menu-list {
+//         position: relative;
+//         left: -5px;
+//         top: -3px;
+//         z-index: 1;
+//         margin-left: 15px;
+
+//         // &::before {
+//         //   position: absolute;
+//         //   z-index: 2;
+//         //   content: "";
+//         //   left: 10px;
+//         //   top: -17px;
+//         //   width: 6px;
+//         //   height: 6px;
+//         //   border-radius: 50%;
+//         //   background-color: $primary-20;
+//         // }
+
+//         &::after {
+//           position: absolute;
+//           z-index: 1;
+//           content: "";
+//           left: 12.5px;
+//           top: -7px;
+//           width: 1px;
+//           height: calc(100% - 4px);
+//           background-color: $primary-20;
+//         }
+
+//         li {
+//           position: relative;
+//           z-index: 1;
+//           padding-left: 25px;
+
+//           &::before {
+//             position: absolute;
+//             z-index: 2;
+//             content: "";
+//             left: 30px;
+//             top: 15px;
+//             width: 7px;
+//             height: 7px;
+//             border-radius: 50%;
+//             background-color: $primary-20;
+//           }
+
+//           &::after {
+//             position: absolute;
+//             content: "";
+//             left: 13px;
+//             top: 18.4px;
+//             width: 20px;
+//             height: 1px;
+//             background-color: $primary-20;
+//             z-index: 9;
+//           }
+
+//           a {
+//             font-size: 13px;
+//             font-weight: 500;
+//             color: $primary-10;
+
+//             &:hover {
+//               color: $primary;
+//               background-color: transparent;
+//             }
+//           }
+
+//           ul {
+//             padding-left: 0;
+//             padding: 0;
+//             margin: 0;
+//             border-left: none;
+//           }
+//         }
+//       }
+//     }
+//   }
+
+//   .general-information {
+//     display: flex;
+//     align-items: center;
+//     justify-content: space-between;
+//     padding: 10px 15px 10px 20px;
+
+//     p {
+//       font-weight: 500;
+//       font-weight: 13px;
+//     }
+
+//     i.fa-check-circle {
+//       padding-left: 30px;
+//       color: #00a651;
+//     }
+//   }
+
+//   // title start
+//   .menu-title {
+//     display: flex;
+//     align-items: center;
+//     width: 100%;
+//     justify-content: space-between;
+//     padding: 18px;
+//     background-color: $primary-90;
+
+//     p {
+//       font-size: 13px;
+//       font-weight: 600;
+//       color: $primary-10;
+//     }
+//   }
+
+//   // title end
+
+//   .widget-menu-inner {
+//     a {
+//       padding: 10px;
+//       justify-content: center;
+//       padding-left: 20px;
+//       display: block;
+//       background-color: $white-100;
+//       text-align: left;
+//       color: $primary-10;
+//       font-size: 13px;
+//       font-weight: 500;
+
+//       &:hover {
+//         &:after {
+//           width: 100%;
+//           border-radius: 0;
+//           background-color: transparent;
+//         }
+//       }
+//     }
+
+//     .dropdown-2 {
+//       position: relative;
+//       z-index: 1;
+
+//       &:hover {
+//         &::after {
+//           display: none;
+//         }
+//       }
+
+//       span {
+//         i {
+//           &.fa {
+//             right: 15px;
+//             position: absolute;
+//           }
+//         }
+//       }
+
+//       ul {
+//         position: relative;
+//         left: 0;
+//         top: 10px;
+//         z-index: 1;
+
+//         &::after {
+//           position: absolute;
+//           z-index: 1;
+//           content: "";
+//           left: 2.5px;
+//           top: 0;
+//           width: 1px;
+//           height: calc(100% - 22px);
+//           background-color: $primary-20;
+//         }
+
+//         &::before {
+//           position: absolute;
+//           z-index: 2;
+//           content: "";
+//           left: 0;
+//           top: 0;
+//           width: 6px;
+//           height: 6px;
+//           border-radius: 50%;
+//           background-color: $primary-20;
+//         }
+
+//         li {
+//           position: relative;
+//           z-index: 1;
+//           padding-left: 15px;
+
+//           &:after {
+//             position: absolute;
+//             content: "";
+//             left: 3px;
+//             bottom: 22px;
+//             width: 20px;
+//             height: 1px;
+//             background-color: $primary-20;
+//             z-index: 9;
+//           }
+
+//           &::before {
+//             position: absolute;
+//             z-index: 2;
+//             content: "";
+//             left: 20px;
+//             bottom: 19.5px;
+//             width: 6px;
+//             height: 6px;
+//             border-radius: 50%;
+//             background-color: $primary-20;
+//           }
+//         }
+//       }
+//     }
+//   }
+// }
 
 // widget menu end
 /****************************************
 Responsive Classes
 *****************************************/
 // Extra small devices (portrait phones, less than 576px)
-@media (max-width: 575.98px) {
-}
+@media (max-width: 575.98px) {}
 
 // 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) {}