@appscode/design-system 2.0.6-alpha.2 → 2.0.7

package/components/_ac-tabs.scss

@@ -0,0 +1,313 @@
+.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;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/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-10;
+//         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/components/_all.scss

@@ -0,0 +1,35 @@
+// @import "ac-alert-box";
+// @import "ac-accordion";
+// @import "buttons";
+// @import "breadcumb";
+// @import "ac-multi-select";
+// @import "ac-code-highlight";
+// @import "navbar";
+// @import "app-drawer";
+// @import "ac-drag";
+// @import "left-sidebar-menu";
+// @import "ac-content-layout";
+// @import "ac-table";
+// @import "ac-tabs";
+// @import "graph";
+// @import "ac-modal";
+// @import "payment-card";
+// @import "pagination";
+// @import "ac-options";
+// @import "image-upload";
+// @import "ac-alert-box";
+// @import "dashboard-header";
+// @import "ac-tags";
+// @import "go-to-top";
+// @import "ac-toaster/ac-toasted";
+// @import "preview-modal";
+// @import "bbum/all";
+// @import "wizard";
+
+@import "terminal";
+@import "input";
+@import "multi-select";
+@import "report";
+@import "getkeeper";
+@import "ui-builder/ui-builder";
+@import "ui-builder/vue-open-api";

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

@@ -257,6 +257,23 @@
     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;
@@ -296,6 +313,12 @@
         margin-top: -1px;
         z-index: -1;
       }
+
+      // &.is-required {
+      //   &:after {
+      //     width: calc(100% + 10px);
+      //   }
+      // }
     }
   }
 
@@ -548,47 +571,3 @@
     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;
-      }
-    }
-  }
-}