@appscode/design-system 2.0.81 → 2.0.83

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appscode/design-system",
-  "version": "2.0.81",
+  "version": "2.0.83",
   "description": "A design system for Appscode websites and dashboards made using Bulma",
   "main": "main.scss",
   "scripts": {

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

@@ -54,7 +54,7 @@
     background-color: $ac-secondary;
 
     .tabs {
-      padding: 0 20px 0 20px;
+      padding: 0 8px 0 0;
       background-color: $ac-secondary;
       overflow: inherit;
       height: 40px;
@@ -121,7 +121,7 @@
             margin-bottom: 0px;
             font-size: 13px;
             border-radius: 0;
-            padding: 5px 10px 5px 20px;
+            padding: 8px 8px 8px 20px;
             border: none;
             height: 40px;
             background-color: transparent !important;
@@ -142,6 +142,10 @@
 
             .button {
               color: $secondary-60;
+              &:hover {
+                background: transparent;
+                color: $danger;
+              }
             }
           }
         }
@@ -149,6 +153,20 @@
 
       .ac-options {
         position: relative;
+        height: 40px;
+        width: 40px;
+
+        &:hover {
+          background-color: transparent;
+        }
+        .button {
+          &.ac-button {
+            height: 100%;
+            border-radius: 0 4px 4px 0;
+            z-index: 9;
+            width: 40px;
+          }
+        }
 
         .options-items {
           top: 5px;
@@ -210,7 +228,7 @@
 
   .terminal-setting {
     background-color: $secondary-5;
-    padding: 5px 20px;
+    padding: 5px 20px 5px 0;
 
     .left-content {
       .ac-select-box-wrapper {
@@ -304,3 +322,81 @@
     width: calc(100% - 60px);
   }
 }
+
+// kubedb terminal
+.kubedb-terminal {
+  .terminal-setting {
+    background-color: $secondary-dark-grey;
+    .terminal-configs {
+      display: flex;
+      align-items: center;
+      color: $white-100;
+      li {
+        padding: 8px 16px 8px 16px;
+        margin: 0px 0px;
+        border-right: 1px solid $secondary-20;
+        &:first-child {
+          border-left: 1px solid $secondary-20;
+        }
+        button {
+          background-color: transparent;
+          border: none;
+          color: $white-100;
+          cursor: pointer;
+          opacity: 0;
+          visibility: hidden;
+          margin: 0;
+          padding: 0 0 0 10px;
+          transition: 0.3 ease-in-out;
+        }
+        &:hover {
+          button {
+            opacity: 1;
+            visibility: visible;
+          }
+        }
+        &:last-child {
+          border-right: none;
+        }
+        &.terminal-config-step {
+          font-weight: 600;
+          font-style: oblique;
+        }
+      }
+    }
+
+    .right-content {
+      .multi-select-wrapper {
+        min-width: 250px;
+        margin-right: 0px;
+        label.show-label {
+          display: none;
+        }
+
+        .multiselect {
+          .multiselect__tags {
+            background-color: $secondary-30;
+            border: none;
+            .multiselect__input {
+              color: $ac-primary;
+              background-color: $secondary-30;
+            }
+
+            .multiselect__single {
+              top: 0;
+              color: $white-100;
+              background-color: $secondary-30;
+            }
+            .multiselect__element {
+              display: block;
+              .multiselect__option {
+                display: block;
+                align-items: center;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}