@appscode/design-system 2.0.19-alpha.5 → 2.0.19-alpha.7

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.5",
+  "version": "2.0.19-alpha.7",
   "description": "A design system for Appscode websites and dashboards made using Bulma",
   "main": "main.scss",
   "scripts": {

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

@@ -1,37 +1,28 @@
-// @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 "left-sidebar";
 @import "button";
 @import "terminal";
 @import "ac-drag";
 @import "accordion";
 @import "dropdown";
+@import "breadcrumb";
 @import "getkeeper";
 @import "go-to-top";
 @import "graph";
-@import "image-upload";
-@import "input-card";
-@import "input";
-@import "menu-content";
 @import "modal";
-@import "monaco-editor";
-@import "multi-select";
-@import "multi-select";
 @import "options";
-@import "payment-card";
 @import "preloader";
 @import "preview-modal";
-// @import "progress-bar";W
+// @import "progress-bar";
 @import "report";
-@import "subscription-card";
 @import "table-of-content";
 @import "table";
 @import "tabs";

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/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,93 @@
+// 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;
+
+  .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;
+    }
+  }
+}

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

@@ -0,0 +1,83 @@
+// info cards start
+.info-card {
+  border: 1px solid $primary-90;
+  position: relative;
+  border-radius: 2px;
+  .header {
+    display: flex;
+    align-items: center;
+    padding: 12px 16px;
+    border-bottom: 1px dashed $primary-90;
+
+    .logo {
+      display: flex;
+      align-items: center;
+      margin-right: 12px;
+      img {
+        width: 16px;
+      }
+    }
+
+    .content {
+      width: 100%;
+      h5 {
+        color: $primary-10;
+        font-weight: 500;
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  .body {
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
+    padding: 16px;
+    p {
+      display: flex;
+      align-items: center;
+      margin-bottom: 8px;
+      span.icon {
+        padding-right: 8px;
+        width: 22px;
+      }
+
+      strong {
+        font-size: 13px;
+        font-weight: 400;
+        color: $primary-10;
+      }
+    }
+  }
+}
+
+.line-color {
+  position: relative;
+  z-index: 1;
+  overflow: hidden;
+  &::after {
+    position: absolute;
+    content: "";
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    height: 1px;
+    background: linear-gradient(-45deg, $primary, $success, $warning, $danger);
+    background-size: 400% 400%;
+    animation: gradient 3s ease infinite;
+  }
+}
+
+@keyframes gradient {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+// // info cards end

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

@@ -0,0 +1,24 @@
+.card-basic {
+  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;
+    }
+  }
+}

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

@@ -0,0 +1,59 @@
+.card-details {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  border: 1px solid $primary-90;
+  padding: 24px 20px;
+  border-radius: 2px;
+  transition: 0.3s ease-in-out;
+  position: relative;
+
+  figure {
+    margin-bottom: 8px;
+  }
+
+  button.ac-button.is-text {
+    color: $primary;
+    transition: 0.3s ease-in-out;
+    padding: 2px 0;
+    height: auto;
+    &:hover {
+      background-color: transparent;
+    }
+  }
+
+  &:hover:not(.no-data-available) {
+    // border: 1px solid $primary;
+    button.ac-button.is-text {
+      gap: 16px;
+    }
+
+    .right-content {
+      img {
+        filter: grayscale(0);
+      }
+    }
+  }
+
+  .left-content {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+    justify-content: space-between;
+
+    .image {
+      border-radius: 50%;
+
+      &:has(.is-rounded) {
+        box-shadow: inset 0 0 0 1px hsla(0, 0%, 0%, 0.1);
+      }
+    }
+  }
+
+  .right-content {
+    img {
+      filter: grayscale(1);
+    }
+  }
+}