@appscode/design-system 1.0.43-alpha.70 → 1.0.43-alpha.74

package/base/utilities/dark-theme.scss

@@ -15,7 +15,7 @@ $dark-bg-light: var(--dark-bg-light);
   --ac-white-light: #3f3f3f;
   --ac-white-lighter: #2e323c;
   --ac-label-text: #8c8c8c;
-  --ac-bg-light-gray: #2e323c;
+  --ac-bg-light-gray: #252830;
 
   --ac-color-value: hsl(
     var(--font-hsl-hue),

package/components/_ac-input.scss

@@ -459,6 +459,7 @@
       cursor: pointer;
       padding: 15px;
       right: 0;
+      top: 0;
     }
   }
 

package/components/_ac-options.scss

@@ -56,13 +56,14 @@
   }
 
   .options-items {
-    box-shadow: $ac-shadow-1;
     border-radius: 4px;
     position: absolute;
     z-index: 99;
     background-color: $ac-white;
     min-width: 160px;
     top: 30px;
+    padding: 5px 0;
+    border: 1px solid $ac-white-light;
 
     li {
       .list-button {
@@ -78,8 +79,8 @@
         display: block;
 
         &:hover {
-          background-color: $ac-primary;
-          color: $ac-white;
+          background-color: $ac-bg-light-gray;
+          color: $ac-primary;
         }
 
         span {
@@ -93,14 +94,14 @@
 
       a {
         font-size: $font-size-small;
-        padding: 10px 30px;
+        padding: 10px 15px;
         display: block;
         text-decoration: none !important;
         color: $ac-color-text !important;
 
         &:hover {
-          background-color: $ac-primary;
-          color: $ac-white !important;
+          background-color: $ac-bg-light-gray;
+          color: $ac-primary !important;
         }
       }
     }

package/components/_ac-table.scss

@@ -137,7 +137,9 @@
     }
 
     tr {
-      cursor: pointer;
+      &.is-link {
+        cursor: pointer;
+      }
       border-bottom: 1px solid var(--ac-white-light);
 
       td {

package/components/_left-sidebar-menu.scss

@@ -216,7 +216,11 @@
 
               strong {
                 max-width: calc(100% - 65px);
-                line-break: anywhere;
+                // line-break: anywhere;
+                white-space: break-spaces;
+                display: flex;
+                align-items: center;
+                overflow: hidden;
                 font-weight: 400;
               }
 

package/package.json

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

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

@@ -19,6 +19,7 @@
         },
         theme: theme,
         readOnly: readOnly,
+        wordWrap: wordWrap,
         scrollBeyondLastLine: false
       }"
     />
@@ -34,6 +35,7 @@
         },
         theme: theme,
         readOnly: true,
+        wordWrap: wordWrap,
         scrollBeyondLastLine: false
       }"
       :original="originalEditorContent"
@@ -72,7 +74,11 @@ export default {
     editorTheme: {
       type: String,
       default: ""
-    }
+    },
+    wordWrap: {
+      type: String,
+      default: "off"
+    },
   },
   components: {
     EditorTabs: () => import("../tabs/EditorTabs.vue"),

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

@@ -17,6 +17,7 @@
             <header-item>
               <ac-button
                 modifier-classes="is-square is-transparent"
+                :disabled="isCloseOptionDisabled"
                 :icon-image="require('@/assets/images/icons/close-icon.svg')"
                 @click.stop="destroyModal"
               />
@@ -62,6 +63,10 @@ export default {
       type: String,
       default: "",
     },
+    isCloseOptionDisabled: {
+      type: Boolean,
+      default: false,
+    }
   },
 
   components: {
@@ -102,6 +107,7 @@ export default {
       document.addEventListener("keydown", this.onKeyDown);
     },
     destroyModal() {
+      if (this.isCloseOptionDisabled) return;
       this.showModal = false;
       document.removeEventListener("keydown", this.onKeyDown);
 

package/vue-components/v2/table/TableRow.vue

@@ -6,7 +6,7 @@
     custom
     v-slot="{ navigate }"
   >
-    <tr @click="navigate">
+    <tr class="is-link" @click="navigate">
       <slot />
       <fake-table-cell
         v-if="fakeCellWidth > 0"

package/vue-components/v2/tabs/EditorTabs.vue

@@ -1,5 +1,5 @@
 <template>
-  <tabs-body class="mt-20">
+  <tabs-body>
     <tabs class="is-line">
       <tab-item :is-active="activeTab === 'edit'">
         <a @click.prevent="$emit('tabchange', 'edit')">Edit</a>

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

@@ -20,6 +20,7 @@
         },
         theme: theme,
         readOnly: readOnly,
+        wordWrap: wordWrap,
         scrollBeyondLastLine: false
       }"
     />
@@ -35,6 +36,7 @@
         },
         theme: theme,
         readOnly: true,
+        wordWrap: wordWrap,
         scrollBeyondLastLine: false
       }"
       :original="originalEditorContent"
@@ -74,7 +76,11 @@ export default defineComponent({
     editorTheme: {
       type: String,
       default: ""
-    }
+    },
+    wordWrap: {
+      type: String,
+      default: "off"
+    },
   },
 
   emits: ["update:modelValue"],

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

@@ -17,6 +17,7 @@
             <header-item>
               <ac-button
                 modifier-classes="is-square is-transparent"
+                :disabled="isCloseOptionDisabled"
                 :icon-image="crossIcon"
                 @click.stop="destroyModal"
               />
@@ -64,6 +65,10 @@ export default defineComponent({
       type: String,
       default: "",
     },
+    isCloseOptionDisabled: {
+      type: Boolean,
+      default: false,
+    }
   },
   emits: ["closemodal"],
 
@@ -116,6 +121,7 @@ export default defineComponent({
       document.addEventListener("keydown", this.onKeyDown);
     },
     destroyModal() {
+      if (this.isCloseOptionDisabled) return;
       this.showModal = false;
       document.removeEventListener("keydown", this.onKeyDown);
 

package/vue-components/v3/table/TableRow.vue

@@ -6,7 +6,7 @@
     custom
     v-slot="{ navigate }"
   >
-    <tr @click="navigate" v-bind="$attrs">
+    <tr class="is-link" @click="navigate" v-bind="$attrs">
       <slot />
       <fake-table-cell
         v-if="fakeCellWidth > 0"

package/vue-components/v3/tabs/EditorTabs.vue

@@ -1,5 +1,5 @@
 <template>
-  <tabs-body class="mt-20">
+  <tabs-body class="mt-10">
     <tabs class="is-line">
       <tab-item :is-active="activeTab === 'edit'">
         <a @click.prevent="$emit('tabchange', 'edit')">Edit</a>