@appscode/design-system 2.0.18 → 2.0.19-alpha.10

package/components/_ac-tabs.scss

@@ -1,313 +0,0 @@
-.tabs {
-  &.ac-tabs {
-    ul {
-      border-bottom-color: $primary-90;
-    }
-
-    &.is-line {
-      ul {
-        border-bottom-color: $primary-90;
-        padding-left: 4px;
-
-        li {
-          &.is-active {
-            a {
-              font-weight: 500;
-              border-bottom-color: $primary;
-              border-bottom: 2px solid $primary !important;
-              border-width: 2px;
-            }
-          }
-
-          a {
-            // text-transform: uppercase;
-            font-weight: 400;
-            color: $primary-5;
-            font-size: 13px;
-            border-bottom: none;
-            padding: 6px 16px;
-
-            &:hover {
-              border-bottom-color: $primary;
-            }
-          }
-        }
-      }
-    }
-
-    &.is-boxed {
-      font-size: 14px;
-
-      a {
-        padding: 8px 20px;
-        color: $primary-20;
-
-        &:hover {
-          border-bottom-color: transparent;
-          background-color: transparent;
-        }
-      }
-
-      ul {
-        padding-left: 10px;
-
-        li {
-          &.is-active {
-            position: relative;
-            border-color: $primary-90;
-            z-index: 1;
-            color: $primary;
-
-            &:after {
-              position: absolute;
-              content: "";
-              left: 0;
-              top: 0;
-              width: 100%;
-              height: 4px;
-              border-radius: 4px 4px 0 0;
-              background-color: $primary;
-            }
-
-            a {
-              border-color: $primary-90;
-              background-color: $white-100;
-              padding: 8px 20px;
-              font-weight: 500;
-              margin-bottom: -2px;
-              font-size: 13px;
-            }
-          }
-        }
-      }
-
-      &.is-gap {
-        ul {
-          li {
-            margin-right: 6px;
-
-            &.is-active {
-              box-shadow: 0px 4px 6px rgba(133, 145, 163, 0.54);
-            }
-
-            a {
-              border: 1px solid $primary-90;
-              border-bottom: none;
-              margin-bottom: -2px;
-              font-size: 13px;
-              color: $primary-20;
-            }
-          }
-        }
-
-        &.is-borderless {
-          ul {
-            border-bottom-color: transparent;
-
-            li {
-              &.is-active {
-                a {
-                  background-color: $primary-90;
-                }
-              }
-
-              a {
-                border: 1px solid transparent;
-              }
-            }
-          }
-        }
-      }
-    }
-
-    &.is-toggle {
-      ul {
-        border: 1px solid $primary-10;
-        border-radius: 4px;
-        padding: 4px;
-        flex-grow: inherit;
-
-        li {
-          &.is-active {
-            a {
-              color: $white-100;
-              background-color: $primary;
-
-              &:hover {
-                background-color: $primary;
-              }
-            }
-          }
-
-          a {
-            font-size: 16px;
-            font-weight: 500;
-            border: none;
-            padding: 8px 25px;
-            line-height: 1;
-            border-radius: 4px;
-
-            &:hover {
-              background-color: inherit;
-            }
-          }
-        }
-      }
-    }
-
-    &.kubedb-ui-tabs {
-      ul {
-        border-bottom: none;
-
-        li {
-          &.is-active {
-            a {
-              border-bottom: 3px solid $primary !important;
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-.ac-tabs-body {
-  &.is-content-available {
-    .ac-tabs {
-      margin-bottom: 0;
-
-      ul {
-        li {
-          &.is-active {
-            a {
-              border-color: $primary-90;
-              background-color: $white-100;
-              color: $primary;
-            }
-          }
-        }
-      }
-    }
-
-    .ac-tab-content {
-      background-color: $white-100;
-      border: 1px solid $primary-90;
-      border-top: none;
-      border-radius: 0 0 4px 4px;
-
-      &.is-borderless {
-        border: 1px solid transparent;
-        background-color: $primary-90;
-        border-radius: 4px 4px 4px 4px;
-      }
-    }
-  }
-}
-
-.ac-tabs-body {
-  &.is-content-available {
-    &.has-bg-color {
-      .ac-tabs {
-        ul {
-          border-bottom-width: 0px;
-
-          li {
-            &.is-active {
-              a {
-                background-color: $primary-90;
-                color: $primary;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-.tabs li.is-active a {
-  color: $primary;
-}
-
-.no-data-available {
-  img {
-    width: 250px;
-  }
-}
-
-.ac-system-body.bb-user-management {
-  .tabs.ac-tabs.is-line {
-    margin-left: -20px;
-    position: sticky;
-    top: 50px;
-    z-index: 99;
-    background: $white-100;
-  }
-}
-
-// dark theme
-// .is-dark-theme {
-//   .tabs {
-//     &.is-toggle {
-//       a {
-//         &:hover {
-//           background-color: $dark-bg;
-//         }
-//       }
-//     }
-
-//     a {
-//       border-bottom: 1px solid $primary-90;
-//       color: $white-100;
-//     }
-
-//     &.ac-tabs.is-line {
-//       ul {
-//         li.is-active {
-//           a {
-//             color: $primary-10;
-//           }
-//         }
-//       }
-//     }
-//   }
-// }
-
-/****************************************
-Responsive Classes
-*****************************************/
-// Extra small devices (portrait phones, less than 576px)
-@media (max-width: 575.98px) {
-}
-
-// 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) {
-  .card-body-wrapper {
-    .tabs.ac-tabs {
-      &.is-boxed {
-        ul {
-          li {
-            &.is-active {
-              a {
-                border-color: $primary-90;
-                background-color: $white-100;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}

package/components/_accordion.scss

@@ -1,117 +0,0 @@
-// .ac-accordion-wrapper {
-//   &.is-marginless {
-//     .single-accordion-item {
-//       margin: 0;
-//       padding: 0;
-
-//       .accordion-heading {
-//         padding: 10px 20px;
-//         position: relative;
-//         z-index: 1;
-
-//         &::after {
-//           position: absolute;
-//           content: "";
-//           left: 0;
-//           top: 0;
-//           width: 4px;
-//           height: 100%;
-//           background-color: $primary;
-//         }
-//       }
-//     }
-//   }
-
-//   .single-accordion-item {
-//     background-color: $white-100;
-//     padding: 15px 20px;
-//     margin-bottom: 15px;
-//     border-radius: 4px;
-//     border: 1px solid $primary-90;
-
-//     &.open {
-//       .accordion-heading {
-//         margin-bottom: 10px;
-//       }
-//     }
-
-//     &:last-child {
-//       margin-bottom: 0;
-//     }
-
-//     .accordion-heading {
-//       display: flex;
-//       align-items: center;
-//       justify-content: space-between;
-
-//       h3 {
-//         cursor: pointer;
-//       }
-
-//       button {
-//         font-size: 12px;
-//         letter-spacing: 0.1px;
-//       }
-
-//       .icon {
-//         width: 20px;
-//         height: 20px;
-//         border: 1px solid $primary-90;
-//         line-height: 20px;
-//         display: flex;
-//         justify-content: center;
-//         align-items: center;
-//         font-size: 10px;
-//         border-radius: 50%;
-//         cursor: pointer;
-//       }
-//     }
-
-//     .accordion-body {
-//       max-height: 0;
-//       transition: max-height 0.2s ease-out;
-//       overflow: hidden;
-
-//       p {
-//         font-size: 13px;
-//         color: $primary-10;
-//         line-height: 1.6;
-//       }
-//     }
-//   }
-// }
-
-// .overview-body {
-//   .ac-accordion-wrapper {
-//     &.is-marginless {
-//       .single-accordion-item {
-//         .accordion-heading {
-//           padding-bottom: 0;
-//         }
-//       }
-//     }
-//   }
-// }
-
-// /****************************************
-// Responsive Classes
-// *****************************************/
-// // Extra small devices (portrait phones, less than 576px)
-// @media (max-width: 575.98px) {
-// }
-
-// // 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) {
-// }

package/components/_add-card.scss

@@ -1,70 +0,0 @@
-.add-card-form {
-  .card-title {
-    display: grid;
-    grid-template-columns: 46px auto;
-    align-items: center;
-
-    .back-button {
-      border: none;
-      height: 46px;
-      width: 46px;
-      background-color: $white-100;
-      border-radius: 4px 0 0 0;
-      font-size: 16px;
-    }
-
-    h4 {
-      font-weight: 600;
-      font-size: 25px;
-      line-height: 29px;
-      color: $primary-5;
-      margin-left: 20px;
-    }
-  }
-
-  .card-body {
-    background-color: $white-100;
-    padding: 20px;
-
-    .card-information {
-      // display: grid;
-      // grid-template-columns: 50% 17% 17% 17%;
-      grid-gap: 20px;
-    }
-
-    .more-details {
-      cursor: pointer;
-    }
-  }
-}
-
-/****************************************
-Responsive Classes
-*****************************************/
-// Extra small devices (portrait phones, less than 576px)
-@media (max-width: 575.98px) {
-}
-
-// 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) {
-  .add-card-form {
-    .card-title {
-      h4 {
-        font-size: 20px;
-        line-height: 24px;
-      }
-    }
-  }
-}

package/components/_all.scss

@@ -1,35 +0,0 @@
-// @import "ac-alert-box";
-// @import "ac-accordion";
-// @import "buttons";
-// @import "breadcumb";
-// @import "ac-multi-select";
-// @import "ac-code-highlight";
-// @import "navbar";
-// @import "app-drawer";
-// @import "ac-drag";
-// @import "left-sidebar-menu";
-// @import "ac-content-layout";
-// @import "ac-table";
-// @import "ac-tabs";
-// @import "graph";
-// @import "ac-modal";
-// @import "payment-card";
-// @import "pagination";
-// @import "ac-options";
-// @import "image-upload";
-// @import "ac-alert-box";
-// @import "dashboard-header";
-// @import "ac-tags";
-// @import "go-to-top";
-// @import "ac-toaster/ac-toasted";
-// @import "preview-modal";
-// @import "bbum/all";
-// @import "wizard";
-
-@import "terminal";
-@import "input";
-@import "multi-select";
-@import "report";
-@import "getkeeper";
-@import "ui-builder/ui-builder";
-@import "ui-builder/vue-open-api";