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

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

@@ -0,0 +1,338 @@
+// .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;
+//               }
+//             }
+//           }
+//         }
+//       }
+//     }
+//   }
+// }
+
+.tabs {
+  &.ac-tabs {
+    ul {
+      border-color: $primary-90;
+    }
+    a {
+      padding: 8px 20px;
+      color: $primary-10;
+      font-weight: 500;
+      color: $black-40;
+      &:hover {
+        border-bottom-color: $black-40;
+      }
+    }
+    li {
+      &.is-active {
+        a {
+          border-bottom-color: $primary;
+          color: $primary;
+        }
+      }
+    }
+  }
+}

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);
+}

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

@@ -0,0 +1,3 @@
+@import "./alert";
+@import "./alert-message";
+@import "./toast";

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

@@ -0,0 +1,50 @@
+.ac-toast {
+  width: 350px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 13px;
+  border-radius: 4px;
+  position: relative;
+  padding-right: 30px;
+  margin-bottom: 10px;
+
+  * {
+    color: $white-100;
+  }
+
+  p {
+    padding-left: 16px;
+
+    i.fa {
+      padding-right: 0 !important;
+      margin-right: 4px;
+    }
+  }
+
+  a {
+    font-weight: 500;
+    text-decoration: underline;
+    padding: 0 15px;
+
+    &:hover {
+      color: $black-90;
+    }
+  }
+
+  button.close-button {
+    border-radius: 0px;
+    background-color: transparent;
+    border: none;
+    color: $white-100;
+    position: absolute;
+    right: 0;
+    top: 0;
+    padding: 5px;
+    height: 100%;
+    width: 30px;
+    z-index: 1;
+    cursor: pointer;
+    border-left: 1px solid #dddddd;
+  }
+}

package/vue-components/styles/components/cards/_all.scss

@@ -0,0 +1,8 @@
+@import "cluster";
+@import "features";
+@import "info";
+@import "monitoring";
+@import "org";
+@import "vendor";
+@import "payment-card";
+@import "subscription-card";

package/vue-components/styles/components/cards/_cluster.scss

@@ -0,0 +1,97 @@
+// cluster-card
+.card-details.cluster {
+  border: 1px solid $primary-90;
+  padding: 24px 20px;
+  transition: 0.3s ease-in-out;
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  border-radius: 2px;
+
+  .card-details-inner {
+    width: 100%;
+  }
+
+  .ac-options {
+    position: absolute;
+    right: 20px;
+    top: 24px;
+    z-index: 999;
+  }
+  .c-header {
+    display: flex;
+    margin-bottom: 24px;
+
+    .c-logo {
+      width: 54px;
+      height: 54px;
+      background: #e8f3fc;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-right: 24px;
+
+      img {
+        height: 24px;
+      }
+    }
+
+    .c-content {
+      width: calc(100% - 78px);
+      h4 {
+        font-size: 18px;
+        line-height: 130%;
+        color: #030d17;
+      }
+      .icon {
+        color: #0c365a;
+        cursor: pointer;
+        position: relative;
+        z-index: 1;
+        &:after {
+          position: absolute;
+          content: "";
+          border-radius: 50%;
+          width: 32px;
+          height: 32px;
+          background: #e8f3fc;
+          opacity: 0;
+          visibility: hidden;
+          transition: 0.3s ease-in-out;
+          z-index: -1;
+        }
+        &:hover {
+          &:after {
+            opacity: 1;
+            visibility: visible;
+          }
+        }
+      }
+      .tags {
+        margin-top: 12px;
+      }
+    }
+  }
+
+  .c-body {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20px;
+    justify-content: space-between;
+    p {
+      width: calc(25% - 16px);
+
+      span {
+        font-size: 11px;
+        color: #666666;
+        display: block;
+      }
+      strong {
+        color: #061b2d;
+        font-size: 13px;
+        font-weight: 400;
+      }
+    }
+  }
+}

package/vue-components/styles/components/cards/_features.scss

@@ -0,0 +1,26 @@
+
+// features card
+.card-basic.feature-card {
+  padding: 20px;
+  width: calc(25% - 8px);
+  max-width: 390px;
+  min-width: 290px;
+  position: relative;
+  border-radius: 2px;
+
+  .required {
+    position: absolute;
+    left: 20px;
+    top: -9px;
+  }
+  .c-title {
+    h5 {
+      width: calc(100% - 28px);
+    }
+  }
+  .c-body {
+    p {
+      color: #0c365a;
+    }
+  }
+}