@appscode/design-system 1.0.43-alpha.99 → 1.1.0

package/components/_ac-alert-box.scss

@@ -6,13 +6,14 @@
   min-height: 36px;
   display: flex;
   align-items: center;
-  padding: 5px 30px;
+  padding: 8px 16px;
   overflow: hidden;
   border: 1px solid $ac-primary;
   border-radius: 4px;
-  justify-content: center;
+  justify-content: flex-start;
   position: relative;
   z-index: 1;
+  min-width: 280px;
 
   p {
     color: $ac-primary;
@@ -46,8 +47,33 @@
     border: none;
     font-size: 14px;
     color: $ac-danger;
-    width: 30px;
+    width: 40px;
     height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+
+.toast {
+  box-shadow: $ac-shadow-sm;
+  border: 1px solid $ac-white-light;
+  width: 350px;
+
+  .toast-header {
+    padding: 8px 12px;
+    border-bottom: 1px solid $ac-white-light;
+
+    .button {
+      &:hover {
+        color: #000000;
+      }
+    }
+  }
+
+  .toast-body {
+    padding: 8px 12px;
   }
 }
 
@@ -139,10 +165,11 @@ AC Toast
   }
 
   p {
-    padding-left: 10px;
+    padding-left: 16px;
 
     i.fa {
       padding-right: 0 !important;
+      margin-right: 4px;
     }
   }
 
@@ -158,7 +185,6 @@ AC Toast
 
   button.close-button {
     border-radius: 0px;
-    border-left: 1px solid $ac-white;
     background-color: transparent;
     border: none;
     color: $ac-white;
@@ -170,7 +196,7 @@ AC Toast
     width: 30px;
     z-index: 1;
     cursor: pointer;
-    border-left: 1px solid $ac-white;
+    border-left: 1px solid #dddddd;
   }
 }
 

package/components/_ac-card.scss

@@ -29,8 +29,6 @@
       margin-bottom: 13px;
 
       .ac-card-logo {
-        min-width: 30px;
-        max-width: 30px;
         margin-right: 10px;
         position: relative;
         z-index: 1;
@@ -83,6 +81,7 @@
     margin-right: 20px;
     padding: 30px 20px 20px;
     height: 140px;
+    cursor: pointer;
 
     .ac-card-logo {
       max-width: 50px;
@@ -109,7 +108,7 @@
     }
 
     &:hover {
-      background-color: $ac-white;
+      background-color: $ac-bg-light-gray;
     }
   }
 
@@ -172,6 +171,11 @@
     }
   }
 
+  &.is-disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
   &:hover {
     border: 1px solid $ac-primary;
 
@@ -187,15 +191,23 @@
   .ac-card-header {
     display: flex;
     align-items: center;
-    margin-bottom: 20px;
+    margin-bottom: 16px;
 
     .ac-card-logo {
       width: 40px;
       overflow: hidden;
       margin-right: 15px;
+      background: $ac-white;
+      padding: 8px;
+      height: 40px;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      border: 1px solid $ac-white-light;
     }
 
     .ac-card-title {
+      width: calc(100% - 55px);
       h4 {
         a {
           color: $ac-color-heading;
@@ -208,7 +220,7 @@
 
       p {
         font-size: $font-size-small;
-        color: $ac-gray-lightest;
+        color: $ac-gray;
       }
     }
   }

package/components/_ac-drag.scss

@@ -34,6 +34,8 @@
     ul {
       li {
         padding-left: 40px;
+        padding-top: 4px;
+        padding-bottom: 4px;
 
         &.is-not-change {
           background-color: $ac-white-lighter;

package/components/_ac-input.scss

@@ -32,7 +32,7 @@
     input,
     .ac-card,
     textarea {
-      border: 1px solid $ac-primary;
+      border: 1px solid $ac-primary !important;
     }
 
     p {
@@ -154,6 +154,7 @@
         height: 36px;
         width: 36px;
         margin-top: 0;
+        padding: 10px;
       }
     }
 
@@ -177,8 +178,8 @@
         top: -9px;
         font-weight: 500;
         color: $ac-color-value;
-        &.is-required{
-          &:after{
+        &.is-required {
+          &:after {
             width: calc(100% + 10px);
           }
         }
@@ -378,13 +379,13 @@
   }
 
   .ac-textarea {
-   .ac-label{
-    &.is-required{
-      &:after{
-        width: calc(100% + 10px);
+    .ac-label {
+      &.is-required {
+        &:after {
+          width: calc(100% + 10px);
+        }
       }
     }
-   }
     textarea {
       border: 1px solid $ac-label-text;
       background-color: transparent;
@@ -393,7 +394,6 @@
       &.bg-white {
         background-color: transparent;
       }
-      
 
       &:focus {
         outline: none;
@@ -657,6 +657,7 @@ input#captcha {
       font-size: 13px;
       padding-top: 0;
       padding-left: 40px;
+      height: auto;
 
       &::before {
         width: 30px;
@@ -714,6 +715,14 @@ input#captcha {
   }
 }
 
+.ac-single-switch.is-small .switch[type="checkbox"] + label,
+.buttons.are-small
+  .ac-single-switch.button.ac-button
+  .switch[type="checkbox"]
+  + label {
+  height: 19px;
+}
+
 // transparent input
 .transparent-input {
   display: flex;
@@ -797,11 +806,10 @@ input#captcha {
     label {
       color: $ac-label-text;
     }
-    .button.is-information:focus{
+    .button.is-information:focus {
       background-color: $dark-bg-light;
     }
   }
-  
 }
 // dark theme end
 /****************************************

package/components/_ac-modal.scss

@@ -41,7 +41,7 @@
 
   &.is-large {
     .ac-modal-inner {
-      width: 1000px;
+      width: 1000px !important;
     }
   }
 

package/components/_ac-multi-select.scss

@@ -466,16 +466,43 @@ li {
       z-index: 99;
       right: 30px;
     }
+    &.has-refresh-button {
+      .multiselect__select {
+        z-index: 99;
+        right: 60px;
+      }
+      .button {
+        &.is-refresh {
+          right: 30px;
+        }
+      }
+    }
+    .button {
+      &.is-information {
+        right: 0;
+      }
+    }
+  }
+  &.has-refresh-button {
+    .multiselect__select {
+      z-index: 99;
+      right: 30px;
+    }
+    .button {
+      &.is-refresh {
+        right: 0;
+      }
+    }
   }
 
   .button {
-    &.is-information {
+    &.is-information,
+    &.is-refresh {
       background-color: transparent;
       border: none;
       position: absolute;
-      right: 0;
-      height: 45px;
-      width: 45px;
+      height: 36px;
+      width: 36px;
       z-index: 90;
       margin-top: 0;
 
@@ -486,9 +513,38 @@ li {
         transform: scale(0.8);
       }
     }
+    &.is-refresh.spin {
+      i {
+        animation: spin 1s linear infinite;
+      }
+    }
   }
 }
 
+@-moz-keyframes spin {
+  from {
+    -moz-transform: rotate(0deg);
+  }
+  to {
+    -moz-transform: rotate(360deg);
+  }
+}
+@-webkit-keyframes spin {
+  from {
+    -webkit-transform: rotate(0deg);
+  }
+  to {
+    -webkit-transform: rotate(360deg);
+  }
+}
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
 // has info button end
 
 // dark theme start

package/components/_ac-report.scss

@@ -0,0 +1,53 @@
+.report-charts {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding-top: 20px;
+  gap: 20px;
+  align-items: center;
+  align-content: stretch;
+}
+.report-charts > * {
+  flex: 1;
+}
+.vulnerability-chart {
+  height: 250px;
+  width: 250px;
+  margin-right: 20px;
+}
+
+// tr {
+//   .vulnerability-chart {
+//     height: 200px;
+//     width: 200px;
+//     margin-right: 20px;
+//   }
+//   .vulnerability-table {
+//     height: 200px;
+//   }
+// }
+.vulnerability-table {
+  height: 250px;
+  thead {
+    tr {
+      th {
+        border: none;
+        padding: 4px 8px !important;
+      }
+    }
+  }
+  tbody {
+    tr {
+      td {
+        vertical-align: middle;
+        padding: 4px 8px;
+      }
+    }
+  }
+}
+.color-div {
+  height: 10px;
+  width: 10px;
+  display: inline-block;
+  margin-right: 5px;
+}

package/components/_ac-table.scss

@@ -12,13 +12,13 @@
 
     /* Handle */
     &::-webkit-scrollbar-thumb {
-      background-color: $ac-gray-light;
+      background-color: $ac-white-light;
       border-radius: 10px;
     }
 
     /* Handle on hover */
     &::-webkit-scrollbar-thumb:hover {
-      background-color: $ac-gray-light;
+      background-color: $ac-white-light;
     }
   }
 }
@@ -207,6 +207,23 @@
             border-radius: 50%;
           }
         }
+
+        .collapsible-row {
+          max-height: 0;
+          overflow-y: hidden;
+
+          &.is-active {
+            max-height: 60vh;
+            overflow-y: overlay;
+            animation: expand 0.5s ease-in-out;
+          }
+
+          &.is-closed {
+            max-height: 0;
+            overflow-y: hidden;
+            animation: collapse 0.5s ease-in-out;
+          }
+        }
       }
 
       .options-items {
@@ -418,6 +435,47 @@
   color: $ac-primary;
 }
 
+// table inner shadow
+.table-inner-shadow {
+  border-radius: 0px;
+  background: $ac-white-lighter;
+  box-shadow: inset 5px 5px 10px #e3e6e9, inset -5px -5px 10px #ffffff;
+}
+
+@keyframes expand {
+  from {
+    max-height: 0;
+    overflow-y: hidden;
+  }
+  1% {
+    overflow-y: hidden;
+  }
+  99% {
+    overflow-y: hidden;
+  }
+  to {
+    max-height: 60vh;
+    overflow-y: overlay;
+  }
+}
+
+@keyframes collapse {
+  from {
+    max-height: 60vh;
+    overflow-y: overlay;
+  }
+  1% {
+    overflow-y: hidden;
+  }
+  99% {
+    overflow-y: hidden;
+  }
+  to {
+    max-height: 0;
+    overflow-y: hidden;
+  }
+}
+
 // GENERAL TABLE END
 
 /****************************************

package/components/_ac-tabs.scss

@@ -6,14 +6,14 @@
 
     &.is-line {
       ul {
-        border-bottom-color: $ac-white-light;
+        // border-bottom-color: $ac-white-light;
 
         li {
           &.is-active {
             a {
               font-weight: 500;
               border-bottom-color: $ac-primary;
-              border-color: $ac-primary !important;
+              border-bottom: 2px solid $ac-primary !important;
               border-width: 2px;
             }
           }
@@ -23,6 +23,7 @@
             font-weight: 400;
             color: $ac-color-heading;
             font-size: $font-size-small;
+            border-bottom: none;
             padding: 6px 20px;
 
             &:hover {
@@ -152,6 +153,19 @@
         }
       }
     }
+
+    &.kubedb-ui-tabs {
+      ul {
+        border-bottom: none;
+        li {
+          &.is-active {
+            a {
+              border-bottom: 3px solid $ac-primary !important;
+            }
+          }
+        }
+      }
+    }
   }
 }
 

package/components/_ac-tags.scss

@@ -1,3 +1,85 @@
+.tag:not(body) {
+  background-color: $ac-white-light;
+  font-size: 10px;
+  height: 18px;
+  font-weight: 500;
+  line-height: 1;
+  letter-spacing: 0px;
+  color: $ac-color-heading;
+  &.is-outlined {
+    border: 1px solid;
+    background-color: transparent;
+  }
+
+  a {
+    &:hover {
+      color: $ac-color-text;
+    }
+  }
+
+  &.is-available {
+    background-color: #27b064;
+    color: $ac-white;
+  }
+
+  &.is-success {
+    background-color: $ac-green;
+    color: $ac-white;
+
+    &.is-light {
+      background-color: rgba(39, 176, 100, 0.2);
+      color: $ac-green;
+    }
+  }
+
+  &.is-primary {
+    background-color: $ac-primary;
+    color: $ac-white;
+
+    &.is-light {
+      background-color: rgba(25, 113, 189, 0.2);
+      color: $ac-primary;
+    }
+  }
+
+  &.is-gray {
+    background-color: #e5e9f2;
+    color: $ac-gray-darker;
+  }
+
+  &.is-warning {
+    background-color: $ac-warning;
+    color: $ac-white;
+
+    &.is-light {
+      background-color: #ffd58b42;
+      color: #c88b21;
+    }
+  }
+
+  &.is-danger {
+    background-color: $ac-red;
+    color: $ac-white !important;
+
+    &.is-light {
+      background-color: rgba(234, 61, 47, 0.2);
+      color: $ac-red !important;
+    }
+  }
+}
+
+.tags {
+  .icon {
+    margin-bottom: 0.5rem;
+  }
+
+  .tag {
+    a {
+      font-weight: 500;
+    }
+  }
+}
+
 .has-tags {
   display: flex;
   align-items: center;
@@ -27,5 +109,8 @@
     &.is-danger {
       @include ac-tags($ac-danger);
     }
+    &.is-dark {
+      @include ac-tags($ac-gray-dark);
+    }
   }
 }

package/components/_ac-terminal.scss

@@ -1,7 +1,5 @@
 // terminal scss start
 .ac-terminal {
-  bottom: 0px;
-  height: 300px;
   width: 100%;
 
   .terminal-body {
@@ -25,7 +23,7 @@
   background-color: $ac-white;
   color: $ac-white;
   font-size: 13px;
-  height: 320px;
+  height: 360px;
   z-index: 999;
   transition: 0.3s ease-in-out;
   &.is-collapsed {

package/components/_all.scss

@@ -0,0 +1,28 @@
+@import "ac-alert-box";
+@import "ac-accordion";
+@import "buttons";
+@import "breadcumb";
+@import "ac-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";