@appscode/design-system 2.0.19-alpha.1 → 2.0.19-alpha.11

package/main.scss

@@ -17,18 +17,4 @@
 @import "@/components/vue-components/styles/layouts/all";
 
 // COMPONENTS
-@import "@/components/vue-components/styles/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.19-alpha.1",
+  "version": "2.0.19-alpha.11",
   "description": "A design system for Appscode websites and dashboards made using Bulma",
   "main": "main.scss",
   "scripts": {

package/vue-components/styles/components/_add-card.scss

@@ -1,70 +1,70 @@
-.add-card-form {
-  .card-title {
-    display: grid;
-    grid-template-columns: 46px auto;
-    align-items: center;
+// .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;
-    }
+//     .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;
-    }
-  }
+//     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-body {
+//     background-color: $white-100;
+//     padding: 20px;
 
-    .card-information {
-      // display: grid;
-      // grid-template-columns: 50% 17% 17% 17%;
-      grid-gap: 20px;
-    }
+//     .card-information {
+//       // display: grid;
+//       // grid-template-columns: 50% 17% 17% 17%;
+//       grid-gap: 20px;
+//     }
 
-    .more-details {
-      cursor: pointer;
-    }
-  }
-}
+//     .more-details {
+//       cursor: pointer;
+//     }
+//   }
+// }
 
-/****************************************
-Responsive Classes
-*****************************************/
-// Extra small devices (portrait phones, less than 576px)
-@media (max-width: 575.98px) {
-}
+// /****************************************
+// 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) {
-}
+// // 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) {
-}
+// // 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) {
-}
+// // 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;
-      }
-    }
-  }
-}
+// // 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

@@ -1,16 +1,38 @@
-// @import "button";
-// @import "input";
-// @import "accordion";
-// @import "modal";
-// @import "navbar";
-// @import "options";
-// @import "table";
+@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 "tabs";
-@import "navbar";
+@import "button";
 @import "terminal";
-@import "multi-select";
-@import "report";
+@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

@@ -47,13 +47,64 @@
       &: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

@@ -1,54 +1,54 @@
-.card-body-wrapper {
-  background-color: $white-100;
-  border-radius: 4px;
-  box-shadow: none;
+// .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;
+//   .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;
+//     .left-content {
+//       p {
+//         font-weight: 500;
+//         font-size: 14px;
+//         line-height: 16px;
+//         color: $primary-5;
 
-        .require {
-          color: #ff0000;
-        }
+//         .require {
+//           color: #ff0000;
+//         }
 
-        &.description {
-          font-weight: normal;
-          font-size: 14px;
-          line-height: 16px;
-          color: $primary-20;
-          margin-top: 10px;
-        }
-      }
-    }
+//         &.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;
-      }
-    }
-  }
+//     .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;
-      }
-    }
-  }
-}
+//   .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

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

package/vue-components/styles/components/alert/_alert-message.scss

@@ -0,0 +1,16 @@
+.message {
+  .message-body {
+    display: flex;
+    padding: 16px;
+    gap: 12px;
+    align-items: center;
+    p {
+      line-height: 160%;
+      width: calc(100% - 48px);
+    }
+    .status-icon {
+      display: flex;
+      width: 24px;
+    }
+  }
+}

package/vue-components/styles/components/alert/_alert.scss

@@ -0,0 +1,123 @@
+.ac-notification {
+  background-color: #dee7f5;
+  font-size: 13px;
+  color: $primary;
+  min-height: 36px;
+  display: flex;
+  align-items: center;
+  padding: 8px 16px;
+  overflow: hidden;
+  border: 1px solid $primary;
+  border-radius: 4px;
+  justify-content: flex-start;
+  position: relative;
+  z-index: 1;
+  min-width: 280px;
+
+  p {
+    color: $primary;
+
+    .close-icon {
+      padding-right: 10px;
+      font-size: 15px;
+    }
+
+    a {
+      text-decoration: underline;
+      color: $primary;
+
+      &:hover {
+        color: hsla(
+          var(--hsl-hue),
+          var(--hsl-saturation),
+          calc(var(--hsl-lightness) - 10%),
+          1
+        );
+      }
+    }
+  }
+
+  button.close {
+    background-color: transparent;
+    cursor: pointer;
+    right: 0px;
+    position: absolute;
+    box-shadow: none;
+    border: none;
+    font-size: 14px;
+    color: $danger;
+    width: 40px;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+// mixin for .ac-notification
+@mixin acNotification($colorName) {
+  background-color: scale-color($color: $colorName, $lightness: 80%);
+  color: $white-100;
+  border-color: $colorName;
+
+  p {
+    color: $colorName;
+
+    a {
+      color: $colorName;
+
+      &:hover {
+        color: $colorName;
+        opacity: 0.8;
+      }
+    }
+  }
+}
+@mixin acPrimaryNotification() {
+  background-color: hsla(
+    var(--hsl-hue),
+    var(--hsl-saturation),
+    var(--hsl-lightness),
+    0.2
+  );
+  color: $white-100;
+  border-color: $primary;
+
+  p {
+    color: $primary;
+
+    a {
+      color: $primary;
+
+      &:hover {
+        color: $primary;
+        opacity: 0.8;
+      }
+    }
+  }
+}
+
+// is-primary
+.ac-notification.is-primary {
+  @include acPrimaryNotification();
+}
+
+// is.info
+.ac-notification.is-info {
+  @include acNotification($info);
+}
+
+// is.success
+.ac-notification.is-success {
+  @include acNotification($success);
+}
+
+// is-danger
+.ac-notification.is-danger {
+  @include acNotification($danger);
+}
+
+// is-warning
+.ac-notification.is-warning {
+  @include acNotification($warning);
+}