@appscode/design-system 1.0.43-alpha.163 → 1.0.43-alpha.166

package/components/_navbar.scss

@@ -578,16 +578,20 @@
 }
 .theme-choicee {
   border: 1px solid $ac-white-light;
-  li{
+  li {
+    border-right: 1px solid $ac-white-light;
     cursor: pointer;
     transition: 0.3s ease-in-out;
+    &:last-child {
+      border-right: none;
+    }
     &:hover {
       color: $ac-black;
     }
     &.is-active {
       background-color: $ac-white-light;
     }
-  } 
+  }
 }
 // start dark theme
 .is-dark-theme {

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

@@ -112,6 +112,12 @@
   }
 }
 
+.is-visibility-hidden {
+  visibility: hidden !important;
+  height: 0 !important;
+  opacity: 0 !important;
+}
+
 // nested elements end
 
 .table-wrapper {
@@ -179,6 +185,23 @@
     }
   }
 }
+
+//For resource input from
+.resource-input {
+  display: grid;
+  grid-template-columns: 60px 1fr 1fr;
+  grid-gap: 15px;
+  align-items: center;
+  margin-bottom: 15px;
+  .label-text {
+    font-weight: 300;
+  }
+  .ac-single-input {
+    margin: 0;
+  }
+}
+
+
 // dark theme end
 /****************************************
 Responsive Classes

package/package.json

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

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

@@ -1,21 +1,14 @@
 <template>
-  <li class="">
-   <a @click="showTheme = !showTheme" class="ac-dropdown-button is-fullwidth is-flex is-justify-content-space-between is-align-items-center">
-    <span>Theme Change</span>
-      <span>
-          <i v-if="showTheme" class="fa fa-angle-up"></i>
-          <i v-else class="fa fa-angle-down"></i>
-      </span>
-  </a>
-   <ul v-if="showTheme" class="ac-vscrollbar">
+  <li class="mt-10 b-t-1 pt-10">
+    <ul class="ac-vscrollbar">
       <li>
         <div class="ac-menu-contentt theme-choicee">
-          <ul class="is-flex is-flex-direction-row  is-justify-content-space-between">
+          <ul class="is-flex is-flex-direction-row is-justify-content-center">
             <li
               v-for="theme of Object.keys(themeModes)"
               :title="themeModes[theme].displayName"
               @click="themeMode = theme"
-              class="p-10 pl-30 pr-30"
+              class="p-10 pl-30 pr-30 is-flex-grow-1 has-text-centered"
               :class="{ 'is-active': themeMode === theme }"
               :key="theme"
             >
@@ -24,8 +17,8 @@
           </ul>
         </div>
       </li>
-   </ul>
-</li>
+    </ul>
+  </li>
 </template>
 <script>
 import { defineComponent } from "vue";
@@ -33,13 +26,8 @@ import { defineComponent } from "vue";
 export default defineComponent({
   data() {
     return {
-      showTheme: false,
       themeMode: "",
       themeModes: {
-        system: {
-          displayName: "System Theme",
-          iconClass: "fa-desktop",
-        },
         light: {
           displayName: "Light Theme",
           iconClass: "fa-sun-o",
@@ -48,6 +36,10 @@ export default defineComponent({
           displayName: "Dark Theme",
           iconClass: "fa-moon-o",
         },
+        system: {
+          displayName: "System Theme",
+          iconClass: "fa-desktop",
+        },
       },
     };
   },