@appscode/design-system 1.0.43-alpha.162 → 1.0.43-alpha.165

package/components/_navbar.scss

@@ -576,7 +576,19 @@
     transition: width 0.9s ease-in-out;
   }
 }
-
+.theme-choicee {
+  border: 1px solid $ac-white-light;
+  li{
+    cursor: pointer;
+    transition: 0.3s ease-in-out;
+    &:hover {
+      color: $ac-black;
+    }
+    &.is-active {
+      background-color: $ac-white-light;
+    }
+  } 
+}
 // start dark theme
 .is-dark-theme {
   body {

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.162",
+  "version": "1.0.43-alpha.165",
   "description": "A design system for Appscode websites and dashboards made using Bulma",
   "main": "main.scss",
   "scripts": {

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

@@ -1,27 +1,31 @@
 <template>
-  <div>
-    <button
-      v-if="themeMode"
-      class="button ac-nav-button"
-      @click="toggleTheme"
-      :title="themeModes[themeMode].displayName"
-    >
-      <i :class="`fa ${themeModes[themeMode].iconClass} width-15`" />
-    </button>
-    <div class="ac-menu-content theme-choice">
-      <ul class="is-flex is-flex-direction-row is-justify-content-space-around">
-        <li
-          v-for="theme of Object.keys(themeModes)"
-          :title="themeModes[theme].displayName"
-          @click="themeMode = theme"
-          :class="{ 'is-active': themeMode === theme }"
-          :key="theme"
-        >
-          <i :class="['fa', themeModes[theme].iconClass]" />
-        </li>
-      </ul>
-    </div>
-  </div>
+  <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>
+        <div class="ac-menu-contentt theme-choicee">
+          <ul class="is-flex is-flex-direction-row  is-justify-content-space-between">
+            <li
+              v-for="theme of Object.keys(themeModes)"
+              :title="themeModes[theme].displayName"
+              @click="themeMode = theme"
+              class="p-10 pl-30 pr-30"
+              :class="{ 'is-active': themeMode === theme }"
+              :key="theme"
+            >
+              <i :class="['fa', themeModes[theme].iconClass]" />
+            </li>
+          </ul>
+        </div>
+      </li>
+   </ul>
+</li>
 </template>
 <script>
 import { defineComponent } from "vue";
@@ -29,6 +33,7 @@ import { defineComponent } from "vue";
 export default defineComponent({
   data() {
     return {
+      showTheme: false,
       themeMode: "",
       themeModes: {
         system: {

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

@@ -111,6 +111,9 @@
           <li key="signout">
             <a :href="`${accountsDomain}/user/logout`"> Sign out </a>
           </li>
+          <li key="theme" v-if="showThemeMode">
+            <theme-mode @set:theme="setTheme" />
+          </li>
         </transition-group>
       </div>
     </navbar-item-content>
@@ -144,7 +147,12 @@ export default defineComponent({
       type: Array,
       default: () => [],
     },
+    showThemeMode: {
+      type: Boolean,
+      default: false
+    }
   },
+  emits: ["set:theme"],
 
   components: {
     NavbarItem: defineAsyncComponent(() =>
@@ -153,6 +161,9 @@ export default defineComponent({
     NavbarItemContent: defineAsyncComponent(() =>
       import("../../v2/navbar/NavbarItemContent.vue").then((module) => module.default)
     ),
+    ThemeMode: defineAsyncComponent(() =>
+      import("../../v3/navbar/ThemeMode.vue").then((module) => module.default)
+    ),
   },
 
   computed: {
@@ -193,6 +204,9 @@ export default defineComponent({
     },
     onMouseLeave() {
       this.dropDownStatus = "close";
+    },
+    setTheme(val){
+      this.$emit("set:theme", val);
     }
   },