@appscode/design-system 2.0.23-alpha.2 → 2.0.24-alpha.1

package/package.json

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

package/vue-components/styles/base/utilities/_global.scss

@@ -763,6 +763,18 @@ $border_color_4: transparent transparent #585d6e transparent;
 
 // Status css
 // ac-footer sticky end
+body:has(.has-info-content) {
+  &:after {
+    position: absolute;
+    content: "";
+    left: 0;
+    top: 0;
+    width: calc(100% - 550px);
+    height: 100vh;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 9999;
+  }
+}
 .information-center {
   min-height: calc(100vh - 0px);
   padding: 20px;
@@ -773,7 +785,7 @@ $border_color_4: transparent transparent #585d6e transparent;
   right: 0;
   background: #fff;
   top: 0;
-  z-index: 9999;
+  z-index: 99999;
   box-shadow: -3px 2px 10px 3px rgba(0, 0, 0, 0.1);
 
   .info-title {

package/vue-components/styles/components/select-box/_multi-select.scss

@@ -196,6 +196,7 @@
 
   .multiselect--disabled {
     opacity: unset;
+    background: transparent !important;
   }
 
   &.is-disable {

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

@@ -145,8 +145,8 @@
 }
 
 .footer-bottom-fixed {
-  position: fixed!important;
-  bottom: 8px!important;
+  position: fixed !important;
+  bottom: 8px !important;
   width: calc(100% - 280px);
   border-top: 1px solid $primary-90;
   padding-top: 8px;

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

@@ -124,15 +124,12 @@ watch(
 </script>
 
 <template>
-  <div class="ac-preview is-not-fixed pl-20 pr-20">
+  <div class="ac-preview is-not-fixed">
     <div class="ac-preview-inner">
       <!-- preview body start  -->
-      <div
-        class="ac-preview-body mt-0"
-        :class="{
-          'is-justify-content-center': isYamlsEmpty && !isPreviewLoading,
-        }"
-      >
+      <div class="ac-preview-body mt-0" :class="{
+        'is-justify-content-center': isYamlsEmpty && !isPreviewLoading,
+      }">
         <strong v-if="isYamlsEmpty && !isPreviewLoading">
           No Data Available
           <i class="pl-5 fa fa-exclamation-circle" aria-hidden="true"></i>
@@ -141,19 +138,12 @@ watch(
           <div v-if="!isPreviewLoading && previewYamls" class="left-content">
             <div class="ac-files ac-hscrollbar ac-vscrollbar pt-0">
               <ul v-if="!isPreviewLoading">
-                <li
-                  v-for="(previewYaml, idx) in filteredYamls"
-                  :key="previewYaml.name + idx"
-                  :class="{ 'is-active': activeKey === previewYaml.uid }"
-                  :title="previewYaml.name"
-                  data-testid="filtered-file-editor-file-name"
-                >
+                <li v-for="(previewYaml, idx) in filteredYamls" :key="previewYaml.name + idx"
+                  :class="{ 'is-active': activeKey === previewYaml.uid }" :title="previewYaml.name"
+                  data-testid="filtered-file-editor-file-name">
                   <a @click.prevent="setActivePreview(previewYaml.uid)">
                     <span>
-                      <img
-                        src="~@appscode/design-system-images/icons/file-icon.svg"
-                        alt=""
-                      />
+                      <img src="~@appscode/design-system-images/icons/file-icon.svg" alt="" />
                     </span>
                     <span>{{ previewYaml.name }}</span>
                   </a>
@@ -164,20 +154,11 @@ watch(
           </div>
           <div class="right-content" data-testid="filtered-file-editor-content">
             <resource-loader v-if="isPreviewLoading" />
-            <strong v-else-if="isYamlsNotSelected"
-              >Selecet a data from sidebar</strong
-            >
+            <strong v-else-if="isYamlsNotSelected">Selecet a data from sidebar</strong>
             <strong v-else-if="hideValue"> *************** </strong>
-            <editor
-              v-else
-              v-model="activeFile.content"
-              :original-value="originalValue"
-              :language="activeFile.type"
-              :read-only="isEditorReadOnly"
-              :editor-height="editorHeight"
-              :show-minimap="showMinimap"
-              :word-wrap="wordWrap"
-            />
+            <editor v-else v-model="activeFile.content" :original-value="originalValue" :language="activeFile.type"
+              :read-only="isEditorReadOnly" :editor-height="editorHeight" :show-minimap="showMinimap"
+              :word-wrap="wordWrap" />
           </div>
         </template>
       </div>