@appscode/design-system 1.1.0-beta.15 → 1.1.0-beta.18

package/components/_wizard.scss

@@ -121,7 +121,7 @@
   transition: 0.3s ease-in-out;
   position: relative;
   z-index: 1;
-  max-width: 250px;
+  width: 250px;
 
   &.is-active-require-field {
     &:after {

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

@@ -198,6 +198,7 @@
 }
 
 .is-collapsed {
+
   &.ac-nested-elements::before,
   &.ac-nested-elements::after {
     display: none;
@@ -206,9 +207,9 @@
 
 // details with checkradio
 .details-with-checkradio-wrapper {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
-  grid-gap: 15px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 15px;
 }
 
 // dark theme start
@@ -248,21 +249,16 @@
 Responsive Classes
 *****************************************/
 // Extra small devices (portrait phones, less than 576px)
-@media (max-width: 575.98px) {
-}
+@media (max-width: 575.98px) {}
 
 // Small devices (landscape phones, 576px and up)
-@media (min-width: 576px) and (max-width: 767.98px) {
-}
+@media (min-width: 576px) and (max-width: 767.98px) {}
 
 // Medium devices (tablets, 768px and up)
-@media (min-width: 768px) and (max-width: 991.98px) {
-}
+@media (min-width: 768px) and (max-width: 991.98px) {}
 
 // Large devices (desktops, 992px and up)
-@media (min-width: 992px) and (max-width: 1199.98px) {
-}
+@media (min-width: 992px) and (max-width: 1199.98px) {}
 
 // Extra large devices (large desktops, 1200px and up)
-@media (min-width: 1200px) {
-}
+@media (min-width: 1200px) {}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appscode/design-system",
-  "version": "1.1.0-beta.15",
+  "version": "1.1.0-beta.18",
   "description": "A design system for Appscode websites and dashboards made using Bulma",
   "main": "main.scss",
   "scripts": {

package/vue-components/v3/cards/Vendor.vue

@@ -34,7 +34,7 @@ withDefaults(defineProps<Props>(), {
   flex-direction: column;
   justify-content: space-between;
   background-color: $primary-97;
-  min-width: 220px;
+  min-width: 215px;
   padding: 30px 20px 20px;
   cursor: pointer;
 

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

@@ -288,6 +288,10 @@ watch(
 
         .ac-files {
           ul {
+            margin: 0;
+            padding: 0;
+            list-style: none;
+
             li {
               &.is-active {
                 a {

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

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { defineAsyncComponent, ref, watch, computed, nextTick } from "vue";
-import type { User, Organization } from "../../types/user";
+import type { User } from "../../types/user";
 
-interface FormatedOrgs extends Organization {
+interface FormatedOrgs extends User {
   isPersonalAccount?: boolean;
 }
 
@@ -93,13 +93,13 @@ watch(dropDownStatus, (n) => {
   <navbar-item :modifierClasses="'ac-profile-button'">
     <template #navbar-item>
       <div class="ac-user-profile mr-8">
-        <img :src="(user.avatar_url as string)" alt="User Photo" />
+        <img :src="user.avatar_url" alt="User Photo" />
       </div>
       {{ user.full_name || user.username }}
       <i class="fa fa-angle-down" aria-hidden="true"></i>
     </template>
     <!-- <button class="button ac-nav-button ac-profile-button">
-      
+
     </button> -->
 
     <template #navbar-content>

package/vue-components/v3/pagination/Pagination.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, watch } from "vue";
+import { computed, ref, watch } from "vue";
 
 interface Props {
   hideRowsPerPageSelection?: boolean;
@@ -224,6 +224,7 @@ watch(selectedItemCountPerPage, () => {
     &:active,
     &:focus-visible {
       border: 1px solid $primary;
+      outline: none;
     }
   }
 }

package/vue-components/v3/sidebar/ClusterSwitcher.vue

@@ -245,6 +245,9 @@ watch(
         &.multiselect__option--highlight {
           background-color: $white-100;
           color: $primary;
+          &:hover {
+            background-color: $primary-97;
+          }
 
           &:after {
             background-color: hsla(