@appscode/design-system 1.0.43-alpha.193 → 1.0.43-alpha.195

package/base/utilities/_default.scss

@@ -143,11 +143,13 @@
     }
   }
 }
+
 .ac-system-body {
   &.is-preview-step {
     grid-template-columns: calc(100% - 270px) 270px !important;
   }
 }
+
 .form-content {
   width: 720px;
 }
@@ -168,18 +170,22 @@ input[type="color"] {
   padding: 2px;
   cursor: pointer;
 }
+
 input[type="color"]::-webkit-color-swatch-wrapper {
   padding: 0;
 }
+
 // input[type="color"]::-moz-color-swatch,
 input[type="color"]::-webkit-color-swatch {
   border: none;
   border-radius: 50%;
 }
+
 input[type="color"]::-moz-color-swatch {
   border: none;
   border-radius: 50%;
 }
+
 // color swatch end
 
 .is-dark-theme {
@@ -226,45 +232,47 @@ input[type="color"]::-moz-color-swatch {
   position: inherit !important;
 }
 
-.b-1 {
-  border: 1px solid $ac-white-light;
-}
-
-.b-t-1 {
-  border-top: 1px solid $ac-white-light;
-}
-
-.b-b-1 {
-  border-bottom: 1px solid $ac-white-light;
-}
-
-.b-l-1 {
-  border-left: 1px solid $ac-white-light;
-}
-
-.b-r-1 {
-  border-right: 1px solid $ac-white-light;
-}
-
 // border none
 .is-border-none {
   border: none !important;
 }
 
-.b-b-n {
-  border-bottom: none !important;
+.b-1 {
+  border: 1px solid $ac-white-light;
 }
 
-.b-t-n {
-  border-top: none !important;
+// border left, right, top, bottom none
+$positions: (
+  "b": "bottom",
+  "t": "top",
+  "l": "left",
+  "r": "right",
+);
+
+@each $key, $position in $positions {
+  .b-#{$key}-n {
+    border-#{$position}: none !important;
+  }
 }
 
-.b-l-n {
-  border-left: none !important;
+// border 1px
+@each $key, $position in $positions {
+  .b-#{$key}-1 {
+    border-#{$position}: 1px solid $ac-white-light;
+  }
 }
 
-.b-r-n {
-  border-right: none !important;
+// for ellipsis
+@for $i from 0 through 10 {
+  .is-ellipsis-#{$i} {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    line-clamp: #{$i};
+    -webkit-line-clamp: #{$i};
+    box-orient: vertical;
+    -webkit-box-orient: vertical;
+  }
 }
 
 .is-disabled {
@@ -280,28 +288,18 @@ input[type="color"]::-moz-color-swatch {
   }
 }
 
-// for ellipsis
-@for $i from 0 through 10 {
-  .is-ellipsis-#{$i} {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: -webkit-box;
-    line-clamp: #{$i};
-    -webkit-line-clamp: #{$i};
-    box-orient: vertical;
-    -webkit-box-orient: vertical;
-  }
-}
 // toast css third-party
 
 .toasted-container {
   .ac-toast-action.mr-10 {
     text-decoration: underline !important;
   }
+
   .has-report-issue {
     padding-right: 140px !important;
   }
 }
+
 .is-dark-theme {
   .toasted-container {
     i.fa {
@@ -492,9 +490,11 @@ input[type="color"]::-moz-color-swatch {
   color: $ac-red;
   text-align: left;
 }
+
 p.is-error {
   color: $ac-red;
 }
+
 code {
   color: $ac-color-heading;
 }
@@ -767,6 +767,7 @@ $border_color_4: transparent transparent #585d6e transparent;
     }
   }
 }
+
 // tooltip in vue-open-api
 .tooltip {
   display: block !important;

package/components/_ac-modal.scss

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

package/components/_buttons.scss

@@ -219,7 +219,7 @@
       font-size: 14px;
       font-weight: 500;
       background-color: transparent;
-      color: $ac-gray-lightest;
+      color: $ac-color-text;
 
       &.is-primary {
         background-color: transparent;

package/components/_navbar.scss

@@ -589,7 +589,8 @@
       color: $ac-black;
     }
     &.is-active {
-      background-color: $ac-white-light;
+      background-color: $ac-primary;
+      color: $ac-white;
     }
   }
 }

package/components/_preview-modal.scss

@@ -56,7 +56,9 @@
       width: calc(100% + 90px);
       height: 100%;
       background-color: $ac-white;
-      opacity: 0.8;
+
+      // remove opacity for fix cluster ui project 
+      // opacity: 0.8;
       z-index: -1;
     }
 

package/package.json

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

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

@@ -7,7 +7,7 @@
           v-if="isPreviewLoading || (!isPreviewLoading && previewYamls)"
           class="left-content"
         >
-          <div class="ac-files pt-0">
+          <div class="ac-files ac-hscrollbar pt-0">
             <ul v-if="!isPreviewLoading">
               <li
                 v-for="(previewYaml, idx) in filteredYamls"

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

@@ -15,7 +15,7 @@
             v-if="!isPreviewLoading && previewYamls"
             class="left-content"
           >
-            <div class="ac-files pt-0">
+            <div class="ac-files ac-hscrollbar pt-0">
               <ul v-if="!isPreviewLoading">
                 <li
                   v-for="(previewYaml, idx) in filteredYamls"

package/vue-components/v3/navbar/User.vue

@@ -109,7 +109,7 @@
             <a :href="`${serverDomain}/dashboard`"> Dashboard </a>
           </li>
           <li key="signout" @click="$emit('on-logout')">
-            <a :href="`${accountsDomain}/user/logout`"> Sign out </a>
+            <a data-testid="user-logout-link" :href="`${accountsDomain}/user/logout`"> Sign out </a>
           </li>
           <li key="theme" v-if="showThemeMode">
             <theme-mode @set:theme="setTheme" />