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

package/main.scss

@@ -1,6 +1,6 @@
 @charset "utf-8";
 // customize bulma css
-@import "@/assets/design-system/base/utilities/_customize-bulma.scss";
+@import "@/components/vue-components/styles/base/utilities/_customize-bulma.scss";
 
 // Third party CSS
 @import "../node_modules/bulma/bulma.sass";
@@ -11,24 +11,10 @@
 @import "vue-multiselect/dist/vue-multiselect.css";
 
 // BASE
-@import "./base/utilities/all";
+@import "@/components/vue-components/styles/base/utilities/all";
 
 // LAYOUTS
-@import "./layouts/all";
+@import "@/components/vue-components/styles/layouts/all";
 
 // COMPONENTS
-@import "./components/all";
-
-// //BASE - Base styles, variables, mixins
-// @import "base/video-player";
-
-// COMPONENTS
-// @import "./cluster/resourceViewer";
-// @import "./cluster/app-drawer";
-
-// LAYOUTS - Page layout styles
-// @import "layouts/_clusterListPage";
-
-// KUBEDB COMPONENTS
-// @import "./kubedb/styles/scss/custom.scss";
-// @import "./kubedb/styles/scss/transitions.scss";
+// @import "@/components/vue-components/styles/components/all";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appscode/design-system",
-  "version": "2.0.18",
+  "version": "2.0.19-alpha.10",
   "description": "A design system for Appscode websites and dashboards made using Bulma",
   "main": "main.scss",
   "scripts": {

package/{base → vue-components/styles/base}/utilities/_grid.scss

@@ -22,7 +22,7 @@
   grid-column: auto;
 }
 
-@for $i from 0 through 30 {
+@for $i from 0 through 32 {
   .gap-#{$i} {
     gap: #{$i}px;
   }

package/vue-components/styles/components/_accordion.scss

@@ -0,0 +1,117 @@
+.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-20;
+        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/vue-components/styles/components/_add-card.scss

@@ -0,0 +1,70 @@
+// .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/vue-components/styles/components/_all.scss

@@ -0,0 +1,38 @@
+@import "navbar/all";
+@import "alert/all";
+@import "cards/all";
+@import "content/all";
+@import "editor/all";
+@import "form-fields/all";
+@import "header/all";
+@import "select-box/all";
+@import "sidebar/all";
+
+@import "button";
+@import "terminal";
+@import "ac-drag";
+@import "accordion";
+@import "dropdown";
+@import "breadcrumb";
+@import "getkeeper";
+@import "go-to-top";
+@import "graph";
+@import "modal";
+@import "options";
+@import "preloader";
+@import "preview-modal";
+// @import "progress-bar";
+@import "report";
+@import "table-of-content";
+@import "table";
+@import "tabs";
+@import "terminal";
+@import "tfa";
+@import "transitions";
+
+// @import "pricing-table";
+// @import "overview-info";
+// @import "overview-page"
+// @import "nested-list";
+@import "ui-builder/ui-builder";
+@import "ui-builder/vue-open-api";

package/vue-components/styles/components/_breadcrumb.scss

@@ -0,0 +1,32 @@
+.ac-breadcrumb {
+  padding: 8px 20px;
+  border-bottom: 1px solid $primary-95;
+  position: sticky;
+  top: 50px;
+  height: auto;
+  background-color: $white-100;
+  z-index: 998;
+  display: flex;
+  align-items: center;
+}
+
+.breadcrumb {
+  a {
+    color: $primary-20;
+    font-size: 13px;
+    padding: 0 3px;
+    font-weight: 500;
+    font-style: normal;
+
+    &:hover {
+      color: $primary-10;
+    }
+  }
+
+  li.is-active {
+    a {
+      color: $primary-10;
+      font-weight: 500;
+    }
+  }
+}

package/vue-components/styles/components/_button.scss

@@ -0,0 +1,110 @@
+.button {
+  &.ac-button {
+    padding: 8px 16px;
+    font-weight: 500;
+    line-height: 1;
+
+    &.is-primary {
+      &.is-light {
+        color: $primary;
+        &:focus:not(:hover) {
+          color: inherit;
+        }
+      }
+    }
+    &.is-warning {
+      &.is-light {
+        color: $yellow-30;
+        &:focus:not(:hover) {
+          color: inherit;
+        }
+      }
+    }
+
+    &.is-success {
+      &.is-light {
+        color: $green-30;
+        &:focus:not(:hover) {
+          color: inherit;
+        }
+      }
+    }
+    &.is-light {
+      &.is-loading {
+        &::after {
+          border-color: transparent transparent $primary-5 $primary-5 !important;
+        }
+      }
+      &.is-outlined {
+        &:hover {
+          border-color: inherit;
+        }
+      }
+    }
+
+    &.is-small {
+      padding: 4px 12px;
+      &:not(.is-rounded) {
+        border-radius: 4px;
+      }
+
+      &.is-square {
+        width: 28px;
+        height: 28px;
+        align-items: center;
+        justify-content: center;
+      }
+    }
+    &.is-medium {
+      font-size: 1rem;
+      height: 36px;
+      &.is-square {
+        width: 36px;
+        align-items: center;
+        justify-content: center;
+      }
+    }
+    &.is-tinny {
+      height: 24px;
+      padding: 0 8px;
+    }
+  }
+}
+button.is-primary {
+  background-color: $primary;
+}
+.up-down-buttons {
+  border-radius: 4px;
+  overflow: hidden;
+  position: relative;
+  z-index: 1;
+  max-width: 36px;
+  margin-bottom: 0 !important;
+  button.ac-button {
+    width: 36px;
+    height: 18px;
+    cursor: pointer;
+    border: none;
+    color: $primary;
+    background-color: $primary-90;
+    transition: 0.3s ease-in-out;
+    margin: 0 !important;
+    border-radius: 0;
+    &:hover {
+      background-color: $primary-80;
+    }
+    &.is-primary {
+      background-color: $primary;
+      color: $white-100;
+      &:hover {
+        background-color: $primary-30;
+      }
+    }
+    .icon {
+      margin: 0;
+      padding: 0;
+      width: auto;
+      height: auto;
+    }
+  }
+}

package/vue-components/styles/components/_card-body-wrapper.scss

@@ -0,0 +1,54 @@
+// .card-body-wrapper {
+//   background-color: $white-100;
+//   border-radius: 4px;
+//   box-shadow: none;
+
+//   .card-header {
+//     background-color: $info-light;
+//     border-radius: 4px 4px 0px 0px;
+//     padding: 10px 20px;
+//     box-shadow: none;
+
+//     .left-content {
+//       p {
+//         font-weight: 500;
+//         font-size: 14px;
+//         line-height: 16px;
+//         color: $primary-5;
+
+//         .require {
+//           color: #ff0000;
+//         }
+
+//         &.description {
+//           font-weight: normal;
+//           font-size: 14px;
+//           line-height: 16px;
+//           color: $primary-20;
+//           margin-top: 10px;
+//         }
+//       }
+//     }
+
+//     .right-content {
+//       .button {
+//         font-size: 12px;
+//         font-weight: normal;
+//         letter-spacing: 0;
+//       }
+//     }
+//   }
+
+//   .card-content {
+//     p {
+//       &.cluster-title {
+//         font-weight: normal;
+//         font-size: 14px;
+//         line-height: 16px;
+//         color: $black-40;
+//         margin-top: 30px;
+//         margin-bottom: 10px;
+//       }
+//     }
+//   }
+// }

package/vue-components/styles/components/_direct-deploy.scss

@@ -0,0 +1,69 @@
+// .direct-deploy {
+//   h5 {
+//     font-weight: 500;
+//     font-size: 18px;
+//     line-height: 21px;
+//     color: $primary-5;
+//     margin-bottom: 10px;
+//     .fa {
+//       color: $primary;
+//     }
+//   }
+
+//   p {
+//     font-size: 14px;
+//     line-height: 160%;
+//     color: $primary-5;
+//     margin-bottom: 20px;
+//   }
+
+//   .check-permission {
+//     font-weight: normal;
+//     font-size: 14px;
+//     line-height: 16px;
+//     color: $primary-5;
+//   }
+
+//   .button {
+//     margin: 10px 0;
+//   }
+
+//   .msg {
+//     font-size: 12px;
+//     line-height: 14px;
+//     color: $primary-20;
+//   }
+//   .buttons {
+//     &.is-gray {
+//       .button {
+//         &.ac-primary {
+//           background-color: $info-light;
+//         }
+//       }
+//     }
+//   }
+// }
+
+// h5 {
+//   &.toc-title {
+//     font-style: normal;
+//     font-weight: 500;
+//     font-size: 16px;
+//     line-height: 19px;
+//     color: $primary-20;
+//   }
+// }
+// .is-gray {
+//   .button {
+//     border: none;
+//     background-color: $info-light;
+//   }
+// }
+
+// .card-content {
+//   &.is-table-of-content {
+//     display: grid;
+//     grid-template-columns: 65% 35%;
+//     grid-gap: 15px;
+//   }
+// }

package/vue-components/styles/components/_dropdown.scss

@@ -0,0 +1,32 @@
+.dropdown-group {
+  margin-bottom: 8px;
+}
+.dropdown-action {
+  .dropdown-content {
+    min-width: 220px;
+    max-width: 500px;
+    max-height: calc(100vh - 200px);
+    overflow-y: auto;
+    border: 1px solid $primary-90;
+
+    label {
+      padding: 8px 16px;
+      display: flex;
+      border-bottom: 1px solid $primary-95;
+      color: $primary-20;
+      font-weight: 500;
+    }
+    .dropdown-item {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 13px;
+      padding: 8px 16px;
+      color: $primary-20;
+      &:hover {
+        background-color: $primary-97;
+        color: $primary;
+      }
+    }
+  }
+}