@appscode/design-system 1.1.0-alpha.8 → 1.1.0-beta.10

package/components/_ac-terminal.scss

@@ -6,10 +6,10 @@
     font-family: "Inconsolata", monospace;
     background-color: var(--dark-bg-light);
     height: 100%;
-    color: $ac-white;
+    color: $white-100;
 
     strong {
-      color: $ac-white;
+      color: $white-100;
     }
   }
 }
@@ -18,23 +18,26 @@
   border-top: 1px solid var(--ac-white-light);
   padding: 0;
   position: fixed;
-  width: calc(100% - 270px);
+  width: calc(100% - 250px);
   bottom: 0;
-  background-color: $ac-white;
-  color: $ac-white;
+  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;
@@ -42,29 +45,36 @@
     z-index: 9;
     cursor: row-resize;
     top: -15px;
+
     &:hover {
-      border-bottom: 3px solid $ac-white-light;
+      border-bottom: 3px solid $primary-90;
     }
   }
+
   .terminal-header {
-    border-top: 1px solid $ac-white-lighter;
+    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: $ac-white-lighter;
+      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;
@@ -87,20 +97,25 @@
         &:hover::-webkit-scrollbar-corner {
           height: 40px;
         }
+
         .is-active {
           box-shadow: none !important;
           margin-right: 0 !important;
+
           &:after {
             height: 2px;
           }
+
           a {
-            background-color: $ac-white;
+            background-color: $white-100;
           }
         }
+
         li:not(.is-active) {
           margin-right: -1px;
-          border-right: 1px solid $ac-white-lighter;
+          border-right: 1px solid $white-100-lighter;
         }
+
         li {
           a {
             margin-bottom: 0px;
@@ -109,10 +124,14 @@
             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;
@@ -122,31 +141,35 @@
             }
 
             .button {
-              img {
-                width: 10px;
-              }
+              color: $primary-90;
             }
           }
         }
       }
+
       .options-items {
         top: 15px;
         left: 40px;
+
         .items-inner {
           border: none;
+
           li {
             border: none;
             border-right: none !important;
-            border-bottom: 1px solid $ac-white-lighter;
+            border-bottom: 1px solid $white-100-lighter;
             width: 100%;
+
             &:last-child {
               border-bottom: none;
             }
+
             a {
               font-size: 13px;
               padding: 10px 20px;
+
               &:hover {
-                color: $ac-primary !important;
+                color: $primary !important;
               }
             }
           }
@@ -158,6 +181,7 @@
           .fa {
             font-size: 20px;
           }
+
           img {
             width: 11px;
           }
@@ -165,16 +189,19 @@
       }
     }
   }
+
   .terminal-setting {
-    background-color: var(--dark-bg);
+    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;
@@ -190,18 +217,22 @@
         border-radius: 4px;
         color: #ffffff !important;
         text-transform: uppercase;
+
         &.is-success {
           background-color: #27b064 !important;
         }
+
         &.is-danger {
-          background-color: $ac-red !important;
+          background-color: $danger !important;
         }
       }
     }
   }
+
   .terminal-body {
     p {
       font-family: Fira Code;
+
       .code-static {
         color: #0ff05c;
         font-weight: 500;
@@ -212,59 +243,72 @@
       }
     }
   }
+
   .button {
     &.is-transparent {
       &:hover {
-        background-color: $ac-white-light;
+        background-color: $primary-90;
       }
     }
   }
+
   .multiselect.multiselect--active {
     .multiselect__tags {
-      border: 1px solid $ac-white !important;
+      border: 1px solid $white-100 !important;
+
       .multiselect__input {
-        color: $ac-white !important;
+        color: $white-100 !important;
       }
     }
   }
+
   .multiselect .multiselect__tags {
-    background-color: $ac-color-text;
-    border: 1px solid $ac-color-value;
+    background-color: $primary-10;
+    border: 1px solid $primary-20;
+
     span {
-      color: $ac-white;
+      color: $white-100;
     }
   }
 }
 
+.notification-inner {
+  h3 {
+    color: $primary-97;
+  }
+}
+
 // dark theme start
-.is-dark-theme {
-  // ac-terminal
-  .ac-terminal {
-    .terminal-setting {
-      --ac-color-value: var(--dark-bg-light);
-
-      .left-content .ac-select-box-wrapper .multiselect .multiselect__tags {
-        .multiselect__input {
-          background-color: var(--dark-bg-light);
-          color: var(--ac-white-text);
-        }
+// .is-dark-theme {
 
-        .multiselect__single {
-          background-color: var(--dark-bg-light);
-          color: var(--ac-white-text);
-        }
-      }
-    }
+//   // ac-terminal
+//   .ac-terminal {
+//     .terminal-setting {
+//       --ac-color-value: var(--dark-bg-light);
 
-    .multiselect {
-      .multiselect__tags {
-        background-color: transparent;
+//       .left-content .ac-select-box-wrapper .multiselect .multiselect__tags {
+//         .multiselect__input {
+//           background-color: var(--dark-bg-light);
+//           color: var(--ac-white-text);
+//         }
 
-        span {
-          color: var(--ac-white-text);
-        }
-      }
-    }
-  }
-}
-// dark theme end
+//         .multiselect__single {
+//           background-color: var(--dark-bg-light);
+//           color: var(--ac-white-text);
+//         }
+//       }
+//     }
+
+//     .multiselect {
+//       .multiselect__tags {
+//         background-color: transparent;
+
+//         span {
+//           color: var(--ac-white-text);
+//         }
+//       }
+//     }
+//   }
+// }
+
+// dark theme end

package/components/_add-card.scss

@@ -8,7 +8,7 @@
       border: none;
       height: 46px;
       width: 46px;
-      background-color: $ac-white;
+      background-color: $white-100;
       border-radius: 4px 0 0 0;
       font-size: 16px;
     }
@@ -17,13 +17,13 @@
       font-weight: 600;
       font-size: 25px;
       line-height: 29px;
-      color: $ac-color-heading;
+      color: $primary-5;
       margin-left: 20px;
     }
   }
 
   .card-body {
-    background-color: $ac-white;
+    background-color: $white-100;
     padding: 20px;
 
     .card-information {

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-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 "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 "bbum/all";
+@import "ui-builder/ui-builder";
+@import "ui-builder/vue-open-api";

package/components/_app-drawer.scss

@@ -1,134 +0,0 @@
-.app-drawer-wrapper {
-  width: 35px;
-  height: 35px;
-  border-radius: 50%;
-  padding: 5px;
-  transition: all 0.3s ease-in-out;
-  position: relative;
-  z-index: 99;
-  user-select: none;
-
-  &:hover {
-    background-color: rgba(255, 255, 255, 0.7);
-    cursor: pointer;
-  }
-
-  .drawer-icon {
-    width: 100%;
-    text-align: center;
-    vertical-align: middle;
-  }
-
-  .app-drawer-dropdown {
-    ul {
-      border-radius: 4px;
-      overflow: hidden;
-
-      li {
-        display: block;
-        font-size: 13px;
-      }
-
-      background-color: #edf0f5;
-      box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.16);
-      min-width: 280px;
-    }
-
-    li {
-      a {
-        display: block;
-        color: $ac-color-text !important;
-        padding: 10px 20px !important;
-        font-size: 13px !important;
-        transition: 0.2s;
-
-        span {
-          margin-top: -3px;
-        }
-
-        &:hover {
-          .media-content {
-            .content {
-              p {
-                color: $ac-white;
-              }
-            }
-          }
-        }
-
-        .media {
-          .media-left {
-            .image {
-              img {
-                height: 44px;
-                width: auto;
-              }
-            }
-          }
-
-          .media-content {
-            overflow: hidden;
-
-            .content {
-              p {
-                vertical-align: middle;
-                line-height: 1;
-                transition: 0.3s;
-
-                strong {
-                  font-weight: 600;
-                  font-size: 17px;
-                  font-family: $ac-family-heading;
-                }
-
-                span {
-                  display: block;
-                  font-size: 13px;
-                  margin-top: 10px;
-                }
-              }
-            }
-          }
-        }
-      }
-
-      &:hover {
-        > a {
-          background-color: $ac-white;
-        }
-      }
-
-      &:first-child {
-        &:hover {
-          > a {
-            border-radius: 4px 4px 0 0;
-          }
-        }
-      }
-
-      &:last-child {
-        &:hover {
-          > a {
-            border-radius: 0 0 4px 4px;
-          }
-        }
-      }
-    }
-
-    position: absolute;
-    z-index: 99;
-    right: -154px;
-    top: 50px;
-    display: block;
-    transform: scale(0) translateY(-200%);
-    transition: all 0.3s ease-in-out;
-
-    hr {
-      margin: 0;
-    }
-  }
-
-  .app-drawer-dropdown.is-active {
-    transform: scale(1);
-  }
-}

package/components/_breadcumb.scss

@@ -1,71 +0,0 @@
-/* breadcumb style */
-.ac-breadcrumb {
-  padding: 13px 20px;
-  border-bottom: 1px solid $ac-white-light;
-  position: sticky;
-  top: 50px;
-  height: 50px;
-  background-color: $ac-white;
-  z-index: 998;
-  display: flex;
-  align-items: center;
-}
-
-.breadcrumb {
-  a {
-    color: $ac-color-value;
-    font-size: 13px;
-    padding: 0px 3px;
-    &:hover {
-      color: $ac-color-text;
-    }
-  }
-
-  li.is-active {
-    a {
-      color: $ac-color-text;
-      font-weight: 500;
-    }
-  }
-}
-
-/*=================================================================================================
-                                    Responsive code start
-=================================================================================================*/
-/**************************************************************** 
-                  Full HD Min Width 1407
-**************************************************************** */
-/* Full HD Min Width 1408px */
-@media (min-width: 1408px) {
-}
-
-/**************************************************************** 
-                  Widescreen Between 1216px and 1407px
-**************************************************************** */
-@media (min-width: 1216px) and (max-width: 1407px) {
-}
-
-/**************************************************************** 
-                  Desktop Between 1024px and 1215px
-**************************************************************** */
-@media (min-width: 1024px) and (max-width: 1215px) {
-}
-
-/**************************************************************** 
-                  Tablet Between 769px and 1023px
-**************************************************************** */
-@media (min-width: 769px) and (max-width: 1023px) {
-}
-
-/**************************************************************** 
-                    Mobile Up to 768px. 
-**************************************************************** */
-@media only screen and (min-width: 100px) and (max-width: 768px) {
-  .ac-breadcrumb {
-    padding: 5px;
-  }
-}
-
-/*=================================================================================================
-                                    Responsive code end
-=================================================================================================*/