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

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

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

@@ -0,0 +1,58 @@
+// vendor cards start
+.ac-single-card.vendor-card {
+  border: 1px solid $primary-90;
+  transition: 0.3s ease-in-out;
+  border-radius: 2px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  background-color: $primary-97;
+  min-width: 215px;
+  padding: 30px 20px 20px;
+  cursor: pointer;
+
+  .ac-card-name {
+    p {
+      font-size: 13px;
+      color: $primary-10;
+      line-height: 1;
+      font-weight: 500;
+
+      &.free {
+        color: $primary;
+      }
+    }
+  }
+  .ac-card-logo {
+    width: 70px;
+    height: 70px;
+    border: 1px solid $primary-90;
+    background-color: $white-100;
+    border-radius: 50%;
+    padding: 16px;
+    margin-inline: auto;
+    margin-bottom: 20px;
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+
+    img {
+      width: 100%;
+      height: auto;
+    }
+  }
+  &.is-selected {
+    border: 1px solid $primary !important;
+  }
+  &:hover {
+    border: 1px solid $primary;
+
+    .ac-card-title {
+      h4 {
+        a {
+          color: $primary;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,2 @@
+@import "./content-header";
+@import "./content-layout";

package/vue-components/styles/components/content/_content-header.scss

@@ -0,0 +1,14 @@
+.ac-content-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 4px 20px;
+  min-height: 40px;
+  .ac-content-title {
+    h4,
+    h5,
+    h6 {
+      color: $primary-10;
+    }
+  }
+}

package/vue-components/styles/components/content/_content-layout.scss

@@ -0,0 +1,4 @@
+.ac-content-layout {
+  margin-bottom: 16px;
+  border-radius: 4px;
+}

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

@@ -0,0 +1,2 @@
+@import "filtered-file-editor";
+@import "monaco-editor";

package/vue-components/styles/components/editor/_filtered-file-editor.scss

@@ -0,0 +1,195 @@
+// .preview-icon {
+//   width: 60px;
+//   height: 60px;
+//   background-color: rgba(25, 113, 189, 0.4);
+//   box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.16);
+//   border-radius: 4px 0px 0px 4px;
+//   position: fixed;
+//   right: 0;
+//   top: 400px;
+//   border: none;
+//   cursor: pointer;
+//   color: $white-100;
+//   z-index: 9999;
+//   transition: 0.3s ease-in-out;
+
+//   img {
+//     margin-bottom: 4px;
+//   }
+
+//   &:hover {
+//     background-color: $primary;
+//   }
+// }
+
+.ac-preview {
+  padding-inline: 20px;
+  // position: fixed;
+  // width: calc(100% - 90px);
+  // height: 100%;
+  // top: 50px;
+  // right: -100%;
+  // z-index: 99999;
+  // transition: 0.3s;
+
+  // &.is-active {
+  //   right: 0;
+
+  //   &.is-not-fixed {
+  //     width: 100%;
+
+  //     .ac-preview-body {
+  //       padding: 20px 0 0;
+  //     }
+  //   }
+  // }
+
+  .ac-preview-inner {
+    // background-color: $white-100;
+    // border-radius: 10px 0px 0px 10px;
+    // height: calc(100% - 90px);
+
+    &:after {
+      // position: absolute;
+      // content: "";
+      // left: -90px;
+      // top: -50px;
+      // width: calc(100% + 90px);
+      // height: 100%;
+      // background-color: $white-100;
+
+      // remove opacity for fix cluster ui project
+      // opacity: 0.8;
+      // z-index: -1;
+    }
+
+    // .ac-preview-header {
+    //   padding: 20px;
+    //   border-bottom: 1px solid $black-60;
+
+    //   h5 {
+    //     font-style: normal;
+    //     font-weight: 500;
+    //     font-size: 24px;
+    //     line-height: 28px;
+
+    //     color: $primary-10;
+    //   }
+
+    //   .ms-back-button {
+    //     .is-transparent {
+    //       font-style: normal;
+    //       font-weight: normal;
+    //       font-size: 16px;
+    //       line-height: 100%;
+    //       color: $black-80;
+    //       cursor: pointer;
+
+    //       i.fa {
+    //         color: $black-80;
+    //         padding-left: 5px;
+    //       }
+    //     }
+    //   }
+    // }
+
+    .ac-preview-body {
+      display: flex;
+      // margin-top: 10px;
+      // padding: 20px;
+
+      .left-content {
+        width: 250px;
+        margin-right: 15px;
+
+        .ac-files {
+          ul {
+            margin: 0;
+            padding: 0;
+            list-style: none;
+
+            li {
+              &.is-active {
+                a {
+                  background-color: $primary;
+                  border-radius: 5px;
+                  color: $white-100;
+                  padding: 10px 10px;
+                  margin-left: -10px;
+                  border-top: 1px solid transparent;
+
+                  span {
+                    img {
+                      filter: brightness(100);
+                    }
+                  }
+                }
+
+                &:last-child {
+                  &.is-active {
+                    a {
+                      border-top: 1px solid transparent;
+                    }
+                  }
+                }
+              }
+
+              a {
+                padding: 10px 0px;
+                display: flex;
+                font-style: normal;
+                font-weight: 500;
+                font-size: 14px;
+                line-height: 100%;
+                color: $primary-10;
+                border-top: 1px solid $primary-90;
+
+                span {
+                  img {
+                    margin-right: 5px;
+                    height: 13px;
+                  }
+                }
+              }
+
+              &:last-child {
+                a {
+                  border-bottom: 1px solid $primary-90;
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .right-content {
+        width: calc(100% - 265px);
+
+        .code-preview {
+          background-color: $primary-90;
+          border-radius: 4px;
+          display: flex;
+
+          .code-left {
+            width: 50%;
+          }
+
+          .code-right {
+            width: 50%;
+          }
+        }
+      }
+    }
+  }
+}
+.left-content {
+  .ac-files {
+    max-height: 350px;
+    overflow-y: auto;
+    padding: 10px;
+    span {
+      width: 20px;
+      white-space: nowrap;
+    }
+  }
+}

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

@@ -0,0 +1,3 @@
+@import "footer-area";
+@import "footer-item";
+@import "footer-items";

package/vue-components/styles/components/footer/_footer-area.scss

@@ -0,0 +1,26 @@
+.footer-area {
+  position: fixed;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: calc(100% - 250px);
+  min-height: 30px;
+  padding: 0 20px;
+  background: $primary-20;
+  border-top: 1px solid #3d5e7c;
+  z-index: 9999;
+  transition: 0.3s ease-in-out;
+}
+
+.footer-left,
+.footer-right {
+  display: flex;
+  align-items: center;
+  gap: 32px;
+}
+.sidebar-collapsed {
+  .footer-area {
+    width: calc(100% - 60px);
+  }
+}

package/vue-components/styles/components/footer/_footer-item.scss

@@ -0,0 +1,14 @@
+.footer-item {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-weight: 500;
+  color: $primary-90;
+  font-size: 12px;
+  &.has-text-danger {
+    color: $red-80 !important;
+  }
+  &.has-text-success {
+    color: $green-50 !important;
+  }
+}

package/vue-components/styles/components/footer/_footer-items.scss

@@ -0,0 +1,5 @@
+.footer-items {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}

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

@@ -0,0 +1,4 @@
+@import "input";
+@import "file-upload";
+@import "image-upload";
+@import "form-footer";

package/vue-components/styles/components/form-fields/_file-upload.scss

@@ -0,0 +1,42 @@
+.file-upload {
+  border: 1px dashed $primary-80;
+  border-radius: 4px;
+  &:hover {
+    background-color: $primary-97;
+
+    label {
+      .upload-icon {
+        border: 1px solid $primary-80;
+        svg {
+          color: $primary-10;
+        }
+      }
+    }
+  }
+  label {
+    cursor: pointer;
+    padding: 32px;
+    display: block;
+    .upload-icon {
+      border: 1px solid $primary-90;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 50%;
+      width: 100px;
+      height: 100px;
+      margin-bottom: 24px;
+      padding: 24px;
+
+      svg {
+        color: $primary-30;
+      }
+    }
+    p {
+      color: $primary-10;
+      strong {
+        font-weight: 600;
+      }
+    }
+  }
+}

package/vue-components/styles/components/form-fields/_form-footer.scss

@@ -0,0 +1,9 @@
+.form-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-left: -20px;
+  margin-right: -20px;
+  border-top: 1px solid $primary-90;
+  padding: 16px 20px;
+}

package/{components → vue-components/styles/components/form-fields}/_input.scss

@@ -257,24 +257,6 @@
     margin-bottom: 0;
   }
 
-  &.is-dark {
-    input {
-      background-color: $primary-10;
-      border-color: transparent;
-      color: $white-100;
-
-      &::placeholder {
-        color: $primary-10;
-      }
-
-      button {
-        i.fa {
-          color: $white-100;
-        }
-      }
-    }
-  }
-
   label {
     font-size: 13px;
     left: 15px;
@@ -313,12 +295,6 @@
         margin-top: -1px;
         z-index: -1;
       }
-
-      // &.is-required {
-      //   &:after {
-      //     width: calc(100% + 10px);
-      //   }
-      // }
     }
   }
 
@@ -373,12 +349,7 @@
           transition: 0.3s;
 
           &:hover {
-            background-color: hsla(
-              var(--hsl-hue),
-              var(--hsl-saturation),
-              var(--hsl-lightness),
-              0.2
-            );
+            background-color: $primary-20;
             color: $primary;
           }
         }
@@ -399,7 +370,7 @@
       border: 1px solid $primary-80;
       background-color: transparent;
       padding: 10px 15px;
-      min-height: 50px;
+      min-height: 150px;
 
       &.bg-white {
         background-color: transparent;
@@ -426,7 +397,7 @@
     font-size: 13px;
 
     &:hover {
-      border-color: $black-70;
+      border-color: $primary-70;
     }
 
     &.bg-white {
@@ -571,3 +542,47 @@
     background-color: $primary-95;
   }
 }
+
+// file upload
+.file-upload {
+  border: 1px dashed $primary-80;
+  border-radius: 4px;
+  &:hover {
+    background-color: $primary-97;
+
+    label {
+      .upload-icon {
+        border: 1px solid $primary-80;
+        svg {
+          color: $primary-10;
+        }
+      }
+    }
+  }
+  label {
+    cursor: pointer;
+    padding: 32px;
+    display: block;
+    .upload-icon {
+      border: 1px solid $primary-90;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 50%;
+      width: 100px;
+      height: 100px;
+      margin-bottom: 24px;
+      padding: 24px;
+
+      svg {
+        color: $primary-30;
+      }
+    }
+    p {
+      color: $primary-10;
+      strong {
+        font-weight: 600;
+      }
+    }
+  }
+}

package/vue-components/styles/components/header/_header-item.scss

@@ -0,0 +1,13 @@
+.header-item {
+  display: inline-block;
+  margin-left: 8px;
+  vertical-align: middle;
+
+  &:first-child {
+    margin-left: 0;
+  }
+
+  .select:not(.is-multiple) {
+    height: auto;
+  }
+}

package/vue-components/styles/components/header/_header.scss

@@ -0,0 +1,7 @@
+.inner-header {
+  padding: 6px 20px;
+  border-bottom: 1px solid $primary-95;
+  position: sticky;
+  background: $white-100;
+  z-index: 99;
+}

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

@@ -0,0 +1,2 @@
+@import "navbar";
+@import "notification";