@appscode/design-system 1.1.0-beta.16 → 1.1.0-beta.19

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 {
@@ -366,6 +366,7 @@
         width: 16px;
         height: 16px;
         top: 4px;
+        background: $primary;
       }
 
       &: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.16",
+  "version": "1.1.0-beta.19",
   "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/form/Form.vue

@@ -22,9 +22,6 @@ withDefaults(defineProps<Props>(), {
   <div class="form-wrapper">
     <div
       :class="{
-        'pt-20': !reducePaddingTop,
-        'pt-10': reducePaddingTop,
-        'pl-20': !isContainer,
         'form-content': !isContainer,
         container: isContainer,
       }"

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(

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

@@ -351,7 +351,7 @@ onUpdated(() => {
         color: $ac-black;
         transition: 0.3s ease-in-out;
         .tag {
-          background-color: $primary-90;
+          background-color: $primary-50;
         }
         &:hover {
           background-color: $primary-95 !important;