@appscode/design-system 1.1.0-beta.2 → 1.1.0-beta.3

package/components/_ac-terminal.scss

@@ -1,243 +1,286 @@
-// // terminal scss start
-// .ac-terminal {
-//   width: 100%;
-
-//   .terminal-body {
-//     font-family: "Inconsolata", monospace;
-//     background-color: var(--dark-bg-light);
-//     height: 100%;
-//     color: $white-100;
-
-//     strong {
-//       color: $white-100;
-//     }
-//   }
-// }
+// terminal scss start
+.ac-terminal {
+  width: 100%;
 
-// .ac-terminal {
-//   border-top: 1px solid var(--ac-white-light);
-//   padding: 0;
-//   position: fixed;
-//   width: calc(100% - 270px);
-//   bottom: 0;
-//   background-color: $white-100;
-//   color: $white-100;
-//   font-size: 13px;
-//   height: 360px;
-//   z-index: 999;
-//   transition: 0.3s ease-in-out;
-//   &.is-collapsed {
-//     height: 40px !important;
-//     bottom: 0px;
-//     .terminal-setting,
-//     .terminal-body {
-//       opacity: 0;
-//       visibility: hidden;
-//     }
-//   }
-//   .resize-handler {
-//     width: 100%;
-//     position: absolute;
-//     background: transparent;
-//     z-index: 9;
-//     cursor: row-resize;
-//     top: -15px;
-//     &:hover {
-//       border-bottom: 3px solid $primary-90;
-//     }
-//   }
-//   .terminal-header {
-//     border-top: 1px solid $white-100-lighter;
-//     box-shadow: 1px -2px 5px 1px rgba(0, 0, 0, 0.08%);
-//     .tabs {
-//       padding: 0 20px 0 20px;
-//       background-color: $white-100-lighter;
-//       overflow: inherit;
-//       height: 40px;
-//       ul {
-//         border-bottom: none;
-//         padding-left: 0;
-//         max-width: 1340px;
-//         overflow-x: auto;
-//         overflow-y: hidden;
-//         li {
-//           a {
-//             margin-bottom: 0 !important;
-//           }
-//         }
-//         &::-webkit-scrollbar {
-//           border-radius: 50px;
-//           height: 3px;
-//         }
+  .terminal-body {
+    font-family: "Inconsolata", monospace;
+    background-color: var(--dark-bg-light);
+    height: 100%;
+    color: $white-100;
 
-//         &::-webkit-scrollbar:hover {
-//           height: 7px;
-//         }
+    strong {
+      color: $white-100;
+    }
+  }
+}
 
-//         &::-webkit-scrollbar-thumb {
-//           background-color: $ac-gray-light;
-//           border-radius: 50px;
-//           height: 2px !important;
-//         }
+.ac-terminal {
+  border-top: 1px solid var(--ac-white-light);
+  padding: 0;
+  position: fixed;
+  width: calc(100% - 250px);
+  bottom: 0;
+  background-color: $white-100;
+  color: $white-100;
+  font-size: 13px;
+  height: 360px;
+  z-index: 999;
+  transition: 0.3s ease-in-out;
 
-//         &::-webkit-scrollbar-thumb:hover {
-//           background-color: $ac-gray-light;
-//         }
+  &.is-collapsed {
+    height: 40px !important;
+    bottom: 0px;
 
-//         &:hover::-webkit-scrollbar-corner {
-//           height: 40px;
-//         }
-//         .is-active {
-//           box-shadow: none !important;
-//           margin-right: 0 !important;
-//           &:after {
-//             height: 2px;
-//           }
-//           a {
-//             background-color: $white-100;
-//           }
-//         }
-//         li:not(.is-active) {
-//           margin-right: -1px;
-//           border-right: 1px solid $white-100-lighter;
-//         }
-//         li {
-//           a {
-//             margin-bottom: 0px;
-//             font-size: 13px;
-//             border-radius: 0;
-//             padding: 5px 10px 5px 20px;
-//             border: none;
-//             height: 40px;
-//             .name-of-tab {
-//               width: 120px;
-//               overflow: hidden;
-//             }
-//             .terminal-icon {
-//               img {
-//                 width: 15px;
-//                 margin-right: 10px;
-//                 margin-top: 5px;
-//               }
-//             }
-
-//             .button {
-//               img {
-//                 width: 10px;
-//               }
-//             }
-//           }
-//         }
-//       }
-//       .options-items {
-//         top: 15px;
-//         left: 40px;
-//         .items-inner {
-//           border: none;
-//           li {
-//             border: none;
-//             border-right: none !important;
-//             border-bottom: 1px solid $white-100-lighter;
-//             width: 100%;
-//             &:last-child {
-//               border-bottom: none;
-//             }
-//             a {
-//               font-size: 13px;
-//               padding: 10px 20px;
-//               &:hover {
-//                 color: $primary !important;
-//               }
-//             }
-//           }
-//         }
-//       }
+    .terminal-setting,
+    .terminal-body {
+      opacity: 0;
+      visibility: hidden;
+    }
+  }
 
-//       .right-control {
-//         .button {
-//           .fa {
-//             font-size: 20px;
-//           }
-//           img {
-//             width: 11px;
-//           }
-//         }
-//       }
-//     }
-//   }
-//   .terminal-setting {
-//     background-color: var(--dark-bg);
-//     padding: 5px 20px;
-
-//     .left-content {
-//       .ac-select-box-wrapper {
-//         margin-right: 10px;
-//         .multi-select-wrapper {
-//           min-width: 200px;
-//         }
-//         .multiselect .multiselect__tags .multiselect__input,
-//         .multiselect .multiselect__tags .multiselect__single {
-//           background-color: #3b3030;
-//         }
-//       }
-//     }
+  .resize-handler {
+    width: 100%;
+    position: absolute;
+    background: transparent;
+    z-index: 9;
+    cursor: row-resize;
+    top: -15px;
 
-//     .right-content {
-//       .status-message {
-//         background-color: #666666 !important;
-//         text-align: center;
-//         padding: 4px 20px;
-//         border-radius: 4px;
-//         color: #ffffff !important;
-//         text-transform: uppercase;
-//         &.is-success {
-//           background-color: #27b064 !important;
-//         }
-//         &.is-danger {
-//           background-color: $danger !important;
-//         }
-//       }
-//     }
-//   }
-//   .terminal-body {
-//     p {
-//       font-family: Fira Code;
-//       .code-static {
-//         color: #0ff05c;
-//         font-weight: 500;
-//       }
+    &:hover {
+      border-bottom: 3px solid $primary-90;
+    }
+  }
 
-//       .code-input {
-//         color: #acd9ff;
-//       }
-//     }
-//   }
-//   .button {
-//     &.is-transparent {
-//       &:hover {
-//         background-color: $primary-90;
-//       }
-//     }
-//   }
-//   .multiselect.multiselect--active {
-//     .multiselect__tags {
-//       border: 1px solid $white-100 !important;
-//       .multiselect__input {
-//         color: $white-100 !important;
-//       }
-//     }
-//   }
-//   .multiselect .multiselect__tags {
-//     background-color: $primary-10;
-//     border: 1px solid $primary-20;
-//     span {
-//       color: $white-100;
-//     }
-//   }
-// }
+  .terminal-header {
+    border-top: 1px solid $white-100-lighter;
+    box-shadow: 1px -2px 5px 1px rgba(0, 0, 0, 0.08%);
+    background-color: $primary-10;
+
+    .tabs {
+      padding: 0 20px 0 20px;
+      background-color: $white-100-lighter;
+      overflow: inherit;
+      height: 40px;
+
+      ul {
+        border-bottom: none;
+        padding-left: 0;
+        max-width: 1340px;
+        overflow-x: auto;
+        overflow-y: hidden;
+
+        li {
+          a {
+            margin-bottom: 0 !important;
+          }
+        }
+
+        &::-webkit-scrollbar {
+          border-radius: 50px;
+          height: 3px;
+        }
+
+        &::-webkit-scrollbar:hover {
+          height: 7px;
+        }
+
+        &::-webkit-scrollbar-thumb {
+          background-color: $ac-gray-light;
+          border-radius: 50px;
+          height: 2px !important;
+        }
+
+        &::-webkit-scrollbar-thumb:hover {
+          background-color: $ac-gray-light;
+        }
+
+        &:hover::-webkit-scrollbar-corner {
+          height: 40px;
+        }
+
+        .is-active {
+          box-shadow: none !important;
+          margin-right: 0 !important;
+
+          &:after {
+            height: 2px;
+          }
+
+          a {
+            background-color: $white-100;
+          }
+        }
+
+        li:not(.is-active) {
+          margin-right: -1px;
+          border-right: 1px solid $white-100-lighter;
+        }
+
+        li {
+          a {
+            margin-bottom: 0px;
+            font-size: 13px;
+            border-radius: 0;
+            padding: 5px 10px 5px 20px;
+            border: none;
+            height: 40px;
+            background-color: transparent !important;
+            color: $primary-97;
+
+            .name-of-tab {
+              width: 120px;
+              overflow: hidden;
+            }
+
+            .terminal-icon {
+              img {
+                width: 15px;
+                margin-right: 10px;
+                margin-top: 5px;
+              }
+            }
+
+            .button {
+              color: $primary-90;
+            }
+          }
+        }
+      }
+
+      .options-items {
+        top: 15px;
+        left: 40px;
+
+        .items-inner {
+          border: none;
+
+          li {
+            border: none;
+            border-right: none !important;
+            border-bottom: 1px solid $white-100-lighter;
+            width: 100%;
+
+            &:last-child {
+              border-bottom: none;
+            }
+
+            a {
+              font-size: 13px;
+              padding: 10px 20px;
 
-// // dark theme start
+              &:hover {
+                color: $primary !important;
+              }
+            }
+          }
+        }
+      }
+
+      .right-control {
+        .button {
+          .fa {
+            font-size: 20px;
+          }
+
+          img {
+            width: 11px;
+          }
+        }
+      }
+    }
+  }
+
+  .terminal-setting {
+    background-color: $primary-5;
+    padding: 5px 20px;
+
+    .left-content {
+      .ac-select-box-wrapper {
+        margin-right: 10px;
+
+        .multi-select-wrapper {
+          min-width: 200px;
+        }
+
+        .multiselect .multiselect__tags .multiselect__input,
+        .multiselect .multiselect__tags .multiselect__single {
+          background-color: #3b3030;
+        }
+      }
+    }
+
+    .right-content {
+      .status-message {
+        background-color: #666666 !important;
+        text-align: center;
+        padding: 4px 20px;
+        border-radius: 4px;
+        color: #ffffff !important;
+        text-transform: uppercase;
+
+        &.is-success {
+          background-color: #27b064 !important;
+        }
+
+        &.is-danger {
+          background-color: $danger !important;
+        }
+      }
+    }
+  }
+
+  .terminal-body {
+    p {
+      font-family: Fira Code;
+
+      .code-static {
+        color: #0ff05c;
+        font-weight: 500;
+      }
+
+      .code-input {
+        color: #acd9ff;
+      }
+    }
+  }
+
+  .button {
+    &.is-transparent {
+      &:hover {
+        background-color: $primary-90;
+      }
+    }
+  }
+
+  .multiselect.multiselect--active {
+    .multiselect__tags {
+      border: 1px solid $white-100 !important;
+
+      .multiselect__input {
+        color: $white-100 !important;
+      }
+    }
+  }
+
+  .multiselect .multiselect__tags {
+    background-color: $primary-10;
+    border: 1px solid $primary-20;
+
+    span {
+      color: $white-100;
+    }
+  }
+}
+
+.notification-inner {
+  h3 {
+    color: $primary-97;
+  }
+}
+
+// dark theme start
 // .is-dark-theme {
+
 //   // ac-terminal
 //   .ac-terminal {
 //     .terminal-setting {
@@ -267,4 +310,5 @@
 //     }
 //   }
 // }
-// // dark theme end
+
+// dark theme end

package/components/_all.scss

@@ -1,29 +1,32 @@
-@import "ac-alert-box";
-@import "ac-accordion";
-@import "buttons";
-@import "breadcumb";
+@import "ac-terminal";
+// @import "ac-alert-box";
+// @import "ac-accordion";
+// @import "buttons";
+// @import "breadcumb";
 @import "ac-card";
-@import "basic-card";
-@import "ac-multi-select";
-@import "ac-code-highlight";
-@import "navbar";
-@import "app-drawer";
-@import "ac-drag";
-@import "left-sidebar-menu";
-@import "ac-input";
-@import "ac-content-layout";
-@import "ac-table";
-@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 "wizard";
-@import "bbum/all";
+// @import "ac-multi-select";
+// @import "ac-code-highlight";
+// @import "navbar";
+// @import "app-drawer";
+// @import "ac-drag";
+// @import "left-sidebar-menu";
+// @import "ac-input";
+// @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 "wizard";
+// @import "bbum/all";
+@import "ui-builder/ui-builder";
+@import "ui-builder/vue-open-api";