@appscode/design-system 1.1.0-beta.4 → 1.1.0-beta.40

package/components/bbum/_information-center.scss

@@ -81,7 +81,7 @@
           content: "";
           width: 100%;
           height: 100%;
-          background-color: $ac-black;
+          background-color: $black-5;
           z-index: -1;
           opacity: 0.2;
         }
@@ -111,7 +111,7 @@
             top: 0;
             width: 100%;
             height: 100%;
-            background-color: $ac-black;
+            background-color: $black-5;
             opacity: 0.3;
             z-index: -1;
           }
@@ -169,6 +169,7 @@
     }
   }
 }
+
 .ac-system-body.has-ui-builder {
   .information-center .information-center-inner {
     top: 140px;
@@ -187,6 +188,7 @@
     }
   }
 }
+
 // dark theme end
 // Extra small devices (portrait phones, less than 576px)
 @media (max-width: 575.98px) {
@@ -196,17 +198,13 @@
 }
 
 // Small devices (landscape phones, 576px and up)
-@media (min-width: 576px) and (max-width: 767.98px) {
-}
+@media (min-width: 576px) and (max-width: 767.98px) {}
 
 // Medium devices (tablets, 768px and up)
-@media (min-width: 768px) and (max-width: 991.98px) {
-}
+@media (min-width: 768px) and (max-width: 991.98px) {}
 
 // Large devices (desktops, 992px and up)
-@media (min-width: 992px) and (max-width: 1199.98px) {
-}
+@media (min-width: 992px) and (max-width: 1199.98px) {}
 
 // Extra large devices (large desktops, 1200px and up)
-@media (min-width: 1200px) {
-}
+@media (min-width: 1200px) {}

package/components/bbum/_mobile-desktop.scss

@@ -30,7 +30,7 @@
     left: 50%;
     top: 7px;
     transform: translate(-50%, -50%);
-    background-color: $ac-bg;
+    background-color: transparent;
     border-radius: 10px;
   }
 
@@ -44,7 +44,7 @@
     width: 10px;
     height: 10px;
     border-radius: 50%;
-    background-color: $ac-bg;
+    background-color: transparent;
     display: block;
     position: absolute;
     top: 2px;
@@ -120,7 +120,7 @@
   .left-content {
     padding: 20px;
     border-radius: 4px;
-    background-color: $ac-bg;
+    background-color: transparent;
 
     h3 {
       margin-bottom: 30px;
@@ -131,7 +131,7 @@
 
   .right-content {
     border-radius: 4px;
-    background-color: $ac-bg;
+    background-color: transparent;
   }
 }
 
@@ -139,21 +139,16 @@
 Responsive Classes
 *****************************************/
 // Extra small devices (portrait phones, less than 576px)
-@media (max-width: 575.98px) {
-}
+@media (max-width: 575.98px) {}
 
 // Small devices (landscape phones, 576px and up)
-@media (min-width: 576px) and (max-width: 767.98px) {
-}
+@media (min-width: 576px) and (max-width: 767.98px) {}
 
 // Medium devices (tablets, 768px and up)
-@media (min-width: 768px) and (max-width: 991.98px) {
-}
+@media (min-width: 768px) and (max-width: 991.98px) {}
 
 // Large devices (desktops, 992px and up)
-@media (min-width: 992px) and (max-width: 1199.98px) {
-}
+@media (min-width: 992px) and (max-width: 1199.98px) {}
 
 // Extra large devices (large desktops, 1200px and up)
-@media (min-width: 1200px) {
-}
+@media (min-width: 1200px) {}

package/components/bbum/_single-post-preview.scss

@@ -180,17 +180,21 @@
               left: 24px;
               z-index: -2;
             }
+
             &:hover {
               &:nth-child(2) {
                 z-index: 1;
               }
+
               &:nth-child(3) {
                 z-index: 2;
               }
+
               img {
                 transform: scale(1.2);
               }
             }
+
             img {
               width: 18px;
               transition: 0.3s ease-in-out;
@@ -226,7 +230,7 @@
         cursor: pointer;
         display: block;
         width: 50%;
-        border-right: 1px solid $white-100-light !important;
+        border-right: 1px solid $white-100 !important;
         padding: 10px;
 
         &:last-child {
@@ -278,17 +282,13 @@
 }
 
 // Small devices (landscape phones, 576px and up)
-@media (min-width: 576px) and (max-width: 767.98px) {
-}
+@media (min-width: 576px) and (max-width: 767.98px) {}
 
 // Medium devices (tablets, 768px and up)
-@media (min-width: 768px) and (max-width: 991.98px) {
-}
+@media (min-width: 768px) and (max-width: 991.98px) {}
 
 // Large devices (desktops, 992px and up)
-@media (min-width: 992px) and (max-width: 1199.98px) {
-}
+@media (min-width: 992px) and (max-width: 1199.98px) {}
 
 // Extra large devices (large desktops, 1200px and up)
-@media (min-width: 1200px) {
-}
+@media (min-width: 1200px) {}

package/components/ui-builder/_ui-builder.scss

@@ -11,7 +11,7 @@
 }
 
 .ui-builders-wrapper {
-  width: 760px;
+  width: 800px;
 
   h5 {
     margin-bottom: 10px;
@@ -28,6 +28,10 @@
   display: grid;
   grid-template-columns: 1fr 1fr auto;
   grid-gap: 15px;
+
+  &.has-close {
+    grid-template-columns: 1fr 1fr auto auto;
+  }
 }
 
 .key-value-save-check {
@@ -153,7 +157,7 @@
     min-width: 630px;
 
     .thead {
-      background-color: $white-100-lighter;
+      background-color: $primary-90;
 
       .tr {
         .th {
@@ -206,18 +210,101 @@
 
 // details with checkradio
 .details-with-checkradio-wrapper {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
-  grid-gap: 15px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 15px;
+}
+.table {
+  tr {
+    &.is-selected {
+      background-color: $primary-97;
+      strong {
+        color: $primary;
+      }
+    }
+  }
 }
-
 // dark theme start
-.is-dark-theme {
-  .nested-body {
-    code {
-      background-color: var(--dark-bg-light);
+// .is-dark-theme {
+//   .nested-body {
+//     code {
+//       background-color: var(--dark-bg-light);
+//     }
+//   }
+// }
+
+// label action start
+.label-action {
+  align-items: center;
+  height: 21px;
+
+  .ac-single-input {
+    label {
+      margin-top: 2px;
+    }
+  }
+
+  button:not(.is-text) {
+    opacity: 0;
+    visibility: hidden;
+    transition: 0.3s ease-in-out;
+
+    img {
+      width: 15px;
+    }
+
+    &.label-icon {
+      border: none;
+      background-color: transparent;
+      cursor: pointer;
+      padding: 0;
+      transition: 0.3s ease-in-out;
+
+      &:hover {
+        opacity: 0.8;
+      }
+    }
+  }
+
+  &:hover {
+    button {
+      opacity: 1;
+      visibility: visible;
     }
   }
+
+  .ms-close-button,
+  .ac-modal-footer {
+    .buttons {
+      button {
+        opacity: 1;
+        visibility: visible;
+
+        &:hover {
+          opacity: 0.7;
+        }
+      }
+    }
+  }
+
+  .label-icon {
+    display: flex;
+    align-items: center;
+    margin-right: 10px;
+
+    img {
+      width: 16px;
+    }
+  }
+
+  strong {
+    font-style: normal;
+    font-weight: 500;
+    font-size: 13px;
+    line-height: 16px;
+    color: $primary-10;
+    margin-right: 16px;
+  }
 }
 
 //For resource input from
@@ -243,7 +330,102 @@
   top: 7px;
 }
 
-// dark theme end
+.ac-final-state {
+  margin-bottom: 10px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  .state-left {
+    h5 {
+      font-style: normal;
+      font-weight: 500;
+      font-size: 14px;
+      line-height: 19px;
+      color: $primary-10;
+    }
+
+    button {
+      &.ac-button {
+        opacity: 0;
+        visibility: hidden;
+        transition: 0.3s ease-in-out;
+      }
+    }
+  }
+
+  &:hover {
+    .state-left {
+      button {
+        &.ac-button {
+          opacity: 1;
+          visibility: visible;
+        }
+      }
+    }
+  }
+}
+
+.up-down-buttons {
+  border-radius: 4px;
+  overflow: hidden;
+  position: relative;
+  z-index: 1;
+  max-width: 36px;
+  margin-bottom: 0 !important;
+  button {
+    width: 36px;
+    height: 18px;
+    cursor: pointer;
+    border: none;
+    color: $primary;
+    background-color: $primary-90;
+    transition: 0.3s ease-in-out;
+    &:hover {
+      background-color: $primary-80;
+    }
+    &.is-primary {
+      background-color: $primary;
+      color: $white-100;
+      &:hover {
+        background-color: $primary-30;
+      }
+    }
+    .icon {
+      margin: 0;
+      padding: 0;
+      width: auto;
+      height: auto;
+    }
+  }
+}
+// buttons
+.button {
+  &.ac-button {
+    &.is-medium {
+      font-size: 1rem;
+      height: 36px;
+    }
+    &.is-tinny {
+      height: 24px;
+      padding: 0 8px;
+    }
+  }
+}
+
+.button[disabled] {
+  &.is-ghost {
+    border-color: transparent !important;
+  }
+}
+
+p.is-error,
+span.is-error {
+  color: $danger;
+  font-weight: 400;
+}
+
 /****************************************
 Responsive Classes
 *****************************************/

package/components/ui-builder/_vue-open-api.scss

@@ -51,6 +51,7 @@
 
   .ac-single-switch {
     margin-left: -15px;
+    margin-bottom: 35px;
   }
 
   .ac-single-input {
@@ -64,13 +65,13 @@
 
 .vue-form-scema-body {
   .left-content {
-    width: 650px;
-    background-color: $white-100-lighter;
+    background-color: $primary-97;
+    border-right: 1px solid $primary-90;
     padding: 30px;
+    width: 500px;
   }
 
   .right-content {
-    width: 100%;
     margin-top: 30px;
   }
 }
@@ -90,7 +91,6 @@
 }
 
 .is-collapsed {
-
   &.ac-nested-elements::before,
   &.ac-nested-elements::after {
     display: none;
@@ -99,7 +99,7 @@
 
 .ui-builders-wrapper {
   .ac-nested-elements::before {
-    bottom: 6px !important;
+    bottom: 10px !important;
   }
 }
 
@@ -136,7 +136,6 @@
     }
 
     &.is-success {
-
       input,
       .ac-card,
       textarea {
@@ -149,7 +148,6 @@
     }
 
     &.is-danger {
-
       input,
       .ac-card,
       textarea {
@@ -162,7 +160,6 @@
     }
 
     &.is-loading {
-
       input,
       .ac-card,
       textarea {
@@ -215,6 +212,10 @@
           height: 45px;
           width: 45px;
           margin-top: 0;
+          &:focus {
+            outline: none;
+            box-shadow: none;
+          }
         }
       }
 
@@ -484,10 +485,12 @@
             transition: 0.3s;
 
             &:hover {
-              background-color: hsla(var(--hsl-hue),
-                  var(--hsl-saturation),
-                  var(--hsl-lightness),
-                  0.2);
+              background-color: hsla(
+                var(--hsl-hue),
+                var(--hsl-saturation),
+                var(--hsl-lightness),
+                0.2
+              );
               color: $primary;
             }
           }
@@ -613,4 +616,47 @@
     width: 200px !important;
     padding-right: 10px;
   }
-}
+}
+
+// button scss
+.button {
+  &.ac-button {
+    padding: 8px 16px;
+    font-weight: 500;
+    line-height: 1;
+
+    &.is-light {
+      &.is-loading {
+        &::after {
+          border-color: transparent transparent #1c1c1c #1c1c1c !important;
+        }
+      }
+    }
+    &.is-ghost {
+      border-color: transparent !important;
+    }
+    &.is-square {
+      border: 1px solid $primary-95;
+    }
+    &.is-small {
+      padding: 4px 9px;
+    }
+    &.is-medium {
+      font-size: 1rem;
+      height: 36px;
+    }
+  }
+  &:focus {
+    outline: none;
+    box-shadow: none;
+  }
+}
+button.is-primary {
+  background-color: $primary;
+}
+
+.is-refresh {
+  i.fa {
+    color: $primary-10;
+  }
+}

package/layouts/_code-preview.scss

@@ -9,7 +9,7 @@
     background-color: $white-100;
 
     &.ac-bg {
-      background-color: $ac-bg;
+      background-color: transparent;
     }
 
     &.is-fullwidth {
@@ -58,13 +58,13 @@
 
       /* Handle */
       &::-webkit-scrollbar-thumb {
-        background-color: $ac-gray-light;
+        background-color: $black-50;
         border-radius: 10px;
       }
 
       /* Handle on hover */
       &::-webkit-scrollbar-thumb:hover {
-        background-color: $ac-gray-light;
+        background-color: $black-50;
       }
 
       .number {
@@ -110,6 +110,7 @@
 // new code preview
 .ac-components {
   margin: 20px;
+
   .single-component {
     // box-shadow: $ac-shadow-1;
     border: 1px solid $primary-90;
@@ -253,9 +254,7 @@ Responsive Classes
 }
 
 // Large devices (desktops, 992px and up)
-@media (min-width: 992px) and (max-width: 1199.98px) {
-}
+@media (min-width: 992px) and (max-width: 1199.98px) {}
 
 // Extra large devices (large desktops, 1200px and up)
-@media (min-width: 1200px) {
-}
+@media (min-width: 1200px) {}

package/main.scss

@@ -4,9 +4,9 @@
 
 // Third party CSS
 @import "../node_modules/bulma/bulma.sass";
-// @import "bulma-checkradio";
-// @import "bulma-switch";
-// @import "bulma-tooltip";
+@import "bulma-checkradio";
+@import "bulma-switch";
+@import "bulma-tooltip";
 @import "font-awesome/css/font-awesome.min.css";
 @import "vue-multiselect/dist/vue-multiselect.css";
 

package/package.json

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

package/vue-components/types/importFlow.ts

@@ -0,0 +1,16 @@
+interface Substep {
+  component: string;
+  identifier: number;
+  title: string;
+  isVisible: boolean;
+  isValid: () => boolean;
+  nextStep: () => void;
+  nextStepButtonText?: () => string;
+}
+
+export interface Step {
+  identifier: number;
+  title: string;
+  isVisible: boolean;
+  substeps: Substep[];
+}

package/vue-components/v2/banner/Banner.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="sign-up-notification mb-20">
-    <div class="notification-inner has-text-centered">
+    <div class="has-text-centered">
       <h3><slot name="banner-title">Error!</slot></h3>
       <slot><p>Oops!! There was an error while loading!</p></slot>
     </div>

package/vue-components/v2/editor/FilteredFileEditor.vue

@@ -7,7 +7,7 @@
           v-if="isPreviewLoading || (!isPreviewLoading && previewYamls)"
           class="left-content"
         >
-          <div class="ac-files ac-hscrollbar pt-0">
+          <div class="ac-files ac-hscrollbar ac-vscrollbar pt-0">
             <ul v-if="!isPreviewLoading">
               <li
                 v-for="(previewYaml, idx) in filteredYamls"
@@ -59,8 +59,8 @@
   </div>
 </template>
 <script>
-import Preloader from "../preloader/Preloader.vue";
 import Banner from "../banner/Banner.vue";
+import Preloader from "../preloader/Preloader.vue";
 export default {
   components: {
     Editor: () => ({

package/vue-components/v2/modal/Modal.vue

@@ -11,7 +11,7 @@
       <div class="ac-modal-inner">
         <!-- modal header start  -->
         <div class="ac-modal-header">
-          <h6>{{ title }}</h6>
+          <h5>{{ title }}</h5>
           <header-items>
             <slot name="modal-header-controls" />
             <header-item>

package/vue-components/v2/pagination/Pagination.vue

@@ -228,6 +228,7 @@ export default {
     &:active,
     &:focus-visible {
       border: 1px solid $primary;
+      outline: none;
     }
   }
 }

package/vue-components/v3/alert/Alert.vue

@@ -20,7 +20,7 @@ withDefaults(defineProps<Props>(), {
 // for alert message
 .ac-notification {
   background-color: #dee7f5;
-  font-size: 13;
+  font-size: 13px;
   color: $primary;
   min-height: 36px;
   display: flex;
@@ -232,7 +232,7 @@ AC Toast
 // dark theme start
 // .is-dark-theme {
 //   .ac-notification.is-danger {
-//     background-color: $dark-bg-light;
+//     background-color: $black-80;
 //   }
 // }
 </style>